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

همچنین به شما نشان خواهیم داد که چگونه نوار تبلیغ را ثابت کنید (یا چسبنده).

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

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

همچنین برای اهداف آزمایش حداقل به یک صفحه ایجاد شده با Divi Builder نیاز خواهید داشت که تحت تأثیر الگوی نوار تبلیغاتی قرار خواهد گرفت.

یک نوار تبلیغاتی متحرک در بالای الگوی صفحه ایجاد کنید

یک الگوی جدید ایجاد کنید

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

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

در الگوی جدید ، روی کادر "افزودن بدنه سفارشی" کلیک کرده و "Build Custom Body" را انتخاب کنید.

توجه: ما نوار تبلیغات را به قسمت بدنه مدل (نه هدر) اضافه می کنیم تا بتواند با هدر پیش فرض Divi و همچنین همه هدرها کار کند سفارشی که بعداً می توانید اضافه کنید.

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

اضافه کردن نوار تبلیغ به مدل

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

با افزودن یک ردیف از یک ستون به قسمت عادی شروع کنید.

تنظیمات خط

قبل از اضافه کردن ماژول ، پارامترهای Row را به شرح زیر به روز کنید:

• شیب پس زمینه سمت چپ: # 4a42ec
• شیب پس زمینه سمت راست: # 521d91
• جهت گرادیان: 90deg
• از عرض ناودان سفارشی استفاده کنید: بله
• عرض روده: 1
• عرض: 100٪
• حداکثر عرض: 100٪
• اثاثه یا لوازم داخلی: 0px در بالا ، 0px در پایین

این از رنگ پس زمینه و عرض نوار تبلیغاتی که ایجاد می کنیم پشتیبانی می کند.

پارامترهای ستون

قبل از خروج از تنظیمات ردیف ، برای باز کردن تنظیمات ستون کلیک کنید. سپس CSS سفارشی زیر را به عنصر ستون اصلی اضافه کنید:

display: flex;align-items: center;justify-content: center;

این CSS از ویژگی flex برای تراز کردن استفاده می کند محتویات (یا ماژول ها) در ستون به صورت افقی (کنار هم) روی هم چیده شوند. همچنین ماژول های ستون را به صورت عمودی و افقی متمرکز می کند. دلیل اینکه ما این کار را به این صورت انجام می‌دهیم، اجتناب از استفاده از ساختارهای ردیف ستونی متعدد است که در موبایل روی هم قرار می‌گیرند. با این پیکربندی، محتویات در تمام عرض های مرورگر به صورت افقی تراز باقی می ماند.

اکنون آماده اضافه کردن هستیم محتویات به نوار تبلیغاتی

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

برای محتوای این مثال تبلیغاتی ، ماژول ارائه را با یک آیکون کوچک و یک بلاگ متنی با یک دکمه در سمت راست (دقیقاً مانند نوار تبلیغ در Elegantthemes.com) درج خواهیم کرد.

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

برای محتوای متن ارائه ، اطلاعات زیر را وارد کنید:

• عنوان: [متن تبلیغ را وارد کنید]
• از نماد استفاده کنید: بله
• نماد: نماد هدیه (تصویر را ببینید)

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

• رنگ نماد: # ff4a9e
• تصویر / مکان نمادها: سمت چپ
• از اندازه قلم نماد استفاده کنید: بله
• اندازه قلم آیکون: 16px
• اندازه عنوان متن: 16px (دسک تاپ) ، 14px (تلفن)
• خط عنوان Hewight: 1.3em
• حداکثر عرض: 230px (فقط تلفن)
• لنت: Top 10px
• سبک انیمیشن: اسلاید
• جهت انیمیشن: درست است
• تاخیر انیمیشن: 250 میلی ثانیه

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

سپس یک ماژول دکمه را در زیر ماژول Blurb اضافه کنید. به دلیل خاصیت flex ، ماژول به جای اینکه در زیر باشد ، در سمت راست blurb ظاهر می شود.

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

• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• اندازه متن دکمه: 15px (دسک تاپ) ، 13px (تلفن)
• رنگ متن دکمه: #ffffff
• عرض حاشیه دکمه: 0px
• شعاع مرز دکمه: 20px
• وزن قلم: نیمه پررنگ

• حاشیه (دسک تاپ): 20px در سمت چپ
• حاشیه (تلفن): 10px در سمت چپ
• اثاثه یا لوازم داخلی (دفتر): 0px در بالا ، 0px در پایین
• بالشتک (تلفن): 2px در بالا ، 2px در پایین ، 8px در سمت چپ ، 8px در سمت راست
• سبک انیمیشن: گزاف گویی
• تاخیر انیمیشن: 1000 میلی ثانیه

تنظیمات بخش

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

• اثاثه یا لوازم داخلی: 0px در بالا ، 0px در پایین
• سبک انیمیشن: گزاف گویی
• جهت انیمیشن: پایین
• مدت زمان انیمیشن: 500ms
• تاخیر انیمیشن: 250 میلی ثانیه
• کدورت شروع انیمیشن: 100٪
• Z-Index: 999

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

در این مرحله ، نوار تبلیغات آماده است. اما از آنجا که این یک الگوی است ، باید اطمینان حاصل کنیم که ماژول ارسال مطلب را برای نمایش محتوای صفحه (ها) با استفاده از این الگو اضافه می کنیم.

برای صفحاتی که با استفاده از Divi Builder ساخته شده اند (یا ساخته می شوند) ، می خواهید از یک ماژول محتوای پست تمام عرض برای به حداکثر رساندن محتوا استفاده کنید.

(توجه: برای صفحاتی که از ویرایشگر پیش فرض استفاده می کنند ، برای دستیابی به حداکثر عرض مشابه 1080px به طور پیش فرض ، می خواهید از یک حالت استاندارد محتوای پست استفاده کنید.)

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

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

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

سپس ماژول Fullwidth Post Content را انتخاب کنید.

کم و بیش است که. قبل از خروج از ویرایشگر ، مطمئن شوید و طرح را ذخیره کنید.

سپس تغییرات را برای سازنده تم ذخیره کنید.

نتیجه نهایی

قبل

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

پس از

و در اینجا همان صفحه با الگوی جدید با نوار تبلیغاتی است.

نوار تبلیغاتی را چسبناک کنید

برای اینکه نوار تبلیغاتی در زیر عنوان پیش فرض Divi قرار بگیرد ، می توانیم قطعه CSS ساده ای را به بخش حاوی نوار تبلیغاتی اضافه کنیم.

position: fixed;width: 100%;

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

سپس کد CSS زیر را به عنصر اصلی رایانه لوحی اضافه کنید:

position: relative;

حالا نتیجه را بررسی کنید.

برای تبدیل های قبلی ، می توانید URL پیوند را به کل ردیف ، در زیر گزینه پیوند تنظیمات ردیف ، اضافه کنید.

آخرین افکار

در این آموزش، نحوه طراحی یک نوار تبلیغاتی (از ابتدا) با استفاده از Divi Theme Builder را به شما نشان دادیم. نوار تبلیغاتی با انیمیشن‌ها و طرح‌های متعدد کامل شده است تا آن را واقعاً قابل مشاهده کند آخرین بازدید. حتی می‌توانید نوار تبلیغاتی را در حین پیمایش به پایین صفحه برای مشاهده بیشتر اصلاح کنید. و با قابلیت کنترل جایی که نوار تبلیغات در سایت شما قرار می گیرد، برنامه بسیار راحت است.