كيفية تصميم تذييل (2025 البرنامج التعليمي)

تذييل موقع الويب الخاص بك هو أكثر من مجرد مكان لمعلومات حقوق الطبع والنشر ؛ يمكن أن تكون أداة قيمة لتعزيز مصداقية العلامة التجارية ، وتحسين تجربة المستخدم ، وحتى التحويلات. في هذا المنشور ، سنشرح لماذا تحتاج إلى تذييل مصمم جيدًا على موقعك ، وإظهار بعض أفضل الممارسات ، ونوضح لك كيفية تصميم تذييل باستخدام سمة Divi WordPress.

دعنا نغوص.

ما هو تذييل موقع الويب؟

بالنسبة لأولئك الذين لا يعرفون ، فإن تذييل موقع الويب هو القسم الذي يظهر في أسفل كل صفحة على موقعك. إنه مجال مهم غالبًا ما يتم تجاهله ولكنه يخدم العديد من الوظائف المهمة. تتضمن تذييلات عادة المعلومات الأساسية ، مثل تفاصيل الاتصال ، وحقوق الطبع والنشر والمعلومات القانونية ، وروابط الوسائط الاجتماعية. على الرغم من أنها تبدو صغيرة على ما يبدو ، فإن تذييل يلعب دورًا مهمًا في تعزيز تجربة المستخدم ، وتحسين مصداقية علامتك التجارية ، وحتى تعزيز تحسين محرك البحث الخاص بك (SEO).

لماذا يكون لديك تذييل مهم؟

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

• تعزيز العلامة التجارية: تعرض تذييلات الشعار والألوان وخطوطك باستمرار ، وتعزيز هوية العلامة التجارية في جميع الصفحات.
• معلومات الاتصال: تتيح تفاصيل الاتصال التي يمكن الوصول إليها بسهولة تذييل الزائرين بالاتصال بك بسرعة وسهولة.
• المعلومات القانونية والخصوصية: توفر تذييلات موقع مركزي للحصول على معلومات قانونية وخصوصية حاسمة ، مما يضمن الشفافية والامتثال.
• تجربة المستخدم المحسّنة: تذييلات منظمة تنظيماً جيداً تعزز التنقل المستخدم من خلال توفير وصول سهل إلى الصفحات المهمة وخرائط الموقع ، وتحسين قابلية الاستخدام بشكل عام.
• فوائد تحسين محركات البحث (SEO): يمكن أن تتضمن تذييلات مصممة جيدًا روابط قيمة لمواقع الويب الأخرى (الروابط الخلفية) وملفات التواصل الاجتماعي ، وتحسين الموضع في صفحات تصنيف محرك البحث (SERPs) وكبار المسئولين الاقتصاديين.

عناصر التذييل الأساسية

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

1. معلومات الاتصال

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

2. حقوق الطبع والنشر والمعلومات القانونية

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

3. التنقل

مكون آخر حاسم عند تصميم تذييل لموقع الويب الخاص بك يتضمن قائمة. يسهل التنقل على المستخدمين التنقل في موقع الويب الخاص بك ويساعد الزائرين على العثور على المعلومات التي يريدونها بسرعة. لا تنس تضمين روابط إلى صفحات مهمة على موقعك ، بما في ذلك مدونتك (إذا كنت تخطط للحصول على واحدة). هذا يضمن سهولة الوصول إلى المجالات الرئيسية لموقع الويب الخاص بك.

4. دعوة إلى العمل (CTA)

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

مبادئ التصميم لتذييلات فعالة

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

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

كيفية تصميم تذييل لموقع الويب الخاص بك

هناك الكثير من الطرق لتصميم تذييل لموقع الويب الخاص بك. تعد أدوات تصميم الويب مثل Figma أو Framer أو Sketch رائعة لتسكي النموذج الأولي لتصميماتك ، أو يمكنك الغوص مع أداة مثل Divi وتصميم تذييلك في الوقت الفعلي. بالنسبة لهذا البرنامج التعليمي ، سنستخدم Divi لإظهار مدى سهولة تصميم تذييل مع شعار وأيقونات الوسائط الاجتماعية واختيار البريد الإلكتروني وبعض الروابط المهمة-كل ذلك في بضع دقائق فقط.

ما هو ديفي؟

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

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

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

احصل على ديفي

كيفية تصميم تذييل من الصفر

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

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

قم بتسجيل الدخول إلى موقع WordPress الخاص بك وانتقل إلى Divi> منشئ السمة .

بعد ذلك ، انقر فوق إضافة تذييل Global ، ثم قم بإنشاء تذييل عالمي لإطلاق منشئ السمة.

عندما يتم إطلاق منشئ السمة ، ستقابل قائمة فارغة. ابدأ بالنقر فوق الرمز الأخضر لإضافة صف إلى تذييل التذييل.

