ماژول های نقشه ادغام Google Maps سفارشی را در هر کجای صفحه شما آسان می کند. حتی می توانید پین های نامحدودی را به نقشه اضافه کنید و یک مکان شروع سفارشی تنظیم کنید. ماژول های کارت نیز در قالب عرض کامل ارائه می شوند ، بنابراین حتماً این مورد را نیز بررسی کنید!
کلید Google Maps API
یک کلید API است مقررات برای استفاده از ماژول Map. برای به دست آوردن یک کلید API ، وارد سیستم شوید Google Developers Console، که شما را در روند کار راهنمایی کرده و به طور خودکار Google Maps JavaScript API و همه سرویس های مرتبط را فعال می کند. اولین چیزی که از شما خواسته می شود ایجاد یک پروژه جدید است.
در مرحله بعد از شما خواسته می شود که نام پروژه خود را بنویسید. شما می توانید نام پروژه را هر چه می خواهید بگذارید. در این مثال، من آن را به سادگی "نقشه" نامیدم. شما همچنین می توانید وارد کنید نام دامنه از وب سایت خود (اگر اجازه دسترسی از www.domain.com و domain.com را دارید، یک * در مقابل آن اضافه کنید) تا مطمئن شوید که کلید API شما مجاز است.
بعد از ایجاد یک پروژه نامگذاری شده ، یک کلید API خواهید دید که می توانید از آن استفاده کنید.
پس از به دست آوردن کلید API ، باید با رفتن به صفحه پنل گزینه های موضوع آن را کپی / چسباند: Divi >> گزینه های طرح زمینه >> تنظیمات عمومی >> Google Maps API کلید
نحوه اضافه کردن ماژول نقشه به صفحه خود
قبل از اینکه بتوانید یک ماژول نقشه را به صفحه خود اضافه کنید، ابتدا باید به Divi Builder بروید. از وقتی که تم دیوی در وب سایت خود نصب شده است، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید در هر زمان که صفحه جدیدی ایجاد کردید ، بالای ویرایشگر پست قرار بگیرید. برای فعال سازی Divi Builder و دسترسی به همه ماژول های Divi Builder بر روی این دکمه کلیک کنید. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت تصویری. همچنین می توانید بر روی دکمه کلیک کنید از Visual Builder استفاده کنید اگر به داشبورد وردپرس خود متصل هستید ، وب سایت خود را در پیش زمینه مرور می کنید.
پس از ورود به Visual Builder ، می توانید بر روی دکمه خاکستری بعلاوه کلیک کنید تا یک ماژول جدید به صفحه خود اضافه کنید. ماژول های جدید فقط می توانند در داخل ردیف ها اضافه شوند. اگر صفحه جدیدی را شروع می کنید ، به یاد داشته باشید که ابتدا یک ردیف به صفحه خود اضافه کنید.
ماژول نقشه را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما می توانید کلمه "map" را نیز تایپ کنید و سپس بر روی enter کلیک کنید تا به طور خودکار ماژول نقشه را پیدا کرده و اضافه کنید! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .
از مثال موردی استفاده کنید: یک ماژول نقشه را به یک صفحه تماس اضافه کنید
ماژول نقشه یک راه عالی برای نمایش موقعیت کسب و کار شما در صفحه تماس شما است. و امکان اضافه کردن چندین پین به نقشه خود برای برجسته کردن مکانهای مختلف و اطلاعات تجاری یک ویژگی مفید و جذاب است.
برای این مثال، من قصد دارم یک ماژول نقشه اضافه کنم تا با افزودن یک پین سفارشی به نقشه، مکان و اطلاعات کسب و کار را به نمایش بگذارد.
مهم : مطمئن شوید که یک کلید Google API معتبر در پانل گزینه ها وارد شده است تم دیوی. ماژول نقشه بدون آن کار نخواهد کرد.
با استفاده از Visual Builder ، یک بخش استاندارد در پایین صفحه تماس اضافه کنید. سپس ماژول Map را در بخش جدید خود وارد کنید. در برگه محتوا در تنظیمات کارت ، آدرس شرکت خود را در زیر گزینه Card address address وارد کنید. آدرس مرکز نقشه نقطه مرکزی نقشه است.
سپس روی کلیک کنید + مورد جدیدی اضافه کنید برای ایجاد اولین پین خود موارد زیر را به روز کنید:
عنوان: [عنوان مکان خود را وارد کنید]
محتوا: [محتوای پین خود را وارد کنید (آدرس و شماره تلفن)]
آدرس نقشه: [آدرس این مکان خاص را وارد کنید]
تنظیمات را ذخیره کنید
همین. اکنون شما یک ماژول نقشه پویا در پایین صفحه تماس با یک پین قابل کلیک دارید که اطلاعات شرکت را نمایش می دهد.
گزینه های محتوا ماژول نقشه
در برگه محتوا ، تمام عناصر محتوای ماژول ، مانند متن ، تصاویر و آیکون ها را پیدا خواهید کرد. همه اینها را کنترل می کند چی به نظر می رسد که در ماژول شما همیشه در این برگه یافت می شود.
+ یک مقاله جدید اضافه کنید
اینجا جایی است که شما پین های جدید (یا شکاف ها) را به ماژول صفحه خود اضافه می کنید. با کلیک بر روی "افزودن مورد جدید" لیست جدیدی از تنظیمات طراحی (شامل محتوا ، طراحی ، پیشرفته) برای پین جدید شما باز می شود. برای تنظیمات جداگانه پین به زیر مراجعه کنید.
بعد از اضافه کردن اولین پین خود ، می بینید که یک نوار خاکستری با عنوان پین شما به عنوان برچسب ظاهر می شود. نوار خاکستری همچنین دارای سه دکمه است که به شما امکان می دهد کلید فشار را ویرایش ، کپی یا حذف کنید.
کلید API گوگل
ماژول Maps از Google Maps API استفاده می کند و برای کار کردن به یک کلید Google API معتبر نیاز دارد. قبل از استفاده از ماژول نقشه، مطمئن شوید که کلید API خود را در پانل گزینهها اضافه کردهاید تم دیوی.
آدرس مرکز نقشه
یک آدرس برای نقطه مرکزی نقشه وارد کنید ، و آدرس ژئوکد خواهد شد و بر روی نقشه زیر نمایش داده می شود. اگر چندین پین داشته باشید و بخواهید نقشه در مکان مشخص و دقیق تری بزرگ شود ، این مفید است. می توانید به سادگی یک آدرس را در یک قالب استاندارد مانند "1235 Sunny Road، Some City، State، 88343" تایپ کنید.
برچسب سرپرست
این برچسب ماژول را در سازنده تغییر می دهد تا به راحتی شناسایی شود. وقتی از نمای WireFrame در Visual Builder استفاده می کنید ، این برچسب ها در بلوک ماژول رابط Divi Builder ظاهر می شوند.
گزینه های طراحی ماژول نقشه
در برگه Design ، تمام گزینه های یک ظاهر طراحی شده ماژول ، مانند قلم ها ، رنگ ها ، اندازه و فاصله را پیدا خواهید کرد. این زبانه ای است که برای تغییر ظاهر ماژول خود استفاده خواهید کرد. هر ماژول Divi دارای یک لیست طولانی از تنظیمات طراحی است که می توانید برای تغییر هر آنچه که می خواهید استفاده کنید.
چرخ زوم چرخ
در اینجا می توانید انتخاب کنید که آیا سطح بزرگنمایی توسط چرخ ماوس کنترل می شود یا خیر. اغلب اوقات بهتر است این گزینه را خاموش کنید تا بازدیدکنندگان هنگام پیمایش در صفحه و چرخاندن ماوس در iframe نقشه ، مزاحمتی ایجاد نکنند. این امر خصوصاً در مورد ماژول های کارت تمام عرض صدق می کند.
زوم قابل کشف
اگر کارت را می توان در دستگاه های تلفن همراه جابجا کرد ، می توانید اینجا را انتخاب کنید.
از فیلتر سیاه و سفید استفاده کنید
فعال کردن این گزینه نقشه خود را به یک تصویر سیاه و سفید تبدیل می کند.
گزینه های نقشه پیشرفته
در برگه پیشرفته ، گزینه هایی را پیدا می کنید که ممکن است طراحان وب با تجربه تر ، مانند ویژگی های سفارشی CSS و HTML ، مفید باشند. در اینجا می توانید CSS سفارشی را به عناصر مختلف ماژول اعمال کنید. همچنین می توانید کلاسها و شناسه های CSS سفارشی را به ماژول اعمال کنید ، که می تواند برای سفارشی کردن ماژول در پرونده style.css موضوع کودک شما استفاده شود.
شناسه CSS
یک شناسه CSS اختیاری برای استفاده برای این ماژول وارد کنید. از یک شناسه می توان برای ایجاد یک سبک CSS سفارشی یا پیوند دادن به بخشهای خاصی از صفحه خود استفاده کرد.
کلاس CSS
کلاسهای CSS اختیاری را برای استفاده برای این ماژول وارد کنید. برای ایجاد یک سبک CSS سفارشی می توان از کلاس CSS استفاده کرد. می توانید چندین کلاس را که با فاصله از هم جدا شده اند ، اضافه کنید. با استفاده از گزینه های طرح زمینه Divi یا تنظیمات موجود در صفحه Divi Builder می توانید از این کلاسها در طرح زمینه Divi child یا سبک CSS سفارشی که به صفحه خود اضافه می کنید یا به وب سایت خود استفاده کنید.
CSS سفارشی
CSS سفارشی همچنین می تواند بر روی ماژول و هر یک از واحدهای داخلی ماژول اعمال شود. در بخش CSS سفارشی ، یک قسمت متنی پیدا می کنید که می توانید برگه های سبک CSS سفارشی را مستقیماً به هر عنصر اضافه کنید. ورودی های CSS در این تنظیمات از قبل با برچسب های سبک بسته بندی شده اند. بنابراین کافیست قوانین CSS را که با نقطه ویرگول جدا شده اند وارد کنید.
دید
این گزینه به شما امکان می دهد دستگاه هایی را که ماژول روی آنها نشان داده می شود کنترل کنید. می توانید به صورت جداگانه ماژول خود را بر روی تبلت ها ، تلفن های هوشمند یا دسک تاپ غیرفعال کنید. اگر می خواهید از حالت های مختلف در دستگاه های مختلف استفاده کنید ، یا اگر می خواهید با حذف عناصر خاصی از صفحه ، طراحی تلفن همراه را ساده کنید ، این کار مفید است.
گزینه های پین کارت فردی
عنوان
هنگام ایجاد یک پین جدید ، می توانید یک عنوان اختصاص دهید. هنگام قرار گرفتن در بالای سنجاق روی نقشه ، این عنوان در کادر نشان داده می شود.
محتویات
هنگام ایجاد پین جدید ، می توانید یک بلوک متنی محتوا اختصاص دهید. هنگام قرار گرفتن در بالای سنجاق روی نقشه ، این متن در کادر نشان داده می شود.
آدرس نقشه
این نقطه دقیق روی نقشه است که پین جدید شما در آن ظاهر می شود. می توانید آدرس را به صورت استاندارد وارد کنید.
[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]
سایر آموزشهای دوگانه
- سایت های رستوران 5 که از موضوع دووی استفاده می کنند
- چگونه برای اضافه کردن متن در محصول Divi WooCommerce
- چگونه می توان رنگ منو را بین صفحات Divi تغییر داد
- نحوه شخصی سازی شبکه های یک وبلاگ با Divi
- نحوه استفاده از ویرایشگر نقش دووی در وردپرس
- نحوه ایجاد یک نوار لغزنده تمام صفحه Divi
- چگونگی تغییر رنگ منوها بین صفحات Divi
- ویژگی هایی که احتمالاً در مورد Divi نمی دانید
- نحوه استفاده از Divi Builder در وردپرس
- نحوه استفاده از ماژول پیمایش ویدئو Divi
- نحوه استفاده از ماژول Flip Builder Divi
- نحوه اضافه کردن ماژول توصیفی در Divi Builder
- نحوه استفاده از ماژول متن دووی
- نحوه ایجاد کشویی در دیوی
- نحوه ویرایش نقش کاربر Divi
- نحوه استفاده از ماوی رسانه اجتماعی Divi
- نحوه استفاده از ماژول فروشگاه با موضوع WordPress Divi
- نحوه استفاده از ماوی نوار کناری Divi
- نحوه استفاده از ماژول جدول قیمت دووی
- چگونه از عنوان ماژول نشریات دووی استفاده کنیم
- نحوه اضافه کردن ماژول ویدیویی از دیوی
- نحوه استفاده از ماژول ناوبری مقاله
- چگونه از ماوی جستجوی Divi استفاده کنیم
- چگونه از ماژول کیف پول Divi استفاده کنیم
- نحوه استفاده از ماژول شخص در Divi Builder
- نحوه استفاده از ماژول کیف پول با فیلتر Divi
- نحوه استفاده از ماژول کشویی عرض کامل
- نحوه استفاده از ماژول Image Divid Builder
- نحوه استفاده از ماژول ناوبری تمام عرض Divi Builder
- نحوه استفاده از ماژول گالری تصاویر
- نحوه استفاده از ماوی کارت Width Divi Builder
- نحوه استفاده از ماژول Portfolio Full Width Divi
- نحوه استفاده از ماژول هدر تمام عیار Divi
- چگونه از ماوی شمارنده Divi استفاده کنیم
- نحوه استفاده از نوار لغزنده مقالات در Divi Builder
- نحوه استفاده از ماژول Divi ایمیل Optin