داشتن یک فراخوان برای اقدام در سایت شما یکی از کم مزاحمت ترین راه ها برای جلب توجه شماست آخرین بازدید. بیشتر اوقات آنها فقط CTA را نادیده می گیرند یا آن را می بندند تا به مرور صفحه ادامه دهند، اما گاهی اوقات شما آنها را جلب می کنید. یک فراخوان برای اقدام در قالب اسلاید برای شما عالی خواهد بود ترویج تقریباً هر چیزی در صفحه فرود.

در این آموزش، ما یک فراخوان بسته شدنی طراحی می کنیم که می تواند با استفاده از Divi Theme Builder به هر گوشه ای از صفحه اضافه شود. پس از انجام این کار، شما این گزینه را خواهید داشت ترویج محصولات و پیشنهادات ویژه شما در هر نقطه از صفحه بدون نیاز به استفاده از افزونه.

بیایید شروع کنیم!

بررسی

در اینجا یک نگاه سریع به چهار CTA درج شده است که ما به چهار گوشه الگوی صفحه اضافه خواهیم کرد. مطمئناً نیازی به اعزام همزمان هر چهار نفر نخواهید داشت. توجه کنید که چگونه می توان با کلیک بر روی نماد "x" هر کدام را بست ، سپس می توانید با کلیک روی نماد "به علاوه" CTA را دوباره فعال کنید.

آنچه شما باید برای شروع کار

برای شروع ، شما نیاز دارید برای نصب و فعال کردن موضوع Divi . مطمئن شوید که آخرین نسخه Divi را دارید.

همچنین برای اختصاص دادن الگوی جدید به این صفحه برای نمایش نتیجه ، حداقل به یک صفحه ایجاد شده توسط Divi Builder نیاز دارید.

ایجاد یک دعوت به عمل کشویی ، با یک الگوی صفحه در Divi

ایجاد یک مدل جدید

از داشبورد وردپرس ، به Divi> Theme generator بروید. سپس روی جعبه "افزودن الگوی جدید" کلیک کنید تا الگوی جدیدی ایجاد شود.

قالب را به صفحه یا صفحاتی که می خواهید نوار تبلیغاتی را نشان دهید اختصاص دهید.

در مدل جدید ، روی قسمت "Add a custom body" کلیک کنید و سپس "Create a custom body" را انتخاب کنید.

سپس گزینه "Build From Scratch" را انتخاب کنید.

ایجاد بخش محتوای انتشار

بخش از محتویات پست بخشی ضروری از هر قالب صفحه برای نمایش آن است محتویات صفحه واقعی یا پست تعبیه شده در Divi یا WordPress. این را قبل از ایجاد اولین فراخوان برای درج به الگوی خود اضافه می کنیم.

یک ردیف را به یک ستون اضافه کنید

برای شروع ، یک ردیف یک ستون را به بخش معمولی اضافه کنید.

ماژول محتوای انتشار را اضافه کنید

سپس یک ماژول از محتویات انتشار به خط

تنظیمات خط

پس از آن پارامترهای خط را به شرح زیر به روز کنید:

• عرض: 100٪
• حداکثر عرض: 100٪
• بالشتک: 0px زیاد ، 0px کم

ایجاد تماس برای اقدام در بالا سمت چپ

اکنون که ماژول محتوای پست خود را در محل قرار داده ایم ، آماده هستیم که اولین فراخوان خود را جهت درج در گوشه بالا سمت چپ الگوی صفحه اضافه کنیم.

اضافه کردن یک بخش

هر فراخوان جدید با یک بخش کاملاً جدید ایجاد می شود. با این کار می توانید هر طرح یا ماژول مورد نیاز برای طراحی فراخوان را اضافه کنید.

یک بخش منظم جدید به طرح قالب اضافه کنید.

یک ردیف را به یک ستون اضافه کنید

سپس به بخش یک ردیف ستون بدهید.

تنظیمات بخش

