Divi: نحوه ایجاد صفحه وبلاگ با ماژول بلاگ

آیا می خواهید یک صفحه وبلاگ با ماژول وبلاگ ایجاد کنید؟ de دیوی؟

معمولاً هر بسته طرح بندی Divi منتشر می شود تم زیبا یک طرح وبلاگ ارائه می دهد که به شما کمک می کند ایجاد کنید وبلاگ شما به اندازه کافی سریع. اما آیا تا به حال خواسته اید ببینید که چگونه یکی از این صفحات وبلاگ را خودتان ایجاد کنید؟ 

در این مقاله نحوه ایجاد یک صفحه وبلاگ با ماژول Divi's Blog را خواهیم دید. ما هر تنظیمات را مرحله به مرحله مرور خواهیم کرد.

بیایید شروع کنیم!

بررسی

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

یک صفحه وبلاگ جدید ایجاد کنید

ایجاد یک صفحه جدید

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

به صفحه عنوانی بدهید که برای شما منطقی باشد.

• عنوان صفحه: وبلاگ در Divi

به Divi Builder بروید

روی دکمه بنفش در مرکز صفحه کلیک کنید: از Divi ساز استفاده کنید .

یک بخش برای عنوان صفحه وبلاگ اضافه کنید

بخش را سفارشی کنید

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

حرکت به زمینه و رنگ را به #f9f3fd تغییر دهید. به عنوان برچسب مدیر وبلاگ را وارد کنید. تنظیمات بخش را ببندید.

• پس زمینه: #f9f3fd
• برچسب مدیریت: وبلاگ

عنوان صفحه وبلاگ را ایجاد کنید

سپس یک را اضافه می کنیم خط برای عنوان نماد سبز را انتخاب کنید و ردیف ستون را انتخاب کنید.

سپس a را اضافه کنید ماژول متن در خط

ماژول متن عنوان وبلاگ را سفارشی کنید

آنها را باز کنید تنظیمات ماژول متن و H1 را انتخاب کنید. عنوان وبلاگ ما را اضافه کنید.

• قلم: عنوان 1
• متن: وبلاگ ما

سپس بهبرگه سبک و تراز را روی Centered قرار دهید. برای متن عنوان H1، Cormorant Infant را برای فونت انتخاب کنید و آن را پررنگ کنید.

• تراز متن: در مرکز
• متن سربرگ: H1
• قلم سربرگ: باکلان نوزاد
• هدر نور نرم: متن پررنگ

Color را روی #442854، Size را روی 130 پیکسل و ارتفاع خط را روی 0,8em قرار دهید.

• رنگ: # 442854
• اندازه متن رومیزی: 130 پیکسل
• ارتفاع خط: 0,8 میلی متر

ایجاد آخرین مقاله و بخش فراخوان برای اقدام

بخش ما شامل آخرین مقاله و یک ایمیل انتخابی است. 

یک خط جدید اضافه کنید زیر ردیف اول ما و طرح ستون را 2/3 سمت چپ و 1/3 سمت راست انتخاب کنید.

آنها را باز کنید پارامترهای خط با کلیک بر روی نماد چرخ دنده

انتخاب کنیدبرگه سبک، به فاصله و 0px را به حاشیه داخلی پایین اضافه کنید. تنظیمات را ببندید.

• حاشیه داخلی پایین: 0 پیکسل

ماژول پست وبلاگ ویژه را اضافه و سفارشی کنید

سپس یک را اضافه می کنیم ماژول وبلاگ . این آخرین مقاله ما خواهد بود. روی نماد خاکستری پلاس در ستون سمت چپ ردیف جدید کلیک کنید و ماژول وبلاگ را اضافه کنید.

محتویات

تحت محتویات ، برای تعداد پست ها عدد 1 را وارد کنید.

• تعداد موقعیت ها: 1

عناصر

حرکت به عناصر و علامت نویسنده و صفحه بندی را بردارید. بقیه را در پیش‌فرض‌شان می‌گذاریم.

• نمایش نویسنده: خیر
• نمایش صفحه بندی: خیر

وضع

سپس را انتخاب کنید برگه سبک و Full Screen را برای طرح بندی انتخاب کنید و پوشش تصویر برجسته را خاموش کنید.

