رفتن به محتوای اصلی

چگونه می توان یک بلوک متحرک را به مقاله گوتنبرگ خود اضافه کرد

Divi: ساده ترین قالب وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

وقتی روش ایجاد پست های وبلاگ را در وب سایت خود ساده می کنید ، این فرصت خوبی وجود دارد که بخواهید CTA جذاب را در جایی از پست خود قرار دهید. اکنون ، با ادغام بلوک طرح بندی جدید Gutenberg در Divi ، می توانید به راحتی یک بلوک ساخته شده از Divi جدید را در هر نقطه از پست وبلاگ Gutenberg خود اضافه کنید. با این وجود می توانید محتوای کلی پست وبلاگ را در محیط گوتنبرگ حفظ کنید و در عین حال با استفاده از گزینه های داخلی Divi CTA شخصی سازی کنید. بهترین از هر دو جهان! در این آموزش ، ما به شما نشان خواهیم داد که چگونه یک بلوک طرح متحرک آنلاین Divi CTA به پست گوتنبرگ خود اضافه کنید. ما همچنین پرونده JSON از بلوک طرح Divi CTA را به صورت رایگان به اشتراک خواهیم گذاشت!

برویم.

نتیجه احتمالی

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

ارائه انیمیشن Divi

وارد کردن بلوک طرح JSON

طرح مورد نظر را در کتابخانه دیوی بارگیری کنید

برای وارد کردن فایل JSON که می توانستید در بالا بارگیری کنید ، به کتابخانه Divi خود در قسمت پشت داشبورد وردپرس خود بروید و بر روی "وارد کردن و صادر کردن" کلیک کنید.

واردات دیوی

سپس پرونده JSON را در پوشه بارگیری خود انتخاب کنید و روی "Import Divi Builder Layouts" کلیک کنید.

وارد کردن json divi 1

یک Divi Block جدید در داخل Gutenberg اضافه کنید

پس از وارد کردن طرح شما ، می توانید به پیام Gutenberg خود دسترسی پیدا کرده و یک بلوک طرح جدید Divi اضافه کنید.

طرح divi را اضافه کنید

یک فایل JSON را از ارائه های ذخیره شده وارد کنید

سپس ، روی "بارگیری از کتابخانه" کلیک کنید ، به "طرحهای ذخیره شده خود" بروید و طرح را برای وارد کردن بلوک طرح Divi CTA به پست وبلاگ خود انتخاب کنید. خودشه!

طرح divi را بارگیری کنید

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

از الگوی انتشار برای بسته تم سوم استفاده کنید

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

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

قالب divi wordpress را بسته بندی کنید

برو به Divi Theme Builder

پس از بارگیری بسته ایجاد قالب سوم ، می توانید به Divi Theme Builder دسترسی پیدا کنید.

منوی divi سازنده تم

الگوی انتشار را بارگیری کنید

با کلیک بر روی نماد در گوشه بالا سمت راست ، قالب پست Theme Building Pack را بارگیری کنید.

قابلیت حمل ماژول Divi

سپس الگوی ارسال را انتخاب کرده و روی "Import Divi Theme Builder templates" کلیک کنید. اطمینان حاصل کنید که تغییرات را در زمینه ساز نیز ذخیره کنید. در این مرحله ، ما الگوی ارسال وبلاگ را از Theme Building Pack به همه پست های خود اختصاص داده ایم.

تصویر wordpress.go 2020.02.05 14 58 38

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

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

ایجاد نشریه در گوتنبرگ

یک بلاک جدید Divi را به صورت آنلاین اضافه کنید

پس از ورود به پیام ، می توانید یک بلوک طرح بندی Divi جدید اضافه کنید.

طرح divi را اضافه کنید

یک طرح جدید در داخل بلوک Divi ایجاد کنید

سپس دو گزینه پیش رو خواهید داشت. گزینه "ایجاد یک طرح جدید" را انتخاب کنید.

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

یک طرح تقسیم جدید ایجاد کنید

