آیا می خواهید یک بخش توصیفات در قالب یک شبکه ایجاد کنید در صفحه وب خود با ماژول Testimonial of DIVI ?
چیدمان های شبکه ای ایده آل هستند محتویات که باید در کنار هم نگهداری شوند. گواهینامه ها نمونه خوبی از این موضوع هستند. که در DIVI، توصیفات با یک ماژول جدید برای هر گواهینامه ایجاد می شود. اما خوشبختانه، نمایش آنها در یک شبکه ساده است.
در این مقاله نحوه چیدمان توصیفات به صورت شبکه ای با ماژول را خواهیم دید از زبان مشتریان de DIVI. ما دو طرح متفاوت را خواهیم دید، بنابراین شما می توانید یکی را انتخاب کنید که به بهترین وجه با نیازهای شما مطابقت دارد.
بیایید شروع کنیم!
بررسی
در اینجا یک نمای کلی از کارهایی است که در این آموزش انجام خواهیم داد.
طرح شبکه
ترتیب جایگزین
طراحی اولین چیدمان با Divi
ما جزئیات هر دو طرح را نشان خواهیم داد، اما طرح دوم از ماژول های اول استفاده می کند.
یک خط ایجاد کنید
ابتدا یک ردیف جدید ایجاد کنید و a را انتخاب کنید طرح بندی 3 ستونی.
سپس در را باز کنید پارامترهای خط با کلیک بر روی نماد چرخ دنده آن.
برگه را انتخاب کنید طرح و فعال کنید از Custom Gutter Witdh استفاده کنید و آن را روی 1 قرار دهید.
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض ناودان: 1
سپس به پایین اسکرول کنید فاصله و تنظیمات فاصله را به صورت زیر تغییر دهید. ردیف را ببندید. ما می‌خواهیم ردیف دوم ایجاد کنیم، اما ابتدا این ردیف را تمام می‌کنیم و سپس آن را شبیه‌سازی می‌کنیم.
- بالشتک (بالا و پایین): 0 پیکسل
یک ماژول "تصادیر" اضافه کنید
سپس a را اضافه کنید ماژول گواهینامه در ستون سمت چپ
تنظیمات محتوای ماژول
سپس اضافه کنید محتویات از شهادت. این شامل نام نویسنده، عنوان شغلی، نام شرکت، محتویات از جسد و عکس شخصی که شهادت می دهد.
- نویسنده: نام نویسنده
- عنوان شغلی: سمت در شرکت
- شرکت: نام شرکت
- محتوای بدن: گواهی
- تصویر: تصویر انتخاب شده
پارامترهای طراحی ماژول
سپس تب را انتخاب کنید طرح.
نماد نقل قول
تنظیمات آیکون را تغییر دهید رنگ آیکون نیز برای نام فرد مورد استفاده قرار خواهد گرفت. برای همه ماژول ها یکسان خواهد بود.
- رنگ نماد نقل قول: #fd335a
- رنگ پس‌زمینه نماد نقل قول: #ffffff
تصویر
سپس به پایین اسکرول کنید تصویر و تنظیمات زیر را تغییر دهید:
- عرض حاشیه تصویر: 4 پیکسل
- رنگ حاشیه تصویر: #000645
متن بدنه
سپس به پایین اسکرول کنید متن بدنه و فونت را تغییر دهید
- فونت بدنه: Roboto Mono
AuthorText
سپس به پایین اسکرول کنید AuthorText.
- قلم نویسنده: Oswald
- وزن قلم: نیمه پررنگ
- سبک قلم: TT
- رنگ متن: #fd335a
متن موقعیت
سپس به پایین اسکرول کنید متن موقعیت (عنوان شغل) و فونت را تغییر دهید.
- فونت موقعیت: Roboto Mono
متن شرکت
سپس به پایین اسکرول کنید متن شرکت و فونت را نیز تغییر دهید.
- فونت شرکت: Roboto Mono
مرز
در نهایت، به پایین بروید مرز و مرز را به صورت زیر تغییر دهید:
- عرض حاشیه: 24 پیکسل
- رنگ حاشیه: #000645
ماژول Testimonial را کپی کنید
اختصاصی، ماژول را دو بار کپی کنید و دو ماژول کلون شده را به ستون های دیگر ردیف بکشید.
ماژول دوم Testimonial را سفارشی کنید
آنها را باز کنید تنظیمات از ماژول دوم گواهینامه و ویرایش محتوا.
تصویر
سپس تب را انتخاب کنید طرح و به تصویر. رنگ حاشیه را تغییر دهید.
- رنگ حاشیه تصویر: #acf8f5
مرز
در نهایت، به پایین بروید مرز و رنگ را تغییر دهید
- رنگ حاشیه: #acf8f5
سومین ماژول گواهینامه را سفارشی کنید
آنها را باز کنید تنظیمات از ماژول سوم گواهینامه و ویرایش محتوا.
تصویر
سپس به برگه بروید طرح، به تصویر و رنگ حاشیه را تغییر دهید.
- رنگ حاشیه تصویر: #fccaa0
مرز
در نهایت، به پایین بروید مرز و رنگ حاشیه را برای مطابقت با Image Border تغییر دهید. تنظیمات ماژول را ببندید.
- رنگ حاشیه: #fccaa0
خط تکراری
اختصاصی، خط را کپی کنید با کلیک بر روی گزینه تکراری که هنگام نگه داشتن ماوس روی خط ظاهر می شود. از آنجایی که ما 0 پیکسل را به لایه بالا و پایین اضافه کردیم، این خط جدید به طور خودکار خط بالای آن را لمس می کند. هر ماژول را در بخش دوم باز می کنیم تا محتوا و رنگ آن را تغییر دهیم.
ماژول چهارم گواهینامه را سفارشی کنید
آنها را باز کنید تنظیمات از ماژول دوم گواهینامه و ویرایش محتوا.
تصویر
سپس به پایین اسکرول کنید تصویر و رنگ حاشیه را به #6eea9d تغییر دهید.
- رنگ حاشیه تصویر: #6eea9d
مرز
در نهایت، به پایین بروید مرز و رنگ حاشیه را به #6eea9d تغییر دهید تا با Border تصویر مطابقت داشته باشد. تنظیمات ماژول را ببندید.
- رنگ حاشیه: #6eea9d
ماژول پنجم گواهینامه را سفارشی کنید
آنها را باز کنید تنظیمات ماژول گواهینامه پنجم و محتوای آن را اصلاح کنید.
تصویر
سپس به پایین اسکرول کنید تصویر و رنگ حاشیه را به #fff67f تغییر دهید.
- رنگ حاشیه تصویر: #fff67f
مرز
در نهایت، به پایین بروید مرز و رنگ حاشیه را برای مطابقت با Image Border تغییر دهید. تنظیمات ماژول را ببندید.
- رنگ حاشیه: #fff67f
ماژول ششم گواهینامه را سفارشی کنید
در نهایت، را باز کنید تنظیمات از ماژول گواهینامه ششم و مطالب را جایگزین کنید.
تصویر
سپس به پایین اسکرول کنید تصویر و رنگ حاشیه را به #593a94 تغییر دهید.
- رنگ تصویر حاشیه: #593a94
مرز
در نهایت، به پایین بروید مرز و رنگ را مطابق با Border تصویر تغییر دهید. تنظیمات ماژول را ببندید.
- رنگ حاشیه: #593a94
نتیجه
در اینجا نتیجه ای است که ما تاکنون داشته ایم.
طراحی طرح دوم با Divi
شبکه گواهی که ما ایجاد کردیم عالی کار می کند اگر توصیفات تقریباً یک اندازه باشند.
اگر توصیفات کوتاه و طولانی داشته باشید چه؟ برای این، یک شبکه ای با اندازه های مختلف برای ستون ها ایده آل است. ما می توانیم گواهینامه هایی را با بیشترین اطلاعات در ستون های بزرگ قرار دهیم.
برای این مثال. ما ستون های جدیدی با همان تنظیمات فاصله ایجاد می کنیم و از همان توصیفات قبلی استفاده می کنیم، اما با مقادیر متنی متفاوت.
خطوط جایگزین ایجاد کنید
اول، یک ردیف به 2 ستون اضافه کنید با ستون 1/3 سمت چپ و الف ستون 2/3 به سمت راست.
سپس تنظیمات خط را باز کنید، به تب of بروید طرح، به اندازه گیری و انتخاب کنید از عرض ناودان سفارشی استفاده کنید. عرض ناودان را به 1 تغییر دهید.
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض ناودان: 1
سپس به پایین اسکرول کنید فاصله.
- بالشتک (بالا و پایین): 0 پیکسل
پس از آن، تکراری خط
گزینه را انتخاب کنید طرح ردیف دوم و طرح بندی با را انتخاب کنید 2/3 باقی مانده است et 1/3 راست.
چهار ماژول Testimonial اضافه کنید
Enfin، ماژول های Testimonial خود را ایجاد کرده یا بکشید به خطوط ما از همان ماژول های مثال قبلی استفاده می کنیم، اما محتوا برای ایجاد اندازه های مختلف تغییر کرده است.
ماژول‌ها مانند مثال قبلی با عرض ستون‌های خود سازگار می‌شوند، اما هر کدام به دلیل محتوای بدنه‌شان ارتفاع‌های متفاوتی دارند. این باعث ایجاد فاصله نامناسب در شبکه می شود. خوشبختانه، تعمیر آن آسان است.
تنظیمات ماژول اول را باز کنید و به تب بروید طرح. اسکرول کنید به اندازه گیری و 100% برای "ارتفاع" وارد کنید.
این کار را برای هر ماژول تکرار کنید .
- قد: 100%
نتایج نهایی
طرح شبکه
در اینجا نگاهی به طرح شبکه ما داریم. اگر اندازه توصیفات یکسان باشد، این عالی عمل می کند.
ترتیب جایگزین
در اینجا طرح جایگزین است. برای توصیفات با اندازه های مختلف ایده آل است.
دانلود DIVI در حال حاضر!!!
نتیجه
این نگاه ما به نحوه ایجاد یک بخش توصیفات در قالب شبکه با ماژول است از زبان مشتریان از دیوی. تنظیمات ردیف و ماژول Divi کاملاً با هم کار می کنند تا شبکه ای از چندین ردیف و ستون ایجاد کنند.
نمونه هایی که در اینجا نشان داده ایم را می توان به راحتی برای ایجاد شبکه های حتی بزرگتر گسترش داد. این مفاهیم همچنین با انواع دیگر ماژول های Divi کار می کنند.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.
دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
