قبل از اینکه بتوانید یک ماژول Summary به صفحه خود اضافه کنید، ابتدا باید به Divi Builder دسترسی داشته باشید. از وقتی که تم دیوی بر روی شما نصب شده است وب سایت، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید در هر زمان که صفحه جدیدی ایجاد کردید ، بالای ویرایشگر پست قرار بگیرید. با کلیک بر روی این دکمه ، شما Divi Builder را فعال می کنید که به شما امکان دسترسی به تمام ماژول های Divi Builder را می دهد. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت تصویری. همچنین می توانید بر روی دکمه کلیک کنید از Visual Builder استفاده کنید وقتی شما خود را مرور می کنید وب سایت اگر به داشبورد وردپرس خود وارد شده باشید، upstream.

پس از ورود به Visual Builder ، می توانید با کلیک بر روی دکمه خاکستری بعلاوه یک ماژول جدید به صفحه خود اضافه کنید. ماژول های جدید فقط می توانند در داخل ردیف ها اضافه شوند. اگر صفحه جدیدی را شروع می کنید ، به یاد داشته باشید که ابتدا یک ردیف به صفحه خود اضافه کنید.

ماژول Summary را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما می توانید کلمه "خلاصه" را نیز تایپ کنید و سپس بر روی enter کلیک کنید تا به صورت خودکار ماژول متن توصیفی را پیدا کرده و اضافه کنید! پس از افزودن ماژول ، با لیست گزینه های ماژول از شما استقبال می شود. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

از case برای لیست کردن خدمات شرکت در صفحه اصلی استفاده کنید

از آنجا که ماژول Summary هم تصاویر و هم متن را برای نمایش برخی ویژگی ها ترکیب می کند ، می توانید با استفاده از آن لیستی از خدمات تجاری خود را به صفحه اصلی خود اضافه کنید. ماژول Blurb به شما امکان می دهد تصویر / نماد و عنوان خود را به پیوندی به صفحه خدمات خود تبدیل کنید. برای این مثال ، من می خواهم از ماژول Blurb برای اضافه کردن چهار سرویس برجسته به یک صفحه اصلی استفاده کنم.

برای افزودن چهار Blurbs به صفحه خود ، از سازنده ویژوال برای افزودن یک بخش استاندارد با یک ردیف چهار ستونی استفاده کنید. سپس به اولین ستون ردیف خود یک ماژول Blurb اضافه کنید.

تنظیمات Blurb را با موارد زیر به روز کنید:

گزینه های محتوا

عنوان: [عنوان خدمات را وارد کنید]
محتویات: [توضیح مختصری از خدمات وارد کنید]
URL: [افزودن URL به صفحه خدمات]
از نماد استفاده کنید: بله
Icon: [نمادی را انتخاب کنید که خدمات شما را نشان می دهد]

گزینه های طراحی

رنگ آیکون: # 42bb99 (رنگی را ایجاد کنید که از طراحی سایت استقبال کند)
از نماد اندازه قلم استفاده کنید: بله
اندازه قلم نماد: 68px (اندازه آیکون را تنظیم می کند)
جهت گیری متن: مرکز -
اندازه قلم سر: 24 پیکسل
اندازه قلم: 18 پیکسل
خط ارتفاع بدن: 1.5em

اکنون اولین متن مقدماتی شما به پایان رسیده است.

اکنون ماژول Summary را که ایجاد کرده اید سه بار کپی کنید و هر یک از خلاصه های تکراری را روی سه ستون دیگر بکشید. از آنجایی که تنظیمات طراحی شما در ماژول های تکراری شما یکپارچه شده است، تنها کاری که باید انجام دهید این است که آن را اصلاح کنید محتویات (سرصفحه، محتوا، نماد، URL و غیره) و رنگ ها را تغییر دهید تا آنها را با هر یک از خدمات خود تطبیق دهید.

خلاصه گزینه های محتوا

