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

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

برویم.

بررسی

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

دفتر

موبایل

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

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

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

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

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

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

اندازه

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

بخش کلون

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

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

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

رنگ پس زمینه

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

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

فاصله

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

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

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

ساختار ستون

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

اندازه

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

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

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

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

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

تنظیمات متن

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

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

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

ساختار ستون

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

اندازه

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

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

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

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

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

هم ترازی

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

اندازه

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

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

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

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

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

به برگه 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 بیشتری دریافت کنید، حتماً در ما مشترک شوید خبرنامه از طریق ایمیل و به ما کانال YouTube به طوری که شما همیشه جزو اولین افرادی باشید که این محتوای رایگان را می شناسید و از آن بهره می برید.