• مدل: تمام صفحه
• پوشش تصویر انتخاب شده: غیرفعال است

متن عنوان

حرکت به متن عنوان . H2 را انتخاب کرده و Cormoran Infant را انتخاب کنید. Bold را انتخاب کرده و رنگ را به #442854 تغییر دهید.

• درج عنوان سه: H2
• عنوان قلم: Cormorant Infant
• عنوان نور ملایم: متن پررنگ
• رنگ متن عنوان: #442854

اندازه فونت را روی 30 پیکسل قرار دهید. ارتفاع خط را به 1.1em تغییر دهید.

• اندازه: 30 پیکسل برای دسکتاپ، 20 پیکسل برای تبلت، 18 پیکسل برای گوشی
• ارتفاع خط عنوان: 1,1 em

متن متن

سپس به پایین اسکرول کنید متن بدنه . Cabin را برای فونت انتخاب کنید، رنگ را به #442854 تغییر دهید و ارتفاع خط را به 1,8em تغییر دهید.

• سپاه پلیس: کابین
• رنگ متن: #442854
• ارتفاع خط بدن: 1,8 em

فراداده متنی

سپس به پایین اسکرول کنید فراداده متنی . پارامترها را به صورت زیر تنظیم کنید:

• فونت فراداده: Cormorant Infant
• نور کم نور متادیتا: معمولی
• سبک کپی فراداده: وجود ندارد
• رنگ متن فراداده: #442854
• اندازه متن فراداده: دسکتاپ 16 پیکسل، تبلت 15 پیکسل، تلفن 14 پیکسل
• ارتفاع ردیف فراداده: 1,8 em

فاصله

سپس به پایین اسکرول کنید فاصله و حاشیه بالایی را به 0vw تغییر دهید.

• حاشیه بالا: 0vw

جعبه سایه

در نهایت، به پایین بروید جعبه سایه و آن را غیرفعال کنید.

• Shadow Box: غیر فعال کنید

اضافه کردن و سفارشی کردن ماژول متن ایمیل وبلاگ

حالا به ستون سمت راست می رویم و Call to Action را از طریق ایمیل ایجاد کنید . ابتدا یک ماژول Text در ستون سمت راست اضافه کنید. روی نماد خاکستری پلاس کلیک کنید و متن را جستجو کنید.

محتویات

عنوان 2 را انتخاب کنید و متن Subscribe to our offers را وارد کنید.

• فونت: عنوان 2
• متن: در پیشنهادات ما مشترک شوید

متن سرصفحه

برای متن از عنوان، Center Alignment را انتخاب کنید، H2 را انتخاب کنید، Cormorant Infant را انتخاب کنید و آن را روی Bold قرار دهید.

• تراز متن: در مرکز
• متن سربرگ: H2
• قلم سربرگ: باکلان نوزاد
• هدر نور ملایم: پررنگ

رنگ را به #442854، اندازه را به 32px و ارتفاع خط را به 0,95em تغییر دهید.

• رنگ متن هدر: #442854
• اندازه متن هدر: 32 پیکسل
• ارتفاع خط سربرگ: 0,95 em

فاصله

در نهایت، به پایین بروید فاصله و 10 پیکسل به حاشیه پایین اضافه کنید. تنظیمات ماژول متن را ببندید.

• حاشیه پایین: 10 پیکسل

اضافه کردن و سفارشی کردن ماژول Email Optin وبلاگ

سپس ما می رویم ایجاد کنید فرم پست الکترونیک . یک ماژول Email Optin در زیر ماژول Text در ستون سمت راست اضافه کنید.

محتویات

ابتدا عنوان و متن متن را حذف کنید.

• عنوان: هیچ
• متن متن: هیچ

حرکت به حساب کاربری ایمیل و ارائه دهنده خدمات خود را اضافه کنید.

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

• استفاده از رنگ پس زمینه: خیر

زمینه ها

برو داخل برگه سبک و رنگ زمینه فیلدها را به rgba(255,255,255,0) و رنگ متن را به #442854 تغییر دهید.

• زمینه های رنگ پس زمینه: rgba (255,255,255,0)
• فیلدهای رنگ متن: #442854

