ماژول Divi Map به طور یکپارچه با Google Maps ادغام می شود و راهی آسان برای افزودن یک نقشه تعاملی به وب سایت Divi شما است. این برای نمایش مکان کسب و کار شما یا ایجاد یک فهرست محلی برای بوتیک ها و مشاغل مورد علاقه شما عالی است.
در این پست به شما نشان خواهیم داد که چگونه یک دکمه به فیلد اطلاعات مکان برای یکی از آدرس های پین خود اضافه کنید.
پیش نمایش طراحی
ابتدا، بیایید به آنچه در تلاشیم تا به انجام برسانیم نگاه کنیم. با چند HTML ساده می‌توانیم به افزودن یک دکمه به فیلد اطلاعات مکان برای یک آدرس ثابت دست یابیم.
بیایید شیرجه بزنیم!
آنچه برای شروع نیاز دارید
برای شروع، باید موارد زیر را انجام دهید:
- Divi را در وب سایت وردپرس خود نصب کنید.
- یک صفحه اضافه کنید، عنوانی به آن بدهید و آن را منتشر کنید.
- Visual Builder را فعال کنید.
- کلید Google API خود را ایجاد کنید.
ساخت از ابتدا را انتخاب کنید
پس از کلیک بر روی دکمه “استفاده از Divi Builder”، صفحه با استفاده از رابط سازنده Divi’s drag-and-drop بارگیری مجدد می شود. سه گزینه ظاهر می شود – ایجاد از ابتدا، انتخاب یک طرح از پیش ساخته شده و کلون کردن یک صفحه موجود. برای اهداف امروزی، «ساخت از ابتدا» را انتخاب کنید. این به ما یک صفحه خالی می دهد که در آن می توانیم پروژه های خود را ایجاد کنیم.
کلید Google API خود را اضافه کنید
قبل از اینکه بتوانیم به طور کامل از ماژول نقشه و عملکردهای آن استفاده کنیم، باید کلید Google API خود را به گزینه های موضوع خود اضافه کنید.
- از داشبورد وردپرس خود، به Divi > Theme Options بروید و کلید Google API خود را وارد کنید.
- روی “ذخیره تغییرات” کلیک کنید.
روش 1: چگونه یک دکمه به جعبه اطلاعات مکان نقشه Divi اضافه کنیم
بیایید وارد درس شویم! در اینجا نحوه افزودن یک دکمه به کادر اطلاعات مکان آمده است.
برگه و ردیف و ماژول نقشه را اضافه کنید
به صفحه ای که ایجاد کرده اید برگردید و یک بخش و یک ردیف ستونی به صفحه خود اضافه کنید. سپس کتابخانه ماژول را بارگذاری کنید و روی Map کلیک کنید. پس از افزودن، پنجره ماژول با تمام تنظیمات و ویژگی های موجود در ماژول نقشه ظاهر می شود.
یک پین اضافه کنید
برای افزودن پین به نقشه خود، روی «افزودن پین جدید» کلیک کنید. با این کار تنظیمات آن پین ظاهر می شود، جایی که می توانید عنوانی را وارد کنید و متن توضیحات را اضافه کنید. برای افزودن یک دکمه به ناحیه متن، HTML زیر را اضافه کنید:
<a class="et_pb_button" href="#">Get Directions</a>
نکته کلیدی در اینجا اضافه کردن کلاس of است et_pb_button که یک لینک متن ساده را به یک دکمه تبدیل می کند. مطمئن شوید که علامت # را با نشانی اینترنتی که می خواهید این دکمه به آن هدایت شود جایگزین کنید.
سپس محل پین خود را در تب Map در قسمت Map pin address اضافه کنید و روی find کلیک کنید.
و آنجاست! دکمه ای در قسمت اطلاعات مربوط به محل کابل ظاهر می شود.
روش 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;}
افکار نهایی
افزودن یک دکمه به فیلد مکان پین شما پیوندی تمیز به دکمه مسیرها ارائه می دهد که دریافت مسیرهای سریع را برای بازدیدکنندگان شما آسان می کند. همچنین می توانید با استفاده از CSS که به صفحه شما اضافه شده است، دکمه را استایل دهید! با این، گزینه های یک ظاهر طراحی شده بی پایان هستند. از سفارشی سازی لذت ببرید!