بعد ذلك ، حدد تخطيط العمود الثلاثة من الخيارات المتاحة.

قبل أن نضيف محتوى ، سنحتاج إلى إضافة لون خلفية إلى قسمنا. للقيام بذلك ، انقر على أيقونة الترس (الإعدادات) في أعلى يسار القسم.

انقر فوق + إضافة لون الخلفية لتحديد لون الخلفية لقسمنا.

استخدم #406171 كون. لحفظ اللون باعتباره لونًا عالميًا ، انقر فوق أيقونة + لإضافته. بمجرد إضافة لون الخلفية ، انقر فوق الزر الأخضر لحفظه.

إضافة شعار

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

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

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

ضمن قائمة المنسدلة المحاذاة ، قم بتعيين محاذاة الصورة على اليسار على سطح المكتب وتركز على الكمبيوتر اللوحي والجوال. بعد ذلك ، انقر فوق علامة التبويب "تحجيم" وقم بتعيين العرض على 50 ٪ لسطح المكتب والكمبيوتر اللوحي و 40 ٪ للهاتف المحمول.

عند الانتهاء ، انقر فوق الزر الأخضر لحفظ الوحدة.

أضف أيقونات وسائل التواصل الاجتماعي

انقر فوق الرمز الرمادي + أسفل الشعار لإضافة وحدة جديدة وحدد وحدة متابعة الوسائط الاجتماعية .

من خلال إعدادات الوحدة النمطية ، انقر فوق +إضافة زر شبكة اجتماعية جديدة لإضافة منصات الوسائط الاجتماعية التي اخترتها. لهذا البرنامج التعليمي ، سنضيف Facebook و X و Instagram.

لإضافة خلفية إلى كل منصة وسائط اجتماعية ، انقر فوق أيقونة الترس لتحريرها.

استخدم #EE8B22 لون الخلفية. كرر هذه الخطوات لتحرير الرموز لـ X و Instagram.

بعد ذلك ، قم بتبديل علامة تبويب التصميم وأضف الإعدادات التالية:

• محاذاة الوحدة النمطية: يسار (سطح المكتب) ، المركز (الجداول والجوال)
• رمز اللون: #ffffff
• استخدم حجم الرمز المخصص: نعم
• حجم الرمز المخصص: 20 بكسل
• زوايا مدورة الحدود: 100px

بمجرد الانتهاء ، يجب أن تبدو الرموز الخاصة بك مثل الصورة أدناه.

أضف وحدة العنوان

بعد ذلك ، سنضيف وحدة عنوان إلى العمود الثاني لدينا. انقر فوق الرمز الرمادي +وحدد وحدة العنوان لإضافتها. اكتب خدماتنا في حقل العنوان عندما يظهر مربع الحوار.

انقر فوق علامة تبويب التصميم وأضف الإعدادات التالية:

• مستوى العنوان: H3
• خط الخط: رجل أكثر حظا
• عنوان محاذاة النص: المركز
• عنوان النص العنوان: #FFFFFF
• عنوان النص حجم: 24 بكسل
• تباعد خطاب العنوان: 1 بكسل

بمجرد أن تكون جميع الإعدادات في مكانها ، يجب أن يبدو عنوانك مثل الصورة أدناه.

أضف وحدة نصية

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

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

مع وجود الروابط الخاصة بك في مكانها ، انقر فوق علامة تبويب التصميم وأضف الإعدادات التالية ضمن قائمة الارتباط النصية :

• خط النص: Inter
• محاذاة نص الارتباط: يسار (سطح المكتب) ، الوسط (الكمبيوتر اللوحي والجوال)
• لون نص نصي: #EE8B22
• حجم النص حجم: 16 بكسل
• ارتفاع خط الرابط: 1.3em

أضف وحدة الاشتراك في البريد الإلكتروني

في عمودنا الثالث ، سنضيف وحدة إلغاء الاشتراك في البريد الإلكتروني لالتقاط بيانات المستخدم. تتمثل الفكرة في الحصول على العملاء المحتملين للتسجيل في رسالة إخبارية لتلقي تحديثات حول المنتجات والخدمات الجديدة.

في علامة تبويب المحتوى ، أضف الإعدادات التالية:

• العنوان: اشترك في صفقات رائعة!
• الزر: اشترك الآن!
• الجسم: انضم إلى عبوتنا! اشترك في النشرة الإخبارية لدينا وتلقي خصومات حصرية ، والوصول المبكر إلى المنتجات الجديدة ، والتحديثات على المبيعات القادمة. بالإضافة إلى ذلك ، احصل على عرض ترحيب خاص فقط للاشتراك!
• حساب البريد الإلكتروني: اختر من واحد من أكثر من 20 مزودي بريد إلكتروني ، بما في ذلك MailChimp و ActiveCampaign و HubSpot والمزيد. إذا كنت بحاجة إلى مساعدة في تكوين الاشتراك ، تحقق من هذا المنشور.
• الحقول: تبديل استخدم حقل اسم واحد إلى نعم
• إجراء النجاح: اختر عرض رسالة أو إعادة توجيه إلى عنوان URL آخر.
• الخلفية: شفافة

في علامة تبويب التصميم ، أضف إعدادات التصميم التالية:

• التصميم: الجسم في الأعلى ، ويشكل في الأسفل
• الاسم fullwidth: تبديل إلى نعم
• البريد الإلكتروني fullwidth: تبديل إلى نعم

إعدادات الحقل:

• لون الخلفية الحقول: #FFFFFF
• لون نص الحقل: #406171
• لون الخلفية التركيز الحقل: #EE8B22
• لون نص التركيز الحقل: #FFFFFF
• Fields Font: Inter
• الحقول الدائرية الزوايا: 5 بكسل
• عرض الحدود الحقول: 2 بكسل
• لون الحدود الحدود: #EE8B22

إعدادات نص العنوان:

• خط العنوان: أكثر حظًا
• محاذاة نص العنوان: اليسار
• لون نص العنوان: #ffffff
• نص نص العنوان: 24 بكسل
• تباعد خطاب العنوان: 1 بكسل

إعدادات نص الجسم:

• خط الجسم: إنتر
• محاذاة نص الجسم: اليسار
• لون نص الجسم: #ffffff
• ارتفاع خط الجسم: 1.3em

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

• استخدم أنماط مخصصة للزر: تبديل إلى نعم
• زر حجم النص: 16px
• لون نص نص: #ffffff
• خلفية الزر: #EE8B22
• عرض الحدود الزر: 0px
• دائرة نصف قطر الحدود: 5 بكسل
• زر الخط: Inter
• زر خط الخط: Semibold
• أيقونة إظهار زر: لا
• حشو الزر: 12 بكسل (أعلى وأسفل)

أضف قسمًا جديدًا

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

اختر صف العمود 1/3 +/2/3 .

اضبط لون خلفية القسم على #38A2DB والتباعد (في علامة التبويب التصميم) إلى أعلى وأسفل 10 بكسل ، ثم حفظ التغييرات.

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

عندما يظهر مربع الحوار ، حدد التاريخ الحالي من قائمة الخيارات.

عندما يظهر مربع الحوار النص ، أدخل الإعدادات التالية:

• قبل: رمز حقوق الطبع والنشر (الخيار + ز على لوحة المفاتيح)
• بعد: اسم عملك. تأكد من ترك مساحة قبل إدخال النص!
• تنسيق التاريخ: مخصص
• تنسيق تاريخ مخصص: ذ

احفظ التغييرات قبل التوجه إلى علامة تبويب التصميم لتصميم النص الخاص بك. في علامة تبويب التصميم ، اترك جميع الإعدادات في إعداداتها الافتراضية ، باستثناء جعل النص #ffffff وتغيير عائلة الخط إلى إنتر .

أضف وحدة قائمة

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

مع إعدادات وحدة القائمة النشطة ، حدد الخيارات التالية:

• القائمة: حدد قائمة المعلومات القانونية الخاصة بك
• الخلفية: شفافة

في إعدادات التصميم ، اختر الإعدادات التالية:

تَخطِيط:

• النمط: اليسار محاذاة

نص القائمة:

• لون الارتباط النشط: #FFFFFF
• خط القائمة: Inter
• لون نص القائمة: #ffffff
• محاذاة النص: صحيح

إعدادات القائمة المنسدلة:

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

• لون خلفية القائمة المحمولة: #38A2DB
• لون نص القائمة المحمول: #FFFFFF

أخيرًا ، قم بتغيير لون أيقونة قائمة الهامبرغر تحت علامة التبويب الرموز إلى #FFFFFF .

إضافة اللمسات النهائية

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

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

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

display:flex;

بمجرد إكمال التغييرات ، انقر فوق الزر "حفظ الأخضر" لحفظ تذييلك.

انقر فوق X في الجزء العلوي يمينًا من منشئ السمة للخروج.

أخيرًا ، انقر فوق الزر "حفظ التغييرات" لجعل تذييلك على الهواء مباشرة.

كما ترون ، يسهل Divi تصميم تذييل موقع ويب في بضع دقائق.

ارفع تذييل موقع الويب الخاص بك مع Divi

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

لقد أنشأنا جدولًا مفيدًا يعرض جميع ميزات موضوع Divi لمساعدتك في فهم قوتها الحقيقية.