ديفي: كيفية إنشاء تذييل مخصص

هل ترغب في إنشاء تذييل مخصص في DIVI؟

أحد أهم أجزاء منشئ السمات Divi هو القدرة على إضافة تذييلات عالمية ديناميكيًا إلى صفحات الويب والمنشورات الخاصة بك. 

بمجرد تصميم تذييل ما ، يمكنك إضافته تلقائيًا إلى أي نوع من الصفحات أو المنشور الذي تريده باستخدام أداة إنشاء سمات Divi. 

في هذا البرنامج التعليمي ، سنأخذك خطوة بخطوة خلال عملية إنشاء وإضافة تذييل عام إلى ملف موقع انترنت.

مسح

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على التذييل الذي سنقوم بتصميمه.

مكتب

انتقل إلى Divi Theme Builder وأضف تذييلًا عالميًا

• انتقل إلى Divi> Theme Builder وانقر على " إضافة تذييل عام« 

• اختار " بناء تذييل عام« 

تخصيص القسم # 1

لون الخلفية

افتح القسم الذي يمكنك العثور عليه في الصفحة وقم بتغيير لون خلفية القسم.

• الخلفية: # 000000

مباعدة

التبديل إلى علامة التبويب الطراز ثم قم بتغيير إعدادات تباعد الأقسام.

• الهامش (أعلى ، يسار ويمين): 6vw
• الهامش الداخلي (يسار ويمين): 30 بكسل

الحدود

ثم أضف حدًا علويًا على اليسار واليمين.

• مستطيل دائري أعلى اليسار: 20 بكسل
• مستطيل دائري أعلى يمين: 20 بكسل

صندوق الظل

قم أيضًا بتضمين ظل الصندوق في إعدادات القسم.

• قوة طمس الظل القوس: 135 بكسل
• لون خط الترجمة: rgba (0,0,0,0.18،XNUMX،XNUMX،XNUMX)

أضف سطرًا جديدًا إلى القسم

هيكل العمود

تابع عن طريق إضافة صف إلى القسم الخاص بك باستخدام بنية العمود التالية:

أضف وحدة نصية إلى العمود

أضف عنوانًا بالحجم H2 (العنوان 2)

أدخل وحدة نصية باستخدام محتويات بحجم H2

إعدادات نص H2

قم بالتبديل إلى علامة التبويب الطراز من الوحدة وتعديل معلمات نص H2 وفقًا لذلك:

• خط الرأس: Poppins
• رأس الضوء الخافت: شبه عريض
• محاذاة النص: توسيط
• لون نص العنوان: #ffffff
• حجم نص الرأس: 31 بكسل (سطح المكتب) ، 24 بكسل (الجهاز اللوحي) ، 18 بكسل (الهاتف)
• ارتفاع خط الرأس: 1,6 em

التحجيم

أضف أيضًا أقصى عرض للوحدة.

• أقصى عرض: 700 بكسل

أضف وحدة الزر إلى العمود

إضافة نص إلى الزر

أدخل وحدة زر أسفل وحدة النص مباشرةً في العمود الخاص بك وأدخل نصًا من اختيارك.

انحياز

قم بالتبديل إلى علامة التبويب الطراز من الوحدة وتغيير محاذاة الزر إلى المركز.

• محاذاة الزر: توسيط

إعدادات زر

تواصل عن طريق تخصيص الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 12 بكسل
• لون نص الزر: # 000000
• زر الخلفية: #FFFFFF
• زر عرض الحدود: 0 بكسل

اقرأ أيضا: كيفية عرض صفحة مدونة كمنصة دائرية في DIVI

• نصف قطر حدود الزر: 100 بكسل
• تباعد حرف الزر: 1 بكسل
• خط الزر: بوبينز
• زر ضوء ناعم: شبه عريض
• زر نمط النسخ: TT

مباعدة

أضف أيضًا قيم المساحة المتروكة المخصصة.

• الهامش الداخلي (العلوي والسفلي): 14 بكسل
• الهامش الداخلي: يسار (40 بكسل) ؛ يمين (58 بكسل)

القسم 2

أضف قسمًا "عاديًا" ثانيًا أسفل القسم السابق.

لون الخلفية

تغيير لون الخلفية

• الخلفية: #ffffff

مباعدة

ثم قم بإزالة جميع الهوامش الداخلية (العلوي والسفلي).

