ایجاد پست های ارزشمند وبلاگ به زمان و تلاش نیاز دارد. در کنار یافتن بهترین موضوعات برای نوشتن در جایگاه خود ، مهم است که خوانندگان را درگیر خود کنید و به آنها اجازه دهید به سرعت اطلاعات مورد نظر خود را پیدا کنند.
اکنون ، یک روش خوب برای دستیابی به این نوع تجربه کاربر ، به اشتراک گذاشتن یک جعبه خلاصه تصویری در انتهای پست وبلاگ خود ، درست قبل از افکار نهایی است.
با بلوک های طرح بندی جدید Divi ، اکنون می توانید بدون زحمت یک جعبه خلاصه با گزینه های داخلی Divi ایجاد کنید. در این آموزش ، ما مراحل کار را برای شما مرور خواهیم کرد و همچنین می توانید فایل طرح JSON را به صورت رایگان بارگیری کنید!
بیایید شروع به بازیابی کنیم!
از الگوی انتشار برای ششمین بسته تم استفاده کنید
دانلود بسته ساز ششم ششم
جعبه خلاصه ای که در طول این آموزش دوباره ایجاد می کنیم کاملاً با قالب پست Sixth Theme Builder Pack مطابقت دارد. رایگان. دسترسی بهمقاله وبلاگ و کل بسته را بارگیری کنید.
برو به Divi Theme Builder
سپس به قسمت Divi Theme Builder بروید.
الگوی انتشار را بارگیری کنید
روی نماد در گوشه بالا سمت راست کلیک کنید و الگوی پست را از Theme Theme Pack بارگیری کنید. مطمئن شوید که پس از آن هرگونه تغییر در زمینه ساز را ویرایش می کنید.
یک انتشارات گوتنبرگ موجود را باز کنید یا یک نسخه جدید ایجاد کنید
اکنون ، هنگامی که الگوی پست مربوطه را اضافه کردید ، نوبت به ایجاد جعبه خلاصه می رسد. با استفاده از گوتنبرگ پست جدیدی را باز یا ایجاد کنید.
خلاصه ای از عنوان H2 را اضافه کنید
در پایان پست وبلاگ ، عنوان جدید H2 را اضافه خواهیم کرد.
یک بلاک جدید Divi را به صورت آنلاین اضافه کنید
در مرحله بعدی یک بلوک طرح جدید Divi اضافه خواهیم کرد.
یک طرح جدید در داخل بلوک Divi ایجاد کنید
پس از اضافه کردن بلوک ، دو گزینه پیش رو دارید. انتخاب کنید که یک طرح جدید ایجاد کنید.
تنظیمات بخش
رنگ پس زمینه
در داخل ویرایشگر بلوک طرح Divi ، متوجه بخشی خواهید شد. این بخش را باز کنید و از پس زمینه سفید برای آن استفاده کنید.
- رنگ زمینه: #FFFFFF
فاصله
به برگه طراحی بخش بروید و مقادیر حاشیه و padding سفارشی را اضافه کنید.
- حاشیه بالایی: 100px
- حاشیه سمت چپ: -10٪ (دفتر) ، 0٪ (رایانه لوحی و تلفن)
- حاشیه سمت راست: -10٪ (دفتر) ، 0٪ (رایانه لوحی و تلفن)
- بالشتک بالایی: 0px
- بالشتک پایین: 0px
مرز
همچنین یک شعاع مرزی اضافه کنید.
- پایین سمت چپ: 16px
- پایین سمت راست: 16px
جعبه سایه
با سایه ظریف جعبه.
- قدرت سایه جعبه مقاومت: 60 پیکسل
- نیروی انتشار سایه جعبه: 10px
- رنگ سایه: rgba (0,0,0,0,08،XNUMX،XNUMX،XNUMX،XNUMX)
یک خط جدید اضافه کنید
ساختار ستون
با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:
اندازه
بدون افزودن ماژول ، تنظیمات ردیف را باز کرده و اجازه دهید ردیف کل عرض ظرف را اشغال کند.
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- برابری ارتفاعات ستون: بله
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
سپس بالشتک پیش فرض بالا و پایین را از خط خارج کنید.
- بالشتک بالایی: 0px
- بالشتک پایین: 0px
تنظیمات ستون 1
رنگ پس زمینه
سپس تنظیمات را در ستون 1 باز کنید و برای این کار از یک رنگ زمینه سفید استفاده کنید.
- رنگ زمینه: #FFFFFF
فاصله
مقادیر پر کردن سفارشی را نیز اضافه کنید.
- بالشتک بالایی: 70px
- بالشتک پایین: 70px
- بالشتک چپ: 70 پیکسل
- بالشتک راست: 70 پیکسل
جعبه سایه
با افزودن سایه جعبه ظریف با رنگ پیش فرض متفاوت و شناور ادامه دهید.
- قدرت سایه جعبه مقاومت: 50 پیکسل
- رنگ سایه پیش فرض: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
- رنگ سایه شناور: rgba (0,0,0,0,15،XNUMX،XNUMX،XNUMX،XNUMX،XNUMX)
مقیاس تبدیل شناور
در حالت شناور ، ما همچنین می خواهیم ستون را کمی مقیاس بندی کنیم.
- راست: 105٪
- کم: 105٪
فهرست Hover Z
پارامترهای ستون را با اضافه کردن شاخص hover z.
- فهرست Hover Index Z: 11
ماژول متن # 1 را به ستون اضافه کنید
یک عدد به قسمت محتوا اضافه کنید
وقت آن است که ماژول ها را اضافه کنید، با اولین ماژول متنی شروع کنید. یک عدد به کادر اضافه کنید محتویات.
پیشینه شیب
سپس یک پس زمینه شیب اضافه کنید.
- رنگ 1: # ff5e92
- رنگ 2: # ffd4b6
- جهت شیب: 165deg
تنظیمات متن
به برگه طراحی ماژول بروید و تنظیمات متن را به شرح زیر تغییر دهید:
- فونت متن: Poppins
- رنگ متن: #ffffff
- اندازه متن: 26px
- ترتیب متن: مرکز
اندازه
سپس یک عرض و یک ارتفاع را اختصاص دهید.
- عرض: 150px
- ارتفاع: 150px
مرز
همچنین یک شعاع مرزی اضافه کنید.
- پایین سمت چپ ، بالا و پایین سمت راست: 100 پیکسل
عنصر اصلی CSS
برای قرار دادن متن در محفظه خود ، باید چند خط کد CSS به عنصر ماژول اصلی در برگه پیشرفته اضافه کنیم.
display: flex;align-items: center;justify-content: center;
موقعیت
و ما با تغییر مجدد ماژول به پارامترهای ماژول پایان خواهیم داد.
- موقعیت: مطلق
- مکان: بالا سمت چپ
ماژول متن # 2 را به ستون اضافه کنید
محتوای H3 را اضافه کنید
بیایید به ماژول متن بعدی برویم. مقداری اضافه کنید محتویات H3 به انتخاب شما
تنظیمات متن H3
سپس اندازه متن H3 ماژول را تغییر دهید.
- عنوان 3 اندازه متن: 23px
فاصله
همچنین تنظیمات فاصله را تغییر دهید.
- حاشیه بالایی: 100px
- حاشیه پایین: 20px
ماژول جداسازی را به ستون اضافه کنید
دید
ماژول بعدی که به آن نیاز داریم ، ماژول جداسازی است. مطمئن شوید که گزینه "Show Separator" فعال باشد.
- جداکننده را نشان دهید: بله
تنظیمات خط
به زبانه طراحی ماژول بروید و تنظیمات ردیف را به صورت زیر تغییر دهید:
- رنگ خط: # ff5e92
- سبک خط: جامد
- موقعیت خط: زیاد
اندازه
اندازه ماژول را نیز تغییر دهید.
- وزن تقسیم: 2px
- عرض: 20٪
ماژول متن # 3 را به ستون اضافه کنید
اضافه کردن محتوا
بیایید به ماژول متن بعدی و نهایی برویم. مقداری اضافه کنید محتویات د votre choix.
ستون کلونینگ
پس از اتمام ستون و تمام ماژول های آن ، می توانید کل ستون را کلون کنید.
رنگ سایه کادر پیش فرض را تغییر دهید
تنظیمات را در ستون 2 باز کنید و رنگ سایه پیش فرض را تغییر دهید.
- رنگ سایه: rgba (0,0,0,0,06،XNUMX،XNUMX،XNUMX،XNUMX)
پس زمینه شیب ماژول متن شماره 1 را تغییر دهید
اولین ماژول متن را در ستون 2 بعدی باز کنید و پس زمینه شیب را تغییر دهید.
- رنگ 1: # 7e5ce6
- رنگ 2: # 25b8ee
مرز ماژول متن شماره 1 را تغییر دهید
همچنین تنظیمات مرز ماژول را تغییر دهید.
- بالا سمت چپ ، پایین و سمت راست پایین: 100 پیکسل
موقعیت ماژول متن شماره 1 را تغییر دهید
و ماژول را در برگه پیشرفته تغییر مکان دهید.
- مکان: بالا سمت راست
رنگ جداکننده را تغییر دهید
با باز کردن تنظیمات ماژول جداسازی ، ادامه دهید. رنگ خط را متناسب با طرح جدید رنگ تغییر دهید.
- رنگ خط: # 7e5ce6
همه مطالب را تغییر دهید
در آخر ، کل محتوای ماژول را در ستون 2 اصلاح کنید.
کل بخش را دو بار
پس از اتمام بخش اول ، می توانید دو بار کلون کنید.
فاصله قسمت اول تکراری را تغییر دهید
تنظیمات را در بخش اول تکراری باز کنید و مقادیر حاشیه را بر این اساس تغییر دهید:
- حاشیه سمت چپ: -5٪ (رایانه رومیزی) ، 0٪ (رایانه لوحی و تلفن)
- حاشیه سمت راست: -5٪ (دفتر) ، 0٪ (رایانه لوحی و تلفن)
فاصله قسمت تکراری دوم را تغییر دهید
همچنین نسخه دوم را باز کنید ، تمام مقادیر حاشیه را حذف کنید و به جای آن حاشیه پایین تری اضافه کنید.
- حاشیه پایین: 100px
همه مطالب را تغییر دهید
در آخر ، کل محتوای ماژول را اصلاح کنید.
طرح را در کتابخانه دیوی برای استفاده مجدد ذخیره کنید
اگر قصد دارید از این جعبه خلاصه در سایر پست های وبلاگ استفاده کنید ، حتماً آن را در کتابخانه Divi خود ذخیره کنید تا بتوانید به راحتی به آن دسترسی پیدا کنید! خودشه !
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
آخرین افکار
در این مقاله به شما نشان دادیم که چگونه با بلوک های طرح بندی جدید Divi، یک کادر خلاصه به پست گوتنبرگ خود اضافه کنید. جعبه های خلاصه یک راه بصری عالی برای کمک به شما هستند آخرین بازدید تا اطلاعات مورد نظر خود را بیابند.
همچنین می توانید فایل JSON را برای طرح به صورت رایگان بارگیری کنید! اگر سوالی دارید ، در صورت تمایل در قسمت نظرات زیر نظر دهید.
