منو سایت

  • خانه
  • وبلاگ
  • استفاده از Divi Fullwidth Map در مقابل ماژول نقشه

استفاده از Divi Fullwidth Map در مقابل ماژول نقشه

 تاریخ انتشار :
/
  وبلاگ
استفاده از Divi Fullwidth Map در مقابل ماژول نقشه

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

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

بیا شروع کنیم!

یک نگاه یواشکی

در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است.

طرح 1 – ماژول نقشه با عرض کامل

Divi Fullwidth Map VS Map Module Fullwidth Final Design

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

طرح 2 – ماژول کارت ساده

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

آنچه برای شروع نیاز دارید

قبل از شروع، تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه Divi را در وب سایت خود دارید.

حالا شما آماده رفتن هستید!

استفاده از Divi Fullwidth Map در مقابل ماژول نقشه

یک صفحه جدید با یک طرح از پیش ساخته شده ایجاد کنید

بیایید با استفاده از یک طرح از پیش ساخته شده از کتابخانه Divi شروع کنیم. برای این طراحی، از صفحه Conference About در بسته طرح‌بندی کنفرانس استفاده می‌کنیم.

یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه Use Divi Builder را انتخاب کنید.

Divi Fullwidth Map VS Map Module Use Builder

برای این مثال از یک طرح‌بندی از پیش ساخته شده از کتابخانه Divi استفاده می‌کنیم، بنابراین View Layouts را انتخاب کنید.

Divi Fullwidth Map VS Map Module View Layouts

طرح کنفرانس درباره صفحه را جستجو و انتخاب کنید.

نقشه Divi Fullwidth در مقابل جستجوی ماژول نقشه

گزینه Use this layout را برای افزودن طرح به صفحه خود انتخاب کنید.

Divi Fullwidth Map VS Map Module Use Layout

اکنون ما آماده ساختن طرح خود هستیم.

طرح 1 – ماژول نقشه با عرض کامل

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

ابتدا روی قسمت فوتر کلیک راست کنید یا روی سه نقطه نوار ابزار بخش کلیک کنید، سپس بخش را کپی کنید.

Divi Fullwidth Map VS Map Module Copy Footer

سپس بخش را از این صفحه حذف کنید.

طرح پاورقی خود را با تم ساز طراحی کنید

از داشبورد وردپرس خود، به تب ایجاد تم در تنظیمات Divi بروید. روی Add New Template کلیک کنید.

Divi Fullwidth Map VS Map Module اضافه کردن الگوی جدید

برای این طراحی من فقط با قالب صفحه کنفرانس خود قالب صفحه را فعال می کنم.

تنظیمات قالب Divi Fullwidth Map VS Map Module

سپس روی Add Custom Footer کلیک کرده و Build Custom Footer را انتخاب کنید.

Divi Fullwidth Map VS Map Module ساخت پاورقی سفارشی

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

بخش چسباندن نقشه Divi Fullwidth در مقابل ماژول نقشه

یک بخش جدید با عرض کامل بالای طرح پاورقی که قرار داده اید اضافه کنید.

Divi Fullwidth Map VS Map Module Insert Fullwidth

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

Divi Fullwidth Map VS Map Module Menu Fullwidth Module

تنظیمات ماژول نقشه عرض کامل

تنظیمات ماژول نقشه را باز کنید. اگر قبلاً این کار را نکرده‌اید، کلید Google API خود را اضافه کنید تا نقشه نمایش داده شود. (در اینجا درباره الزامات کلید Google Maps API بیشتر بدانید.)

Divi Fullwidth Map VS Map Module Google API Key

ما باید یک آدرس مرکز نقشه را در زیر تنظیمات نقشه در تب Content اضافه کنیم تا نقشه ما برای نشان دادن یک مکان خاص قرار گیرد. برای این طرح، نقشه خود را در مرکز سانفرانسیسکو، کالیفرنیا قرار می دهیم.

Divi Fullwidth Map VS Map Module Map آدرس مرکز

همچنین می خواهیم یک پین به نقشه اضافه کنیم. در تب Content، روی Add New PIN کلیک کنید.

Divi Fullwidth Map VS Map Module افزودن پین جدید