به پایین بروید گزینه های فونت و فونت را به کابین، اندازه را به 16 پیکسل و ارتفاع خط را به 1,8 میلی متر تغییر دهید.

• فیلدهای قلم: کابین
• فیلدهای اندازه متن: 16 پیکسل
• ارتفاع ردیف زمین: 1,8 em

بعد، گوشه گرد فیلدها را روی 32 پیکسل، عرض حاشیه را روی 2 پیکسل، و رنگ حاشیه را به #442854 تغییر دهید.

• کنترل‌های مستطیل گرد: 32 پیکسل
• فیلدهای عرض حاشیه: 2 پیکسل
• فیلدهای رنگ حاشیه: #442854

دکمه

به دکمه بروید و انتخاب کنید از استایل های سفارشی برای Button استفاده کنید . اندازه را به 18ps، رنگ دکمه را به سفید، و رنگ پس زمینه دکمه را به #442854 تغییر دهید.

• استفاده از سبک های سفارشی برای دکمه: بله
• اندازه متن دکمه: 18 پیکسل
• رنگ متن دکمه: #ffffff
• دکمه پس زمینه: #442854

شعاع حاشیه را به 50 پیکسل، فونت را به Cormorant Infant تغییر دهید و وزن را پررنگ کنید.

• دکمه Border Radius: 50px
• دکمه فونت: نوزاد باکلان
• دکمه Soft Light: متن پررنگ

در نهایت، اجازه دهید چند حاشیه اضافه کنیم. 20 پیکسل برای حاشیه بالا، 12 پیکسل برای لایه بالا و پایین و 32 پیکسل برای لایه سمت چپ و راست وارد کنید. تنظیمات ایمیل Optin را ببندید.

• دکمه حاشیه بالا: 20 پیکسل
• دکمه بالشتک بالا و پایین: 12 پیکسل
• دکمه سمت چپ و راست: 32 پیکسل

اضافه کردن خط جدید برای لیست پست وبلاگ

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

تنظیمات خط

قابل اعتماد و متخصص برگه سبک و 0px را به حاشیه داخلی Vertex اضافه کنید. تنظیمات خط را ببندید.

• راس حاشیه داخلی: 0 پیکسل

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

a اضافه کنید ماژول وبلاگ با کلیک کردن روی نماد خاکستری بعلاوه و کلیک کردن روی وبلاگ، به خط جدید خود بروید.

سبک دادن به فید پست وبلاگ

بیایید فید صفحه وبلاگ را تغییر دهیم.

محتوای فید وبلاگ

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

یک عدد کمتر، مانند 3، به ما اجازه می دهد تا روی پست های اخیر تمرکز کنیم و اندازه صفحه را کاهش دهیم. اگر اغلب پست نمی گذارید یا می خواهید صفحه را تمیزتر نگه دارید، این انتخاب خوبی است. اگر می خواهید روی جریان وبلاگ تمرکز کنید، نمایش پست های بیشتر، مانند 6-9، ایده خوبی است.

• تعداد پست: 3

برای افست عدد 1 را وارد کنید. این به Divi می‌گوید که با پست وبلاگ دوم شروع کند، که ما را از نمایش همان مقاله‌ای که قبلاً در پست وبلاگ نشان داده شده در بالای آن نشان داده شده بود، باز می‌دارد.

• شماره پست افست: 1

عناصر

حرکت به عناصر . تصویر ویژه، تاریخ، قطعه دسته‌ها و صفحه‌بندی را فعال کنید. بقیه رو غیر فعال کن

• نمایش تصویر ویژه: بله
• داده ها: بله
• دسته بندی ها: بله
• گزیده: بله
• صفحه بندی: بله

زمینه

دسترسی به زمینه و رنگ پس زمینه کاشی شبکه ای را روی rgba (255,255,255,0) قرار دهید

• رنگ پس‌زمینه کاشی شبکه‌ای: rgba (255,255,255,0)

چیدمان و روکش

