آیا می خواهید از افکت های سایه و شناور در آن استفاده کنید DIVI خلق كردن محتویات تعاملی و متمایز کردن شما وب سایت ?
مطمئن شوید که وب سایت متمایز شدن از وب سایت های مشابه می تواند دشوار باشد. اما هنگامی که به آنجا رسیدید، تقریباً همیشه ارزش تلاش و فکری را دارد که در آن انجام شده است.
ما به شما نشان خواهیم داد که چگونه ایجاد کنید محتویات تعاملی هنگام ایجاد وب سایت با DIVI.
بیایید برویم
بررسی
قبل از اینکه وارد این آموزش شویم، بیایید نگاهی گذرا به نتیجه ای که می توانید انتظار داشته باشید بیاندازیم.
کامپیوتر رومیزی
موبایل
بیایید تحقق را با Divi شروع کنیم!
همچنین ببینید: Divi: نحوه ایجاد منوی چرخ چرخان در شناورl
یک بخش جدید اضافه کنید
رنگ پس زمینه
یک صفحه جدید ایجاد کنید یا یک صفحه موجود را باز کنید و یک بخش معمولی به آن اضافه کنید. تنظیمات بخش را باز کنید و رنگ پس زمینه را تغییر دهید.
- پس زمینه: #03006d
فاصله
سپس به تنظیمات فاصله بین بخش ها رفته و به صورت زیر تغییر دهید:
- بالشتک (بالا و پایین): 50 پیکسل
یک خط جدید اضافه کنید
ساختار ستون
با افزودن یک ردیف جدید به بخش با استفاده از ساختار ستون زیر ادامه دهید.
اندازه
سپس به تنظیمات اندازه بروید و اجازه دهید خط تمام عرض صفحه را پر کند.
- از عرض ناودان سفارشی استفاده کنید: بله
- عرض ناودان: 1
- عرض: 100%
فاصله
بیایید تنظیمات فاصله زیر را نیز تغییر دهیم:
- پد (راست): 9vw (رومیزی)، 5vw (تبلت و تلفن)
- پد (راست): 5vw (تبلت و تلفن)
یک ماژول متن به ستون 1 اضافه کنید
اضافه کردن محتوا
پس از اتمام ویرایش تنظیمات ردیف، اولین ماژول Text را به ستون 1 اضافه کنید.
کاراکتر اول را به عنوان متن پاراگراف اضافه کنید. سپس محتویات که می خواهید به عنوان متن فهرست نمایش داده شود.
تنظیمات متن (رومیزی)
سپس به برگه بروید طرحو تنظیمات متن پاراگراف پیش فرض را تغییر دهید. مطمئن شوید که از همان رنگ برای متن بخش و پس‌زمینه استفاده می‌کنید.
- وزن قلم: فوق العاده پررنگ
- رنگ متن: #03006d
- اندازه متن: 27vw (رومیزی)، 0vw (تبلت و تلفن)
- ارتفاع خط: 1,1 em
- سایه متن: به ضبط مراجعه کنید
- قدرت تاری سایه: 0,01em
- رنگ سایه: #ffffff
- تراز متن: چپ
تنظیمات متن را نگه دارید
برای ایجاد افکت شناور زیبا، باید این تنظیمات متن پاراگراف شناور را تغییر دهیم.
- رنگ متن (Hover): #ffffff
- رنگ سایه (Hover): rgba (255,255,255,0)
تنظیمات فهرست (رومیزی)
با رفتن به تنظیمات لیست ادامه دهید.
- وزن قلم: سبک
- رنگ متن فهرست: #ffffff
- اندازه متن فهرست: 0 پیکسل (رومیزی)، 18 پیکسل (تبلت و تلفن)
- موقعیت سبک: دایره
- موقعیت سبک لیست نامرتب: بیرون
- نامرتب مورد لیست تورفتگی: 0px
فهرست تنظیمات متن در حالت شناور (مانوس)
ما می‌خواهیم متن فهرست روی شناور ظاهر شود. به همین دلیل است که در حالت شناور اندازه متن را تغییر می دهیم.
- اندازه متن فهرست نامرتب (Hover): 18px
فاصله
با رفتن به تنظیمات فاصله ماژول ادامه دهید و در آنجا نیز تغییراتی ایجاد کنید.
- حاشیه (پایین): 50 پیکسل (تبلت و تلفن)
- حاشیه (راست): -4vw (رومیزی)، 0vw (تبلت و تلفن)
ماژول متن را 4 بار کلون کنید و موارد تکراری را در ستون های باقی مانده قرار دهید
اکنون که ما اصلاح ماژول اول در ستون 1 را انجام دادیم، ماژول را چهار بار کلون کنید. سپس هر یک از موارد تکراری را در ستون های باقی مانده قرار دهید. ما هر یک از موارد تکراری را برای مطابقت با آنچه می خواهیم تغییر می دهیم.
ماژول Text را در ستون 2 تغییر دهید
ویرایش محتوا
نسخه تکراری را در ستون 2 باز کنید و محتوا را ویرایش کنید.
تغییر فاصله
بعد، به تنظیمات فاصله بروید و مقادیر حاشیه سفارشی را تغییر دهید.
- حاشیه (پایین): 50 پیکسل (تبلت و تلفن)
- حاشیه (چپ و راست): -2vw (رومیزی)، 0vw (تبلت و تلفن)
- حاشیه سمت راست: -2vw (رومیزی)، 0vw (تبلت و تلفن)
ماژول Text را در ستون 3 تغییر دهید
ویرایش محتوا
همچنین محتوای تکراری در ستون 3 را تغییر دهید.
تغییر فاصله
با تنظیمات فاصله در تب طراحی.
- حاشیه (چپ): 2,5 vw
- حاشیه (راست): 1,5 vw
ماژول Text را در ستون 4 تغییر دهید
ویرایش محتوا
با باز کردن تنظیمات ماژول متن در ستون 4 ادامه دهید و محتوا را در آنجا نیز ویرایش کنید.
تغییر فاصله
سپس به تب Design رفته و مقادیر حاشیه سفارشی را در تنظیمات فاصله تغییر دهید.
- حاشیه (سمت چپ): -6vw
- حاشیه (راست): 2vw
ماژول Text را در ستون 5 تغییر دهید
محتویات
راه را برای آخرین تکرار باز کنید. محتوا را در قسمت محتوا ویرایش کنید.
تغییر فاصله
با تنظیمات فاصله سفارشی
- حاشیه (سمت چپ): -7vw
- حاشیه (راست): 3vw
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
دفعات بازدید: DIVI : نحوه سفارشی سازی نمادهای سبد خرید و جستجوی ماژول "Fullwidth Menu".
دفتر
موبایل
دانلود DIVI در حال حاضر!!!
نتیجه
ما می دانیم که چقدر مهم است که اطمینان حاصل کنیم که شما وب سایت از وب سایت های دیگر متمایز است. با گزینه های داخلی Divi، می توانید هر چقدر که می خواهید خلاق باشید.
این مقاله نمونه ای از نحوه ایجاد محتوای شناور تعاملی است.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
