هنگامی که روش ایجاد پست های وبلاگ را ساده می کنید وب سایت، به احتمال زیاد می خواهید یک CTA جذاب را در جایی در مقاله خود قرار دهید. اکنون با ادغام بلوک طرح بندی گوتنبرگ جدید Divi، می توانید به راحتی یک بلوک جدید ساخته شده توسط Divi را در هر جایی از پست وبلاگ گوتنبرگ خود اضافه کنید. این به شما این امکان را می دهد که نگه دارید محتویات پست کلی وبلاگ در محیط گوتنبرگ، در حالی که هنوز یک Divi CTA سفارشی با استفاده از گزینه های داخلی Divi ایجاد می کند. بهترین از هر دو جهان! در این آموزش، ما به شما نشان خواهیم داد که چگونه یک بلوک طرح بندی Divi CTA درون خطی و متحرک به پست گوتنبرگ خود اضافه کنید. ما همچنین فایل JSON بلوک طرح بندی Divi CTA را به صورت رایگان به اشتراک خواهیم گذاشت!
برویم.
نتیجه احتمالی
قبل از اینکه به آموزش برویم ، بیایید نگاهی به نتیجه در اندازه های مختلف صفحه بیندازیم.
وارد کردن بلوک طرح JSON
طرح مورد نظر را در کتابخانه دیوی بارگیری کنید
برای وارد کردن فایل JSON که می توانستید در بالا بارگیری کنید ، به کتابخانه Divi خود در قسمت پشت داشبورد وردپرس خود بروید و بر روی "وارد کردن و صادر کردن" کلیک کنید.
سپس پرونده JSON را در پوشه بارگیری خود انتخاب کنید و روی "Import Divi Builder Layouts" کلیک کنید.
یک Divi Block جدید در داخل Gutenberg اضافه کنید
پس از وارد کردن طرح شما ، می توانید به پیام Gutenberg خود دسترسی پیدا کرده و یک بلوک طرح جدید Divi اضافه کنید.
یک فایل JSON را از ارائه های ذخیره شده وارد کنید
سپس ، روی "بارگیری از کتابخانه" کلیک کنید ، به "طرحهای ذخیره شده خود" بروید و طرح را برای وارد کردن بلوک طرح Divi CTA به پست وبلاگ خود انتخاب کنید. خودشه!
بیایید شروع به بازیابی کنیم!
از الگوی انتشار برای بسته تم سوم استفاده کنید
از برنامه سوم سازنده تم استفاده کنید
وقت آن است که شروع به خلق کردن کنیم! اول از همه ، طرحی که ما در حال بازآفرینی آن هستیم مربوط به سومین بسته ایجاد تم است که در وبلاگ Divi منتشر شده است. به مقاله بروید و فایلهای JSON را برای این بسته ایجاد تم بارگیری کنید.
برو به Divi Theme Builder
پس از بارگیری بسته ایجاد قالب سوم ، می توانید به Divi Theme Builder دسترسی پیدا کنید.
الگوی انتشار را بارگیری کنید
با کلیک بر روی نماد در گوشه بالا سمت راست ، قالب پست Theme Building Pack را بارگیری کنید.
سپس الگوی ارسال را انتخاب کرده و روی "Import Divi Theme Builder templates" کلیک کنید. اطمینان حاصل کنید که تغییرات را در زمینه ساز نیز ذخیره کنید. در این مرحله ، ما الگوی ارسال وبلاگ را از Theme Building Pack به همه پست های خود اختصاص داده ایم.
یک انتشارات گوتنبرگ موجود را باز کنید یا یک نسخه جدید ایجاد کنید
مرحله بعدی اضافه کردن بلوک طرح بندی Divi CTA به پست ما در گوتنبرگ است. برای انجام این کار ، یک مقاله موجود را باز کنید یا مقاله جدیدی ایجاد کنید.
یک بلاک جدید Divi را به صورت آنلاین اضافه کنید
پس از ورود به پیام ، می توانید یک بلوک طرح بندی Divi جدید اضافه کنید.
یک طرح جدید در داخل بلوک Divi ایجاد کنید
سپس دو گزینه پیش رو خواهید داشت. گزینه "ایجاد یک طرح جدید" را انتخاب کنید.
تنظیمات بخش
فاصله
پس از ورود به ویرایشگر بلوک طرح Divi ، متوجه بخشی خواهید شد. این بخش را باز کنید و مقادیر حاشیه سفارشی را اضافه کنید تا فضای اطراف محفظه قسمت ایجاد شود.
- حاشیه بالایی: 50px
- حاشیه پایین: 50px
- حاشیه سمت چپ: -10٪
- حاشیه سمت راست: -10٪
خط شماره 1 را اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر ، اضافه کردن یک ردیف جدید:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کنید و عرض و حداکثر عرض را افزایش دهید.
- عرض: 100٪
- حداکثر عرض: 100٪
جداکننده شماره 1 را به ستون اضافه کنید
دید
وقت آن است که ماژول ها را اضافه کنیم ، با یک ماژول جداسازی شروع می کنیم. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- جداکننده را نشان دهید: بله
خط
به زبانه طراحی ماژول بروید و تنظیمات ردیف را به صورت زیر تغییر دهید:
- رنگ خط: # fc526e
- سبک خط: جامد
- موقعیت خط: زیاد
اندازه
همچنین پارامترهای اندازه را تغییر دهید.
- وزن تقسیم: 3px
- عرض: 30٪
- تراز ماژول: درست است
- ارتفاع: 3px
انیمیشن
و تنظیمات انیمیشن را بر این اساس تغییر دهید:
- سبک انیمیشن: اسلاید
- جهت انیمیشن: چپ
- مدت زمان انیمیشن: 2000ms
- تأخیر انیمیشن: 500 میلی ثانیه
- شدت انیمیشن: 100٪
- تیرگی شروع انیمیشن: 0٪
تقسیم شماره 2 را به ستون اضافه کنید
دید
بیایید به ماژول جداسازی بعدی برویم. دوباره مطمئن شوید که گزینه "Show Separator" روشن است.
- جداکننده را نشان دهید: بله
خط
سپس به زبانه طراحی ماژول رفته و تنظیمات ردیف را به صورت زیر تغییر دهید:
- رنگ خط: # e1e3e8
- سبک خط: جامد
- موقعیت خط: زیاد
اندازه
سپس پارامترهای اندازه ماژول را تغییر دهید.
- وزن تقسیم: 3px
- ارتفاع: 3px
فاصله
مقادیر فاصله سفارشی را نیز اضافه کنید.
- حاشیه سمت چپ: 10٪
- حاشیه سمت راست: -20٪
انیمیشن
و پارامترهای ماژول را با تغییر پارامترهای انیمیشن به شرح زیر کامل کنید:
- سبک انیمیشن: اسلاید
- جهت انیمیشن: چپ
- مدت زمان انیمیشن: 2000ms
- تأخیر انیمیشن: 500 میلی ثانیه
- شدت انیمیشن: 100٪
- تیرگی شروع انیمیشن: 100٪
می توانید به همان اندازه که می خواهید انیمیشن خود را جدا کنید ، جداکننده اضافه کنید.
یک خط شماره 2 اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر سطر دیگری را به بخش اضافه کنید:
اندازه
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پارامترهای اندازه را به شرح زیر اصلاح کنید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 70٪
- تراز خط: مرکز
ماژول متن شماره 1 را به ستون اضافه کنید
محتوای H2 را اضافه کنید
سپس، اولین ماژول متنی را به ستون ردیف اضافه کنید محتویات H2 به انتخاب شما
تنظیمات متن H2
به تب Design بروید و متناسب با آن تنظیمات متن H2 را تغییر دهید:
- رنگ متن مورد 2: # fc526e
- هدر 2 اندازه متن: 28px
فاصله
سپس مقادیر پر کردن سفارشی را اضافه کنید.
- بالشتک بالایی: 50px
- بالشتک پایین: 50px
- لبه چپ: 50px
مرز
ما همچنین از مرز چپ استفاده می کنیم.
- عرض مرز چپ: 2px
- رنگ حاشیه سمت چپ: # fc526e
انیمیشن
و با اضافه کردن یک انیمیشن شخصی ، پارامترهای ماژول را تکمیل کنید.
- سبک انیمیشن: تلنگر
- جهت انیمیشن: مرکز
- تأخیر انیمیشن: 1500 میلی ثانیه
ماژول متن # 2 را به ستون اضافه کنید
اضافه کردن محتوا
یک ماژول متنی دیگر درست در زیر ماژول قبلی اضافه کنید محتویات د votre choix.
فاصله
به زبانه طراحی ماژول بروید و مقادیر padding را بر این اساس تغییر دهید:
- بالشتک بالایی: 50px
- بالشتک پایین: 50px
- بالشتک راست: 50 پیکسل
مرز
سپس یک مرز بالا و راست اضافه کنید.
- مرز بالا و راست: 2 پیکسل
- رنگ حاشیه بالا و راست: # fc526e
انیمیشن
و پارامترهای ماژول را با تغییر پارامترهای انیمیشن به شرح زیر کامل کنید:
- سبک انیمیشن: تلنگر
- جهت انیمیشن: مرکز
- تأخیر انیمیشن: 1700 میلی ثانیه
ماژول دکمه را به ستون اضافه کنید
یک کپی اضافه کنید
ماژول بعدی و نهایی که در این سطر به آن نیاز داریم ، ماژول دکمه ای است. یک کپی به انتخاب خود اضافه کنید.
تنظیمات دکمه
به زبانه طراحی ماژول بروید و تنظیمات دکمه را به صورت زیر تغییر دهید:
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 13px
- رنگ متن دکمه: #ffffff
- شیب رنگ 1: # ff5b84
- شیب رنگ 2: # f94857
- نوع شیب: خطی
- جهت شیب: 165deg
- عرض مرز دکمه: 0px
- شعاع مرزی دکمه: 0px
- فاصله نامه دکمه: 1px
- قلم دکمه: مونتسرات
- وزن قلم دکمه: نیمه پررنگ
- سبک قلم دکمه: بزرگ
فاصله
سپس بالشتک فوقانی و پائین سفارشی را اضافه کنید.
- بالشتک بالایی: 16px
- بالشتک پایین: 16px
انیمیشن
و پارامترهای ماژول را با اضافه کردن انیمیشن زیر کامل کنید:
- سبک انیمیشن: تلنگر
- تأخیر انیمیشن: 1900 میلی ثانیه
خط کلون شماره 1 و آن را در انتهای بخش قرار دهید
پس از اتمام خط اول و دوم ، می توانید خط اول را کلون کرده و تکراری را در انتهای بخش قرار دهید.
ترتیب جداکننده ها را تغییر دهید
مکانها را برای اولین و آخرین ماژول های جداسازی تغییر دهید.
آخرین افکار
در این مقاله، ما به شما نشان داده‌ایم که چگونه از مزیت ادغام گوتنبرگ جدید Divi استفاده کنید و یک بلوک خطی و متحرک Divi CTA را به پست وبلاگ گوتنبرگ خود اضافه کنید. این یک راه عالی برای برجسته کردن Call to Action انتخابی شماست آخرین بازدید محتوای پست وبلاگ خود را بخوانید.
