تتيح لك الوحدة النمطية Social Media Divi إنشاء روابط استنادًا إلى الرموز التي ترتبط بملفات التعريف الاجتماعية الخاصة بك على الإنترنت ، بما في ذلك Facebook و Twitter و Google+. تم دمج هذه الرموز في السمة ، بأسلوب Divi الخاص باستخدام أيقوناتها الأنيقة ، مما يجعلها أفضل من استخدام المكونات الإضافية لجهات خارجية. يمكنك إضافة وصلات لمحات اجتماعية متعددة في كل وحدة، ويمكنك إضافة أي مكان وحدة على الصفحة.
كيفية إضافة وحدة وسائط اجتماعية إلى صفحتك
قبل أن تتمكن من إضافة وحدة وسائط اجتماعية إلى صفحتك ، يجب عليك أولاً الانتقال إلى Divi Builder. مرة واحدة في موضوع ديفي مثبتًا على موقع الويب الخاص بك ، ستلاحظ زرًا استخدم Divi Builder فوق محرر التدوينات كلما قمت بإنشاء صفحة جديدة. انقر فوق هذا الزر لتنشيط Divi Builder والوصول إلى جميع وحدات Divi Builder. ثم اضغط على الزر استخدم Visual Builder لبدء المولد في الوضع المرئي. يمكنك أيضًا النقر فوق الزر استخدم Visual Builder عندما تتصفح موقع الويب الخاص بك في المقدمة إذا كنت متصلاً بلوحة معلومات WordPress الخاصة بك.
بمجرد دخولك إلى Visual Builder ، يمكنك النقر فوق زر علامة الجمع الرمادي لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة الوحدات النمطية الجديدة إلا داخل الصفوف. إذا كنت تبدأ صفحة جديدة ، فتذكر إضافة صف إلى صفحتك أولاً.
تحديد موقع وحدة وسائل الاعلام الاجتماعية في قائمة وحدات ثم اضغط عليه لإضافته إلى صفحتك. قائمة الوحدات متاحة ، مما يعني أنه يمكنك كتابة كلمة "تابعنا على الشبكات الاجتماعية" ، ثم انقر فوق "إدخال" للعثور على وحدة الوسائط الاجتماعية وإضافتها تلقائيًا! بمجرد إضافة الوحدة ، سيتم الترحيب بك من خلال قائمة خيارات الوحدة. تنقسم هذه الخيارات إلى ثلاث مجموعات رئيسية: محتويات , تصور et متقدم .
مثال على حالة الاستخدام: إضافة رموز الوسائط الاجتماعية المقابلة إلى صفحة الاتصال
تعد صفحة الاتصال الخاصة بالموقع هي المكان المثالي لعرض ملفات التعريف الاجتماعية الخاصة بك على الإنترنت. يوفر هذا المزيد من الفرص للمستخدمين للبقاء على اتصال و تعزيز بلوق الخاص بك أو عملك. في هذا المثال ، سأوضح لك كيفية إضافة أيقونات الوسائط الاجتماعية لمطابقة التصميم الحالي لصفحة الاتصال.
باستخدام أداة بصرية، إضافة قسم جديد منتظمة مع عرض صف كامل من عمود واحد. أدخل وحدة وسائط اجتماعية في العمود الخاص بك.
في علامة التبويب "المحتوى" الخاصة بإعدادات الوحدة النمطية ، انقر فوق الزر "إضافة عنصر جديد" لإضافة شبكة اجتماعية جديدة إلى الوحدة النمطية الخاصة بك. ضمن معلمات شبكات اجتماعية محددة ، قم بتحديث ما يلي:
خيارات المحتوى
الشبكة الاجتماعية:
عنوان URL لحساب Facebook: [أدخل عنوان URL لحساب Facebook الخاص بك]
خيارات التصميم
لون الرمز: # d94b6a (ألوان متنوعة)
ثم تكرار هذه الشبكة الاجتماعية لإضافة أربع شبكات المزيد (تويتر، و + Google و LinkedIn و Instagram). منذ أن قمت بتكرار الشبكة ، تم نقل لون الرمز المخصص. عليك فقط تحديث عنوان URL لكل شبكة وكل حساب.
الآن لديك رموز الوسائط الاجتماعية التي تتوافق مع تصميم صفحة الاتصال.
خيارات محتوى الوسائط الاجتماعية
في علامة التبويب "المحتوى" ، ستجد جميع عناصر محتوى الوحدة ، مثل النصوص والصور والرموز. كل ذلك يتحكم مما يظهر دائمًا في الوحدة النمطية الخاصة بك في علامة التبويب هذه.
إضافة كائن جديد
هذا هو المكان الذي تضيف فيه شبكات جديدة إلى وحدتك. بالنقر فوق "إضافة عنصر جديد" ، ستفتح نافذة جديدة كاملة من الخيارات الخاصة بشبكتك الجديدة (ضمن علامات التبويب "المحتوى" و "التصميم" و "المتقدم"). انظر أدناه للمعلمات الفردية للشبكة وسائل الاعلام الاجتماعية.
بعد إضافة الشبكة الأولى، سترى شريط الرمادية تظهر مع عنوان الشبكة عرض كتسمية. يحتوي الشريط الرمادي أيضا ثلاثة أزرار تسمح لك لتحرير، مكررة أو حذف الشبكة.
نموذج الرابط
هنا يمكنك اختيار شكل أيقونات الشبكات الاجتماعية الخاصة بك إما في مستطيل دائري أو في دائرة.
يفتح عنوان URL
اختر فتح عنوان URL لشبكتك في علامة تبويب جديدة أو في نفس النافذة.
اتبع الزر
هنا يمكنك اختيار ما إذا كنت تريد تضمين الزر التالي بجوار الرمز أم لا.
علامة المسؤول
سيؤدي هذا إلى تغيير تسمية الوحدة في المنشئ لتسهيل التعرف عليها. عند استخدام عرض WireFrame في Visual Builder ، تظهر هذه الملصقات في كتلة الوحدة النمطية لواجهة Divi Builder.
خيارات تصميم وسائل التواصل الاجتماعي
في علامة التبويب تصميم، وسوف تجد جميع الخيارات التصميم وحدة، مثل الخطوط والألوان والتحجيم، والتباعد. هذه هي علامة التبويب التي ستستخدمها لتغيير مظهر الوحدة الخاصة بك. كل وحدة ديفي لديها قائمة طويلة من الإعدادات التصميم التي يمكنك استخدامها لتغيير نظرة.
بالنسبة لهذه الوحدة ، تتكون خيارات التصميم من عنصر واحد - لون النص.
لون النص
هنا يمكنك اختيار ما إذا كان النص يجب أن يكون فاتحًا أم غامقًا. إذا كنت تعمل على خلفية داكنة ، يجب أن يكون النص فاتحًا. إذا كانت خلفيتك فاتحة ، يجب أن يكون النص داكنًا.
خيارات الوسائط الاجتماعية المتقدمة
في علامة التبويب "خيارات متقدمة" ، ستجد خيارات قد يجدها مصممو الويب الأكثر خبرة مفيدة ، مثل سمات CSS و HTML المخصصة. هنا يمكنك تطبيق CSS مخصص على أي من عناصر الوحدة المتعددة. يمكنك أيضًا تطبيق معرفات وفئات CSS المخصصة على الوحدة النمطية ، والتي يمكن استخدامها لتخصيص الوحدة في ملف style.css الخاص بالقالب الخاص بك.
معرف CSS
أدخل معرف CSS اختياريًا لاستخدامه لهذه الوحدة. يمكن استخدام المعرف لإنشاء نمط CSS مخصص أو الارتباط بأقسام معينة من صفحتك.
فئة CSS
دخلت الصف CSS اختياري لاستخدام لهذه الوحدة. يمكن استخدام فئة CSS لإنشاء نمط CSS مخصص. يمكنك إضافة المزيد من الطبقات، مفصولة بمسافة. يمكن استخدام هذه الفئات في سمة Divi child أو في ورقة أنماط CSS المخصصة التي تضيفها إلى صفحتك أو إلى موقع الويب الخاص بك باستخدام خيارات الموضوع Divi أو معلمات صفحة Divi Builder.
عرف المغلق
يمكن أيضًا تطبيق CSS المخصص على الوحدة النمطية وأي من الأجزاء الداخلية للوحدة. في قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة أوراق أنماط CSS مخصصة مباشرة إلى كل عنصر. تم بالفعل تغليف إدخالات CSS في هذه الإعدادات بعلامات النمط. لذا فقط أدخل قواعد CSS مفصولة بفواصل منقوطة.
رؤية
يتيح لك هذا الخيار التحكم في الأجهزة التي تظهر عليها الوحدة الخاصة بك. يمكنك اختيار إلغاء تنشيط الوحدة الخاصة بك على الأجهزة اللوحية أو الهواتف الذكية أو أجهزة الكمبيوتر المكتبية بشكل فردي. يعد هذا مفيدًا إذا كنت تريد استخدام تعديلات مختلفة على أجهزة مختلفة ، أو إذا كنت تريد تبسيط تصميم الهاتف المحمول عن طريق إزالة عناصر معينة من الصفحة.
خيارات محتوى الوسائط الاجتماعية الفردية
الشبكة الاجتماعية
هنا يمكنك اختيار الشبكة الاجتماعية التي تريد عرضها.
عنوان URL للحساب
هذا هو المكان الذي تدخل فيه عنوان URL لرابط الشبكة الاجتماعية هذا. إذا اخترت Facebook كشبكتك ، فهذا هو المكان الذي ستضع فيه عنوان URL لصفحتك على Facebook.
خيارات تصميم وسائل التواصل الاجتماعي الفردية
لون الرمز
تقدم Divi ألوانًا قياسية لكل شبكة اجتماعية محددة افتراضيًا. هنا ، يمكنك بسهولة تغيير رمز اللون لما تريد.
خيارات الوسائط الاجتماعية المتقدمة
عرف المغلق
يمكن أيضًا تطبيق CSS المخصص على الوحدة النمطية وأي من الأجزاء الداخلية للوحدة. في قسم CSS المخصص ، ستجد حقل نص حيث يمكنك إضافة أوراق أنماط CSS مخصصة مباشرة إلى كل عنصر. تم بالفعل تغليف إدخالات CSS في هذه الإعدادات بعلامات النمط. لذا فقط أدخل قواعد CSS مفصولة بفواصل منقوطة.
[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" selected "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] [/ width_cumnol] [] [vc_cull] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] 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