• الهامش الداخلي (العلوي والسفلي): 0 بكسل

الحدود

أضف أيضًا نصف قطر حد إلى القسم.

• مستطيل مستدير الزوايا (أعلى اليسار): 20 بكسل
• مستطيل مستدير الزوايا (أعلى اليمين): 20 بكسل

صندوق الظل

وأكمل إعدادات القسم بإضافة ظل مربع دقيق.

• مربع قوة طمس الظل: 135 بكسل
• لون خط الترجمة: rgba (0,0,0,0.18،XNUMX،XNUMX،XNUMX)

أضف سطرًا جديدًا إلى القسم

هيكل العمود

بمجرد الانتهاء من إعدادات القسم ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

التحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتغييرها على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• تباعد العمود: 1
• تنسيق ارتفاعات العمود: نعم
• أقصى عرض: 100٪
• أقصى عرض: 100٪

مباعدة

ثم قم بإزالة الهوامش الداخلية الافتراضية (أعلى وأسفل) من السطر.

• الهامش الداخلي (العلوي والسفلي): 0 بكسل

تباعد العمود

تابع عن طريق فتح إعدادات العمود لإضافة قيم مساحة متروكة مخصصة.

• الهامش الداخلي (العلوي والسفلي): 100 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)
• الهامش الداخلي (يسار ويمين): 100 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

أضف وحدة نص # 1 إلى العمود

إضافة محتوى

يمكننا الآن إضافة وحدات إليها. أضف وحدة نصية إلى العمود وأدخل محتويات دي VOTRE CHOIX.

إعدادات النص

قم بالتبديل إلى علامة التبويب الطراز من الوحدة وتعديل معلمات النص وفقًا لذلك:

• نص الخط: بوبينس
• وزن خط النص: غامق
• لون النص: # 000000
• حجم النص: 17 بكسل
• محاذاة النص: توسيط

مباعدة

ثم أضف هوامش مخصصة (علوية وسفلية).

• الهامش العلوي: 10 بيكسل
• الهامش السفلي: 30 بكسل

أضف وحدة فاصل إلى العمود

أسفل وحدة النص مباشرةً ، أضف وحدة فاصل.

رؤية

تأكد من الخيار " عرض فاصل يتم تمكين.

• فاصل العرض: نعم

خط

تغيير لون الخط إلى الأسود.

• لون الملصق: # 000000

التحجيم

قم أيضًا بتغيير إعدادات تحجيم الخائن.

• أقصى عرض: 15٪
• محاذاة النص: الوسط

أضف وحدة نص # 2 إلى العمود

إضافة محتوى

استمر بإضافة وحدة نصية أخرى إلى العمود بالإضافة إلى محتويات دي VOTRE CHOIX.

إضافة رابط

أدخل رابطًا للصفحة التي تريد أن تشير إليها هذه الوحدة.

إعدادات النص

ثم انتقل إلى علامة التبويب الطراز وقم بتغيير إعدادات النص كما يلي:

• خط النص: بوبينز
• نص خفيف خفيف: واضح
• نص لون النص: # 777777
• حجم نص النص: 15 بكسل
• محاذاة النص: توسيط

مباعدة

أضف أيضًا هامشًا (أعلى وأسفل).

• الهامش (أعلى وأسفل): 10 بكسل

استنساخ وحدة النص رقم 2 حسب الحاجة

بمجرد الانتهاء من وحدة النص الثانية ، يمكنك استنساخها عدة مرات حسب حاجتك (اعتمادًا على عدد عناصر التذييل القابلة للنقر التي تريد تضمينها).

تحرير المحتوى والروابط

تأكد من تحرير محتوى الوحدة والروابط لكل نسخة مكررة.

استنساخ العمود بأكمله مرتين

بمجرد الانتهاء من العمود ووحداته النمطية ، يمكنك استنساخه مرتين.

لون خلفية العمود 2

ثم افتح إعدادات العمود 2 وقم بتغيير لون الخلفية.

• الخلفية: # f9f9f9

تحرير المحتوى والروابط

تأكد من تحرير كل المحتوى والروابط في كل عمود مكرر.

إضافة عمود جديد

بعد ذلك ، أضف عمودًا رابعًا إلى الصف.

لون الخلفية

قم بتغيير لون خلفية العمود الجديد.

