Divi: چگونه یک بخش اعضای تیم را به عنوان چرخ فلک ایجاد کنیم

آیا دوست دارید اعضای تیم شما در قالب یک چرخ فلک ارائه شوند DIVI ?

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

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

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

برویم.

بررسی

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

کامپیوتر رومیزی

نسخه موبایل

بیایید طراحی را با Divi شروع کنیم

دفعات بازدید: Divi: نحوه نمایش محتوا با شناور روی قسمت تقسیم کننده

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

جادوگران داخلی

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

• پد (بالا و پایین): 200 پیکسل (رومیزی)، 100 پیکسل (تبلت و تلفن)

دید

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

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

خط شماره 1 را اضافه کنید

ساختار ستون

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

عرض

بدون افزودن هیچ ماژول، تنظیمات خط را باز کنید، به برگه بروید طرح و عرض و حداکثر عرض را در تنظیمات اندازه تغییر دهید.

• عرض: 90%
• حداکثر عرض: 1 پیکسل

فاصله

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

• بالشتک (بالا و پایین): 100 پیکسل

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

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

وقت آن است که ماژول ها را اضافه کنید، با اولین ماژول Text شروع کنید. الف را وارد کنید محتویات سایز H2 به انتخاب شما

تنظیمات متن H2

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

• فونت: Quicksand
• وزن قلم: نیمه پررنگ
• رنگ متن: #000000
• اندازه متن: 70 پیکسل (رومیزی)، 50 پیکسل (تبلت)، 40 پیکسل (تلفن)

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

دید

سپس یک ماژول اضافه کنید تقسیم کردن. مطمئن شوید که گزینه "Show Divider" فعال است.

• نمایش تقسیم کننده: بله

خط

سپس تغییراتی در تنظیمات خط ایجاد کنید.

• رنگ خط: #edf000
• سبک: جامد
• موقعیت خط: بالا

اندازه گیری

و پارامترهای ماژول را با تغییر پارامترهای اندازه بر این اساس تکمیل کنید:

• وزن تقسیم کننده: 20 پیکسل
• عرض: 11%
• ماژول تراز: سمت چپ
• ارتفاع: 20px

خط 2 را اضافه کنید

ساختار ستون

ردیف بعدی! از ساختار ستون زیر استفاده کنید:

اندازه گیری

بدون افزودن هیچ ماژولی ، تنظیمات ردیف را باز کرده و تنظیمات اندازه را به شرح زیر تغییر دهید:

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 2
• عرض: 100%
• حداکثر عرض: 100٪

فاصله (فقط تبلت و تلفن)

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

• پد (چپ و راست): 5% (فقط تبلت و تلفن)

پارامترهای ستون (5 برابر)

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

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

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

• توقف های گرادیان (25%): rgba (255,255,255,0)
• توقف های گرادیان (86%): rgba (0,0,0,0.84)
• نوع: خطی
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

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

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

• اندازه تصویر پس زمینه: جلد
• موقعیت تصویر پس زمینه: مرکز

CSS سفارشی اضافه شده (فقط تبلت)

تنظیمات ستون را با افزودن CSS سفارشی به عنصر اصلی تکمیل کنید (برای مشاهده قرص فقط) از هر ستون. 

این خطوط کد CSS به ما کمک می کند تا به جای اینکه دو ستون در کنار یکدیگر قرار گیرند، ستون ها را یکی زیر دیگری روی تبلت قرار دهیم.

width: 100% !important;
margin: 50px 0px 50px 0px !important;

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

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

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

اولین ماژول Person را به ستون 1 اضافه کنید و از آن استفاده کنید محتویات د votre choix.

حذف تصویر

سپس تصویر را حذف کنید. در عوض، از تصویر پس‌زمینه ستون استفاده می‌کنیم.

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

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

• اندازه تصویر پس زمینه: جلد
• موقعیت تصویر پس زمینه: مرکز

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

به تب تغییر دهید طرح ماژول و تنظیمات متن عنوان را به صورت زیر تغییر دهید:

• سطح عنوان عنوان: H3
• قلم عنوان: Quicksand
• وزن قلم: پررنگ
• رنگ متن عنوان: #ffffff
• اندازه متن عنوان: 230%

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

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

• فونت بدنه: Open Sans
• رنگ متن: #ffffff
• ارتفاع خط: 2,2 em

تنظیمات متن پست اعضای تیم

سپس، تغییراتی را در تنظیمات متنی موقعیتی که عضو تیم در اختیار دارد، ایجاد کنید.

• فونت موقعیت: بدون باز کردن
• رنگ متن موقعیت: #edf000

فاصله

و تنظیمات ماژول را با افزودن مقادیر padding سفارشی به تنظیمات فاصله کامل کنید.

• بالشتک: 70% (بالا)، 10% (پایین، چپ و راست)

ماژول "Person" را چهار بار کلون کنید

پس از اتمام ماژول Person ، می توانید کل ماژول را چهار بار کلون کنید.

موارد تکراری را در ستون های باقی مانده قرار دهید

ماژول های تکراری را در چهار ستون باقی مانده از ردیف قرار دهید. 

همچنین مطمئن شوید که آن را تغییر دهید محتویات.

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

همچنین ببینید: Divi: نحوه ایجاد یک شبکه ستون سیال در شناور

اندازه ردیف شماره 2 را تغییر دهید

حال، برای تبدیل این خط به چرخ فلک پیمایش خودکار، باید تنظیمات خط را دوباره باز کنیم و عرض و حداکثر عرض را در تنظیمات اندازه تغییر دهیم.

• عرض: 180%
• حداکثر عرض: 220٪ (رومیزی)، 100٪ (تبلت و تلفن)

حرکت افقی را به خط 2 اضافه کنید

تنظیمات خط را با افزودن حرکت افقی به تنظیمات افکت اسکرول در برگه کامل کنید فناوری تحت گزینه جلوه های پیمایش کنید و شما تمام شده اید!

• فعال کردن حرکت افقی: بله
• شروع افست:
  • رومیزی: 2,5
  • تبلت و تلفن: 0
• افست متوسط: 0 (تا 40%)
• افست پایانی:
  • رومیزی: -25 (تا 62%)
  • تبلت و تلفن: 0
• محرک اثر حرکت: وسط عنصر

بررسی

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

کامپیوتر رومیزی

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

نمای موبایل

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

نتیجه

در این مقاله به شما نشان داده‌ایم که چگونه با جلوه‌های اسکرول داخلی خلاق شوید DIVI. 

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

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی باشد. DIVI. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

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

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...