در برگه محتوا تمام عناصر محتوای ماژول ، مانند متن ، تصاویر و آیکون ها را پیدا خواهید کرد. همه اینها را کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه باشد.

عنوان

به متن خود عنوانی بدهید که در بالای متن به سبک متن پررنگ ظاهر شود. گزینه URL که در قسمت Title قرار دارد به شما امکان می دهد عنوان خود را به یک پیوند لینک تبدیل کنید.

محتویات

این قسمت جایی است که می توانید متن اصلی متن خود را وارد کنید. Blurb Text همچنین کل عرض ستون شما را تا 550 پیکسل پوشش می دهد.

URL

برای تبدیل عنوان Blurb به پیوند ، یک نشانی وب معتبر در این قسمت قرار دهید. با خالی گذاشتن این قسمت ، عنوان شما به عنوان یک عنصر ثابت باقی می ماند.

باز کردن URL

در اینجا می توانید انتخاب کنید که پیوند شما در یک پنجره جدید باز شود یا خیر.

از نماد استفاده کنید

هنگام استفاده از Blurbs ، می توانید از متن یا نماد خود استفاده کنید. اگر "Yes" را برای گزینه "Use icon" انتخاب کنید ، گزینه های زیر برای سفارشی سازی نماد به شما ارائه می شود. اگر استفاده از نماد را انتخاب نکنید ، از شما خواسته می شود به جای آن یک تصویر بارگذاری کنید.

تصویر

اگر "Yes" را برای تنظیم "Use icon" انتخاب کرده باشید ، این گزینه ظاهر می شود. این گزینه لیستی از آیکون های موجود را به شما ارائه می دهد که می توانید با استفاده از لبه خود استفاده کنید. فقط روی نمادی که می خواهید استفاده کنید کلیک کنید تا در متن شما نشان داده شود.

تصویر

اگر استفاده از نماد را انتخاب نکرده اید ، این تنظیم ظاهر می شود. یک url تصویری معتبر در اینجا قرار دهید یا از طریق کتابخانه رسانه وردپرس تصویری را انتخاب یا بارگذاری کنید. تصاویر در ماژول خلاصه همیشه در ستون های آنها ظاهر می شوند و کل عرض ستون شما را تا 550 پیکسل طی می کنند. با این حال ، تصویر شما هرگز از اندازه بارگذاری اصلی بزرگتر نخواهد بود. ارتفاع تصویر ارائه با توجه به نسبت ابعاد تصویر اصلی شما تعیین می شود. بنابراین توصیه می شود اگر همه تصاویر ارائه خود را در کنار هم قرار دهید ، در یک ارتفاع قرار دهید.

رنگ پسزمینه

یک رنگ زمینه پس زمینه برای ماژول خود مشخص کنید یا خالی بگذارید تا از رنگ پیش فرض استفاده کنید.

تصویر پس زمینه

در صورت تنظیم ، این تصویر به عنوان پس زمینه این ماژول استفاده می شود. برای حذف تصویر پس زمینه ، فقط URL را از قسمت تنظیمات حذف کنید. تصاویر پس زمینه در بالای رنگ های پس زمینه ظاهر می شوند ، به این معنی که رنگ پس زمینه شما هنگام استفاده از تصویر پس زمینه قابل مشاهده نخواهد بود.

برچسب مدیریت

با این کار برچسب ماژول در ژنراتور برای شناسایی آسان تغییر می کند. هنگام استفاده از نمای WireFrame در Visual Builder ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.

خلاصه گزینه های طراحی ماژول

در برگه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این برگه به ​​شما امکان می دهد ظاهر ماژول خود را اصلاح کنید. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تنظیم دقیق هر مورد از آنها استفاده کنید.

رنگ نماد