• الخلفية: # 0fffc7

مباعدة

قم بتعديل الهوامش الداخلية كما يلي:

• الهامش الداخلي (العلوي والسفلي): 70 بكسل
• الهامش الداخلي (يسار ويمين): 50 بكسل

أضف وحدة "تابعنا على وسائل التواصل الاجتماعي" إلى العمود 4

إضافة الشبكات الاجتماعية

تابع عن طريق إضافة وحدة " تابعونا على الشبكات الاجتماعية في العمود 4 وأدخل الشبكات الاجتماعية التي تختارها.

إعادة تعيين أنماط أيقونات الوسائط الاجتماعية

اضغط على " إعادة تعيين أنماط عناصر الأدوار لكل شبكة من الشبكات الاجتماعية.

انحياز

ثم انتقل إلى علامة التبويب الطراز وتعديل محاذاة الوحدة.

• محاذاة النص: الوسط

إعدادات الرمز

قم أيضًا بتغيير لون أيقونات الوسائط الاجتماعية.

• لون الأيقونة: # 000000

أضف وحدة اختيار البريد الإلكتروني إلى العمود 4

أدخل تعديل " البريد الإلكتروني Optin "أسفل الوحدة" تابعونا على الشبكات الاجتماعية« 

مسح محتوى الوحدة وعنوانها

حساب البريد الإلكتروني

ثم أضف حساب بريد إلكتروني. إذا لم تقم بإضافة حساب بريد إلكتروني ، فلن تظهر الوحدة النمطية بعد الخروج من أداة إنشاء السمات.

قم بإزالة لون الخلفية

• استخدام لون الخلفية: لا

إعدادات المجال

التبديل إلى علامة التبويب الطراز وقم بتغيير الإعدادات الميدانية على النحو التالي:

• حقول لون الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
• حقول لون النص: # 000000
• خط الأبطال: بوبينز

• حقول حجم النص: 13 بكسل
• حقول عرض الحدود: 1 بكسل

إعدادات زر

قم أيضًا بتخصيص زر الوحدة النمطية الخاصة بك.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 12 بكسل
• لون نص الزر: # 000000
• زر الخلفية: #FFFFFF
• عرض الحدود: 0 بكسل

• نصف قطر حدود الزر: 100 بكسل
• تباعد حرف الزر: 1 بكسل
• خط الزر: بوبينز
• زر ضوء خافت: شبه غامق
• زر نمط النسخ: TT

أنظر أيضا: كيفية إنشاء نموذج اتصال لزج في DIVI

• مساحة الزر (أعلى وأسفل): 15 بكسل

أضف وحدة نص ديناميكي إلى العمود 4

الوحدة التالية والأخيرة التي نحتاجها لإكمال هذا التصميم هي وحدة نصية. 

قم بتنشيط الخيار " استخدم المحتوى الديناميكي".

ثم حدد الخيار " التاريخ الحالي".

وقم بتغيير إعدادات المحتوى الديناميكي على النحو التالي:

• الواجهة: حقوق النشر ©
• بعد: | جميع الحقوق محفوظة
• تنسيق التاريخ: الجمارك
• تنسيق التاريخ المخصص: 20y

إعدادات النص

بعد ذلك ، قم بالتبديل إلى علامة تبويب النمط وقم بتغيير إعدادات النص:

• خط النص: بوبينز
• نص لون النص: # 000000
• حجم نص النص: 16 بكسل

مباعدة

أكمل معلمات الوحدة بإضافة الهامش وفويلا!

• الهامش العلوي: 50 بيكسل

حفظ خيارات منشئ الموضوع والتذييل العالمي

بمجرد الانتهاء ، تأكد من حفظ عملك قبل الخروج من المنشئ. موضوع ديفي.

بمجرد خروجك من تخطيط النموذج ، احفظ تغييرات أداة إنشاء السمات بالكامل ، وتكون قد انتهيت!

مسح

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة.

تحميل DIVI Now !!!

وفي الختام

في هذا البرنامج التعليمي ، أوضحنا لك مدى سهولة إنشاء تذييل عالمي مخصص جميل باستخدام أداة إنشاء السمات Divi. 

نأمل أن يلهمك هذا البرنامج التعليمي لإنشاء تذييلات عالمية جميلة لمشاريع Divi التالية. 

إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.

ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...