منو سایت

  • خانه
  • وبلاگ
  • نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

 تاریخ انتشار :
/
  وبلاگ
نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

ماژول Divi Map به طور یکپارچه با Google Maps ادغام می شود و راهی آسان برای افزودن یک نقشه تعاملی به وب سایت Divi شما است. این برای نمایش مکان کسب و کار شما یا ایجاد یک فهرست محلی برای بوتیک ها و مشاغل مورد علاقه شما عالی است.

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

پیش نمایش طراحی

ابتدا، بیایید به آنچه در تلاشیم تا به انجام برسانیم نگاه کنیم. با چند HTML ساده می‌توانیم به افزودن یک دکمه به فیلد اطلاعات مکان برای یک آدرس ثابت دست یابیم.

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

بیایید شیرجه بزنیم!

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

برای شروع، باید موارد زیر را انجام دهید:

  1. Divi را در وب سایت وردپرس خود نصب کنید.
  2. یک صفحه اضافه کنید، عنوانی به آن بدهید و آن را منتشر کنید.
  3. Visual Builder را فعال کنید.
  4. کلید Google API خود را ایجاد کنید.

ساخت از ابتدا را انتخاب کنید

پس از کلیک بر روی دکمه “استفاده از Divi Builder”، صفحه با استفاده از رابط سازنده Divi’s drag-and-drop بارگیری مجدد می شود. سه گزینه ظاهر می شود – ایجاد از ابتدا، انتخاب یک طرح از پیش ساخته شده و کلون کردن یک صفحه موجود. برای اهداف امروزی، «ساخت از ابتدا» را انتخاب کنید. این به ما یک صفحه خالی می دهد که در آن می توانیم پروژه های خود را ایجاد کنیم.

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

کلید Google API خود را اضافه کنید

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

  1. از داشبورد وردپرس خود، به Divi > Theme Options بروید و کلید Google API خود را وارد کنید.
  2. روی “ذخیره تغییرات” کلیک کنید.

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

روش 1: چگونه یک دکمه به جعبه اطلاعات مکان نقشه Divi اضافه کنیم

بیایید وارد درس شویم! در اینجا نحوه افزودن یک دکمه به کادر اطلاعات مکان آمده است.

برگه و ردیف و ماژول نقشه را اضافه کنید

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

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

یک پین اضافه کنید

برای افزودن پین به نقشه خود، روی «افزودن پین جدید» کلیک کنید. با این کار تنظیمات آن پین ظاهر می شود، جایی که می توانید عنوانی را وارد کنید و متن توضیحات را اضافه کنید. برای افزودن یک دکمه به ناحیه متن، HTML زیر را اضافه کنید:

<a class="et_pb_button" href="#">Get Directions</a>

نکته کلیدی در اینجا اضافه کردن کلاس of است et_pb_button که یک لینک متن ساده را به یک دکمه تبدیل می کند. مطمئن شوید که علامت # را با نشانی اینترنتی که می خواهید این دکمه به آن هدایت شود جایگزین کنید.

سپس محل پین خود را در تب Map در قسمت Map pin address اضافه کنید و روی find کلیک کنید.

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

و آنجاست! دکمه ای در قسمت اطلاعات مربوط به محل کابل ظاهر می شود.

روش 2: استایل دادن به دکمه با یک کلاس CSS منحصر به فرد

راه دیگری برای رسیدن به این هدف وجود دارد و آن افزودن یک کلاس CSS منحصر به فرد به HTML برای استایل دادن به دکمه است. در اینجا کد HTML مورد نیاز شما آمده است:

<a class="get-directions-btn" href="#">Get Directions</a>

کلاس CSS منحصر به فردی که اضافه کردیم این بود get-directions-btn. ما می توانیم از این کلاس CSS برای اعمال سبک های منحصر به فرد روی دکمه استفاده کنیم. می توانید این کار را با قرار دادن CSS در صفحه یا با استفاده از شیوه نامه تم فرزند خود انجام دهید. در مثال امروز، ما CSS را در تنظیمات صفحه خود قرار می دهیم.

برای دستیابی به سبک دکمه زیر، این CSS را در تنظیمات صفحه خود کپی و جایگذاری کنید:

.get-directions-btn {
  background-color: #1d1d1d!important;
  color: #f9f9f9;
  border-radius: 100px!important; 
  padding: 5px;}

نحوه اضافه کردن دکمه به قسمت اطلاعات مکان Divi Map

افکار نهایی

افزودن یک دکمه به فیلد مکان پین شما پیوندی تمیز به دکمه مسیرها ارائه می دهد که دریافت مسیرهای سریع را برای بازدیدکنندگان شما آسان می کند. همچنین می توانید با استفاده از CSS که به صفحه شما اضافه شده است، دکمه را استایل دهید! با این، گزینه های یک ظاهر طراحی شده بی پایان هستند. از سفارشی سازی لذت ببرید!