سپس به برگه سبک . تنظیم چیدمان را روی Grid بگذارید. ما طرح تمام عرض را برای پست وبلاگی که در بالای این پست نشان داده شده است انتخاب کردیم. ما از طرح بندی شبکه ای برای این فید وبلاگ استفاده خواهیم کرد که گزینه پیش فرض است. پوشش تصویر برجسته را غیرفعال کنید.

• چیدمان: شبکه
• پوشش تصویر انتخاب شده: غیرفعال است

متن عنوان

برای متن عنوان ، H2 را انتخاب کنید. Cormorant Infant را انتخاب کنید، آن را روی Bold قرار دهید و #442854 را برای رنگ وارد کنید.

• درج عنوان سه: H2
• عنوان قلم: Cormorant Infant
• عنوان نور ملایم: متن پررنگ
• رنگ متن عنوان: #442854

20 پیکسل را برای اندازه متن انتخاب کنید. ارتفاع خط را روی 1,1 em قرار دهید.

• اندازه متن عنوان: رومیزی 20 پیکسل
• ارتفاع خط عنوان: 1,1 em

متن متن

حرکت به متن بدنه و کابین را انتخاب کنید. رنگ را روی #442854 قرار دهید.

• سپاه پلیس: کابین
• رنگ متن: #442854

ارتفاع خط را روی 1,8 em قرار دهید.

• ارتفاع خط: 1,8 em

فراداده متنی

حرکت به فراداده متنی و Cormorant Infant را انتخاب کنید. وزن را روی حالت عادی، استایل را روی none و رنگ را روی #442854 تنظیم کنید.

• فونت فراداده: Cormorant Infant
• نور کم نور متادیتا: معمولی
• سبک کپی فراداده: وجود ندارد
• رنگ متن فراداده: #442854

• اندازه متن متادیتا: دسکتاپ 16 پیکسل، تبلت 15 پیکسل، تلفن 14 پیکسل
• ارتفاع ردیف فراداده: 1,8 em

متن صفحه بندی

حالا بریم سراغ صفحه گذاری . برای فونت Cormorant Infant را انتخاب کنید، Bold را انتخاب کنید و رنگ را به #442854 تغییر دهید.

• صفحه نمایش فونت: نوزاد باکلان
• نمایش نور نرم صفحه بندی: پررنگ
• رنگ متن نمایش صفحه‌بندی: #442854

فاصله

سپس به سراغ فاصله گذاری و حاشیه 0vw را در بالا اضافه کنید. این مانع از همپوشانی ماژول ما با ماژول قبلی می شود.

• حاشیه بالا: 0vw

مرز

حرکت به مرز و 0px را برای هر چهار گوشه وارد کنید. این شکل مربع ما را برای نقشه به ما می دهد.

• طرح شبکه مستطیل گرد: 0 پیکسل

جعبه سایه

در نهایت، به پایین بروید سایه جعبه و آن را غیرفعال کنید. تنظیمات وبلاگ را ببندید. بخش وبلاگ کامل شد

• جعبه سایه: هیچ

یک بخش جدید "Call to Action" را به صفحه وبلاگ اضافه کنید

سپس ما می رویم بخش "Call to Action" را ایجاد کنید از صفحه این بخش شامل یک تصویر پس زمینه تمام صفحه اختلاف منظر، تماس و پیوندهای زیر اجتماعی

یک بخش جدید اضافه کنید

روی نماد آبی کلیک کنید تا یک بخش معمولی جدید اضافه کنید در پایین صفحه.

• بخش: معمولی

بخش Call to Action را استایل دهید

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

زمینه

حرکت به زمینه و تب Image را انتخاب کنید. روی نماد خاکستری با عنوان Background Image کلیک کنید.

یک تصویر تمام صفحه از کتابخانه رسانه خود انتخاب کنید. Use parallax effect را انتخاب کنید، سپس CSS را برای متد اختلاف منظر انتخاب کنید.

• تصویر پس زمینه
• استفاده از افکت اختلاف منظر: بله
• روش اختلاف منظر: CSS

به پایین به Admin Label بروید و "Footer" را در فیلد وارد کنید. این به شما کمک می کند تا بخش ها را پیگیری کنید.

• تگ مدیریت: پاورقی

سپس به برگه سبک.

• حاشیه داخلی: 10vw (بالا و پایین)

