كيفية إضافة تصميمات خلفية إبداعية إلى شريط التذييل السفلي لديفي

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

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

هيا بنا نبدأ.

نظرة خاطفة

إليك نظرة خاطفة على بعض الأمثلة على التصميمات التي يمكنك إنشاؤها باستخدام هذا البرنامج التعليمي.

تخصيص شريط التذييل السفلي في "تخصيص النسق"

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

انتقل إلى أداة تخصيص السمات وانتقل إلى Footer> Bottom Bar. ثم قم بتغيير لون الخلفية ليكون شفافًا تمامًا.

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

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

إنشاء تصميم خلفية القسم للشريط السفلي

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

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

لا حاجة لإضافة وحدة نمطية إلى الصف لأننا سنحتاج فقط إلى القسم والصف لتصميمات الخلفية.

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

الهامش المخصص: 0 بكسل للأعلى و 0 بكسل للأسفل
الحشو المخصص (سطح المكتب): 80 بكسل للأعلى ، 80 بكسل للأسفل
الحشو المخصص (الجهاز اللوحي): 100 بكسل للأعلى ، 100 بكسل للأسفل

هذا التباعد ضروري لإعطاء بعض الارتفاع لقسمنا مع الحفاظ على المساحة اللازمة لفواصل الأقسام التي سنضيفها لتصميم الخلفية لدينا.

الآن ، انتقل إلى إعدادات القسم وقم بتحديث التباعد كما يلي:

الهامش المخصص (سطح المكتب): -55 بكسل للأسفل
الهامش المخصص (الجهاز اللوحي): -94 بكسل للأسفل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

يؤدي التخلص من الحشوة العلوية والسفلية إلى زيادة المساحة اللازمة لمقسم القسم الذي سنضيفه لاحقًا.

إضافة الفاصل السفلي

بعد ذلك ، أضف حاجزًا سفليًا إلى القسم لتأطير محتوى التذييل على النحو التالي:

نمط الحاجز السفلي: انظر الصورة
لون الفاصل: # 121212
ارتفاع الحاجز: 120 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 150 بكسل (هاتف ذكي)
تكرار المقسم الأفقي: 0.9x (سطح المكتب) ، 0.5x (الكمبيوتر اللوحي) ، 0.5x (الهاتف الذكي)
فاصل الوجه: عمودي

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

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

z-index: 0;

الآن سيظهر محتوى شريط التذييل الخاص بك فوق القسم الخاص بك ولديك تصميم خلفية جميل يؤطر شريط التذييل الخاص بك.

وسيتم ضبطه بشكل جيد على الهاتف المحمول أيضًا.

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

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

وفيما يلي بعض الأمثلة على ذلك.

استخدام الفاصل العلوي مع تدرج خلفية مخصص

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

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

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

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

الجمع بين المقسمات وتدرجات الخلفية لتصميم إطار متعدد الألوان

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

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

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

بالنسبة للمبتدئين ، انتقل إلى إعدادات القسم وقم بتحديث ما يلي:

لون الخلفية المتدرج الأيسر: # 29c4a9
خلفية متدرجة اللون الأيسر: # 2b87da

اتجاه التدرج: 90 درجة
موقف البداية: 50٪
المركز النهائي: 0٪

أضف الآن حاجزًا علويًا كما يلي:

نمط الفاصل العلوي: انظر الصورة
لون الحاجز: #ffffff
ارتفاع الحاجز: 120 بكسل (سطح المكتب) ، 150 بكسل (جهاز لوحي) ، 150 بكسل (هاتف ذكي)
تكرار المقسم الأفقي: 0.9x (سطح المكتب) ، 0.5x (الكمبيوتر اللوحي) ، 0.5x (الهاتف الذكي)
فاصل الوجه: عمودي

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

انتقل الآن إلى إعدادات الصف وأضف تدرجًا للخلفية على النحو التالي:

لون الخلفية المتدرج الأيسر: # df52ff
خلفية متدرجة اللون الأيسر: # 2b87da

اتجاه التدرج: 90 درجة
موقف البداية: 50٪
المركز النهائي: 0٪

لموازنة عرض كل مقطع لوني للخلفية ، امنح الصف عرضًا مخصصًا بنسبة 50٪.

ها هو التصميم النهائي!

افكار اخيرة

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

أيضًا ، قد تكون مهتمًا بتأطير قائمة التنقل الخاصة بك باستخدام تقنية مماثلة.

أتطلع إلى الاستماع منك في التعليقات.

هتافات!