بخش بالای بخش محتوای ارسال را بکشید (یا جابجا کنید) و تنظیمات بخش را به شرح زیر به روز کنید:

• شیب زمینه رنگ چپ:
• شیب زمینه درست:
• شیب بالای تصویر را نمایش دهید: بله
• تصویر پس زمینه: [درج تصویر]
• عرض: 320px
• حاشیه: 320 پیکسل سمت چپ
• بالشتک: 0px زیاد ، 0px کم
• سبک انیمیشن: اسلاید
• جهت انیمیشن: درست است
• تأخیر انیمیشن: 2000 میلی ثانیه

سپس به تب Advanced بروید و کلاس CSS و شاخص زیر را اضافه کنید:

• کلاس CSS: اسلایدها در cta
• فهرست Z: 999

و قطعه CSS سفارشی را به دنبال عنصر اصلی اضافه کنید:

position: fixed;top: 80px;left: -320px;

کلاس CSS مورد نیاز است تا بعداً بتوانیم بخش را با کد هدف قرار دهیم. CSS سفارشی قسمت بالا سمت چپ الگوی صفحه را در یک موقعیت ثابت (یا چسبنده) قرار می دهد. موقعیت "سمت چپ: -320 پیکسل" باید کل بخش (که 320 پیکسل عرض دارد) را به خارج از پنجره مرورگر منتقل کند (بنابراین از نظر ما خارج است). اما ما حاشیه سمت چپ 320 پیکسل را داریم تا دوباره به صفحه نمایش بازگردیم. دلیل اینکه به این روش ساخته شده این است که وقتی روی نماد "x" کلیک می کنید می توانیم مقدار حاشیه را روشن یا خاموش کنیم. این باعث می شود CTA به داخل و خارج از دید شما بلغزد.

تنظیمات خط

اکنون پارامترهای خط را به شرح زیر به روز کنید:

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض روده: 1
• عرض: 100٪
• بالشتک: 0px زیاد ، 0px کم

ماژول تماس برای اقدام را اضافه کنید

در داخل ردیف ، ماژول Call to Action را اضافه کنید.

تنظیمات تماس برای اقدام

سپس تنظیمات تماس برای اقدام را به روز کنید.

محتویات