یک خط جدید اضافه کنید

روی نماد سبز سبز کلیک کنید و یک ردیف به یک ستون اضافه کنید برای محتوای ما

اندازه

آنها را باز کنید پارامترهای خط و به تب Style بروید.

• حداکثر عرض: 320 پیکسل

ماژول متن عنوان

بخش Call to Action ما با عنوانی ارائه شده است. برای ایجاد این، یک ماژول متنی اضافه کنید در خط

سفارشی کردن متن عنوان

عنوان خود را اضافه کنید و فونت را به عنوان 3 تغییر دهید.

• فونت: عنوان 3
• متن: همه چیز درباره دیوی

متن سرصفحه

قابل اعتماد و متخصص برگه سبک و به متن زیرنویس . مرکز را برای تراز انتخاب کنید، H3 را انتخاب کنید، Cormorant Infant را انتخاب کنید، آن را روی Bold قرار دهید و رنگ سفید را انتخاب کنید.

• تراز متن: مرکز
• متن سربرگ: H3
• قلم سربرگ: باکلان نوزاد
• هدر نور ملایم: پررنگ
• رنگ متن سرصفحه: #ffffff

• اندازه متن هدر: 42 پیکسل برای دسکتاپ، 20 پیکسل برای تبلت، 16 پیکسل برای تلفن
• ارتفاع خط سربرگ: 1,1 em

فاصله

در نهایت، به پایین بروید فاصله و 10 پیکسل به حاشیه پایین اضافه کنید. تنظیمات ماژول را ببندید.

• حاشیه پایین: 10 پیکسل

ماژول متن برای آدرس

یک ماژول متن دیگر اضافه کنید برای آدرس فیزیکی شما

ماژول متن آدرس فیزیکی را استایل کنید

متن آدرس

آدرس خود را به عنوان متن پاراگراف اضافه کنید.

• سبک: پاراگراف
• متن: آدرس شما

متن پاراگراف

سپس وارد قسمت Text شوید برگه سبک و Cormorant Infant را نیمه پررنگ انتخاب کنید و روی سفید قرار دهید.

• قلم: Cormorant Infant
• متن نور ملایم: نیمه پررنگ
• رنگ متن متن: #ffffff

• اندازه متن: 28 پیکسل برای دسکتاپ، 20 پیکسل برای رایانه لوحی، 16 پیکسل برای تلفن
• ارتفاع خط متن: 1,2 em

اضافه کردن ماژول ما را در شبکه های اجتماعی دنبال کنید

آخرین ماژول ما ماژول است ما را در شبکه های اجتماعی دنبال کنید . آن را به انتهای خط اضافه کنید.

Stylize ما را در ماژول رسانه های اجتماعی دنبال کنید

ما با شروع خواهیم کرد برگه سبک این بار. Center for Module Alignment را انتخاب کنید و رنگ نماد را به #442854 تغییر دهید.

• تراز ماژول: مرکز
• رنگ نماد: #442854

حرکت به بندure و 23 پیکسل برای گوشه های گرد اضافه کنید.

• مستطیل گرد: 32 پیکسل

شبکه های اجتماعی خود را اضافه و سفارشی کنید

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

آنها را باز کنید تنظیمات برای هر یک از شبکه های اجتماعی شما ، شبکه را انتخاب کنید و پیوند را به حساب خود اضافه کنید. رنگ پس زمینه را روی #f9f3fd قرار دهید. تنظیمات زیر ماژول را ببندید.

• شبکه اجتماعی: انتخاب شما
• آدرس لینک حساب: پیوند شما
• رنگ پس زمینه: #f9f3fd

صفحه وبلاگ را ذخیره کنید و از سازنده بصری خارج شوید

Enfin، صفحه را ذخیره کنید در گوشه سمت راست پایین و انتخاب کنید از Visual Builder خارج شوید در بالای صفحه. شما آماده دیدن کار خود هستید.

پیش نمایش صفحه وبلاگ

در اینجا نتایج ما است.

دانلود DIVI در حال حاضر!!!

نتیجه

بنابراین ! این نگاه ما به نحوه ایجاد یک صفحه وبلاگ با Divi است. 

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

اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...