افزودن نقشه به وب‌سایت‌تان می‌تواند بازدیدکنندگان وب‌سایت شما را راحت‌تر ببیند که کسب‌وکار شما در کجا قرار دارد یا ببینند یک رویداد در کجا ممکن است برگزار شود. Divi دارای دو گزینه داخلی برای جاسازی نقشه های گوگل در طراحی صفحه شما است: یک ماژول نقشه با عرض کامل و یک ماژول نقشه معمولی. با ماژول نقشه تمام عرض، می توانید یک نقشه بزرگ و چشم نواز که عرض صفحه شما را در بر می گیرد، اضافه کنید. شما می توانید ظاهر ماژول نقشه تمام عرض را با استفاده از تنظیمات ماژول عرض کامل سفارشی کنید و می تواند یک عنصر طراحی عالی برای افزودن به چیدمان شما باشد. می توانید ماژول نقشه ساده Divi را به هر برگه ساده اضافه کنید. گزینه‌های طراحی بی‌پایان هستند زیرا می‌توانید گزینه‌های ماژول، ردیف و بخش را برای ایجاد طرح‌بندی منحصربه‌فرد برای وب‌سایت خود ترکیب کنید.
در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از ماژول نقشه تمام عرض و ماژول نقشه معمولی، دو طرح بندی مختلف ایجاد کنید.
بیا شروع کنیم!
یک نگاه یواشکی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است.
طرح 1 – ماژول نقشه با عرض کامل
طرح 2 – ماژول کارت ساده
آنچه برای شروع نیاز دارید
قبل از شروع، تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.
حالا شما آماده رفتن هستید!
استفاده از Divi Fullwidth Map در مقابل ماژول نقشه
یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید
بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی، از صفحه Conference About در بسته طرح‌بندی کنفرانس استفاده می‌کنیم.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.
برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.
طرح کنفرانس درباره صفحه را جستجو و انتخاب کنید.
گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.
اکنون ما آماده ساختن طرح خود هستیم.
طرح 1 – ماژول نقشه با عرض کامل
برای اولین طرح خود، ماژول نقشه تمام عرض را به پاورقی اضافه می کنیم، درست بالای پاورقی مشکی با همه پیوندها. به جای اضافه کردن این عنصر به صفحه، از سازنده تم در تنظیمات Divi برای ایجاد یک فوتر برای این صفحه استفاده می کنیم و سپس نقشه را اضافه می کنیم. بیا شروع کنیم.
ابتدا روی قسمت فوتر کلیک راست کنید یا روی سه نقطه نوار ابزار بخش کلیک کنید، سپس بخش را کپی کنید.
سپس بخش را از این صفحه حذف کنید.
طرح پاورقی خود را با تم ساز طراحی کنید
از داشبورد وردپرس خود، به تب ایجاد تم در تنظیمات Divi بروید. روی Add New Template کلیک کنید.
برای این طراحی من فقط با قالب صفحه کنفرانس خود قالب صفحه را فعال می کنم.
سپس روی Add Custom Footer کلیک کرده و Build Custom Footer را انتخاب کنید.
اکنون که تنظیمات فوتر سفارشی شما در تم ساز باز است، قسمت پاورقی را که از طرح اصلی کپی کرده اید، جایگذاری کنید.
یک بخش جدید با عرض کامل بالای طرح پاورقی که قرار داده اید اضافه کنید.
سپس ماژول کارت عرض کامل را اضافه کنید.
تنظیمات ماژول نقشه عرض کامل
تنظیمات ماژول نقشه را باز کنید. اگر قبلاً این کار را نکرده‌اید، کلید Google API خود را اضافه کنید تا نقشه نمایش داده شود. (در اینجا درباره الزامات کلید Google Maps API بیشتر بدانید.)
ما باید یک آدرس مرکز نقشه را در زیر تنظیمات نقشه در تب Content اضافه کنیم تا نقشه ما برای نشان دادن یک مکان خاص قرار گیرد. برای این طرح، نقشه خود را در مرکز سانفرانسیسکو، کالیفرنیا قرار می دهیم.
همچنین می خواهیم یک پین به نقشه اضافه کنیم. در تب Content، روی Add New PIN کلیک کنید.
پین را وارد کنید.
در نهایت قسمت خالی طرح فوتر را حذف کنید.
طراحی ماژول کارت تمام عرض نهایی
در اینجا طرح نهایی با ماژول کارت تمام عرض است.
طرح 2 – ماژول کارت ساده
برای طرح دوم خود، از ماژول نقشه معمولی استفاده خواهیم کرد. مانند طرح آخر، با استفاده از تنظیمات تم ساز آن را در طراحی فوتر قرار می دهیم. برای این طراحی نقشه ای به قسمت محل اقامت اضافه می کنیم.
طرح پاورقی خود را با تم ساز طراحی کنید
ما همان مراحل طرح ماژول نقشه با عرض کامل را دنبال می کنیم تا یک طرح پاورقی سفارشی در سازنده تم ایجاد کنیم. در یک تب جدید، داشبورد وردپرس خود را باز کنید و به تب ایجاد تم در تنظیمات Divi بروید. شما باید طرح اصلی را در برگه دیگری باز کنید.
روی Add New Template کلیک کنید.
یک بار دیگر، قالب صفحه را فقط با قالب صفحه کنفرانس خودمان فعال می کنم.
سپس روی Add Custom Footer کلیک کرده و Build Custom Footer را انتخاب کنید.
هنگامی که تنظیمات پاورقی سفارشی شما در سازنده تم باز شد، به برگه طرح بندی اصلی برگردید و بخش “Where to stay” را کپی کنید.
بخش “Where to Stay” را در طرح پاورقی سفارشی خود قرار دهید.
به طرح اولیه برگردید و قسمت فوتر را کپی کنید.
سپس قسمت پاورقی را در زیر بخش «Where to Stay» در طرح‌بندی فوتر سفارشی قرار دهید.
بخش “Where to stay” و بخش فوتر را از طرح اصلی حذف کنید.
در نهایت، بخش خالی طرح‌بندی فوتر سفارشی را حذف کنید.
تنظیمات ماژول نقشه عرض کامل
یک ماژول نقشه را در زیر متن اصلی “Where to stay” اضافه کنید.
سپس تنظیمات ماژول نقشه را باز کنید. دوباره مطمئن شوید که کلید Google API خود را به تنظیمات نقشه اضافه کرده اید تا نقشه نمایش داده شود.
آدرسی را به مرکز نقشه اضافه کنید تا نقشه در یک مکان قرار گیرد. برای این مثال، آن را در سانفرانسیسکو، کالیفرنیا تنظیم می کنیم.
سپس یک کلاف به کارت اضافه کنید.
پین را وارد کنید.
طراحی نهایی ماژول کارت معمولی
در اینجا طرح نهایی با ماژول کارت ساده است.
نتیجه نهایی
حالا بیایید دوباره با هم به طرح های نهایی خود نگاه کنیم.
طرح 1 – ماژول نقشه با عرض کامل
طرح 2 – ماژول کارت ساده
افکار نهایی
ماژول نقشه با عرض کامل و ماژول نقشه معمولی راه آسانی برای افزودن یک عنصر طراحی جذاب به صفحه شما هستند، نه اینکه اطلاعات ارزشمندی را به بازدیدکنندگان وب سایت خود ارائه دهید. شما به راحتی می توانید این بخش ها را با استفاده از تنظیمات مختلف ماژول، ردیف و بخش سفارشی کنید و می توانید آنها را با سایر عناصر طراحی صفحه ترکیب کنید تا طرح بندی های پویا برای وب سایت خود ایجاد کنید. اگر می‌خواهید درباره کارهایی که ماژول‌های نقشه می‌توانند انجام دهند اطلاعات بیشتری کسب کنید، این آموزش را برای اضافه کردن تغییر مکان نقشه ثابت به یک الگوی صفحه بررسی کنید.
آیا از یک ماژول منوی تمام عرض یا یک ماژول منوی معمولی در وب سایت خود استفاده می کنید؟ یا هر دو؟ ما دوست داریم از شما در نظرات بشنویم!