آیا می خواهید یک طرح بندی شبکه ای تصویر پاسخگو ایجاد کنید DIVI ?
سازنده DIVI دارای ماژول های داخلی فوق العاده ای است که از نماهای شبکه ای استفاده می کنند،
اما گاهی اوقات ممکن است بخواهید طرح‌بندی شبکه‌ای تصویر سفارشی خود را با پیوندهای CTA ایجاد کنید. این به شما کنترل بیشتری بر روی طراحی و محتویات که می خواهید برای هر آیتم گرید بدون نیاز به استفاده از افزونه نمایش دهید.
امروز به شما نشان خواهیم داد که چگونه با استفاده از گزینه‌های طراحی داخلی، یک طرح‌بندی شبکه تصویر واکنشگرا با پیوندهای CTA ایجاد کنید. DIVI.
بیایید شروع کنیم!
بررسی
در اینجا یک مرور مختصر از نتیجه ای است که در پایان این آموزش به دست خواهیم آورد.
با Divi Theme Builder یک صفحه ایجاد کنید
از داشبورد وردپرس، یک صفحه وب جدید با رفتن به ایجاد کنید صفحات >> افزودن
همچنین ببینید: چگونه یک منوی کشویی و فشاری در DIVI ایجاد کنیم؟
سپس یک عنوان به صفحه خود بدهید و سپس روی "کلیک کنید" از Divi ساز استفاده کنید "
سپس بر روی " کلیک کنید شروع به ساختن«
ایجاد طرح بخش ویژه
یک بخش جدید اضافه کنید "تخصص". طرح بندی نوار کناری سمت چپ یک سوم دو سوم.
طرح بندی ستون ها را همانطور که در تصویر زیر نشان داده شده است انتخاب کنید:
قسمت پیش فرض را حذف کنید تا فقط قسمت تخصصی جدید باقی بماند.
تنظیمات بخش را باز کنید و رنگ پس زمینه را به صورت زیر تغییر دهید:
- پس زمینه: #84dbda
زیر زبانه سبک، گزینه های زیر را به روز کنید:
- یکسان کردن ارتفاع ستون: بله
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض ناودان: 1
- عرض داخلی: 100%
دفعات بازدید: چگونه می توانم پست های وبلاگ را در DIVI شناور کنم؟
- حداکثر عرض داخلی: 1 پیکسل (رومیزی)، 080 پیکسل (تبلت و تلفن)
- حاشیه داخلی (بالا و پایین): 12vh
- لایه 1 ستون 0 (بالا و پایین): XNUMXpx
با وجود سبک های بخش، یک ردیف تک ستونی به بخش اضافه کنید.
تنظیمات خط
پارامترهای خط را به صورت زیر به روز کنید:
- از عرض ناودان سفارشی استفاده کنید: بله
- فاصله ستون ها: 1
- هماهنگ کردن ارتفاع ستون: بله
- حاشیه داخلی (بالا و پایین): 0 پیکسل
با کپی کردن خط اول، یک خط دوم ایجاد کنید.
سپس ردیف تکراری را به یک طرح دو ستونی تغییر دهید.
اضافه کردن تصاویر به عنوان تصاویر پس زمینه ستون
اکنون که تمام سطرها و ستون ها در جای خود قرار دارند، ما آماده ایم تا تصاویر خود را به طرح بندی شبکه خود اضافه کنیم.
به منظور اطمینان از پاسخگو بودن تصاویر در طرح بندی شبکه ای، هر یک از تصاویر خود را به عنوان تصاویر پس زمینه به هر یک از چهار ستون در بخش اضافه می کنیم.
از آنجایی که هر تصویر پس زمینه دارای اندازه پس زمینه خواهد بود " پوشش دادن "، هنگام تنظیم اندازه مرورگر، تصویر همیشه کل ستون را پر می کند.
تصویر پس زمینه ستون ردیف بالا
برای شروع، تنظیمات ستون ردیف بالا را باز کنید.
سپس یک تصویر پس زمینه به ستون اضافه کنید.
تصاویر پس زمینه ستون ردیف پایین
سپس تنظیمات ستون 1 را در ردیف دوم (پایین) باز کنید و یک تصویر پس زمینه نیز به این ستون اضافه کنید.
سپس یک تصویر پس زمینه به ستون 2 همان ردیف اضافه کنید.
تصویر پس زمینه ستون 1 بخش
و در نهایت تنظیمات بخش را باز کنید "تخصص" و یک تصویر پس زمینه به ستون 1 اضافه کنید.
اضافه شدن ماژول "Call to Action" که بر روی تصاویر به هر ستون اضافه شده است
اکنون که تصاویر پس‌زمینه ما به هر ستون طرح‌بندی شبکه اضافه شده‌اند، ماژول «Call to Action» را به هر ستون اضافه می‌کنیم.
استفاده از همپوشانی ماژول «Call to Action» روی تصویر پس‌زمینه ستون به شما این امکان را می‌دهد که سبک‌های همپوشانی سفارشی پس‌زمینه را به راحتی اضافه کنید و جلوه‌های شناور را به تصویر پس‌زمینه ستون اضافه کنید.
برای این مثال، ما فقط از عنصر دکمه از ماژول Action Call استفاده می کنیم، اما شما به راحتی می توانید به آن اضافه کنید محتویات عنوان یا متن بالای دکمه.
ما اولین ماژول "Call to Action" را در ستون ردیف بالا اضافه می کنیم.
محتویات
تنظیمات ماژول "Call to Action" را به صورت زیر به روز کنید:
- حذف متن عنوان
- متن متن را حذف کنید
- آدرس لینک دکمه: #
تذکر: افزودن "#" برای URL پیوند دکمه در حال حاضر فقط یک پرکننده است تا دکمه نمایش داده شود. با اضافه کردن رنگ پس‌زمینه نیمه شفاف روی شناور، زمانی که ماوس را روی ماژول (و تصویر پشت آن) می‌برید، یک رنگ روکش سفارشی زیبا به شما می‌دهد.
- رنگ پس‌زمینه: شفاف (رومیزی)، rgba (255,235,77,0.5) (هور)
سبک های دکمه
به برگه بروید سبک و تنظیمات دکمه ماژول "Call to action" را به صورت زیر تغییر دهید:
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن دکمه: 22 پیکسل
- رنگ متن دکمه: #ffeb4d
- دکمه پس‌زمینه: #000000 (رومیزی)، #ec5f00 (هور)
همچنین ببینید: نحوه ایجاد یک منوی کشویی و فشاری در DIVI
- پهنای حاشیه دکمه: 0 پیکسل
- شعاع حاشیه دکمه: 100 پیکسل
- قلم دکمه: Quicksand
- دکمه کم نور: نیمه پررنگ
- دکمه پد: 0,5em بالا، 0,5em پایین، 2em چپ، 2em سمت راست
اندازه، بالشتک و لبه
در مرحله بعد، باید مطمئن شویم که ماژول ما دارای ارتفاع مشخصی است تا تصویر پس‌زمینه ستون پشت آن نمایش داده شود.
برای این کار، حاشیه های داخلی (بالا و پایین) را به ماژول اضافه می کنیم.
ما همچنین یک حاشیه ظریف به ماژول اضافه می کنیم تا کمی از سایر تصاویر در طرح بندی شبکه ای جدا شود.
تنظیمات زیر را اعمال کنید:
- عرض: 100٪
- حاشیه داخلی (بالا و پایین): 15vh
- عرض حاشیه پایین: 5px
- عرض حاشیه سمت چپ: 5 پیکسل
- رنگ حاشیه: rgba (255,255,255,0.5)
تذکر: استفاده از واحد طول vh برای padding باعث می شود که مقدار padding نسبت به ارتفاع درگاه نمای مرورگر باشد. بنابراین عناصر شبکه تصویر شما متناسب با پنجره مرورگر رشد کرده و از نظر ارتفاع کوچک می شوند.
مرکز عمودی محتوای ماژول "Call to action".
برای اطمینان از اینکه محتویات ماژول "Action Call" به صورت عمودی در مرکز باقی می ماند، ما می توانیم یک قطعه کوچک از CSS سفارشی را با استفاده از ویژگی flex اضافه کنیم.
در تب پیشرفته، CSS زیر را به عنصر اصلی اضافه کنید:
display:flex;
flex-direction:column;
justify-content:center;
همپوشانی فراخوان برای اقدام به ستون‌های دیگر اضافه شد
اکنون که اولین ماژول "Call to Action" سفارشی شده است، ماژول را کپی و در 3 ستون دیگر طرح بندی شامل 2 ستون در ردیف پایین و ستون 1 در بخش قرار دهید.
برای اطمینان از اینکه ماژول "Call to Action" تمام ارتفاع ستون 1 را در بخش تخصصی پوشش می دهد، حداقل ارتفاع را روی 100٪ تنظیم کنید.
- حداقل ارتفاع: 100%
تمام شد ! نتیجه نهایی را ببینیم.
نتیجه نهایی
در اینجا نتیجه نهایی طرح بندی شبکه ای عکس پاسخگو در یک صفحه وب با جلوه های شناور است.
و این نحوه واکنش شبکه هنگام تنظیم اندازه مرورگر است.
دانلود DIVI در حال حاضر!!!
نتیجه
طرح‌بندی شبکه‌ای تصویر واکنشگرا همچنان یکی از جنبه‌های محبوب بسیاری از وب‌سایت‌ها است. جذابیت بصری ارائه شده توسط تصویر پس‌زمینه همراه با پوشش فراخوان واقعاً می‌تواند پیوندهای ناوبری مهم را ایجاد کند.
همچنین ماهیت واکنش‌گرای طرح شبکه‌ای تصویر در همه دستگاه‌ها عالی به نظر می‌رسد که همیشه یک ضرورت است.
امیدواریم این راهنما در پروژه های آینده شما برای ایجاد مفید باشد وب سایت. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
با این حال ، شما همچنین می توانید مشورت کنید منابع ما اگر برای تکمیل پروژه های ایجاد وب سایت خود به عناصر بیشتری نیاز دارید.
شما همچنین می توانید راهنمای ما را دنبال کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
