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

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

[ad_1]

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

برویم.

بررسی

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

دفتر

کپی ترکیب کپی

موبایل

کپی ترکیب کپی

طرح را به صورت رایگان بارگیری کنید

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

بیایید بازآفرینی را شروع کنیم!

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

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

با افزودن بخش نگهدارنده به صفحه ای که روی آن کار می کنید شروع کنید.

کپی ترکیب کپی

اندازه

تنظیمات بخش را باز کرده و ارتفاع را در تنظیمات اندازه تغییر دهید.

کپی ترکیب کپی

بخش کلون

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

کپی ترکیب کپی

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

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

کپی ترکیب کپی

رنگ پس زمینه

تنظیمات بخش را باز کرده و از رنگ زمینه سفید استفاده کنید.

  • رنگ زمینه: #ffffff

کپی ترکیب کپی

فاصله

به برگه طراحی بخش بروید و مقادیر بالایی بالا و پایین را متناسب با آن تغییر دهید:

  • بالشتک بالا: 10 وات در ساعت
  • بالشتک پایین: 10 وات

کپی ترکیب کپی

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

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

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

ساختار ستون

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

کپی ترکیب کپی

اندازه

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

  • عرض: 100٪
  • حداکثر عرض: 100

کپی ترکیب کپی

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

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

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

کپی ترکیب کپی

تنظیمات متن

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

  • فونت متن: Montserrat
  • وزن قلم متن: فوق العاده پررنگ
  • سبک فونت متن: بزرگ
  • رنگ متن: # fff2ea
  • حجم متن: 11 وات
  • ارتفاع خط متن: 1 em
  • تراز متن: مرکز

کپی ترکیب کپی

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

ساختار ستون

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

کپی ترکیب کپی

اندازه

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

  • از عرض ناودان سفارشی استفاده کنید: بله
  • عرض ناودان: 2
  • عرض: 90٪
  • تراز خط: مرکز

کپی ترکیب کپی

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

تصویری را بارگذاری کنید

یک ماژول تصویر به ستون سطر اضافه کنید. تصویر دلخواه خود را بارگذاری کنید.

کپی ترکیب کپی

هم ترازی

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

کپی ترکیب کپی

اندازه

سپس به تنظیمات اندازه بروید و عرض کامل را روی ماژول اعمال کنید.

کپی ترکیب کپی

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

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

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

کپی ترکیب کپی

تراز بندی دکمه ها

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

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

به برگه Design بروید و تراز دکمه را تغییر دهید.

کپی ترکیب کپی

تنظیمات دکمه

سپس دکمه را به صورت زیر استایل دهید:

  • استفاده از سبک های سفارشی برای دکمه: بله
  • اندازه متن دکمه: 16 پیکسل
  • رنگ متن دکمه: # 000000
  • رنگ پس زمینه دکمه: #ffffff
  • عرض حاشیه دکمه: 0 پیکسل
  • فاصله حروف دکمه: 2 پیکسل
  • فونت دکمه: Montserrat
  • وزن فونت دکمه: پررنگ
  • سبک فونت دکمه: بزرگ

کپی ترکیب کپی

فاصله

همچنین در تنظیمات فاصله از مقادیر پد سفارشی استفاده کنید.

  • بالشتک بالا: 20 پیکسل
  • بالشتک پایین: 20 پیکسل
  • بالشتک چپ: 5
  • بالشتک راست: 5٪

کپی ترکیب کپی

موقعیت مطلق را به خط 1 اضافه کنید

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

  • موقعیت: مطلق
  • مکان: مرکز

کپی ترکیب کپی

ردیف شماره 1 را شبیه سازی کرده و نسخه تکراری را در زیر ردیف شماره 2 قرار دهید

برای اینکه ماژول متن در بالای تصویر ظاهر شود ، به یک ردیف دیگر با مقدار شاخص z بیشتر نیاز داریم. ردیف اول را کلون کنید و تکراری را در زیر ردیف دوم قرار دهید.

کپی ترکیب کپی

افکت ها را روی ردیف 3 اعمال کنید

افزایش شاخص Z

ردیف تکراری را باز کرده و شاخص z را در برگه پیشرفته تغییر دهید.

کپی ترکیب کپی

تغییر رنگ متن

ماژول متنی را در ردیف باز کرده و رنگ متن را تغییر دهید.

کپی ترکیب کپی

حالت ترکیبی را به خط اعمال کنید

سپس تنظیمات ردیف را باز کرده و حالت ترکیب را در تنظیمات فیلترها تغییر دهید.

کپی ترکیب کپی

از جلوه پیمایش روی ماژول متن در ردیف شماره 3 استفاده کنید

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

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

  • fade in and fade out را فعال کنید: بله
    • شروع کدورت: 0٪
    • کدورت متوسط: 0٪ (تا 26٪)
    • کدورت نهایی: 100٪ (در 28٪)
  • Motion Effect Trigger: Middle of Element

کپی ترکیب کپی

بررسی

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

دفتر

کپی ترکیب کپی

موبایل

کپی ترکیب کپی

آخرین افکار

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

اگر می خواهید درباره Divi بیشتر بیاموزید و Divi Giveaways بیشتری دریافت کنید ، حتماً در خبرنامه ایمیل ما و کانال YouTube ما مشترک شوید تا همیشه یکی از اولین افرادی باشید که از این محتوای رایگان مطلع شده و از آن بهره مند شوید.



[ad_2]

لینک منبع

0 سهام
سهم
صدای جیر جیر
ثبات