رفتن به محتوای اصلی

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

Divi: ساده ترین تم وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

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

تظاهرات

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

عضو تیم 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" فعال باشد.

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

  • جداکننده را نشان دهید: بله
نمایش جداکننده 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

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

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

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

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

عنصر اصلی

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

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

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

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

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

نام شخص 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 ، می توانید کل ماژول را چهار بار کلون کنید.

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

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

به راحتی فروشگاه آنلاین خود را ایجاد کنید

دانلود رایگان WooCommerce، بهترین پلاگین تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتال خود را در وردپرس. [توصیه میشود]

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

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

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

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

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

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

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

بررسی

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

دفتر

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

آخرین افکار

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

این مقاله حاوی نظرات 0

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

این سایت از Akismet برای کاهش ناخواسته استفاده می کند. در مورد نحوه استفاده از اطلاعات نظرتان بیشتر بدانید.

بازگشت به بالا
0 سهام
سهم
صدای جیر جیر
ثبات