افزودن یک نقشه به وب سایت خود یک راه عالی برای نشان دادن مکان شما یا کسب و کارتان به بازدیدکنندگان است. با تنظیمات داخلی Divi، کنترل خلاقانه کاملی بر طراحی ماژول نقشه خود و تمام عناصر طراحی اطراف دارید. با اعمال افکت های اسکرول بر روی ماژول خود، طراحی خود را به سطح دیگری ببرید. با چندین نوع مختلف افکت برای انتخاب و تنظیمات برای تنظیم دقیق افکت تا زمانی که دقیقاً به آنچه می‌خواهید برسید، استفاده از افکت‌های اسکرول می‌تواند به شما کمک کند حرکتی چشم‌نواز به ماژول‌های وب‌سایت خود اضافه کنید. در این پست به شما نشان خواهیم داد که چگونه ماژول اسکرول نقشه خود را با افکت های اسکرول Divi افزایش دهید.
بیا شروع کنیم!
یک نگاه یواشکی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است.
طرح 1
طرح 2
آنچه برای شروع نیاز دارید
قبل از شروع، تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
حالا شما آماده رفتن هستید!
چگونه ماژول نقشه اسکرول خود را با افکت های اسکرول Divi افزایش دهیم
طرح 1
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی از صفحه فرود Acai Bowl از بسته چیدمان Acai Bowl استفاده خواهیم کرد.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
صفحه فرود Acai Bowl را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
ماژول نقشه را اضافه کنید
ماژول نقشه را به بخش “بیا از ما دیدن کن” صفحه فرود اضافه می کنیم. با اضافه کردن یک ردیف جدید با یک ستون شروع کنید.
ماژول نقشه را به ردیف جدید اضافه کنید.
اگر قبلاً این کار را نکرده‌اید، کلید Google API خود را برای فعال کردن نقشه اضافه کنید. سپس یک آدرس مرکزی به نقشه اضافه کنید. برای این آموزش، آدرس سان فرانسیسکو، کالیفرنیا خواهد بود.
سپس یک پین جدید اضافه کنید.
آدرس پین را روی نقشه تنظیم کنید. یک بار دیگر، ما این را برای این آموزش در سانفرانسیسکو، کالیفرنیا تنظیم می کنیم.
تنظیمات طراحی
به تب Design بروید و تنظیمات اندازه را باز کنید. ارتفاع را تنظیم کنید.
سپس تنظیمات حاشیه را باز کنید و گوشه های گرد را به نقشه اضافه کنید.
افکت های اسکرول را اضافه کنید
اکنون طراحی ماژول نقشه ما کامل شده است، بنابراین می توانیم افکت های اسکرول را اضافه کنیم. به تب Advanced بروید، سپس به Scroll Effects بروید. در قسمت Scroll Transform Effects، تب Scale Up and Scale Down را انتخاب کنید.
بزرگنمایی بالا و پایین را فعال کنید. این به ماژول نقشه ما اجازه می دهد تا با اسکرول کردن صفحه به سمت پایین، اندازه آن افزایش یابد.
بیایید تنظیمات بزرگنمایی را به خوبی تنظیم کنیم. مقیاس شروع، وسط و پایان را تنظیم کنید. با نزدیک نگه داشتن اعداد نسبتاً نزدیک به یکدیگر، می توانید به اثر مقیاس ظریف تری دست پیدا کنید. اگر تفاوت زیادی بین اعداد وجود داشته باشد، به اثر مقیاس پذیری شدیدتری دست خواهید یافت.
- مقیاس شروع: 80%
- مقیاس متوسط: 90%
- مقیاس نهایی: 100%
در نهایت افکت حرکت را در وسط عنصر تنظیم کنید.
- افکت حرکت را فعال کنید: وسط عنصر
پیش نویس نهایی
در اینجا طرح نهایی برای اولین طرح ما است.
طرح 2
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
برای طرح دوم، از طرح بندی صفحه تماس از همان بسته طرح بندی Acai Bowl استفاده می کنیم. بیا شروع کنیم.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
صفحه تماس Acai Bowl را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
تنظیمات ردیف را تغییر دهید
ابتدا خط حاوی ماژول نقشه را به قسمت بالا در زیر آدرس ها منتقل کنید.
سپس طرح ردیف را به دو ستون تغییر دهید.
تنظیمات ردیف را باز کنید، سپس تنظیمات ستون 1 را باز کنید.
یک رنگ پس زمینه اضافه کنید.
در نهایت تب طراحی را باز کرده و تنظیمات حاشیه را باز کنید. گوشه های گرد را به گوشه های پایین سمت چپ و راست اضافه کنید.
- گوشه های گرد – پایین سمت چپ: 300 پیکسل
- گوشه های گرد – پایین سمت راست: 300 پیکسل
تنظیمات برگه را تغییر دهید
تنظیمات بخش را برای بخش حاوی ماژول نقشه باز کنید. به تنظیمات پس زمینه بروید، سپس یک ماسک پس زمینه اضافه کنید.
- ماسک پس زمینه: نقطه گوشه
- رنگ ماسک: #FFFFFF
- تبدیل ماسک: عمودی و معکوس
یک تصویر اضافه کنید
ابتدا یک ماژول تصویر به ستون کنار ماژول نقشه اضافه کنید.
بعد، تصویر شفاف کاسه acai را به ماژول اضافه کنید. اگر از طرح‌بندی صفحه فرود Acai Bowl برای طرح‌بندی 1 استفاده کرده‌اید، باید آن را در کتابخانه رسانه‌تان با برچسب acai-bowl-34.png داشته باشید.
ما می خواهیم تصویر کاسه acai در حین اسکرول کردن صفحه بچرخد. به تب Advanced بروید، سپس بخش Scroll Effects را باز کنید. تب Rotation را انتخاب کرده و چرخش را فعال کنید.
سپس چرخش را تنظیم کنید.
- چرخش اولیه: 180
- میانگین چرخش: 90
- چرخش نهایی: 0
طراحی نقشه
حالا به تنظیمات ماژول نقشه بروید. در زیر برگه طراحی، تنظیمات نقشه را باز کنید. فیلتر خاکستری را فعال کنید.
- استفاده از فیلتر خاکستری: بله
- مقدار فیلتر مقیاس خاکستری (%): 100
سپس ارتفاع را در زیر تب Sizing تغییر دهید.
در تنظیمات فاصله، چند حاشیه اضافه کنید.
- حاشیه در بالا: 5 پیکسل
- حاشیه-پایین: 5 پیکسل
- حاشیه–چپ: 5 پیکسل
- حاشیه-راست: 5 پیکسل
سپس گوشه های گرد را به گوشه های پایین سمت چپ و راست اضافه کنید.
- گوشه های گرد – پایین سمت چپ: 300 پیکسل
- گوشه های گرد – پایین سمت راست: 300 پیکسل
افکت های اسکرول را اضافه کنید
حالا می‌توانیم در نهایت افکت‌های اسکرول را به نقشه اضافه کنیم تا در هنگام اسکرول بزرگ‌تر شود. بخش Scroll Effects را در تب Advanced باز کنید. سپس تب zoom up and down را انتخاب کرده و Zoom up and down را فعال کنید.
در نهایت، ترازو را سفارشی کنید.
- مقیاس شروع: 90٪
- میانگین مقیاس: 95%
- مقیاس نهایی: 100%
پیش نویس نهایی
در اینجا طرح نهایی Layout 2 آمده است.
نتیجه نهایی
حالا بیایید نگاهی به هر دو طرح بندی خود در عمل بیاندازیم.
طرح 1
طرح 2
افکار نهایی
با اعمال افکت‌های اسکرول Divi بر روی ماژول نقشه، می‌توانید در حین پیمایش صفحه به جلوه‌ای منحصربه‌فرد دست پیدا کنید و به نقشه خود کمک کنید تا برای بازدیدکنندگان وب‌سایت برجسته شود. این افکت‌ها همچنین می‌توانند روی هر ماژول دیگری در وب‌سایت شما اعمال شوند، بنابراین هیچ محدودیتی برای آنچه می‌توانید با کمی خلاقیت به دست آورید وجود ندارد! اگر به آموزش های بیشتری در رابطه با ماژول نقشه علاقه دارید، این مقاله را در مورد نحوه افزودن یک تغییر مکان ثابت نقشه به قالب صفحه Divi خود بررسی کنید. و اگر می‌خواهید ایده‌های طراحی بیشتری با استفاده از افکت‌های اسکرول داشته باشید، این آموزش را در مورد نحوه افزودن آیکون‌های اسکرول متحرک به پس‌زمینه بخش خود بررسی کنید. چگونه افکت های اسکرول Divi را در وب سایت خود اعمال کردید؟ در نظرات به ما اطلاع دهید!