آیا می خواهید پست های وبلاگ را در Divi شناور کنید؟
امروز می خواهیم روشی خلاقانه برای ارائه پست های وبلاگ به عنوان کارت های شناور در Divi به شما نشان دهیم. هر وبلاگ یا وب سایت باید هدف داشتن یک عالی باشد محتویات جذاب و شاید به همان اندازه مهم یا در دسترس باشد.
یک راه برای اطمینان از اینکه محتویات همچنان در دسترس کاربران قرار می گیرد تا آن را در صفحه شناور کنند.
و برای وبلاگ نویسان، ما به شما نشان خواهیم داد که چگونه مقالاتی را ارائه دهید وبلاگ شما به عنوان کارت های شناور به طوری که در حین پیمایش صفحه قابل مشاهده باقی بمانند.
برویم.
بررسی
در اینجا مروری کوتاه بر نتیجه ای است که در پایان این آموزش به دست خواهیم آورد.
آنچه شما باید برای شروع کار
قبل از شروع ایجاد این طرح در Divi، باید موارد زیر را انجام دهید:
- یک صفحه جدید ایجاد کنید، یک نام مرتبط بدهید و روی "استفاده از Divi Builder" کلیک کنید.
- گزینه را انتخاب کنید طرح بندی را انتخاب کنید"
- پیدا کردن و انتخاب طرحصفحه فرود بلاگر".
- روی دکمه کلیک کنید طرح بندی را انتخاب کنید برای بارگذاری آن در صفحه
پس از آن، طرح از پیش ساخته شده را برای استفاده برای این آموزش آماده خواهید کرد.
نحوه ایجاد کارت های شناور پست وبلاگ با استفاده از ماژول وبلاگ Divi
اکنون که طرح بندی در صفحه بارگذاری شده است، ما آماده هستیم تا کارت های شناور پست وبلاگ خود را ایجاد کنیم.
دفعات بازدید: چگونه یک سربرگ جهانی چسبناک در Divi ایجاد کنیم
یک بخش جدید در پایین طرح ایجاد کنید.
سپس یک ردیف تک ستونی جدید به بخش اضافه کنید.
یک ماژول وبلاگ و یک عنوان به سطر/ستون اضافه کنید
به جای ایجاد یک ماژول وبلاگ جدید در اینجا، به بالا بروید و ماژول وبلاگ موجود را پیدا کنید که سه پست وبلاگ را نمایش می دهد (در بخش سوم نزدیک به وسط صفحه است). باز کن " سایر پارامترهای ماژول »و« کپی ماژول"
سپس ماژول را در ردیف تک ستونی جدیدی که در پایین صفحه ایجاد کرده‌ایم، با کلیک راست روی نماد خاکستری پلاس و انتخاب « پیست کنید. ماژول چسباندن"
در مرحله بعد، عنوانی را بالای پست‌های وبلاگ خود اضافه می‌کنیم که بالای کارت‌های وبلاگ نیز شناور می‌شود. برای انجام این کار، ماژول Text موجود را با متن عنوان کوچک کپی کنید. شیوه زندگی"
سپس ماژول را درست در بالای ماژول جدید وبلاگی که به تازگی اضافه کرده ایم قرار دهید.
در مرحله بعد، متن عنوان را ویرایش کنید تا نوع پست‌های وبلاگی را که می‌خواهید نمایش دهید، توصیف کنید. در این مثال، ما فقط از " بالا داستان"
سفارشی کردن خط با موقعیت ثابت و عرض سفارشی
ما می‌خواهیم اندازه پست‌های وبلاگ شناور را کاهش دهیم تا زمانی که موقعیت ثابتی دارند، فضای زیادی را در صفحه اشغال نکنند. سرگرم کننده خواهد بود. برای انجام این کار، تنظیمات خط را باز کنید و موارد زیر را به روز کنید:
برای اینکه آیتم ها شناور شوند، باید به خط یک موقعیت ثابت بدهیم. در تب Advanced موارد زیر را به روز کنید:
- موقعیت: ثابت
- مکان: پایین سمت راست
- افست عمودی: 20 پیکسل
- افست افقی: 20 پیکسل
- Z Index: 12
ماژول وبلاگ به روز شده با حداقل محتوا و باکس سایه
به طور کلی، ماژول وبلاگ از قبل دارای یک طرح شبکه سه ستونی و یک سبک زیبا است که با بسته طرح بندی که ما انتخاب کرده ایم ارائه می شود. اما چند کار وجود دارد که باید انجام دهیم.
همچنین ببینید: نحوه ایجاد هدر سراسری با فرم ورود در Divi
اول از همه، باید اندازه نقشه ها را (عمودی) کاهش دهیم و برخی از عناصر را از آن حذف کنیم محتویات.
برای انجام این کار، تنظیمات وبلاگ را باز کنید و همه عناصر به جز تصویر برجسته را پنهان کنید. این باعث می شود که پست فقط تصویر و عنوان برجسته را نشان دهد.
در زیر تب Style، سایه کادر را به صورت زیر پیکربندی کنید:
- کادر سایه: به اسکرین شات مراجعه کنید
- قدرت تاری سایه جعبه: 28 پیکسل
- رنگ فونت زیرنویس: rgba(0,0,0,0.19)
بررسی
در اینجا پیش نمایشی از نتیجه ای است که تا کنون داشته ایم.
کاری کنید که خط مقالات در حالت شناور ظاهر شود
در نهایت، می‌توانیم یک افکت شناور زیبا اضافه کنیم که کاربران را تشویق می‌کند تا با مقالات شناور تعامل داشته باشند.
همچنین بخوانید: نحوه ایجاد صفحه وبلاگ با ماژول بلاگ در Divi
تنظیمات خط و گزینه های به روز رسانی را باز کنید:
برای دفتر
- تبدیل: 50%
برای حالت شناور
- تبدیل: 0%
این در ابتدا کل خط را تا 50٪ خارج از نمای مرورگر می کند. هنگامی که کاربر روی خط قرار می گیرد، به طور کامل به نمایش در می آید.
پنهان کردن ردیف در تلفن همراه
مگر اینکه بخواهید یک پست وبلاگ منتشر کنید، منطقی نیست که آن پست های وبلاگ را در تلفن همراه منتشر کنید. احتمالاً فضای زیادی را اشغال می کند و هنگام تلاش برای پیمایش باعث ایجاد مشکل می شود.
همچنین ببینید: چگونه یک فرم تماس را به یک سربرگ جهانی در Divi اضافه کنیم
برای پنهان کردن نقشه‌ها در تلفن همراه، تنظیمات بخش را باز کنید و قابلیت مشاهده بخش را در تلفن و رایانه لوحی خاموش کنید.
نتیجه نهایی
دانلود DIVI در حال حاضر!!!
نتیجه
بنابراین ! ما در این آموزش روشی خلاقانه و بدیع برای ارائه پست های وبلاگی که می خواهید برجسته کنید به شما نشان داده ایم.
اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