تنظیمات بخش

فاصله

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

  • حاشیه بالایی: 50px
  • حاشیه پایین: 50px
  • حاشیه سمت چپ: -10٪
  • حاشیه سمت راست: -10٪
فاصله بخش را بر روی divi پیکربندی کنید

خط شماره 1 را اضافه کنید

ساختار ستون

با استفاده از ساختار ستون زیر ، اضافه کردن یک ردیف جدید:

ستون divi را انتخاب کنید

اندازه

بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کنید و عرض و حداکثر عرض را افزایش دهید.

  • عرض: 100٪
  • حداکثر عرض: 100٪
اندازه خط divi را پیکربندی کنید

جداکننده شماره 1 را به ستون اضافه کنید

دید

وقت آن است که ماژول ها را اضافه کنیم ، با یک ماژول جداسازی شروع می کنیم. مطمئن شوید که گزینه "Show Separator" فعال باشد.

  • جداکننده را نشان دهید: بله
جداکننده divi را نمایش دهید

خط

به زبانه طراحی ماژول بروید و تنظیمات ردیف را به صورت زیر تغییر دهید:

  • رنگ خط: # fc526e
  • سبک خط: جامد
  • موقعیت خط: زیاد
پیکربندی سبک جداساز divi

اندازه

همچنین پارامترهای اندازه را تغییر دهید.

  • وزن تقسیم: 3px
  • عرض: 30٪
  • تراز ماژول: درست است
  • ارتفاع: 3px
تقسیم تقسیم را سفارشی کنید

انیمیشن

و تنظیمات انیمیشن را بر این اساس تغییر دهید:

  • سبک انیمیشن: اسلاید
  • جهت انیمیشن: چپ
  • مدت زمان انیمیشن: 2000ms
  • تأخیر انیمیشن: 500 میلی ثانیه
  • شدت انیمیشن: 100٪
  • تیرگی شروع انیمیشن: 0٪
شروع ماژول جداکننده animatin divi

تقسیم شماره 2 را به ستون اضافه کنید

دید

بیایید به ماژول جداسازی بعدی برویم. دوباره مطمئن شوید که گزینه "Show Separator" روشن است.

  • جداکننده را نشان دهید: بله
جداکننده جدید divi اضافه کنید

خط

سپس به زبانه طراحی ماژول رفته و تنظیمات ردیف را به صورت زیر تغییر دهید:

  • رنگ خط: # e1e3e8
  • سبک خط: جامد
  • موقعیت خط: زیاد
خط تقسیم جدید اضافه کنید

اندازه

سپس پارامترهای اندازه ماژول را تغییر دهید.

  • وزن تقسیم: 3px
  • ارتفاع: 3px
وزن تقسیم کننده تقسیم کننده

فاصله

مقادیر فاصله سفارشی را نیز اضافه کنید.

  • حاشیه سمت چپ: 10٪
  • حاشیه سمت راست: -20٪
فاصله ماژول جدا کننده divi را پیکربندی کنید

انیمیشن

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

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

  • سبک انیمیشن: اسلاید
  • جهت انیمیشن: چپ
  • مدت زمان انیمیشن: 2000ms
  • تأخیر انیمیشن: 500 میلی ثانیه
  • شدت انیمیشن: 100٪
  • تیرگی شروع انیمیشن: 100٪
جداکننده انیمیشن 2 را سفارشی کنید

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

یک خط شماره 2 اضافه کنید

ساختار ستون

با استفاده از ساختار ستون زیر سطر دیگری را به بخش اضافه کنید:

اندازه

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

  • از عرض روده ای سفارشی استفاده کنید: بله
  • عرض روده: 1
  • عرض: 70٪
  • تراز خط: مرکز
خط 2 سفارشی سازی اندازه

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

محتوای H2 را اضافه کنید

سپس یک ماژول متن اول را به ستون سطر با محتوای H2 مورد نظر خود اضافه کنید.

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