اگر "Yes" را برای تنظیم "Use icon" انتخاب کرده باشید ، این گزینه ظاهر می شود. این گزینه به شما امکان می دهد رنگ نماد خود را سفارشی کنید. به طور پیش فرض ، آیکون ها روی رنگ لهجه تم شما تنظیم می شوند.

نماد حلقه

اگر "Yes" را برای تنظیم "Use icon" انتخاب کرده باشید ، این گزینه ظاهر می شود. این گزینه به شما امکان می دهد آیکون خود را در یک دایره رنگی قرار دهید. اگر "بله" را برای این تنظیم انتخاب کنید ، گزینه های اضافی برای سفارشی کردن رنگ و مرز دایره به شما ارائه می شود.

رنگ دایره

اگر گزینه "بله" را برای تنظیم "نماد حلقه" انتخاب کرده باشید ، این گزینه ظاهر می شود. در اینجا می توانید رنگی را برای استفاده برای حلقه خود انتخاب کنید. این رنگ مستقل از رنگ نماد قبلی شماست. نماد شما ، به رنگ آن ، در داخل یک دایره با رنگی که در اینجا انتخاب می کنید ظاهر می شود.

مرز دایره را نمایش دهید

اگر گزینه "بله" را برای تنظیم "نماد حلقه" انتخاب کرده باشید ، این گزینه ظاهر می شود. این گزینه به شما امکان می دهد تا یک حاشیه برای حلقه خود فعال کنید. اگر این گزینه انتخاب شود ، یک گزینه اضافی برای انتخاب رنگ حاشیه شما ظاهر می شود.

رنگ مرز دایره

اگر گزینه "بله" را برای تنظیم "Show Circle Border" انتخاب کرده باشید ، این گزینه ظاهر می شود. در اینجا میتوانید رنگ مرز دایره را تنظیم کنید.

قرار دادن تصویر / نماد

در اینجا می توانید مکان تصویر/آیکون خود را انتخاب کنید. می تواند در بالای متن یا در سمت چپ متن ظاهر شود. با قرار دادن تصویر/آیکون در سمت چپ متن خود، تصویر کوچکتر از زمانی است که در بالا قرار داده شود.

از اندازه قلم نماد استفاده کنید

اگر این گزینه فعال باشد ، می توانید سایز دلخواهی را برای نماد نمایش داده شده در بالا یا دو در سمت چپ تصویر خود وارد کنید.

رنگ متن

اگر حاشیه شما روی پس زمینه تیره قرار گرفته باشد ، رنگ متن باید روی "تیره" تنظیم شود. برعکس ، اگر حاشیه شما روی پس زمینه روشن قرار گرفته باشد ، رنگ متن باید روی "روشن" تنظیم شود.

جهت گیری متن

این منوی کشویی به شما امکان می دهد جهت متن خود را موجه ، مرکز یا درست توجیه کنید.

قلم سربرگ

با انتخاب قلم مورد نظر از منوی کشویی می توانید فونت هدر خود را تغییر دهید. Divi با ده ها فونت عالی ارائه می شود که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. شما همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، اریب ، بزرگ و زیر خط تنظیم کنید.

اندازه قلم هدر

در اینجا می توانید اندازه متن سرآیند خود را تنظیم کنید. می توانید نوار لغزنده فاصله را برای افزایش یا کاهش اندازه متن خود بکشید یا می توانید مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سرصفحه متن

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ هدر خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر خود را از انتخابگر رنگ انتخاب کنید.

فاصله حروف سربرگ

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف از متن سرآیند خود را افزایش دهید ، از نوار لغزنده فاصله برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

سر ردیف ارتفاع

ارتفاع ردیف بر فضای بین هر ردیف متن هدر شما تأثیر می گذارد. اگر می خواهید فضای بین هر ردیف را افزایش دهید ، از لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فاصله دلخواه را وارد کنید قسمت ورودی در سمت راست مکان نما. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

فونت بدن