• عنوان: [متن مورد نظر خود را وارد کنید]
• دکمه: [متن مورد نظر خود را وارد کنید]
• بدن: [متن مورد نظر خود را وارد کنید]
• URL پیوند دکمه: [URL واقعی وارد کنید یا #]

سپس رنگ پس زمینه پیش فرض را بردارید تا پس زمینه بخشی را که قبلاً اضافه کردیم ، نشان دهد.

پارامترهای طراحی (متن ، دکمه و پر)

در تب Design ، موارد زیر را به روز کنید:

• فونت عنوان: لاتو
• عنوان وزن قلم: سنگین
• ارتفاع خط عنوان: 1,3 em
• پلیس بدن: لاتو
• وزن قلم بدنه: جسورانه
• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• اندازه متن دکمه: 15px
• عرض مرز دکمه: 0px
• فاصله نامه دکمه: 1px
• فونت دکمه: Lato
• وزن قلم دکمه: سنگین
• سبک قلم دکمه: TT
• دکمه بالایی: 12 پیکسل در بالا ، 12 پیکسل در پایین ، 32 پیکسل در سمت چپ ، 32 پیکسل در سمت راست
• padding: 40 پیکسل در بالا ، 40 پیکسل در پایین ، 40 پیکسل در سمت چپ ، 40 پیکسل در سمت راست

با ماژول Blurb یک نماد باز و بسته را اضافه کنید

پس از انجام تماس برای اقدام ، باید دکمه آیکون مورد استفاده را برای باز و بسته کردن کشویی برای اقدام ایجاد کنیم. برای ایجاد این ، ماژول blurb را در زیر ماژول فراخوان به عمل اضافه کنید.

تنظیمات متن ارائه

پارامترهای طراحی زیر را به روز کنید.

محتویات

• عنوان پیش فرض و متن را حذف کنید
• از نماد استفاده کنید: بله
• نماد: بیشتر (تصویر را ببینید)

تصور

• رنگ نماد: # 000000
• از اندازه قلم نماد استفاده کنید: بله
• اندازه قلم نماد: 40 پیکسل
• عرض: 40px
• ارتفاع: 40px
• گوشه های گرد: 50٪
• چرخش محور Z را تغییر دهید: 135 درجه

تنظیمات پیشرفته

در زیر زبانه پیشرفته ، کلاس CSS زیر را اضافه کنید:

• کلاس CSS: slide-in_target

سپس این CSS سفارشی را به عنصر اصلی اضافه کنید.

position: absolute;bottom: 0px;right: -40px;

CSS سفارشی زیر را به تصویر Blurb اضافه کنید.

margin-bottom: 0px;

نتیجه

در اینجا نتیجه تا کنون وجود دارد.

بخاطر داشته باشید که وقتی روی نماد "x" کلیک می کنید ، برای افزودن قابلیت بستن و باز کردن ، هنوز باید چند کد اضافه کنیم. ما پس از ایجاد فراخوان برای اقدام در هر چهار گوشه مدل ، کد را اضافه خواهیم کرد.

ایجاد تماس برای اقدام در بالا سمت راست

با ایجاد اولین فراخوان برای اقدام ، می توانیم با تکثیر بخش ایجاد شده قبلی ، روند ایجاد بقیه CTA ها را تسریع کنیم. در مرحله بعدی ، ما می خواهیم یک فراخوان اسلاید برای گوشه بالا سمت راست ایجاد کنیم.

بخش کپی

حالت نمایش wireframe را پیاده کنید ، سپس بخش CTA را در بالا سمت چپ کپی کنید.

تنظیمات بخش را به روز کنید

سپس پارامترهای بخش جدید را به شرح زیر به روز کنید:

• حاشیه: 320px درست است
• جهت انیمیشن: چپ

سپس CSS سفارشی را در عنصر اصلی با جایگزینی "سمت چپ" با "راست" به روز کنید. در اینجا متن کامل است:

position: fixed;top: 80px;right: -320px;

پارامترهای ماژول Blurb را به روز کنید

سپس ، تنظیمات ماژول Blurb را باز کرده و قطعه CSS سفارشی را در عنصر اصلی با جایگزینی "راست" با "چپ" به روز کنید. در اینجا متن کامل است:

position: absolute;bottom: 0px;left: -40px;

نتیجه

اکنون فراخوان اقدام را به صورت اسلایدی در بالا سمت راست الگوی صفحه مشاهده خواهید کرد.

برای بقیه بخشهای "پایین راست" ، "پایین چپ" همان کارها را انجام دهید. همچنین باید کد CSS را برای هر یک از ماژول ها تنظیم کنید تا نتیجه ای شبیه به موارد زیر داشته باشد.

افزودن قطعه های سفارشی jQuery و CSS با استفاده از ماژول کد

برای آخرین مرحله باید jQuery و CSS سفارشی اضافه کنیم تا بتوانیم عملکرد باز و بسته شدن هر یک از CTA های اسلاید را بدست آوریم.

ماژول کد را اضافه کنید

به یکی از بخشهای ارائه ، یک ماژول کد اضافه کنید.

کد را جایگذاری کنید

سپس تنظیمات کد را باز کرده و کد زیر را در قسمت کد قرار دهید.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

آخرین افکار

با Divi ، ایجاد دعوت به عمل اصلاً دشوار نیست. و از آنجا که می توانید از سازنده قالب برای افزودن فراخوان برای اقدام به الگوی صفحه استفاده کنید ، کنترل بیشتری بر روی این که صفحات آن CTA را نمایش می دهند خواهید داشت.