ماژول های نقشه ادغام Google Maps سفارشی را در هر کجای صفحه شما آسان می کند. حتی می توانید پین های نامحدودی را به نقشه اضافه کنید و یک مکان شروع سفارشی تنظیم کنید. ماژول های کارت نیز در قالب عرض کامل ارائه می شوند ، بنابراین حتماً این مورد را نیز بررسی کنید!

نقشه divi apercu.png

کلید Google Maps API

یک کلید API است مقررات برای استفاده از ماژول Map. برای به دست آوردن یک کلید API ، وارد سیستم شوید Google Developers Console، که شما را در روند کار راهنمایی کرده و به طور خودکار Google Maps JavaScript API و همه سرویس های مرتبط را فعال می کند. اولین چیزی که از شما خواسته می شود ایجاد یک پروژه جدید است.

یک API Google.jpg را ثبت کنید

در مرحله بعد از شما خواسته می شود که نام پروژه خود را بنویسید. شما می توانید نام پروژه را هر چه می خواهید بگذارید. در این مثال، من آن را به سادگی "نقشه" نامیدم. شما همچنین می توانید وارد کنید نام دامنه از وب سایت خود (اگر اجازه دسترسی از www.domain.com و domain.com را دارید، یک * در مقابل آن اضافه کنید) تا مطمئن شوید که کلید API شما مجاز است.

برای نام پروژه Google API.jpg

بعد از ایجاد یک پروژه نامگذاری شده ، یک کلید API خواهید دید که می توانید از آن استفاده کنید.

ایجاد یک credentials.jpg نقشه برنامه Google

پس از به دست آوردن کلید API ، باید با رفتن به صفحه پنل گزینه های موضوع آن را کپی / چسباند: Divi >> گزینه های طرح زمینه >> تنظیمات عمومی >> Google Maps API کلید

نحوه اضافه کردن ماژول نقشه به صفحه خود

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

سازنده دو

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

ماژول نقشه را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما می توانید کلمه "map" را نیز تایپ کنید و سپس بر روی enter کلیک کنید تا به طور خودکار ماژول نقشه را پیدا کرده و اضافه کنید! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

از مثال موردی استفاده کنید: یک ماژول نقشه را به یک صفحه تماس اضافه کنید

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

برای این مثال، من قصد دارم یک ماژول نقشه اضافه کنم تا با افزودن یک پین سفارشی به نقشه، مکان و اطلاعات کسب و کار را به نمایش بگذارد.

ارائه نقشه گوگل entreprise.jpg

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

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

یک نقشه گزینه را اضافه کنید divi.jpg

سپس روی کلیک کنید + مورد جدیدی اضافه کنید برای ایجاد اولین پین خود موارد زیر را به روز کنید:

عنوان: [عنوان مکان خود را وارد کنید]
محتوا: [محتوای پین خود را وارد کنید (آدرس و شماره تلفن)]
آدرس نقشه: [آدرس این مکان خاص را وارد کنید]

آدرس را برای محل precis.jpg وارد کنید

تنظیمات را ذخیره کنید

همین. اکنون شما یک ماژول نقشه پویا در پایین صفحه تماس با یک پین قابل کلیک دارید که اطلاعات شرکت را نمایش می دهد.

کارت حافظه پین ​​divi.jpg

گزینه های محتوا ماژول نقشه

در برگه محتوا ، تمام عناصر محتوای ماژول ، مانند متن ، تصاویر و آیکون ها را پیدا خواهید کرد. همه اینها را کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه یافت می شود.

ماژول گزینه module.png map.png

+ یک مقاله جدید اضافه کنید

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

بعد از اضافه کردن اولین پین خود ، می بینید که یک نوار خاکستری با عنوان پین شما به عنوان برچسب ظاهر می شود. نوار خاکستری همچنین دارای سه دکمه است که به شما امکان می دهد کلید فشار را ویرایش ، کپی یا حذف کنید.

کلید API گوگل

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

آدرس مرکز نقشه

یک آدرس برای نقطه مرکزی نقشه وارد کنید ، و آدرس ژئوکد خواهد شد و بر روی نقشه زیر نمایش داده می شود. اگر چندین پین داشته باشید و بخواهید نقشه در مکان مشخص و دقیق تری بزرگ شود ، این مفید است. می توانید به سادگی یک آدرس را در یک قالب استاندارد مانند "1235 Sunny Road، Some City، State، 88343" تایپ کنید.

برچسب سرپرست

این برچسب ماژول را در سازنده تغییر می دهد تا به راحتی شناسایی شود. وقتی از نمای WireFrame در Visual Builder استفاده می کنید ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.

گزینه های طراحی ماژول نقشه

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

ماژول نقشه ongle design.png

چرخ زوم چرخ

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

زوم قابل کشف

اگر کارت را می توان در دستگاه های تلفن همراه جابجا کرد ، می توانید اینجا را انتخاب کنید.

از فیلتر سیاه و سفید استفاده کنید

فعال کردن این گزینه نقشه خود را به یک تصویر سیاه و سفید تبدیل می کند.

گزینه های نقشه پیشرفته

در برگه پیشرفته ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی CSS و HTML ، مفید باشند. در اینجا می توانید CSS سفارشی را به عناصر مختلف ماژول اعمال کنید. همچنین می توانید کلاسها و شناسه های CSS سفارشی را به ماژول اعمال کنید ، که می تواند برای سفارشی کردن ماژول در پرونده style.css موضوع کودک شما استفاده شود.

ماژول پیش فرض divi.png

شناسه CSS

یک شناسه CSS اختیاری برای استفاده برای این ماژول وارد کنید. از یک شناسه می توان برای ایجاد یک سبک CSS سفارشی یا پیوند دادن به بخشهای خاصی از صفحه خود استفاده کرد.

کلاس CSS

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

CSS سفارشی

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

دید

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

گزینه های پین کارت فردی

گزینه close divi.png

عنوان

هنگام ایجاد یک پین جدید ، می توانید یک عنوان اختصاص دهید. هنگام قرار گرفتن در بالای سنجاق روی نقشه ، این عنوان در کادر نشان داده می شود.

محتویات

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

آدرس نقشه

این نقطه دقیق روی نقشه است که پین ​​جدید شما در آن ظاهر می شود. می توانید آدرس را به صورت استاندارد وارد کنید.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]دانلود تم DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

سایر آموزشهای دوگانه