تنظیمات متن H2

به تب Design بروید و متناسب با آن تنظیمات متن H2 را تغییر دهید:

  • رنگ متن مورد 2: # fc526e
  • هدر 2 اندازه متن: 28px
بخش متن Divi

فاصله

سپس مقادیر پر کردن سفارشی را اضافه کنید.

  • بالشتک بالایی: 50px
  • بالشتک پایین: 50px
  • لبه چپ: 50px
بخش متن divi را سفارشی کنید

مرز

ما همچنین از مرز چپ استفاده می کنیم.

  • عرض مرز چپ: 2px
  • رنگ حاشیه سمت چپ: # fc526e
از حاشیه divi استفاده کنید

انیمیشن

و با اضافه کردن یک انیمیشن شخصی ، پارامترهای ماژول را تکمیل کنید.

  • سبک انیمیشن: تلنگر
  • جهت انیمیشن: مرکز
  • تأخیر انیمیشن: 1500 میلی ثانیه
پارامتر متن ماژول Divi

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

اضافه کردن محتوا

ماژول متن دیگری درست زیر مطالب قبلی با محتوای دلخواه خود اضافه کنید.

متن ماژول divi جدیدی اضافه کنید

فاصله

به زبانه طراحی ماژول بروید و مقادیر padding را بر این اساس تغییر دهید:

  • بالشتک بالایی: 50px
  • بالشتک پایین: 50px
  • بالشتک راست: 50 پیکسل
پیکربندی ماژول متن divi را پیکربندی کنید

مرز

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

  • مرز بالا و راست: 2 پیکسل
  • رنگ حاشیه بالا و راست: # fc526e

انیمیشن

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

  • سبک انیمیشن: تلنگر
  • جهت انیمیشن: مرکز
  • تأخیر انیمیشن: 1700 میلی ثانیه

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

یک کپی اضافه کنید

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

یک دکمه divi اضافه کنید

تنظیمات دکمه

به زبانه طراحی ماژول بروید و تنظیمات دکمه را به صورت زیر تغییر دهید:

به راحتی فروشگاه آنلاین خود را ایجاد کنید

دانلود رایگان WooCommerce، بهترین پلاگین تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتال خود را در وردپرس. [توصیه میشود]

  • از دکمه های سفارشی برای دکمه استفاده کنید: بله
  • اندازه متن دکمه: 13px
  • رنگ متن دکمه: #ffffff
  • شیب رنگ 1: # ff5b84
  • شیب رنگ 2: # f94857
  • نوع شیب: خطی
  • جهت شیب: 165deg
  • عرض مرز دکمه: 0px
پیکربندی Gradient divi
  • شعاع مرزی دکمه: 0px
  • فاصله نامه دکمه: 1px
  • قلم دکمه: مونتسرات
  • وزن قلم دکمه: نیمه پررنگ
  • سبک قلم دکمه: بزرگ
تقسیم سبک دکمه را سفارشی کنید

فاصله

سپس بالشتک فوقانی و پائین سفارشی را اضافه کنید.

  • بالشتک بالایی: 16px
  • بالشتک پایین: 16px
فاصله ماژول دکمه divi را پیکربندی کنید

انیمیشن

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

  • سبک انیمیشن: تلنگر
  • تأخیر انیمیشن: 1900 میلی ثانیه
بلوک طرح دیوی CTA

خط کلون شماره 1 و آن را در انتهای بخش قرار دهید

پس از اتمام خط اول و دوم ، می توانید خط اول را کلون کرده و تکراری را در انتهای بخش قرار دهید.

ترتیب جداکننده ها را تغییر دهید

مکانها را برای اولین و آخرین ماژول های جداسازی تغییر دهید.

آخرین افکار

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

این مقاله حاوی نظرات 0

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

این سایت از Akismet برای کاهش ناخواسته استفاده می کند. در مورد نحوه استفاده از اطلاعات نظرتان بیشتر بدانید.

بازگشت به بالا