با Divi، حتی وبلاگ ها یک ماژول هستند و "وبلاگ" شما می تواند در هر جایی از شما قرار گیرد وب سایت و در قالب های مختلف شما می توانید ماژول های وبلاگ و نوار کناری را برای ایجاد طرح های کلاسیک وبلاگ ترکیب کنید. 1 ستون، 2 ستون یا 3 ستون را می توان با استفاده از ماژول وبلاگ و نوار کناری ایجاد کرد.

نحوه اضافه کردن ماژول بلاگ به صفحه خود

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

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

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

از یک ماژول وبلاگ با طرح شبکه در یک بخش تخصصی با نوار کناری سمت راست استفاده کنید

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

صفحه نمونه به این شکل است.

توجه داشته باشید که ماژول وبلاگ در یک طرح شبکه در سمت چپ بخش ویژه قرار دارد.

بیایید شروع.

برای اضافه کردن بخش تخصصی با طرح زیر از سازنده بصری استفاده کنید:

از شما خواسته می شود یک ستون یا یک ردیف دو ستون برای سمت چپ اضافه کنید. ستون ردیف 1 را انتخاب کنید.

سپس ماژول وبلاگ را به خط اضافه کنید.

تنظیمات وبلاگ را به شرح زیر به روز کنید:

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

شماره پست ها: 6
بیشتر بدانید دکمه: روشن است
نمایش صفحه: NO
رنگ پس زمینه شبکه: #ffffff

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

طرح بندی: شبکه
استفاده از Dropshadow: ON
نماد پوشش رنگ: #ffffff
Hover Overlay Color: سربرگ rgba (224,153,0,0.51)
پلیس:
هدر اندازه قلم: 21px
هدر رنگ متن: # 333333
فاصله نامه: 1px
ارتفاع ردیف هدر: 1.2 em
مرز: بله
رنگ مرز: # f0f0f0
عرض مرز: 1px
سبک مرزی: جامد

گزینه های پیشرفته

CSS سفارشی (دکمه بیشتر بخوانید):

رنگ: # e09900؛
مشاهده بلوک؛
تراز متن: مرکز؛
حاشیه بالا: 10px؛
مرز: 1px جامد #ccc؛
padding: 5px؛
تبدیل متن: بزرگ کردن؛
فاصله نامه: 1px؛

دکمه پیشرفته سفارشی CSS برای دکمه Read More نمای سفارشی ایجاد می کند که با طراحی مطابقت دارد.

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

این همه!

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

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

شماره مورد (تعداد موارد)

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

دسته هایی را که می خواهید در فید پست قرار دهید انتخاب کنید. همه دسته های پیام ایجاد شده در اینجا برای انتخاب / لغو انتخاب در شما ظاهر می شوند.

دسته بندی ها گنجانده شده است

دسته هایی را که می خواهید در فید گنجانید انتخاب کنید.

فرمت متا تاریخ

قالب تاریخی را که می خواهید در پست های وبلاگ خود نمایش دهید اینجا تنظیم کنید. طرح پیش فرض فرمت M j، Y است (6 ژانویه 2014) به اینجا مراجعه کنید کدکس وردپرس در قالب های تاریخ برای گزینه های بیشتر.

محتویات

نمایش محتوای کامل باعث کوتاه شدن پست های شما در صفحه فهرست نمی شود. Show Snippet فقط متن قطعه شما را نمایش می دهد.

شماره افست

تعداد پیام هایی را که می خواهید جبران کنید انتخاب کنید. برای مثال اگر با 3 پست جبران کنید ، سه پست اول در خبرمایه وبلاگ شما نمایش داده نمی شود.

نمایش تصویر برجسته

این گزینه به شما اجازه می دهد تا انتخاب کنید که آیا می خواهید عکسهای کوچک را در ماژول وبلاگ خود مشاهده کنید یا خیر.

دکمه بیشتر را بخوانید

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

نمایش نویسنده

انتخاب کنید آیا می خواهید نویسنده هر پست وبلاگ را در جعبه متا post در زیر عنوان پست نمایش دهید یا خیر.

نمایش تاریخ

انتخاب کنید آیا می خواهید تاریخی را که هر مقاله در کادر مورد متا در زیر عنوان پیام ایجاد شده است نمایش دهید یا نه.

نمایش دسته ها

انتخاب کنید که آیا دسته بندی های پست را در منطقه متا پست زیر عنوان انتشار نمایش دهید یا خیر.

نمایش تعداد نظرات

انتخاب کنید که آیا می خواهید تعداد نظرات در کادر متا پست زیر عنوان پست نمایش داده شود یا خیر.

نمایش صفحه بندی

انتخاب کنید آیا می خواهید صفحه بندی این خبر را نمایش دهید یا خیر. برای فعال کردن صفحه بندی شماره گذاری شده باید پلاگین را نصب کنید WP Page Navi .

برچسب مدیریت

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

گزینه های طراحی وبلاگ

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

وضع

می توانید پست های وبلاگ خود را در یک شبکه یا یک طرح کامل نمایش دهید.

تصویر سرراست

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

رنگ نماد همپوشانی

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

پوشش پوشش رنگ

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

پیمایشگر آیکون

در اینجا می توانید یک نماد سفارشی برای پوشش را تعیین کنید.

رنگ متن

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

قلم سربرگ

با انتخاب قلم مورد نظر از منوی کشویی می توانید فونت هدر خود را تغییر دهید. 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" را وارد کنید تا نوع واحد آن تغییر کند.

قلم متاس

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

اندازه قلم متاس

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

رنگ متن برای متا

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

فاصله حروف متا

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

ارتفاع متا خط

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

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

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

رنگ مرز

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

عرض مرز

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

سبک مرزی

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

گزینه های پیشرفته وبلاگ

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

شناسه CSS

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

کلاس CSS

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

CSS سفارشی

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

دید

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

این برای این آموزش است.