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

نحوه ایجاد یک انتقال بدون درز با جلوه های پیمایش بر روی دیوی

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

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

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

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

در این آموزش ، ما به شما نشان خواهیم داد که چگونه با جلوه های پیمایشی Divi خلاقیت ایجاد کرده و یک انتقال خدمات یکپارچه ایجاد کنید. همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید!

برویم.

نتیجه احتمالی

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

انتقال بین بخش divi

1 ، ساختار عناصر را از نو بسازید

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

فاصله

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

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

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

ساختار ستون

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

اندازه

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

  • از عرض روده ای سفارشی استفاده کنید: بله
  • عرض روده: 1
  • عرض: 90٪
  • حداکثر عرض: 1580px
پیکربندی Divi فاصله

فاصله

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

  • حاشیه بالایی: 200px
  • حاشیه پایین: 200px
پیکربندی فاصله خط Divi

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

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

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

خدمات ما توسط کارشناسان فعلی ارائه می شود

تنظیمات متن H2

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

  • عنوان 2 پلیس: فصلنامه
  • هدر 2 اندازه متن: 80px (دسک تاپ) ، 50 پیکسل (تبلت) ، 40 پیکسل (تلفن)
  • ارتفاع خط 2 از سر: 1.2em
رئیس پلیس divi

فاصله

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

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

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

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

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

جعبه متن divi محتوا

تنظیمات متن

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

  • فونت متن: کابین
  • سبک فونت متن: حروف بزرگ
  • رنگ متن: # 000000
  • اندازه متن: 18px (دسک تاپ) ، 15px (رایانه لوحی) ، 13px (تلفن)
  • فاصله نامه متن: 3px (دسک تاپ) ، 1px (رایانه لوحی و تلفن)
  • ارتفاع خط متن: 3em
پارامتر متن Divi

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

دید

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

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

خط

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

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

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

  • رنگ خط: # 000000
زمینه رنگ تقسیم کننده

اندازه

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

  • وزن تقسیم: 3px
  • عرض: 28٪
اندازه گیری جدا کننده دیوی

فاصله

ما همچنین حاشیه برتر اضافه می کنیم.

  • حاشیه بالایی: 10px
فاصله ماژول جدا کننده Divi

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

فاصله

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

  • بالشتک بالایی: 0px
فاصله تقسیم بخش 2

سرریزهای

همچنین سرریزها را نیز مخفی کنید.

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

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

ساختار ستون

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

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

اندازه

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

  • از عرض روده ای سفارشی استفاده کنید: بله
  • عرض روده: 1
  • برابری ارتفاعات ستون: بله
  • عرض: 90٪
  • حداکثر عرض: 1580px
بخش تقسیم پیکربندی ناودان

فاصله

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

  • بالشتک بالایی: 0px
  • بالشتک پایین: 0px
تنظیمات فاصله ماژول خط Divi 1

تنظیمات ستون 1

رنگ پس زمینه

سپس تنظیمات ستون 1 را باز کرده و رنگ پس زمینه را تغییر دهید.

  • رنگ زمینه: # f7f7f7
پیکربندی پس زمینه ماژول Divi

فاصله

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

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

تنظیمات ستون 2

فاصله

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

  • بالشتک بالایی: 100 پیکسل (دسک تاپ) ، 50 پیکسل (رایانه لوحی و تلفن)
  • بالشتک پایین: 200px
  • بالشتک سمت چپ: 150 پیکسل (میز) ، 0 عدد (تبلت و تلفن)
تنظیمات فاصله ماژول Divi

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

دید

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

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

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

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

خط

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

  • رنگ خط: # 000000
تنظیمات جداکننده Divi

اندازه

همچنین در پارامترهای اندازه تغییراتی ایجاد کنید.

  • وزن تقسیم: 3px
  • عرض: 50٪
اندازه گیری جدا کننده دیوی

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

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

ماژول بعدی که در ستون 1 به آن نیاز داریم یک ماژول متنی با محتوای H3 است.

تنظیم قسمت محتوای Divi

تنظیمات متن H3

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

  • عنوان 3 پلیس: فصلنامه
  • رنگ متن مورد 3: # 000000
  • مورد 3 اندازه متن: 50 پیکسل (دسک تاپ) ، 40 پیکسل (تبلت) ، 35 پیکسل (تلفن)
  • ارتفاع خط 3 از سر: 1.1em

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

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

