هرچه CTA از نظر بصری جذاب تر باشد ، شانس نرخ تبدیل بیشتر خواهد بود. روش های زیادی برای طراحی CTA شما وجود دارد ، اما در این مقاله ، ما به شما نشان خواهیم داد که چگونه الگوهای ستون CTA عالی با تصاویر نیمه شفاف و همپوشانی ستون ایجاد کنید. می توانید تصاویر نیمه شفاف را در پوشه بارگیری در زیر پیدا کنید ، اما در صورت تمایل از تصاویر دیگر استفاده کنید. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید!
برویم.
پیش نمایش
قبل از اینکه به آموزش بپردازیم ، بیایید نگاهی سریع به نحوه نمایش آن در اندازه های مختلف صفحه بیندازیم.
بیایید شروع به بازیابی کنیم!
یک بخش جدید اضافه کنید
زمینه
با ایجاد یک صفحه جدید یا اضافه کردن یک بخش منظم جدید به یک صفحه موجود شروع کنید. سپس به قسمت تنظیمات رفته و یک پس زمینه گرادیان اضافه کنید.
- زمینه: شیب
- شیب رنگ گرادیان: #efefef خاکستری بسیار روشن
- رنگ پس زمینه دو: سفید #ffffff
- نوع شیب: شعاعی
- جهت شعاعی: مرکز
- موقعیت شروع: 52٪
- موقعیت نهایی: 50٪
فاصله
به برگه Design بروید و پرینت را در تنظیمات فاصله تنظیم کنید.
- بالشتک بالا و پایین
- دفتر: 0vw
- اثاثه یا لوازم داخلی در جوراب ساق بلند
- تبلت + تلفن: 70vw
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
اندازه
سپس عرض و حداکثر عرض خط را تنظیم کنید.
- عرض: 100٪
- حداکثر عرض 100٪
ماژول متنی را اضافه کنید
محتوای H2 و متنی را اضافه کنید
زمان اضافه کردن ماژول ها فرا رسیده است! ابتدا یک ماژول متنی اضافه کنید و مقداری را وارد کنید محتویات H2 و پاراگراف های انتخابی شما.
متن
به برگه طراحی بروید و متن را به صورت زیر سبک دهید:
- متن قلم: Sans را باز کنید
- ترتیب متن: مرکز
- رنگ متن: سبز #5bba1b
- اندازه متن:
- دفتر: 1.2vw
- قرص: 2.8vw
- تلفن: 3.6vw
- فاصله حروف الفبا: 0.2vw
- ارتفاع خط متن: 1.8em
عنوان متن 2
پس از یک ظاهر طراحی متن پاراگراف ، متن H2 را نیز سبک کنید.
- بخش: H2
- وزن قلم H2: Doppio One
- تراز متن H2: مرکز
- رنگ متن H2: #3d3d3d
- H2 اندازه متن:
- دفتر: 4.4vw
- قرص: 5.9vw
- تلفن: 6.9vw
فاصله
و کمی بالشتک را در قسمت بالا اضافه کنید.
- پوشش بالا: 212px
یک ماژول تقسیم اضافه کنید
دید
در زیر ماژول Text ، ماژول تقسیم را اضافه کرده و قابلیت مشاهده را روی "Yes" تنظیم کنید.
- دید: بله
خط
سپس رنگ جداکننده را تغییر دهید.
- رنگ خط: خاکستری تیره #545454
اندازه
حالا اندازه جداکننده را طوری تنظیم کنید که کوچکتر به نظر برسد.
- وزن جداکننده: 4px
- عرض: 9٪
- ترتیب ماژول: مرکز
فاصله
همچنین یک حاشیه منفی بالا اضافه کنید.
- حاشیه بالا:
- دفتر: -40px
- تبلت + تلفن: -15px
یک خط جدید اضافه کنید
ساختار ستون
با افزودن یک ردیف جدید با سه ستون با اندازه برابر ادامه دهید. این مبنای طراحی ستون CTA خواهد بود.
زمینه
قبل از اضافه کردن ماژول ها ، یک شیب را به پس زمینه پارامترهای خط اضافه کنید.
- زمینه: شیب
- شیب رنگ پس زمینه 1: #ffffff سفید
- رنگ پس زمینه شیب دو: شفاف
- نوع شیب: شعاعی
- مرکز فرمان شعاعی
- موقعیت شروع: 42٪
- موقعیت نهایی: 50٪
اندازه
حالا اندازه خط را تنظیم کنید.
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
سپس به تنظیمات فاصله بروید و مقادیر padding سفارشی را اضافه کنید.
- اثاثه یا لوازم داخلی بالایی: 22vw
- بالشتک پایین: 10vw
- بالشتک چپ و راست: 10vw
تنظیمات ستون 1
زمینه
با باز کردن ستون 1 و اضافه کردن یک پس زمینه شیب ادامه دهید.
- زمینه: شیب
- رنگ پس زمینه شیب: آبی #2a4eed
- رنگ پس زمینه گرادیان دو: آبی روشن #91f5f7
- نوع شیب: خطی
- جهت گرادیان: 38deg
- موقعیت شروع: 23٪
مرز
سپس گوشه های گرد ستون ها را در تنظیمات حاشیه تعریف کنید.
- گوشه های گرد: 2vw در همه گوشه ها
جعبه سایه
یک سایه جعبه ظریف نیز اضافه کنید.
- Box Shadow: گزینه دوم
- سایه جعبه موقعیت افقی: 6px
- مربع سایه عمودی موقعیت: -10px
- Box Shadow Blur Force: 50px
سرریزهای
اطمینان حاصل کنید که سرریزهای ستون نیز قابل مشاهده است.
- سرریز افقی و عمودی: قابل مشاهده است
تنظیمات ستون 2
زمینه
به ستون دوم بروید و پس زمینه شیب زیر را اضافه کنید:
- زمینه: شیب
- رنگ شیب پس زمینه یک: #1ba038
- شیب پس زمینه دو رنگ: #c6f727
- نوع شیب: خطی
- جهت گرادیان: 38deg
- موقعیت شروع: 23٪
مرز
همچنین شعاع مرزی را به ستون اضافه کنید.
- گوشه های گرد: 2vw در چهار گوشه
جعبه سایه
با سایه جعبه ظریف.
- Box Shadow: گزینه دوم
- سایه جعبه موقعیت افقی: 6px
- مربع سایه عمودی موقعیت: -10px
- Box Shadow Blur Force: 50px
تبدیل کننده
این ستون کمی بالاتر از بقیه است. برای ایجاد این اثر ، ما می خواهیم تنظیمات تبدیل تبدیل را برای ستون 2 تنظیم کنیم.
- ترانسفورماتور ترجمه:
- دفتر: -8vw ، محور y
- تبلت + تلفن: 30vw ، محور Y
سرریزهای
همچنین سرریزهای این ستون را قابل مشاهده کنید.
- سرریزهای افقی و عمودی: قابل مشاهده است
تنظیمات ستون 3
زمینه
بیایید به آخرین و آخرین ستون برویم! یک پس زمینه شیب اضافه کنید.
- زمینه: شیب
- رنگ پس زمینه شیب یک: #f0562c
- شیب پس زمینه دو رنگ: #f1a526
- نوع شیب: خطی
- جهت گرادیان: 38deg
- موقعیت شروع: 23٪
مرز
به زبانه Design بروید و به هر گوشه شعاع حاشیه اضافه کنید.
- گوشه های گرد: 2vw در همه گوشه ها.
جعبه سایه
سایه جعبه را هم اضافه کنید.
- Box Shadow: گزینه دوم
- سایه جعبه موقعیت افقی: 6px
- مربع سایه عمودی موقعیت: -10px
- Box Shadow Blur Force: 50px
تبدیل کننده
در اندازه های کوچکتر صفحه ، باید ستون را با استفاده از مقادیر تبدیل تبدیل سفارشی تغییر مکان دهیم.
- ترانسفورماتور ترجمه:
- تبلت + تلفن: 60vw
سرریزهای
در آخر ، تنظیمات سرریز را تنظیم کنید.
- سرریزهای افقی و عمودی: قابل مشاهده است
ماژول های تصویر اضافه کنید
یک تصویر نیمه شفاف قطع را وارد کنید
هنگامی که تمام پارامترهای ستون را ایجاد کردید ، وقت آن است که ماژول ها را اضافه کنید. یک ماژول تصویر به ستون 1 اضافه کنید و یک تصویر نیمه شفاف به انتخاب خود بارگذاری کنید. می توانید در ابتدای این مقاله تصاویری را که از آنها استفاده کرده اید در پوشه زیپ شده پیدا کنید.
اندازه
ماژول را با عرض کامل درست کنید.
- تغییر به حالت تمام عرض: بله
فاصله
سپس حاشیه دلخواه را اضافه کرده و مقادیر را پر کنید.
- حاشیه بالا:
- دفتر: -11vw
- تبلت + تلفن: -24vw
- بالشتک چپ و راست:
- دفتر: 5vw
- تبلت + تلفن: 20vw
نردبان را به حالت شناور تبدیل کنید
ما با استفاده از گزینه تبدیل مقیاس در تنظیمات تبدیل ، یک اثر شناور ظریف به تصویر اضافه می کنیم.
- مقیاس تبدیل در Hover: 120٪ در هر دو محور.
فهرست الفبایی
برای اطمینان از اینکه تصویر در بالای ستون ظاهر می شود ، مقدار z index را در برگه Advanced افزایش دهید.
- Z-Index: 1
ماژول های تصویر را کپی کرده و بکشید
حالا ماژول تصویر را دو بار شبیه سازی کنید و کپی ها را در دو ستون باقی مانده قرار دهید. این فرایند در حالت سیمی راحت تر است.
- دوبار ماژول تصویر را کپی کنید
- سپس ماژول های تصویر جدید را به ستون های 2 و 3 بکشید.
- تصاویر مختلف را بارگیری کنید
ماژول های متن را اضافه کنید
محتوای H3 را اضافه کنید
در زیر تصویر در ستون 1، یک ماژول متن اضافه کنید و مقداری را وارد کنید محتویات H3 به انتخاب شما
عنوان متن 3
به برگه طراحی بروید و یک سبک برای تنظیمات متن H3 اعمال کنید.
- عنوان متن: H3
- قلم H3: Doppio One
- وزن قلم H3: جسورانه
- تراز H3: مرکز
- رنگ متن H3: #ffffff سفید
- H3 اندازه متن:
- دفتر: 1.8vw
- قرص: 5vw
- تلفن: 6vw
ماژول های متن را کپی کرده و بکشید
دوبار ماژول متن را کلون کنید و تکراری ها را در دو ستون باقی مانده قرار دهید.
- با کپی کردن ماژول های متن دو بار شروع کنید.
- سپس آنها را به زیر ماژول های تصویر در ستون های 2 و 3 بکشید.
- تغییر دادن محتویات در هر ماژول متن جدید
ماژول های متن را اضافه کنید
اضافه کردن محتوا
در زیر ماژول عنوان ، یک ماژول متن جدید اضافه کنید. محتوای پاراگراف را در قسمت محتوا اضافه کنید.
متن
حال متن را به شرح زیر بکشید.
- متن قلم: Sans را باز کنید
- رنگ متن: سفید #ffffff
- اندازه متن:
- دفتر: 0.6vw
- قرص: 2vw
- تلفن: 2.8vw
- ارتفاع خط متن: 2.2em
فاصله
برای متمرکز کردن متن ، فاصله ماژول را به شرح زیر تنظیم کنید.
- حاشیه پایین:
- دفتر: 5vw
- تبلت + تلفن: 10vw
- بالشتک چپ و راست
- دفتر: 5vw
- تبلت + تلفن: 14vw
ماژول های متن را کپی کرده و بکشید
دو بار ماژول متن را کلون کنید و تکراری ها را به دو ستون باقی بکشید.
- با کپی کردن ماژول های متن دو بار شروع کنید
- سپس نسخه های تکراری را در ستون های 2 و 3 قرار دهید
- محتوای هر نسخه را تغییر دهید
ماژول های دکمه را اضافه کنید
اضافه کردن محتوا
بیایید به آخرین ماژول برویم! ماژول دکمه را با یک کپی از انتخاب خود به ستون 1 اضافه کنید.
اضافه کردن یک لینک
پیوند را در گزینه های لینک ماژول قرار دهید.
هم ترازی
اکنون ماژول دکمه را تراز کنید.
- تراز: مرکز
سبک دکمه
سپس دکمه را به صورت زیر تماس بگیرید.
- اندازه متن دکمه:
- دفتر: 1vw
- قرص: 2vw
- تلفن: 3vw
- رنگ متن دکمه: آبی روشن #2a4eed
- دکمه رنگ پس زمینه: سفید #ffffff
- شعاع حاشیه دکمه: 50vw
- قلم دکمه: Double One
- وزن قلم: پررنگ
- رنگ دکمه ها: Bright Blue #2a4eed
فاصله
دکمه را شکل دهید و با اضافه کردن مقادیر حاشیه و padding سفارشی در تنظیمات فاصله ، در پایین همپوشانی ایجاد کنید.
- حاشیه پایین:
- دفتر: -1.7vw
- قرص: -4vw
- تلفن: -6vw
- بالا و پایین اثاثه یا لوازم داخلی:
- دفتر: 1vw
- تبلت + تلفن: 3vw
- بالشتک چپ و راست
- دفتر: 4vw
- تبلت + تلفن: 10vw
جعبه سایه
نکته آخر ، سایه جعبه ظریف را به دکمه اضافه کنید.
- سایه جعبه: گزینه اول
- سایه موقعیت کادر افقی: 0px
- سایه موقعیت عمودی کادر: 2px
- Box Shadow Blur Force: 50px
ماژول های دکمه را کپی و بکشید
مانند ماژول های قبلی ، دوبار دکمه را کلون کنید و تکراری ها را در دو ستون باقی مانده از خط قرار دهید.
- دوبار ماژول دکمه را کلون کنید
- نسخه های تکراری را در ستون های 2 و 3 قرار دهید
دکمه 2 متن و رنگ نماد
رنگ نماد دکمه و ماژول دکمه را در ستون 2 تغییر دهید.
- رنگ متن دکمه: سبز # 1ba038
- رنگ نماد: # 1ba038
دکمه 3 متن و رنگ نماد
همین کار را با دکمه در ستون آخر انجام دهید و تمام شد!
- رنگ متن دکمه ها: نارنجی #f0562c
- رنگ نماد: # f0562c
برای پایان دادن به
در این مقاله، نحوه استفاده از تصاویر نیمه شفاف برای ایجاد یک طراحی ستون CTA خیره کننده را به شما نشان دادیم. ما از تنظیمات سرریز ستون استفاده کردیم DIVI به طوری که تصاویر و دکمه ها به طور یکپارچه با هم همپوشانی دارند. سعی کنید از این طرح در پروژه بعدی خود استفاده کنید DIVI و در بخش نظرات به ما اطلاع دهید که چگونه پیش می رود!
