نوارهای کناری چسبنده در جلب توجه بسیار موثر هستند آخرین بازدید بدون اینکه مزاحم یا حواس پرتی باشد. ترفند این است که یک یا دو عنصر را در نوار کناری قرار دهید که «مشاهده می‌مانند» یا در کنار آن ثابت می‌شوند. محتویات از پست زمانی که کاربر صفحه را اسکرول می کند. این یک جایگزین تازه‌سازی برای طرح‌بندی نوار کناری سنتی است، زیرا تصور یک طرح‌بندی مدرن با عرض کامل (بدون نوار کناری) را به همراه می‌آورد، با مزیت ارائه فراخوان‌ها برای اقدام مهم در کنار صفحه در صورت لزوم.
در این آموزش ، ما به شما نشان خواهیم داد که چگونه با استفاده از Divi Theme Builder ، تماس های چسبنده را برای اقدام به الگوی ارسال وبلاگ اضافه کنید. کاربرد این طرح قابل توجه است. تقریباً برای هر صفحه یا هر الگوی پستی کار خواهد کرد. بعلاوه ، لازم نیست خودتان را به CTA محدود کنید. می توانید ماژول (های) Divi (انتخاب) خود را به دلخواه اضافه کنید.
آنچه شما باید برای شروع کار
برای شروع ، شما باید برای نصب و فعال کردن موضوع Divi . مطمئن شوید که آخرین نسخه Divi را دارید.
همچنین برای نمایش نتیجه مطلوب شما حداقل به یک پیام ایجاد شده با Divi Builder نیز نیاز دارید.
پس از آن ، شما آماده ترک هستید.
بررسی
در اینجا یک مرور اجمالی از ACT های چسبنده است که به الگوی ارسال بلاگ در دیوی اضافه شده اند.
چگونه می توان تماس های ثابت را برای اقدام در الگوی ارسال وبلاگ خود در Divi اضافه کرد
قالب قالب ساز اضافه می شود
اولین قدم این است که الگوی از پیش تعریف شده خود را در سایت خود وارد کنید. ما قصد داریم از الگوی انتشار شماره 1 Divi Theme Builder Pack استفاده کنیم.
برای شروع، به Divi > Generator بروید تم. روی نماد قابل حمل در سمت راست بالای صفحه کلیک کنید. در حالت قابل حمل، تب import را انتخاب کنید و فایل divi-theme-builder-pack-1-post-template.json را از پوشه انتخاب کنید. اگر در حال حاضر قالب هایی در سایت خود نصب کرده اید، مطمئن شوید که تیک گزینه هایی را که ممکن است الگوهای فعلی شما را بازنویسی کنند، بردارید. سپس روی دکمه import کلیک کنید.
الگوی ارسال وبلاگ را بسازید
پس از وارد شدن الگو ، ما آماده هستیم تا CTA های جدید خود را به نوار کناری که به طرح می چسبد اضافه کنیم. برای انجام این کار ، روی نماد ویرایش برای قسمت بدن سفارشی کلیک کنید.
برای نگه داشتن CTA های نوار کناری ، طرح نوار کناری دوتایی اضافه شده است
در ویرایشگر طرح‌بندی مدل، ردیف حاوی ماژول Publish را پیدا کنید. محتویات و طرح ستون را با ساختار ستونی یک پنجم در سه پنجم در یک پنجم (1/5 3/5 1/5) جایگزین کنید. این به ما امکان می دهد ستون را در مرکز قرار دهیم محتویات از پست در حالی که دو بخش در دو طرف برای CTA های چسبنده ما ارائه می دهد.
پس از تغییر ساختار ستون ، ماژول انتشار محتوا را به ستون مرکز بکشید.
پارامترهای خط را به روز کنید
تنظیمات خط را باز کنید و گزینه های طراحی زیر را به روز کنید:
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض روده: 2
- عرض: 100٪ (دسک تاپ) ، 90٪ (رایانه لوحی)
- حداکثر عرض: 1500px
این به ما اتاق مورد نیاز برای پیکربندی نوار کناری مضاعف ما می دهد.
تنظیمات ستون 1 را به روز کنید
سپس تنظیمات ستون 1 را باز کنید و به این ستون یک کلاس CSS سفارشی بدهید:
- کلاس CSS: sticky-cta
افزودن نوار کناری CTA به ستون سمت چپ
ما اکنون برای اولین فراخوان آماده هستیم. تماس را به ستون سمت چپ به ماژول اقدام اضافه کنید.
نوار کناری CTA را سبک کنید
تنظیمات را به شرح زیر به روز کنید:
محتویات
- دکمه: «اینجا را کلیک کنید»
- متن: «محتوای شما به اینجا می رسد. این متن را به صورت آنلاین یا در تنظیمات محتوای ماژول ویرایش یا حذف کنید. "
- نشانی اینترنتی لینک دکمه: #
طراحی متن بدن
- قلم بدنه: مونتسرات
- وزن قلم: نیمه پررنگ
- متن بدن: تراز صحیح
- رنگ بدن متن: # 444444
- اندازه متن بدن: 22px (دسک تاپ) ، 18px (رایانه لوحی)
- ارتفاع بدن: 1.3em
دکمه
- اندازه متن دکمه: 14px
- رنگ متن دکمه: #ffffff
- رنگ پس زمینه دکمه: # 6148df
- عرض حاشیه دکمه: 0px
- شعاع دکمه: 80px
- وزن قلم: پررنگ
- سبک قلم دکمه: TT
- قرار دادن دکمه ها: 12px در بالا ، 12px در پایین ، 22px در سمت چپ ، 22px در سمت راست
عرض ، تراز ، بالشتک و مهارها
- عرض: 100٪
- حداکثر عرض: 320px
- تراز ماژول: درست است
- بالشتک: 10px در سمت چپ ، 10px در سمت راست
- عرض مرز بالا: 10px
- رنگ مرز بالا: #eeeeee
- عرض مرز پایین: 10px
- رنگ حاشیه پایین: #eeeeee
نوار کناری CTA را به ستون سمت راست اضافه کنید
برای ایجاد CTA برای ستون سمت راست ، ستونی را که ما ایجاد کردیم کپی کرده و در ستون سمت راست منتقل کنید. سپس تنظیمات نسخه تکراری را به صورت زیر به روز کنید:
- تراز کردن متن متن: سمت چپ
- ترازبندی ماژول: سمت چپ
تنظیمات ستون 3 را به روز کنید
برای این CTA در ستون دست راست ، یک حاشیه بالایی به ستون اضافه می کنیم تا موقعیت شروع نوار کناری CTA را در یک نقطه پایین صفحه ایجاد کنیم.
با باز کردن پارامترهای ستون 3 شروع کنید و همان کلاس CSS را که به ستون 1 اضافه کردیم اضافه کنید:
- کلاس CSS: sticky-cta
سپس CSS سفارشی زیر را به عنصر اصلی اضافه کنید:
دفتر
margin-top: 50%
قرص
margin-top: 0%
این یک نقطه شروع متفاوت برای CTA چسبنده در ستون سمت راست است که 50٪ عرض ردیف است. در صورت نیاز برای پست وبلاگ خود ، این مقدار را تنظیم کنید.
CSS سفارشی را به قالب با ماژول کد اضافه کنید
برای اینکه موقعیت "چسبنده" خود را برای CTA های نوار کناری خود بدست آوریم ، باید CSS سفارشی اضافه کنیم. برای انجام این کار ، یک ماژول کد جدید در زیر ماژول انتشار محتوا (یا هرجای صفحه) ایجاد کنید.
سپس CSS زیر را در کادر کد قرار دهید:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
بالاترین میزان جبران در این کد محاسبه ای است که هنگام پیمایش ، CTA را به صورت عمودی در صفحه قرار می دهد. 50vh نصف ارتفاع پنجره مرورگر و 130px نصف ارتفاع CTA است. اگر CTA شما بالاتر یا پایین باشد ، باید 130 پیکسل را به سمت بالا یا پایین تنظیم کنید.
تنظیمات را ذخیره کنید
پس از اتمام کار ، طرح الگو را ذخیره کنید.
و سپس تنظیمات سازنده تم را ذخیره کنید
نتیجه نهایی
برای مشاهده نتیجه نهایی ، با استفاده از این الگو از یک مقاله وبلاگ بازدید کنید.
و این چقدر CTA های چسبناک روی پیمایش می مانند. می توانید ببینید که برای محتوای طولانی تر چگونه بهترین عملکرد را دارد.
آخرین افکار
این فراخوان های جانبی چسبنده جایگزینی تازه برای نوار کناری سنتی هستند. آنها برای طراحی مینیمالیستی به خوبی کار می کنند زیرا کمتر مداخله گر هستند و باعث نمی شوند که پست به هم ریخته شود. علاوه بر این، می‌توانید CTA را در پایین صفحه قرار دهید تا به تدریج ظاهر شود و به اسکرول بچسبد و برای مردم بیشتر قابل مشاهده باشد. آخرین بازدید. و فراموش نکنید. می توانید CTA را با هر ماژول Divi یا ترکیبی از ماژول ها جایگزین کنید تا تقریباً هر چیزی را که می خواهید ایجاد کنید. شما همچنین می توانید انتخاب کنید که فقط یک CTA در یک طرف باقی بماند. به نظر می رسد که کاربردهای زیادی دارد.
