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

تظاهرات

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

عضو تیم divi را پیمایش کنید

آغاز مفهوم

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

فاصله

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

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

سرریزهای

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

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

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

ساختار ستون

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

طرح تقسیم را انتخاب کنید

اندازه

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

  • عرض: 90٪
  • حداکثر عرض: 1580px
پارامتر خط Divi

فاصله

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

  • بالشتک بالایی: 100px
  • بالشتک پایین: 100px
پیکربندی تقسیم خط فاصله

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

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

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

گروه را ملاقات کن

تنظیمات متن H2

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

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

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

دید

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

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

خط

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

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

اندازه

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

  • وزن تقسیم: 20px
  • عرض: 11٪
  • ترازبندی ماژول: سمت چپ
  • ارتفاع: 20px
اندازه ماژول خط divi

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

ساختار ستون

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

پیکربندی ستون Divi

اندازه

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

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

فاصله

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

  • بالشتک چپ: 5٪ (فقط رایانه لوحی و تلفن)
  • بالشتک مناسب: 5٪ (فقط رایانه لوحی و تلفن)
پیکربندی سبک فاصله خط

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

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

پیکربندی خط پارامتر Divi

پیشینه شیب

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

  • رنگ 1: rgba (255,255,255,0)
  • رنگ 2: rgba (0,0,0,0,84)
  • نوع شیب: خطی
  • موقعیت شروع: 25٪
  • موقعیت نهایی: 86٪
  • شیب را بالای تصویر پس زمینه قرار دهید: بله
پیکربندی ستون عقب Divi

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

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

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

عنصر اصلی

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

عرض: 100٪! مهم؛ حاشیه: 50px 0px 50px 0px! مهم؛
ستون div css کد

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

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

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

نام شخص Divi

حذف تصویر

سپس تصویر را حذف کنید. به جای آن از تصویر پس زمینه ستون استفاده می کنیم.

تصویر divi را حذف کنید

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

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

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

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

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

  • سطح عنوان: H3
  • فونت عنوان: Quicksand
  • وزن وزن قلم عنوان: جسورانه
  • عنوان متن رنگ: #ffffff
  • اندازه متن عنوان: 230٪
Divi سفارشی سازی عنوان ماژول

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

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

  • فونت بدن: باز بدون
  • رنگ متن بدن: #ffffff
  • ارتفاع خط بدنه: 2,2 em
Divi سفارشی سازی بدن

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

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

  • موقعیت قلم: Sans Open
  • رنگ متن متن: # edf000
موقعیت Divi

فاصله

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

  • بالشتک بالایی: 70٪
  • بالشتک پایین: 10٪
  • بالشتک چپ: 10٪
  • بالشتک راست: 10٪
فاصله ماژول شخص Divi

4 بار ماژول Person را کپی کنید

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

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

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

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

Row را به چرخ دستی اتومبیل تبدیل کنید

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

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

  • عرض: 180٪
  • حداکثر عرض: 220٪ (میز) ، 100٪ (تبلت و تلفن)
فاصله اصلاح تقسیم خط

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

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

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

بررسی

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

دفتر

عضو تیم divi را پیمایش کنید

آخرین افکار

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