ماژول های نقشه تمام صفحه در Divi ادغام Google Maps شخصی شده را در همه جای صفحه شما تسهیل می کنند. حتی می توانید پین های نامحدودی را به نقشه اضافه کنید و یک مکان شروع سفارشی تنظیم کنید. نقشه های ماژول ها نیز در قالب عرض عادی هستند ، بنابراین حتماً این مورد را نیز بررسی کنید!
کلید Google Maps API
یک کلید API است مقررات برای استفاده از ماژول Maps. برای به دست آوردن یک کلید API ، وارد سیستم شوید Google Developers Console، که شما را در روند کار راهنمایی کرده و به طور خودکار Google Maps JavaScript API و همه سرویس های مرتبط را فعال می کند. اولین چیزی که از شما خواسته می شود ایجاد یک پروژه جدید است.
در مرحله بعد از شما خواسته می شود که نام پروژه خود را بنویسید. شما می توانید نام پروژه را هر چه می خواهید بگذارید. در این مثال، من آن را به سادگی "نقشه" نامیدم. شما همچنین می توانید وارد کنید نام دامنه از وب سایت خود (اگر اجازه دسترسی از www.domain.com و domain.com را دارید، یک * در جلوی آن اضافه کنید) تا مطمئن شوید که به کلید API شما مجاز است.
بعد از ایجاد یک پروژه نامگذاری شده ، یک کلید API خواهید دید که می توانید از آن استفاده کنید.
پس از به دست آوردن کلید API ، باید با رفتن به صفحه پنل گزینه های موضوع آن را کپی / چسباند: Divi >> گزینه های طرح زمینه >> تنظیمات عمومی >> Google Maps API کلید
چگونه ماژول Divi Full Screen Card را اضافه کنیم
قبل از اینکه بتوانید یک ماژول نقشه تمام صفحه را به صفحه خود اضافه کنید، ابتدا باید به Divi Builder بروید. از وقتی که تم دیوی در وب سایت خود نصب شده است، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید در هر زمان که صفحه جدیدی ایجاد کردید ، بالای ویرایشگر پست قرار بگیرید. برای فعال سازی Divi Builder و دسترسی به همه ماژول های Divi Builder بر روی این دکمه کلیک کنید. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت تصویری. همچنین می توانید بر روی دکمه کلیک کنید ویژوال ساز را فعال کنید اگر به داشبورد وردپرس خود متصل هستید ، وب سایت خود را در پیش زمینه مرور می کنید.
پس از ورود به Visual Builder ، می توانید بر روی دکمه خاکستری بعلاوه کلیک کنید تا یک ماژول جدید به صفحه خود اضافه کنید. ماژول های پهنای کامل فقط می توانند در بخش های پهنای کامل اضافه شوند.
اگر صفحه جدیدی را شروع می کنید ، فراموش نکنید که ابتدا بخش پهنای کامل را به صفحه خود اضافه کنید.
ماژول نقشه تمام عرض را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست حالت های قابل جستجو است ، به این معنی که شما همچنین می توانید کلمه "نقشه تمام صفحه" را تایپ کنید و سپس بر روی enter کلیک کنید تا به طور خودکار ماژول نقشه تمام عرض را پیدا کرده و اضافه کنید! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .
مثال استفاده از حالت: ماژول نقشه تمام عرض را به صفحه مخاطب اضافه کنید
یک ماژول نقشه تمام عرض راهی عالی برای نمایش موقعیت مکانی کسب و کارتان در صفحه تماستان است. و امکان اضافه کردن چندین پین به نقشه خود برای برجسته کردن مکان‌های مختلف و اطلاعات تجاری یک ویژگی مفید و جذاب است.
برای این مثال، یک ماژول نقشه با عرض کامل برای نمایش اطلاعات مکان و کسب و کار با افزودن یک پین سفارشی به نقشه اضافه می کنم.
مهم : مطمئن شوید که یک کلید Google API معتبر در پانل گزینه ها وارد شده است تم دیوی. ماژول نقشه بدون آن کار نخواهد کرد.
با استفاده از Visual Builder ، یک بخش Fullwidth را در پایین صفحه تماس اضافه کنید. سپس ماژول Fullwidth Map را در بخش جدید خود وارد کنید. در زبانه محتوا از تنظیمات نقشه تمام عرض ، آدرس شرکت خود را در زیر گزینه Map center 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