می توانید با انتخاب قلم مورد نظر از منوی کشویی ، قلم بدن خود را تغییر دهید. Divi با ده ها فونت عالی ارائه می شود که توسط Google Fonts طراحی شده اند. به طور پیش فرض ، Divi از قلم Open Sans برای تمام متنهای صفحه شما استفاده می کند. شما همچنین می توانید سبک متن خود را با استفاده از گزینه های پررنگ ، اریب ، بزرگ و زیر خط تنظیم کنید.

اندازه فونت بدن

در اینجا می توانید اندازه متن بدن خود را تنظیم کنید. می توانید نوار لغزنده فاصله را برای افزایش یا کاهش اندازه متن خود بکشید یا می توانید مستقیماً مقدار اندازه متن مورد نظر را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

متن متن بدن

به طور پیش فرض ، تمام رنگ های متن در Divi با رنگ سفید یا خاکستری تیره ظاهر می شوند. اگر می خواهید رنگ متن بدن خود را تغییر دهید ، با استفاده از این گزینه رنگ مورد نظر را از انتخاب کننده رنگ انتخاب کنید.

فاصله نامه های بدن

فاصله حروف بر فاصله بین هر حرف تأثیر می گذارد. اگر می خواهید فضای بین هر حرف از متن بدن خود را افزایش دهید ، از نوار لغزنده محدوده برای تنظیم فضا استفاده کنید یا اندازه فضای مورد نظر خود را در قسمت ورودی در سمت راست لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

ارتفاع خط بدن

ارتفاع خط بر فضای بین هر خط از متن متن تأثیر می گذارد. اگر می خواهید فضای بین هر خط را افزایش دهید ، از نوار لغزنده فاصله برای تنظیم فضا استفاده کنید یا اندازه فضای مورد نظر را در قسمت ورودی در سمت راست نوار لغزنده وارد کنید. قسمتهای ورودی از واحدهای مختلف اندازه گیری پشتیبانی می کنند ، به این معنی که شما می توانید بسته به اندازه خود "px" یا "em" را وارد کنید تا نوع واحد آن تغییر کند.

از مرز استفاده کن

فعال کردن این گزینه حاشیه ای در اطراف ماژول شما ایجاد می کند. این مرز را می توان با استفاده از پارامترهای شرطی زیر سفارشی کرد.

رنگ مرز

این گزینه بر رنگ حاشیه شما تأثیر می گذارد. یک رنگ سفارشی از انتخابگر رنگ انتخاب کنید تا آن را در حاشیه خود اعمال کنید.

عرض مرز

به طور پیش فرض ، مرزها 1 پیکسل عرض دارند. با کشیدن نوار لغزنده محدوده یا وارد کردن مقدار سفارشی در قسمت ورودی در سمت راست نوار لغزنده ، می توانید این مقدار را افزایش دهید. از واحدهای اندازه گیری سفارشی پشتیبانی کنید ، به این معنی که می توانید واحد پیش فرض را از "px" به مورد دیگری مانند em ، vh ، vw و غیره تغییر دهید.

سبک مرزی

حاشیه ها از هشت سبک مختلف پشتیبانی می کنند ، از جمله: جامد ، نقطه ای ، نقطه ای ، دوتایی ، شیار ، خط الراس ، قرار دادن داخل و شروع. سبک مورد نظر خود را از فهرست کشویی انتخاب کنید تا در حاشیه شما اعمال شود.

حداکثر عرض تصویر

اعمال حداکثر مقدار عرض در اینجا عرض تصویر ارائه را محدود می کند. این فقط روی تاریهایی که در حالت نماد نیستند تأثیر می گذارد.

حاشیه سفارشی

