تنظیمات چسبنده داخلی Divi به شما این امکان را می‌دهد که در حین اسکرول کردن صفحه، یک عنصر را «چسبنده» یا ثابت نگه دارید. هنگامی که با سایر عناصر غیر چسبنده ترکیب می‌شوید، می‌توانید به یک چیدمان چشم نواز و جذاب برسید تا طراحی وب‌سایت خود را به سطح بعدی ارتقا دهید. در این آموزش، ما به شما نشان خواهیم داد که چگونه یک ماژول نقشه چسبنده را به صفحه Divi خود اضافه کنید. ما ماژول نقشه را چسبناک نگه می داریم و اطلاعات پیمایش مربوطه را به همراه نقشه اضافه می کنیم.
بدون مقدمه، بیایید شروع کنیم!
یک نگاه یواشکی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است
آنچه برای شروع نیاز دارید
قبل از شروع، تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
حالا شما آماده رفتن هستید!
چگونه یک ماژول Sticky Map را به صفحه Divi خود اضافه کنید
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی ما از صفحه فرود مدرسه Craft از بسته طرح بندی مدرسه Craft استفاده خواهیم کرد.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
صفحه فرود مدرسه Craft را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
طرح بندی ماژول Sticky Map را تغییر داد
ثبت CTA
به بخش عضویت در استودیو صفحه بروید. سپس یک بخش جدید در زیر اضافه کنید.
تنظیمات بخش را باز کنید و یک رنگ پس زمینه اضافه کنید.
سپس خط «تماس یا پیوستن آنلاین» را به این بخش جدید منتقل کنید.
تنظیمات صف را باز کنید و به تب Advanced بروید. در قسمت تنظیمات موقعیت، موقعیت را از Absolute به Default تغییر دهید.
به بخش استودیو بیایید.
یک ردیف جدید با دو ستون در زیر بخش عضویت در استودیو اضافه کنید.
سپس این ردیف را به بالای قسمت Studio Membership منتقل کنید.
تنظیمات عنوان
یک ماژول متنی در ستون سمت راست اضافه کنید.
متن را اضافه کنید.
- H2: به استودیو بیا!
سپس، تب Design را باز کرده و تنظیمات Header Text را باز کنید. فونت را به صورت زیر سفارشی کنید:
- قلم عنوان 2: Yusei Magic
سپس اندازه فونت و ارتفاع خط را سفارشی کنید. از گزینه‌های واکنش‌گرای داخلی برای اضافه کردن اندازه‌های متنی مختلف برای تبلت‌ها و دستگاه‌های تلفن همراه استفاده کنید.
- عنوان 2 اندازه متن رومیزی: 50 پیکسل
- عنوان 2 اندازه متن تبلت: 30 پیکسل
- اندازه متن عنوان 2 برای موبایل: 24 پیکسل
- ارتفاع خط سرصفحه 2: 1.2 em
تنظیمات متن
ماژول متن دیگری را در زیر متن “Come to the studio” اضافه کنید.
متن زیر را وارد کنید
- H3: آدرس
- بند: 1234 Divi St. #1000 سانفرانسیسکو، CA 33945
در تب Design، سبک های متن را تغییر دهید.
- فونت متن: Sans را باز کنید
- اندازه متن رومیزی: 16 پیکسل
- اندازه متن تبلت: 15 پیکسل
- اندازه متن موبایل: 13 پیکسل
سپس سبک های عنوان را تغییر دهید.
- قلم عنوان 3: Open Sans
- عنوان 3 وزن قلم: پررنگ
- سبک قلم عنوان 3: تمام سرمایه (TT)
سپس اندازه متن و فاصله حروف را تغییر دهید. یک بار دیگر، از تنظیمات Responsive برای تنظیم اندازه متن های مختلف برای اندازه های مختلف صفحه استفاده کنید.
- عنوان 3 اندازه متن رومیزی: 14 پیکسل
- عنوان 3 اندازه متن تبلت: 13 پیکسل
- عنوان 3 اندازه متن موبایل: 12 پیکسل
- عنوان 3 فاصله بین حروف: 3 پیکسل
ماژول متن دیگری را در زیر ماژول آدرس اضافه کنید.
سپس محتوای زیر را به بدنه اضافه کنید:
- بدنه: Lorem ipsum dolor sit amet، consectetur adipiscing elit. Mauris blandit aliquet elit، eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Praesent sapien massa، convallis a pellentesque nec، egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.
به تب طراحی بروید و فونت را سفارشی کنید.
سپس اندازه متن و ارتفاع خط را سفارشی کنید.
- اندازه متن رومیزی: 15 پیکسل
- اندازه متن موبایل: 13 پیکسل
- ارتفاع خط متن: 1.9em
تنظیمات دکمه
یک ماژول دکمه را به بخش زیر متنی که اضافه کردیم اضافه کنید.
متن دکمه را روی «بیشتر بدانید» تنظیم کنید.
سپس به تب طراحی رفته و تنظیمات دکمه را باز کنید. سبک های سفارشی را فعال کنید.
- استفاده از سبک های سفارشی برای دکمه: بله
- اندازه متن دکمه: 12 پیکسل
- رنگ متن دکمه: #FFFFFF
پس زمینه دکمه و عرض قاب را سفارشی کنید.
- پس زمینه دکمه: #d5b38e
- عرض قاب دکمه: 0 پیکسل
شعاع قاب دکمه، فاصله حروف و فونت را تغییر دهید.
- شعاع حاشیه دکمه: 0 پیکسل
- فاصله بین حروف دکمه: 3 پیکسل
- فونت دکمه: Sans را باز کنید
- وزن قلم دکمه: پررنگ
- سبک قلم دکمه: همه حروف (TT)
در نهایت یک پد به دکمه اضافه کنید.
- پد بالای صفحه: 15 پیکسل
- پد-پایین: 15 پیکسل
- بالشتک-سمت چپ: 30 پیکسل
- Padding-Right: 30px
بخش عضویت در استودیو
اکنون می خواهیم قسمت عضویت در استودیو را تغییر دهیم. ابتدا طرح سطر را به دو ستون یکسان تغییر دهید.
سپس تصویر بزرگ را به ستون سمت راست، بالای ماژول متنی Studio Membership منتقل کنید.
تنظیمات پیمایش تصویر
تصویر اسکرول کوچک سفال را به ستون سمت راست، بالای تصویر بزرگی که جابجا کردیم، منتقل کنید.
تنظیمات ماژول بند انگشتی را باز کنید. در زیر تنظیمات اندازه، از تنظیمات پاسخگو برای تنظیم عرض متفاوت برای دستگاه های تلفن همراه استفاده کنید.
در زیر تب Advanced، تنظیمات موقعیت را باز کنید و کمی افست افقی اضافه کنید. این به تصویر کوچک اجازه می‌دهد تا از کنار تصویر بزرگ‌تر آویزان شود و بعد به آن اضافه شود و چیدمان منحصربه‌فردتری ایجاد کند.
در نهایت افکت های اسکرول را باز کنید و افست نهایی را برای حرکت عمودی تنظیم کنید.
متن عضویت در استودیو
تنظیمات ماژول متنی Studio Memberships را باز کنید. پس زمینه را از ماژول حذف کنید.
سپس تنظیمات ردیف را باز کنید و تنظیمات ستون 2 را باز کنید.
در قسمت تنظیمات فاصله در تب Design، بالشتک موجود در زیر را حذف کنید.
پس زمینه برگه
تنظیمات بخش را باز کنید. در تنظیمات پس زمینه، یک تصویر پس زمینه اضافه کنید. craft-school-24.png را از کتابخانه رسانه خود انتخاب کنید.
ماژول Sticky Map را اضافه کنید
اکنون که طرح ما اصلاح شده است، می توانیم ماژول کارت چسبنده را اضافه کنیم. ماژول نقشه در ستون سمت چپ قرار خواهد گرفت و همانطور که در محتوای سمت راست پیمایش می کنید، در جای خود باقی می ماند. بیا شروع کنیم.
ابتدا یک ماژول نقشه را به ستون سمت چپ ردیف «بیا از استودیو دیدن کن» اضافه کنید.
تنظیمات نقشه را باز کنید و آدرس مرکز را روی نقشه اضافه کنید. برای این آموزش، ما نقشه را در مرکز سانفرانسیسکو، کالیفرنیا قرار می دهیم.
سپس یک کلاف به کارت اضافه کنید. ما همچنین این را در سانفرانسیسکو، کالیفرنیا تنظیم خواهیم کرد.
طراحی نقشه
در زیر برگه طراحی، تنظیمات نقشه را باز کنید. می توانید از این تنظیمات برای شخصی سازی کامل نحوه نمایش نقشه خود استفاده کنید. برای این آموزش، می‌خواهیم نقشه با رنگ‌های خاموش این صفحه مطابقت داشته باشد، بنابراین میزان اشباع نقشه را تغییر می‌دهیم.
سپس تنظیمات حاشیه را باز کنید و حاشیه را به صورت زیر سفارشی کنید:
- عرض فریم: 20 پیکسل
- رنگ قاب: #fcf8f3
تنظیمات Box Shadow را باز کنید و یک سایه به ماژول نقشه اضافه کنید.
تنظیمات چسبنده
حالا بیایید تنظیمات چسبنده را اضافه کنیم تا در حین اسکرول، نقشه در جای خود باقی بماند. به تب Advanced رفته و تنظیمات افکت های اسکرول را باز کنید. از گزینه های پاسخگو برای تغییر تنظیمات موقعیت چسبنده استفاده کنید زیرا نقشه در دستگاه های تلفن همراه چسبنده نخواهد بود.
- موقعیت چسبیدن روی دسکتاپ: به بالا بچسبید
- موقعیت چسباندن تبلت و تلفن همراه: نچسبید
- افست بالای چسبنده: 20 پیکسل
- مرز چسبنده پایین: بخش
حالا به تب Design برگردید و تنظیمات اندازه را باز کنید. می خواهیم ارتفاع نقشه در حالت چسباندن افزایش یابد. از تنظیمات چسبنده برای تنظیم ارتفاع متفاوت استفاده کنید.
- ارتفاع در هنگام چسباندن: 600 پیکسل
در نهایت از تنظیمات ریسپانسیو برای تغییر اندازه نقشه در تبلت و موبایل استفاده کنید.
- ارتفاع تبلت و موبایل: 350 پیکسل
نتیجه نهایی
حالا بیایید ماژول کارت چسبنده خود را در عمل ببینیم.
افکار نهایی
تنظیمات چسبنده Divi به شما این امکان را می دهد که طرح بندی های وب سایت پویا ایجاد کنید که با حرکت چشم شما را جلب کند. با تمام گزینه های سفارشی سازی موجود، می توانید هر عنصر وب سایت خود را چسبناک کنید و طراحی را دقیقاً مطابق میل خود تغییر دهید. با چسباندن ماژول نقشه در این طرح، اطلاعات مکان را در وب سایت برجسته می کنیم و یک عنصر طراحی منحصر به فرد به صفحه اضافه می کنیم. برای آموزش های بیشتر در مورد تنظیمات چسبنده Divi، این مقاله در مورد افزودن فرم تماس چسبنده به صفحه خود را بررسی کنید. آیا از عناصر چسبنده در وب سایت خود استفاده می کنید؟ ما دوست داریم از شما در نظرات بشنویم!