چطور؟پوسترer وبلاگ شما Divi به شکل یک چرخ فلک که در آن می توانید به راحتی در مقالات پیمایش کنید؟
برای بسیاری از وب سایت ها، وبلاگ نویسی به بخش مهمی از استراتژی بازاریابی آنها تبدیل شده است. SEO.
اما علاوه بر ایجاد محتوای با کیفیت بالا، ساده کردن فرآیند پیمایش پست برای بازدیدکنندگان نیز مهم است. به این ترتیب، آنها می توانند از یک مقاله به مقاله دیگر منتقل شوند و زمان بیشتری را در وب سایت شما صرف خواندن محتوایی که در آنجا منتشر می کنید بگذرانند.
در Divi یک ماژول بلاگ وجود دارد که می توانید از آن برای نمایش پویا مقالات خود و سفارشی سازی آنها استفاده کنید. اگر به دنبال راهی برای ارتقای تجربه جستجوی پست به سطح بعدی هستید، این مقاله را دوست خواهید داشت.
ما به شما نشان خواهیم داد که چگونه ماژول وبلاگ یکپارچه Divi را با استفاده از عناصر یکپارچه Divi و یک چرخ و فلک تبدیل کنید. کتابخانه رایگان js .
برویم.
بررسی
قبل از فرو رفتن در آموزش، اجازه دهید نگاهی گذرا به نتیجه بیاندازیم.
با Divi Theme Builder یک صفحه وبلاگ ایجاد کنید
با افزودن یک صفحه جدید به وب سایتی که روی آن کار می کنید شروع کنید.
به صفحه خود عنوان بدهید، صفحه را منتشر کنید و روی ' کلیک کنیداز Divi ساز استفاده کنید".
صفحه وبلاگ چیدمان از پیش طراحی شده 'شرکت طراحی داخلی' را دانلود کنید
در این آموزش، ما از صفحه وبلاگ از طرح‌بندی «شرکت طراحی داخلی» استفاده می‌کنیم، اما شما می‌توانید از هر طرح‌بندی دیگری که دوست دارید استفاده کنید.
با استفاده از ماژول Divi's Summary الگوهای پیکان "قبلی" و "بعدی" را ایجاد کنید
پس از ورود به صفحه وبلاگ، می توانیم شروع به ایجاد چرخ فلک کنیم.
بخش اول به ایجاد فلش‌هایی اختصاص دارد که به بازدیدکنندگان اجازه می‌دهیم بین مقاله‌ها حرکت کنند.
همچنین بخوانید: چگونه یک هدر سراسری چسبناک در DIVI ایجاد کنیم
برای طراحی فلش ها از ماژول Divi's Summary استفاده می کنیم، اما شما آزاد هستید که از هر ماژول دیگری که انتخاب می کنید استفاده کنید.
یک خط جدید در بالای بخش اضافه کنید وبلاگ شما با استفاده از ساختار ستون زیر:
اندازه
بدون افزودن هیچ ماژولی، تنظیمات خط را باز کنید و با تغییر تنظیمات اندازه به صورت زیر، اجازه دهید خط سمت چپ و راست بخش را لمس کند:
- حداکثر عرض: 100
- حداکثر عرض: 100
یک ماژول Summary اضافه کنید
یک ماژول Summary اضافه کنید و یک عنوان را وارد کنید.
سپس یک نماد را انتخاب کنید.
- استفاده از نمادها: بله
تنظیمات نماد
به تب Style بروید و تنظیمات آیکون را به صورت زیر تغییر دهید:
- رنگ نماد: #000000
- محل قرارگیری تصویر/آیکون: راس
- تراز تصویر/آیکون: مرکز
تنظیمات متن عنوان
سپس تنظیمات متن عنوان را تغییر دهید.
- قلم عنوان: Mulish
- عنوان نور نرم: نیمه پررنگ
- تراز متن: مرکز
- رنگ متن عنوان: #000000
اندازه
سپس تنظیمات اندازه ماژول را در اندازه های مختلف صفحه تغییر می دهیم.
- حداکثر عرض: 10% (رومیزی)، 20% (تبلت)، 30% (تلفن)
- تراز متن: سمت راست
بیایید یک کلاس CSS نیز اضافه کنیم. این کلاس CSS به ما کمک می کند تا عمل چرخ و فلک را روی کلیک فعال کنیم.
- کلاس CSS: دکمه برگشت
در نهایت یک خط کد CSS نیز به عنصر اصلی ماژول اضافه می کنیم تا مکان نما را به یک اشاره گر تبدیل کنیم.
cursor: pointer;
خط را شبیه سازی کنید و آن را در پایین بخش قرار دهید
هنگامی که فلش اول را کامل کردید، می توانید کل ظرف ردیف را شبیه سازی کنید و ردیف تکراری را در انتهای بخش وبلاگ قرار دهید.
ماژول Summary را در ردیف تکراری باز کنید و عنوان را ویرایش کنید.
استفاده از نمادها: بله.
همچنین کلاس CSS را تغییر دهید.
- کلاس CSS: دکمه بعدی
ماژول وبلاگ را آماده کنید
اندازه
در حالی که فلش ها در جای خود قرار دارند، زمان آن رسیده است که ماژول وبلاگ را بهینه سازی کنید، از ردیفی که در آن قرار گرفته است شروع کنید. تنظیمات خط را باز کنید و تنظیمات اندازه را بر اساس آن تغییر دهید:
- حداکثر عرض: 100%
- حداکثر عرض: 100
سپس سرریز خط را روی "مخفی" تنظیم کنید. این کمک می کند تا اطمینان حاصل شود که چرخ فلک باعث نمی شود نوار اسکرول افقی در صفحه ما ظاهر شود.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
صفحه بندی را مخفی کنید
پس از انجام تنظیمات خط، تنظیمات ماژول وبلاگ را باز کنید. مطمئن شوید صفحه‌بندی در تنظیمات مورد غیرفعال است.
- نمایش صفحه بندی: خیر
در مرحله بعد، به تب Style بروید و طرح را به "Full Screen" تغییر دهید.
- مدل: تمام صفحه
ما همچنین یک پوشش اضافه خواهیم کرد.
- تصویر همپوشانی نشان داده شده: ACTIVE
- رنگ نماد پوشش: #ffffff
- رنگ پس زمینه روکش: rgba (1,0,66,0.33)
در مرحله بعد، یک کلاس CSS به وبلاگ خود اضافه می کنیم که به ما کمک می کند چرخ فلک را در ادامه آموزش فعال کنیم.
- کلاس CSS: ماژول وبلاگ
و با افزودن حاشیه پایین به عنصر Post Metadata CSS در تب پیشرفته، مقداری فاصله بین متای پست و گزیده ایجاد می کنیم.
همچنین کشف کنید: نحوه ایجاد یک منوی کشویی و فشاری در DIVI
margin-bottom: 50px;
قابلیت Slick JS را اضافه کنید
هنگامی که تمام تنظیمات Divi در جای خود قرار گرفتند، وقت آن است که عملکرد نرم و صاف js را اضافه کنید! یک ماژول کد درست در زیر ماژول وبلاگ (یا هر جای دیگری در صفحه) اضافه کنید.
سپس کتابخانه slick js را اضافه کنید در تگ های اسکریپت (همانطور که در صفحه چاپ زیر مشاهده می کنید). شما همچنین می توانید آنها را به هدر وب سایت خود در تنظیمات اضافه کنید تم دیوی.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
ما هر پست وبلاگ را در سطح فردی با استفاده از کد CSS کمی تغییر می دهیم.
دفعات بازدید: نحوه ایجاد صفحه وبلاگ با ماژول Blog در DIVI
حتما کد را قرار دهید بین تگ های سبک همانطور که در تصویر زیر نشان داده شده است.
.slick-slide {
float: left;
margin: 2vw;
}
و در نهایت، مقداری کد JQuery اضافه می کنیم تا به چرخ فلک اجازه شکل گیری بدهد. در کد زیر دکمه هایی را که برای عملکرد چرخ فلک طراحی کرده ایم نیز اضافه می کنیم.
حتما کد را قرار دهید در تگ های اسکریپت همانطور که در زیر می بینید.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
صفحه را ذخیره کرده و از Visual Builder خارج شوید تا نتیجه نمایش داده شود
در Visual Builder نتیجه را نخواهید دید.
بنابراین، به محض انجام کار، صفحه خود را ذخیره کنید، از Visual Builder خارج شوید و نتیجه را در وب سایت خود مشاهده کنید!
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
دانلود DIVI در حال حاضر!!!
نتیجه
بنابراین ! برای این مقاله تمام شد. ما به شما نشان دادیم که چگونه طراحی ماژول وبلاگ خود را به سطح بعدی ببرید. به طور خاص، ما به شما نشان دادیم که چگونه با استفاده از یک کتابخانه رایگان js، ماژول داخلی Divi را به یک چرخ فلک تبدیل کنید.
اگر می‌خواهید درباره دیوی بیشتر بدانید، از کاتالوگ ما دریغ نکنید آموزش های Divi. همچنین می توانید مشورت کنید نحوه ایجاد صفحه وبلاگ با ماژول Divi Blog
همچنین ببینید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
