كيفية إنشاء footer

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

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

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

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

4) إضافة روابط التواصل الاجتماعي:
يمكن إضافة روابط التواصل الاجتماعي إلى footer لتسهيل التواصل مع الزوار. يمكن إضافة أيضًا روابط لحساباتك على وسائل التواصل الاجتماعي مثل تويتر وفيسبوك وإنستجرام، ويمكن إضافة أيقونات وصور تمثل هذه الحسابات.

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

6) إضافة حقوق النشر:
يمكن إضافة حقوق النشر إلى footer للتأكيد على حقوق النشر والملكية الفكرية للمحتوى الموجود على الموقع. يمكن إضافة روابط إلى صفحة سياسة الخصوصية لتوضيح كيفية جمع واستخدام المعلومات على الموقع.

7) الاهتمام بالتفاصيل:
يجب الحرص على الاهتمام بالتفاصيل في footer مثل اختيار الخطوط الصحيحة وتحديد حجم الخط المناسب والألوان المناسبة. يجب تصميم footer بشكل ينسجم مع تصميم الموقع بأسره.

8) الاختبار والتحسين: يجب اختبار footer والتأكد من أنه يعمل بشكل صحيح على جميع المتصفحات والأجهزة المختلفة. يمكن إجراء تحسينات وتعديلات بناءً على ملاحظات المستخدمين وبيانات الاستخدام.

وهنا مثال لكل شيء مذكور في الأعلى على شكل كود:

HTML

<footer class="foot">
    <div class="copy">
        &copy; Copyright <strong><span>Ayoub Ayaou</span></strong>
    </div>
    <div>
        <a href="https://www.facebook.com/profile.php?id=100089323987983">
            <i style="margin-right: 10px;color: #999" class="bi-facebook"></i>
        </a>
        <a href="https://www.youtube.com/@ayoubayaou">
            <i style="margin-right: 10px;color: #999" class="bi-youtube"></i>
        </a>
        <a href="https://instagram.com/ayoub.ayaou?igshid=YmMyMTA2M2Y=">
            <i style="margin-right: 10px;color: #999" class="bi-instagram"></i>
        </a>
    </div>
</footer>

وهنا مع تنسيقات لغة CSS:

CSS

.foot {
    width: 100%;
    padding: 8px;
    text-align: center;
    background-color: #222;
    color: #fff;
    border-radius: 3px;
}

لكي تنظر للنتيجة بشكل أوضح:



ملاحطة: بالنسبة للأيقونا التي قمنا بإستعمالها أيقونات مثل فايسبوك يوتيوب وغيرها قمنا بإستعمال مكتبة Font Awesome هذه المكتبة توفر لك العديد من الأيقونات الجاهزة وسهلة الإستعمال والتحكم بها من خلال CSS أسهل حيت الأيقونات تعتبر خط مثل لهذا سهل التعديل عليها.

وهكذا إنتهينا إذا أعجبكم الدرس أتمنى تدعومنا بمشاركته وشكرا لكم و وفقكم الله.