الإنجليزية
صمم موقعك الأن!
تذييل الموقع (Footer) هو الجزء الثابت أسفل كل صفحة، ويساعد الزائر الذي وصل إلى النهاية على إيجاد ما يحتاجه: معلومات التواصل، وروابط الصفحات المهمة، ووسائل التواصل، والصفحات القانونية، وزر واتساب. كما يدعم السيو بالروابط الداخلية وبيانات النشاط المحلي. نشرح ما تضعه فيه ودليلاً من 6 خطوات.
يعد إنشاء تذييل موقع الويب جزءًا مهمًا من تصميم المواقع الإلكترونية، حيث يعزز تجربة المستخدم، ويوفر المعلومات الضرورية، ويحسن تحسين محركات البحث (SEO) لموقعك. في هذا الدليل الشامل، سنرشدك خطوة بخطوة لإنشاء تذييل موقع ويب يكون وظيفيًا وجذابًا من الناحية الجمالية. بحلول نهاية هذا المقال، سيكون لديك تذييل لا يبدو رائعًا فحسب، بل يخدم غرضه بشكل فعال أيضًا.
يخدم تذييل موقع الويب عدة وظائف حيوية:
إذا كنت تخطط لموقع جديد أو تريد تطوير موقعك الحالي، يمكننا مراجعة احتياجك واقتراح الحل الأنسب. احجز استشارة مجانية عبر واتساب
قبل أن تبدأ في التصميم، حدد المحتوى الذي تريد تضمينه في التذييل. العناصر الشائعة تشمل:
يجب أن يتطابق تذييلك مع التصميم العام لموقعك. فكر في ما يلي:
أنشئ هيكل HTML لتذييلك. إليك مثال أساسي:
html
Copy code
<footer>
<div class="footer-container">
<div class="footer-column">
<h4>اتصل بنا</h4>
<p>123 شارع الرئيسي، أي مدينة، الولايات المتحدة الأمريكية</p>
<p>البريد الإلكتروني: [email protected]</p>
<p>الهاتف: (123) 456-7890</p>
</div>
<div class="footer-column">
<h4>تابعنا</h4>
<a href="#">فيسبوك</a>
<a href="#">تويتر</a>
<a href="#">إنستغرام</a>
</div>
<div class="footer-column">
<h4>روابط سريعة</h4>
<a href="#">من نحن</a>
<a href="#">الخدمات</a>
<a href="#">المدونة</a>
<a href="#">التواصل</a>
</div>
<div class="footer-column">
<h4>القانوني</h4>
<a href="#">سياسة الخصوصية</a>
<a href="#">شروط الخدمة</a>
</div>
</div>
</footer>
أضف CSS لتنسيق تذييلك وتأكد من أنه يبدو جيدًا على جميع الأجهزة. إليك مثال:
css
Copy code
footer {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
.footer-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.footer-column {
flex: 1;
margin: 10px;
min-width: 200px;
}
.footer-column h4 {
border-bottom: 2px solid #fff;
padding-bottom: 10px;
margin-bottom: 10px;
}
.footer-column a {
color: #fff;
text-decoration: none;
display: block;
margin: 5px 0;
}
.footer-column a:hover {
text-decoration: underline;
}
عزز وظيفة تذييلك باستخدام JavaScript. على سبيل المثال، يمكنك إضافة سنة ديناميكية في إشعار حقوق الطبع والنشر:
html
Copy code
<p>© <span id="year"></span> اسم شركتك. جميع الحقوق محفوظة.</p>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
قبل أن تجعل تذييلك مباشرًا، اختبره على مختلف الأجهزة والمتصفحات للتأكد من أنه يبدو جيدًا ويعمل بشكل صحيح. انتبه إلى:
يعد إنشاء تذييل موقع ويب وظيفي وجذاب من الناحية الجمالية أمرًا ضروريًا لأي موقع ويب. باتباع الخطوات الموضحة في هذا الدليل، يمكنك تصميم تذييل يعزز تجربة المستخدم ويدعم تحسين محركات البحث لموقعك.
معلومات التواصل، وروابط الصفحات الرئيسية، وأيقونات وسائل التواصل، وروابط سياسة الخصوصية والشروط، وحقوق النشر.
نعم بشكل معتدل؛ الروابط الداخلية تساعد الزحف، وتوحيد اسم النشاط وعنوانه وهاتفه يدعم السيو المحلي.
إذا كان لديك مقر يزوره العملاء فنعم، ويفضل رابط أو صورة خفيفة بدل خريطة كاملة تبطئ الصفحة.
في سيمبا ويب نصمم ونبرمج مواقع الشركات والمتاجر في الأردن والخليج والعالم العربي، سريعة على الجوال ومهيأة لمحركات البحث من اليوم الأول.
آخر تحديث: نوفمبر 2026
