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

نمای کلی نتایج

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

1. ایجاد صفحه شغل

یک صفحه جدید اضافه کنید و به ویژوال سازنده تغییر دهید

با ایجاد یک صفحه جدید شروع کنید ، به صفحه خود عنوان بدهید و به Visual Builder بروید.

2. شروع به ایجاد صفحه مشاغل در قسمت جلویی کنید

بخش اول را اضافه کنید

پیشینه شیب

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

• رنگ 1: # ff6600
• رنگ 2: # fbff30
• جهت شیب: 126deg

تقسیم پایین

همچنین از یک تقسیم کننده قسمت پایین استفاده کنید.

• سبک جدایی: در لیست جستجو کنید
• ارتفاع تقسیم کننده: 8vw
• تکرار افقی تقسیم کننده: 3x
• ترتیب تقسیم کننده ها: تحت محتویات از بخش

فاصله

پارامترهای بخش را با اضافه کردن بالشتک پایین تکمیل کنید.

• بالشتک پایین: 200px

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

ساختار ستون

با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:

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

محتوای H1 را اضافه کنید

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

تنظیمات متن H1

به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن H1 را تغییر دهید:

• فونت عنوان: مونتسرات
• وزن فونت عنوان: سنگین
• رنگ متن سربرگ: #ffffff
• اندازه متن سربرگ: 8rem (دسک تاپ) ، 4rem (تبلت) ، 2.5rem (تلفن)

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

دید

درست در زیر ماژول متن ، یک ماژول جدا کننده اضافه کنید. مطمئن شوید که گزینه "Show Separator" فعال باشد.

• جداکننده را نشان دهید: بله

خط

سپس رنگ خط ماژول را تغییر دهید.

• رنگ خط: #ffffff

اندازه

و با تغییر پارامترهای ابعاد ، پارامترهای ماژول را تکمیل کنید.

• وزن تقسیم: 8px
• عرض: 30٪

بخش شماره 2 را اضافه کنید

بخش منظم دیگری را به صفحه اضافه کنید.

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

ساختار ستون

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

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

محتوای H2 را اضافه کنید

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

تنظیمات متن H2

پارامترهای متن H2 ماژول را به شرح زیر تغییر دهید:

• عنوان 2 پلیس: مونتسرات
• مورد 2 وزن خط مشی: سنگین
• رنگ متن مورد 2: # ffa500
• عنوان 2 اندازه متن: 2.3rem

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

دید

ماژول بعدی که در این ستون نیاز داریم ، ماژول جداسازی است. مطمئن شوید که گزینه "Show Separator" فعال باشد.

• جداکننده را نشان دهید: بله

خط

سپس رنگ خط ماژول را تغییر دهید.

• رنگ خط: # ffa500

اندازه

و با تغییر وزن تقسیم کننده و حداکثر عرض در پارامترهای ابعاد ، پارامترهای ماژول را تکمیل کنید.

• وزن تقسیم: 6px
• حداکثر عرض: 80 px

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

محتویات

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

• نوع پیام: پیام ها
• شامل دسته بندی ها: بازار یابی (Marketing)
• طول عصاره: 150

عناصر

در پارامترهای عناصر ، تنها دو گزینه ای که ما فعال می کنیم موارد زیر است:

• نمایش دکمه بیشتر: بله
• گزیده ای از نمایش: بله

وضع

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

• چیدمان: عرض کامل

تنظیمات متن عنوان

همچنین تنظیمات متن عنوان را تغییر دهید.

• سطح عنوان: H3
• فونت عنوان: مونتسرات
• اندازه متن عنوان: 1.5rem

تنظیمات متن بدن

سپس تنظیمات متن بدن را تغییر دهید.

• پلیس بدن: جاده رالی
• اندازه متن: 1.1rem
• ارتفاع خط بدن: 2.1em

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

با تنظیمات متن اطلاعات بیشتری کسب کنید.

• بیشتر بخوانید پلیس: Montserrat
• بیشتر بدانید سبک قلم: سرمایه
• بیشتر بدانید رنگ متن: #ffffff
• بیشتر بخوانید اندازه متن: 1rem

فاصله

حاشیه ها و مقادیر padding را به تنظیمات فاصله اضافه کنید.

• حاشیه سمت چپ: 100px (دسک تاپ) ، 50 پیکسل (رایانه لوحی) ، 0px (تلفن)
• بالشتک بالایی: 0px
• بالشتک پایین: 0px

دکمه CSS بیشتر بیاموزید

و تنظیمات ماژول را با اضافه کردن دکمه های بازی CSS در برگه پیشرفته کامل کنید.

max-width: 200px;text-align: center;padding: 20px;margin-top: 40px;border-radius: 100px;background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

هر بار که لازم باشد خط را کلون کنید

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

محتوای ماژول متن را ویرایش کنید

حتماً محتوای H2 هر خط تکراری را ویرایش کنید.

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

با دسته بندی های ماژول بلاگ.

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

برای سبک کردن ایستگاه های کاری فردی باز ، کد CSS را وارد کنید

برای اتمام طراحی ، ماژول کد را به آخرین خط صفحه خود اضافه می کنیم و خطوط زیر کد CSS را وارد می کنیم:

<style>.et_pb_posts .et_pb_post {box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);padding: 50px;border-radius: 20px;background-color: #fff;}</style>

3. طراحی صفحه را ذخیره کرده و نتیجه را نمایش دهید

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

نتیجه نهایی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

آخرین افکار

در این آموزش، ما به شما نشان داده‌ایم که چگونه با استفاده از ماژول وبلاگ، این مقالات پویا و باز را در صفحه مشاغل خود به نمایش بگذارید. DIVI. با خیال راحت در بخش نظرات زیر نظر بدهید.