در ستون دوم ، اولین ماژول مورد نیاز ماژول متنی است که دارای برخی از توضیحات است.

تنظیم ماژول متن Divi

تنظیمات متن

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

  • فونت متن: کابین
  • سبک فونت متن: حروف بزرگ
  • اندازه متن: 18px (دسک تاپ) ، 15px (رایانه لوحی) ، 13px (تلفن)
  • فاصله نامه متن: 3px (دسک تاپ) ، 1px (رایانه لوحی و تلفن)
  • ارتفاع خط متن: 3em
تنظیم متن قلم قالب Divi

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

یک کپی اضافه کنید

آخرین و آخرین ماژول مورد نیاز ماژول دکمه است. نسخه ای از انتخاب خود را وارد کنید.

تنظیم محتوای ماژول متن

تنظیمات دکمه

سپس دکمه را سبک کنید.

  • از دکمه های سفارشی برای دکمه استفاده کنید: بله
  • اندازه متن دکمه: 20 پیکسل
  • رنگ متن دکمه: #ffffff
  • رنگ پس زمینه دکمه: # 000000
  • عرض مرز دکمه: 0px
تنظیم سبک دکمه Divi
  • قلم دکمه: فصلنامه
  • وزن قلم دکمه: جسورانه
تنظیمات رنگ دکمه Divi

فاصله

همچنین بالشتک سفارشی را اضافه کنید.

  • بالشتک بالایی: 50px
  • بالشتک پایین: 50px
  • لبه چپ: 100px
  • بالشتک راست: 100 پیکسل
تنظیمات فاصله دکمه ماژول Divi

موقعیت

و دکمه را بر این اساس مجدداً تغییر دهید:

  • مقام: مطلق
  • محل سکونت: پایین سمت چپ
تنظیم موقعیت ماژول دکمه Divi

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

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

ماژول Clone divi

همه مطالب را تغییر دهید

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

محتوای بخش divi را ویرایش کنید

2. از جلوه های پیمایش استفاده کنید

جلوه های پیمایش ردیف اول

حرکت افقی

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

  • حرکت افقی را فعال کنید: بله
  • شروع افست: -5
  • متوسط ​​افست: 0 (با 26٪)
  • پایان افست: 0
  • اثر حرکت ماشه: وسط عنصر
جلوه های پیمایش divi را اعمال کنید

محو و داخل می شوند

همچنین از یک اثر محو شدن ورودی و خروجی استفاده کنید.

  • محو شدن درون و بیرون را فعال کنید: بله
  • کدورت اولیه: 100٪
  • کدورت متوسط: 100٪ (با 50٪)
  • کدورت پایان: 0٪ (تا 53٪)
  • اثر حرکت ماشه: وسط عنصر
پیکربندی Fade divi انیمیشن بخش

جلوه های پیمایش ردیف میانه

حرکت عمودی

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

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

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

  • حرکت عمودی را فعال کنید: بله
  • شروع افست: -4
  • متوسط ​​افست: 0 (با 26٪)
  • پایان افست: 0
  • اثر محرک حرکت: وسط عنصر
پیکربندی aniation پیمایش Divi

محو و داخل می شوند

همچنین یک اثر محو شدن داخل و خارج را فعال کنید.

  • محو شدن درون و بیرون را فعال کنید: بله
  • کدورت اولیه: 0٪
  • کدورت متوسط: 100٪ (از 27٪ تا 50٪)
  • افست پایان: 0 (با 53٪)
  • اثر حرکت ماشه: وسط عنصر
انیمیشن محو خط Divi

جلوه های پیمایش خط آخر

حرکت عمودی

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

  • حرکت عمودی را فعال کنید: بله
  • شروع افست: -4
  • متوسط ​​افست: 0 (با 26٪)
  • پایان افست: 0
  • اثر حرکت ماشه: وسط عنصر
انیمیشن پیمایش ماژول خط Divi

محو و داخل می شوند

با یک اثر محو شدن ورودی و خروجی و تمام می شوید!

  • محو شدن درون و بیرون را فعال کنید: بله
  • کدورت اولیه: 0٪
  • کدورت متوسط: 100٪ (از 27٪ تا 50٪)
  • کدورت پایان: 100٪ (تا 53٪)
  • اثر حرکت ماشه: وسط عنصر
تنظیمات انیمیشن ظاهر ماژول Divi

نتیجه نهایی

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

نسخه ی نمایشی نهایی

آخرین افکار

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

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

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

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

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

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