كيفية تصميم تخطيطات صفحة ملء الشاشة المخصصة في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

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

لاحظ كيف يتكيف ارتفاع الصفحة مع ارتفاع نافذة المتصفح بحيث يبقى كل شيء في مكانه.

ماذا تحتاج

في هذا البرنامج التعليمي ، كل ما تحتاجه حقًا هو Divi. سأستخدم أيضًا حزمة Fitness Gym Layout التي يمكن الوصول إليها من Divi Builder.

اشترك في قناتنا على اليوتيوب

كيفية عمل صفحة ملء الشاشة مخصصة في Divi

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

وأوضح الفكرة الأساسية

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

قم الآن بنشر Divi Builder على الواجهة الأمامية لبناء صفحتك من البداية. ثم أضف قسمًا عاديًا بصف عمود واحد.

بعد ذلك ، أضف وحدة مؤقت للعد التنازلي (أو أي وحدة نمطية) إلى صف عمود واحد.

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

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

min-height: 100vh;
display: flex;
flex-direction: column;

سيضمن تعيين الحد الأدنى لارتفاع القسم الخاص بك على 100vh (100٪ من ارتفاع منفذ العرض) أن القسم الخاص بك يمتد عبر نافذة المتصفح الكاملة (أو منفذ العرض). تُعد خاصية "display: flex" طريقة سريعة وسهلة لتوسيط محتوى قسمك رأسياً.

تحقق من هذا الدليل المفيد للحصول على مزيد من المعلومات حول وحدة الطول vh.

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

كذلك هناك تذهب. هذه هي الفكرة الأساسية لكيفية إنشاء تخطيط صفحة ملء الشاشة مخصص في Divi.

دمج الرأس والتذييل في صفحة ملء الشاشة.

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

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

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

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

يعتمد 132 بكسل على إجمالي الارتفاع الافتراضي للرأس (80 بكسل) والارتفاع الافتراضي لشريط التذييل السفلي (53 بكسل).

الآن بعد أن أصبح لدينا فهم أساسي لكيفية إنشاء صفحة ملء الشاشة مخصصة في Divi ، دعنا نتعمق في تصميم أكثر تعقيدًا.

بناء تصميم صفحة ملء الشاشة كاملة

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

بمجرد تحميل التخطيط في المنشئ ، انقر فوق الزر للبناء على الواجهة الأمامية (The Visual Builder) وستكون جاهزًا للبدء.

إنشاء قسم جديد

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

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

باستخدام التحديد المتعدد (اضغط باستمرار على ctrl / cmd وانقر) ، حدد جميع الوحدات في أول صفين في القسم الأول من التخطيط واسحبها إلى العمود الأول من القسم الجديد في أعلى الصفحة.

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

سيتم إخفاء النص بسبب الخلفية البيضاء ولكننا سنقوم بتغيير لون الخلفية لاحقًا.

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

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

هذا يهتم بجميع وحداتنا التي نحتاجها الآن. سنعيد النظر في إعدادات التصميم لاحقًا ولكن في الوقت الحالي ، دعنا نخصص صفنا.

تخصيص إعدادات الصف

افتح إعدادات الصف وابدأ بإضافة لون الخلفية إلى العمود 2:

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

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

اجعل هذا الصف بعرض كامل: نعم
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

تخصيص إعدادات القسم

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

نمط الفاصل العلوي: انظر الصورة
لون الفاصل العلوي: # 2a2e40
ارتفاع الحاجز العلوي: 8vw
تكرار الحاجز العلوي الأفقي: 0.8x
انعكاس الحاجز العلوي: رأسيًا وأفقيًا

الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

احذف باقي التصميم الجاهز

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

نحن الآن جاهزون لبدء تخصيص صفحتنا لتصبح بملء الشاشة.

إضافة CSS مخصص لجعل الصفحة ملء الشاشة

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

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

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

بالنسبة لأولئك الذين ليسوا على دراية بـ CSS ، لاحظ أن الشفرة مغلفة باستعلام وسائط يطبق النمط عندما يكون عرض المتصفح 980 بكسل كحد أدنى. باستخدام الأقواس ، يتضمن المقتطف الأول معرف CSS المسمى "fullsection" متبوعًا بمعرف CSS المسمى "fullslide". من المهم تذكر معرّفي CSS هذين لأننا سنحتاج إلى إضافتهما إلى قسمنا وشريط التمرير الخاص بنا. بمجرد القيام بذلك ، سيتم تطبيق css "height: calce (100vh - 133px)" مما يجعلها في وضع ملء الشاشة (تمتد على الارتفاع الكامل لنافذة المتصفح).

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

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

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

معرف CSS: القسم الكامل

افتح الآن إعدادات Slider Module لشريط التمرير في العمود 3 وأضف معرف CSS التالي:

معرف CSS: fullslide

اللمسات الأخيرة

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

أضف مسافات إلى أعمدتنا

افتح إعدادات الصف لإضافة بعض المساحة المتروكة إلى أعلى العمود 1 والعمود 2 على النحو التالي:

حشوة مخصصة للعمود 1: 12vh علوي ، 1vw يسار ، 1vw يمين
حشوة مخصصة للعمود 2: 12vh علوي ، 1vw يسار ، 1vw يمين

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

أضف وحدات طول vh إلى نص كبير لزيادة مساحة العرض

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

افتح إعدادات وحدة النص أعلى العمود 1 وقم بتحديث حجم نص رأس h1 إلى 7vh (وليس vw).

بعد ذلك ، افتح إعدادات وحدة النص في الجزء العلوي من العمود 2 وقم بتحديث حجم نص العنوان 2 إلى 6vh.

تحديث تصميم شريط التمرير

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

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

يمكنك أيضًا إضافة تراكب خلفية للشرائح الفردية.

تعديلات شريط الرأس والتذييل السفلي

قد تتذكر أننا أضفنا بالفعل مقتطفًا صغيرًا من CSS المخصص الذي وسع تذييلنا إلى عرض كامل. كان هذا تحسبًا لجعل شريط القائمة الأساسي لدينا كامل العرض أيضًا. لجعل شريط القائمة الأساسي لديك كامل العرض ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Customizer> Header & Navigation> Primary Menu Bar. ثم تحقق من خيار Make Full Width.

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

ثم انشر تغييراتك.

النتيجة النهائية

ها هو التصميم النهائي. لاحظ كيف يتناسب كل شيء بشكل جيد مع نافذة المتصفح.

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

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

ها هو على الجهاز اللوحي والهاتف الذكي.

افكار اخيرة

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

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

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

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

• كيفية إنشاء أقسام ملء الشاشة باستخدام روابط التمرير العلوية والسفلية مع Divi
• صمم تخطيط Divi ملء الشاشة فريدًا مع زر تمرير متحرك
• و اكثر

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!