حاشیه فضایی است که به قسمت ماژول شما ، بین ماژول و عنصر بعدی در بالا ، پایین یا چپ و راست آن اضافه می شود. می توانید مقادیر حاشیه سفارشی را به هر چهار طرف ماژول اضافه کنید. برای حذف حاشیه سفارشی ، مقدار اضافه شده را از قسمت ورودی حذف کنید. به طور پیش فرض ، این مقادیر بر اساس پیکسل اندازه گیری می شوند ، اما می توانید واحدهای اندازه گیری سفارشی را در قسمت های ورودی وارد کنید.

بالشتک سفارشی

Padding فضای اضافه شده در داخل ماژول شما ، بین لبه ماژول و عناصر داخلی آن است. می توانید مقادیر padding سفارشی را به هر چهار طرف ماژول اضافه کنید. برای حذف حاشیه سفارشی ، مقدار اضافه شده را از قسمت ورودی حذف کنید. به طور پیش فرض ، این مقادیر بر اساس پیکسل اندازه گیری می شوند ، اما می توانید واحدهای اندازه گیری سفارشی را در قسمت های ورودی وارد کنید.

گزینه های پیشرفته ماژول خلاصه

در زبانه Advanced ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی CSS و HTML ، مفید باشند. در اینجا می توانید CSS سفارشی را به عناصر مختلف ماژول اعمال کنید. همچنین می توانید کلاسها و شناسه های CSS سفارشی را به ماژول اعمال کنید ، که می تواند برای سفارشی کردن ماژول در پرونده style.css موضوع کودک شما استفاده شود.

شناسه CSS

یک شناسه CSS اختیاری برای استفاده برای این ماژول وارد کنید. از یک شناسه می توان برای ایجاد یک سبک CSS سفارشی یا پیوند دادن به بخشهای خاصی از صفحه خود استفاده کرد.

کلاس CSS

کلاس های CSS اختیاری را برای استفاده برای این ماژول وارد کنید. یک کلاس CSS می تواند برای ایجاد یک استایل سفارشی CSS استفاده شود. می توانید چندین کلاس را که با یک فاصله از هم جدا شده اند اضافه کنید. این کلاس ها را می توان در شما استفاده کرد تم دیوی فرزند یا در CSS سفارشی که به صفحه یا صفحه خود اضافه می کنید وب سایت با استفاده از گزینه های تم Divi یا تنظیمات صفحه Divi Builder.

CSS سفارشی

CSS سفارشی همچنین می تواند بر روی ماژول و هر یک از عناصر داخلی ماژول اعمال شود. در بخش Custom CSS ، یک قسمت متنی پیدا می کنید که می توانید CSS را مستقیماً به هر عنصر اضافه کنید. ورودی های CSS در این تنظیمات از قبل با برچسب های سبک جاسازی شده اند. بنابراین شما فقط باید قوانین CSS را که با نقطه ویرگول جدا شده اند وارد کنید.

انیمیشن تصویر / آیکون

این جهت انیمیشن بارگذاری تنبل را کنترل می کند.

متن ALT از تصویر

اگر استفاده از نماد را انتخاب نکرده اید ، این تنظیم ظاهر می شود. متن دیگر هرگونه اطلاعات مورد نیاز را در صورت بارگیری نشدن ، نمایش صحیح یا در هر موقعیت دیگری که کاربر نمی تواند تصویر را ببیند ، فراهم می کند. همچنین اجازه می دهد تا تصویر توسط موتورهای جستجو خوانده و شناخته شود.

دید

این گزینه به شما امکان می دهد دستگاه هایی را که ماژول روی آنها نشان داده می شود کنترل کنید. می توانید به صورت جداگانه ماژول خود را در رایانه لوحی ، تلفنهای هوشمند یا دسک تاپ غیرفعال کنید. اگر می خواهید از حالت های مختلف در دستگاه های مختلف استفاده کنید یا اگر می خواهید با حذف عناصر خاصی از صفحه ، طراحی تلفن همراه را ساده کنید ، این کار مفید است.

این برای این آموزش است. امیدواریم نحوه استفاده از ماژول خلاصه در Divi را به شما نشان داده باشیم.