پین را وارد کنید.

Divi Fullwidth Map VS Map Module Map Address Pin

در نهایت قسمت خالی طرح فوتر را حذف کنید.

بخش حذف نقشه Divi Fullwidth VS Map Module

طراحی ماژول کارت تمام عرض نهایی

در اینجا طرح نهایی با ماژول کارت تمام عرض است.

Divi Fullwidth Map VS Map Module Fullwidth Final Design

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

طرح 2 – ماژول کارت ساده

برای طرح دوم خود، از ماژول نقشه معمولی استفاده خواهیم کرد. مانند طرح آخر، با استفاده از تنظیمات تم ساز آن را در طراحی فوتر قرار می دهیم. برای این طراحی نقشه ای به قسمت محل اقامت اضافه می کنیم.

طرح پاورقی خود را با تم ساز طراحی کنید

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

روی Add New Template کلیک کنید.

Divi Fullwidth Map VS Map Module اضافه کردن الگوی جدید

یک بار دیگر، قالب صفحه را فقط با قالب صفحه کنفرانس خودمان فعال می کنم.

تنظیمات قالب Divi Fullwidth Map VS Map Module

سپس روی Add Custom Footer کلیک کرده و Build Custom Footer را انتخاب کنید.

Divi Fullwidth Map VS Map Module ساخت پاورقی سفارشی

هنگامی که تنظیمات پاورقی سفارشی شما در سازنده تم باز شد، به برگه طرح بندی اصلی برگردید و بخش “Where to stay” را کپی کنید.

بخش کپی نقشه Divi Fullwidth در مقابل ماژول نقشه

بخش “Where to Stay” را در طرح پاورقی سفارشی خود قرار دهید.

بخش چسباندن نقشه Divi Fullwidth در مقابل ماژول نقشه

به طرح اولیه برگردید و قسمت فوتر را کپی کنید.

Divi Fullwidth Map VS Map Module Copy Footer

سپس قسمت پاورقی را در زیر بخش «Where to Stay» در طرح‌بندی فوتر سفارشی قرار دهید.

Divi Fullwidth Map VS Map Module Regular Paste Footer

بخش “Where to stay” و بخش فوتر را از طرح اصلی حذف کنید.

در نهایت، بخش خالی طرح‌بندی فوتر سفارشی را حذف کنید.

بخش حذف منظم نقشه Divi Fullwidth VS Map Module

تنظیمات ماژول نقشه عرض کامل

یک ماژول نقشه را در زیر متن اصلی “Where to stay” اضافه کنید.

Divi Fullwidth Map VS Map Module Regular Map Module

سپس تنظیمات ماژول نقشه را باز کنید. دوباره مطمئن شوید که کلید Google API خود را به تنظیمات نقشه اضافه کرده اید تا نقشه نمایش داده شود.

آدرسی را به مرکز نقشه اضافه کنید تا نقشه در یک مکان قرار گیرد. برای این مثال، آن را در سانفرانسیسکو، کالیفرنیا تنظیم می کنیم.

Divi Fullwidth Map VS Map Module Regular API Map Address

سپس یک کلاف به کارت اضافه کنید.

Divi Fullwidth Map VS Map Module Regular Add Pin

پین را وارد کنید.

Divi Fullwidth Map VS Map Module Address Pin Regular Map

طراحی نهایی ماژول کارت معمولی

در اینجا طرح نهایی با ماژول کارت ساده است.

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

نتیجه نهایی

حالا بیایید دوباره با هم به طرح های نهایی خود نگاه کنیم.

طرح 1 – ماژول نقشه با عرض کامل

Divi Fullwidth Map VS Map Module Fullwidth Final Design

Divi Fullwidth Map VS Map Module Fullwidth Final Design Mobile

طرح 2 – ماژول کارت ساده

Divi Fullwidth Map VS Map Module Regular Final Design

Divi Fullwidth Map VS Map Module Regular Final Design Mobile

افکار نهایی

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

آیا از یک ماژول منوی تمام عرض یا یک ماژول منوی معمولی در وب سایت خود استفاده می کنید؟ یا هر دو؟ ما دوست داریم از شما در نظرات بشنویم!