تسهل وحدات الخرائط بملء الشاشة على Divi تكامل خرائط Google المخصصة في كل مكان على صفحتك. يمكنك أيضًا إضافة دبابيس غير محدودة إلى الخريطة وتعيين موقع بدء مخصص. خرائط الوحدات النمطية بتنسيق العرض العادي أيضًا ، لذا تأكد من التحقق من ذلك أيضًا!
مفتاح API لخرائط Google
مفتاح API هو متطلبات لاستخدام وحدة الخرائط. للحصول على مفتاح API ، قم بتسجيل الدخول إلى ملف Google Developers Console، والذي سيرشدك خلال العملية وينشط تلقائيًا واجهة برمجة تطبيقات جافا سكريبت لخرائط Google وجميع الخدمات ذات الصلة. أول شيء سيُطلب منك هو إنشاء مشروع جديد.
بعد ذلك ، سيُطلب منك تسمية مشروعك. يمكنك تسمية المشروع كما تريد. في هذا المثال ، أطلقت عليه ببساطة اسم "الخرائط". يمكنك أيضًا إدخال ملف اسم المجال من موقع الويب الخاص بك (أضف * أمامه إذا سمحت بالوصول من www.domain.com و domain.com) للتأكد من أنه مصرح له بمفتاح API الخاص بك.
بعد إنشاء مشروع مسمى ، سترى مفتاح API يمكنك استخدامه.
بعد الحصول على مفتاح API ، يجب عليك نسخه / لصقه في لوحة خيارات السمة بالانتقال إلى: Divi >> خيارات السمة >> الإعدادات العامة >> مفتاح API لخرائط Google
كيفية إضافة وحدة Divi Full Screen Card
قبل أن تتمكن من إضافة وحدة خريطة ملء الشاشة إلى صفحتك ، يجب عليك أولاً الانتقال إلى Divi Builder. مرة واحدة في موضوع ديفي مثبتًا على موقع الويب الخاص بك ، ستلاحظ زرًا استخدم Divi Builder فوق محرر التدوينات كلما قمت بإنشاء صفحة جديدة. انقر فوق هذا الزر لتنشيط Divi Builder والوصول إلى جميع وحدات Divi Builder. ثم اضغط على الزر استخدم Visual Builder لبدء المولد في الوضع المرئي. يمكنك أيضًا النقر فوق الزر تمكين Visual Builder عندما تتصفح موقع الويب الخاص بك في المقدمة إذا كنت متصلاً بلوحة معلومات WordPress الخاصة بك.
بمجرد دخولك إلى Visual Builder ، يمكنك النقر فوق زر علامة الجمع الرمادي لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة وحدات عرض كامل جديدة إلا داخل أقسام fullwidth.
إذا كنت تبدأ صفحة جديدة ، فلا تنس إضافة قسم كامل العرض إلى صفحتك أولاً.
حدد موقع وحدة بطاقة العرض الكامل في قائمة الوحدات وانقر عليها لإضافتها إلى صفحتك. قائمة الوحدات قابلة للبحث ، مما يعني أنه يمكنك أيضًا كتابة كلمة "خريطة ملء الشاشة" ثم النقر فوق إدخال للعثور تلقائيًا على وحدة الخريطة ذات العرض الكامل وإضافتها! بمجرد إضافة الوحدة ، سيتم الترحيب بك من خلال قائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .
مثال حالة الاستخدام: أضف وحدة خريطة كاملة العرض إلى صفحة جهة اتصال
تعد وحدة الخريطة كاملة العرض طريقة رائعة لعرض موقع عملك على صفحة الاتصال الخاصة بك. وتعد القدرة على إضافة دبابيس متعددة إلى خريطتك لإبراز المواقع المختلفة ومعلومات العمل ميزة مفيدة وجذابة.
في هذا المثال ، سأضيف وحدة خريطة كاملة العرض لعرض معلومات الموقع والعمل عن طريق إضافة دبوس مخصص إلى الخريطة.
مهم : تأكد من إدخال مفتاح Google API صالح في لوحة الخيارات الخاصة بـ موضوع ديفي. لن تعمل وحدة الخريطة بدونها.
باستخدام Visual Builder ، أضف قسم Fullwidth في أسفل صفحة الاتصال. ثم أدخل وحدة خريطة العرض الكامل في القسم الجديد. في علامة التبويب "المحتوى" في إعدادات خريطة العرض الكامل ، أدخل عنوان شركتك ضمن خيار عنوان مركز الخريطة. عنوان مركز الخريطة هو النقطة المركزية للخريطة.
ثم انقر فوق + إضافة عنصر جديد لإنشاء أول رقم تعريف شخصي. قم بتحديث ما يلي:
العنوان: [أدخل عنوان موقعك] المحتوى: [أدخل محتوى رقم التعريف الشخصي الخاص بك (العنوان ورقم الهاتف)] عنوان الخريطة: [أدخل عنوان هذا الموقع المحدد]
حفظ الإعدادات
هذا كل شيئ. لديك الآن وحدة خريطة ديناميكية بعرض كامل في الجزء السفلي من صفحة الاتصال مع دبوس قابل للنقر يعرض معلومات الشركة.
خيارات محتوى الوحدة النمطية خريطة كاملة العرض
في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر دائمًا في الوحدة النمطية الخاصة بك في علامة التبويب هذه.
مفتاح Google API
تستخدم وحدة الخرائط Google Maps API وتتطلب مفتاح Google API صالحًا للعمل. قبل استخدام وحدة الخريطة، تأكد من إضافة مفتاح واجهة برمجة التطبيقات (API) الخاص بك في لوحة الخيارات في موضوع ديفي.
عنوان مركز الخريطة
أدخل عنوانًا للنقطة المركزية على الخريطة ، وسيتم ترميز العنوان جغرافيًا وعرضه على الخريطة أدناه. يكون هذا مفيدًا إذا كان لديك دبابيس متعددة وتريد تكبير الخريطة في موقع محدد وأكثر دقة. يمكنك ببساطة كتابة عنوان بتنسيق قياسي ، مثل "1235 Sunny Road، Some City، State، 88343".
تسمية الإدارة
سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.
خيارات تصميم خريطة كاملة العرض
في علامة التبويب "تصميم" ، ستجد جميع خيارات تصميم الوحدة النمطية ، مثل الخطوط والألوان والتحجيم والتباعد. هذه هي علامة التبويب التي ستستخدمها لتغيير مظهر الوحدة الخاصة بك. تحتوي كل وحدة Divi على قائمة طويلة من إعدادات التصميم التي يمكنك استخدامها لتغيير أي شيء.
عجلة الماوس تكبير
هنا يمكنك اختيار ما إذا كان سيتم التحكم في مستوى التكبير / التصغير بواسطة عجلة الماوس أم لا. في كثير من الأحيان يكون من الأفضل إيقاف تشغيل هذا الخيار حتى لا يتم إزعاج الزوار أثناء قيامهم بالتمرير لأسفل الصفحة وإغلاق عجلة الماوس في إطار iframe الخاص بالخريطة. هذا ينطبق بشكل خاص على وحدات بطاقة العرض الكامل.
تكبير الزاوية
يمكنك اختيار ما إذا كان يمكن نقل البطاقة على الأجهزة المحمولة.
استخدم مرشح درجات الرمادي
يؤدي تمكين هذا الخيار إلى تحويل خريطتك إلى صورة بتدرج الرمادي.
خيارات خريطة كاملة العرض المتقدمة
في علامة التبويب "خيارات متقدمة" ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css الخاص بالقالب الخاص بك.
معرف CSS
أدخل معرف CSS اختياريًا لاستخدامه لهذه الوحدة. يمكن استخدام المعرف لإنشاء نمط CSS مخصص أو الارتباط بأقسام معينة من صفحتك.
فئة CSS
أدخل فئات CSS الاختيارية لاستخدامها في هذه الوحدة. يمكن استخدام فئة CSS لإنشاء نمط CSS مخصص. يمكنك إضافة فئات متعددة مفصولة بمسافة. يمكن استخدام هذه الفئات في سمة Divi child أو في ورقة أنماط CSS المخصصة التي تضيفها إلى صفحتك أو موقع الويب الخاص بك باستخدام خيارات سمة Divi أو الإعدادات في صفحة Divi Builder.
عرف المغلق
يمكن أيضًا تطبيق CSS المخصص على الوحدة النمطية وأي من الأجزاء الداخلية للوحدة. في قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة أوراق أنماط CSS مخصصة مباشرة إلى كل عنصر. تم بالفعل تغليف إدخالات CSS في هذه الإعدادات بعلامات النمط. لذا فقط أدخل قواعد CSS مفصولة بفواصل منقوطة.
رؤية
يتيح لك هذا الخيار التحكم في الأجهزة التي تظهر عليها الوحدة الخاصة بك. يمكنك اختيار إلغاء تنشيط الوحدة الخاصة بك على الأجهزة اللوحية أو الهواتف الذكية أو أجهزة الكمبيوتر المكتبية بشكل فردي. يعد هذا مفيدًا إذا كنت تريد استخدام تعديلات مختلفة على أجهزة مختلفة ، أو إذا كنت تريد تبسيط تصميم الهاتف المحمول عن طريق إزالة عناصر معينة من الصفحة.
خيارات محتوى خريطة كاملة العرض الفردية
لقب
عند إنشاء دبوس جديد ، يمكنك تعيين عنوان. سيظهر هذا العنوان في المربع عند التمرير فوق الدبوس على الخريطة.
محتويات
عند إنشاء دبوس جديد ، يمكنك تعيين كتلة نصية للمحتوى. سيظهر هذا النص في المربع عند التمرير فوق الدبوس على الخريطة.
عنوان الخريطة
هذا هو المكان المحدد على الخريطة حيث سيظهر دبوسك الجديد. يمكنك إدخال العنوان بتنسيق قياسي.
[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "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”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
دروس ديفي أخرى
- المواقع 5 للاستخدام مطعم ديفي موضوع
- كيفية إضافة نص على منتج Divi WooCommerce
- كيفية تغيير لون القائمة بين صفحات Divi
- كيفية تخصيص شبكات بلوق مع ديفي
- كيفية استخدام دور ديفي محرر على وورد
- كيفية إنشاء كامل الشاشة المنزلق ديفي
- كيفية تغيير لون القوائم بين صفحات Divi
- الميزات التي ربما لا تعرفها عن Divi
- كيفية استخدام Divi Builder على وورد
- كيفية استخدام وحدة Divi Video scrolling
- كيفية استخدام وحدة Divi Builder Flip
- كيفية إضافة وحدة شهادة على Divi Builder
- كيفية استخدام وحدة Divi النصية
- كيفية إنشاء شريط التمرير على ديفي
- كيفية تحرير دور مستخدم Divi
- كيفية استخدام وحدة Divi Social Media
- كيفية استخدام وحدة متجر على موضوع ووردبرس]
- كيفية استخدام وحدة Divi الشريط الجانبي
- كيفية استخدام Divi Price Table Module
- كيفية استخدام وحدة العنوان لمنشورات Divi
- كيفية إضافة وحدة فيديو ديفي
- كيفية استخدام وحدة الملاحة المادة
- كيفية استخدام وحدة البحث Divi
- كيفية استخدام وحدة محفظة Divi
- كيفية استخدام وحدة الشخص على Divi Builder
- كيفية استخدام وحدة المحفظة مع فلتر Divi
- كيفية استخدام وحدة المنزلق بعرض كامل
- كيفية استخدام Divi Builder Image Module
- كيفية استخدام وحدة التنقل كاملة العرض في Divi Builder
- كيفية استخدام وحدة معرض الصور
- كيفية استخدام وحدة بطاقة Divi Builder Full-Width
- كيفية استخدام وحدة Divi Full Width Portfolio
- كيفية استخدام وحدة الرأس Divi ذات العرض الكامل
- كيفية استخدام Divi Counter Module
- كيفية استخدام شريط التمرير المقالات على Divi Builder
- كيفية استخدام وحدة Divi Email Optin
