قائمة التصميم ديفي ملء الشاشة

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

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

هيا بنا نبدأ.

قبل وبعد

هذا ما تبدو عليه قائمة العرض الكامل افتراضيًا:

فيما يلي نظرة خاطفة على التصميم الجديد:

قائمة التصميم ديفي ملء الشاشة

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

ابدء

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

قم بتحديث الإعدادات في أداة تخصيص السمات

من لوحة معلومات WordPress الخاصة بك ، انتقل إلى Divi> Theme Customizer> Header & Navigation> Header Format. ثم حدد ملء الشاشة كنمط الرأس.

بمجرد تعيين نمط رأس ملء الشاشة ، ارجع إلى الرأس والتنقل. الآن سترى مجموعة جديدة من الخيارات تسمى "Slide In & Fullscreen Header Settings".

قم بتحديث إعدادات Slide In & Fullscreen Header على النحو التالي:

تحقق من خيار إظهار الشريط العلوي
حجم نص القائمة: 46 بكسل
حجم نص الشريط العلوي: 24 بكسل
الخط: عرض Playfair
نمط الخط: غامق (B)
لون ارتباط القائمة: #ffffff
لون الارتباط النشط: # edef86
لون نص الشريط العلوي: #ffffff

عد الآن إلى إعدادات Header & Navigation وانقر فوق Header Elements. ضمن Header Elements ، قم بتحديث ما يلي:

حدد إظهار الرموز الاجتماعية
حدد إظهار أيقونة البحث
رقم الهاتف: [أدخل الرقم]
البريد الإلكتروني: [أدخل البريد الإلكتروني]

بمجرد إعداد كل شيء ، هذا ما يجب أن يبدو عليه التخطيط الافتراضي:

الآن دعنا نضيف بعض CSS المخصص.

إضافة CSS مخصص

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

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

عد الآن إلى إضافة CSS الخاص بنا.

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

@media all and (min-width: 980px){

}

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

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top bar elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right!important;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

بعد ذلك ، دعنا نزيد حجم شريط البحث باستخدام CSS التالي:

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

ودعنا نضيف CSS التالية لجعل القائمة محاذاة بشكل صحيح:

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

بعد ذلك ، لنجعل رمز إغلاق القائمة في الزاوية اليمنى العليا أكبر ويسهل النقر عليه:

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

دعنا أيضًا نخرج تراكب الخلفية خلف عناصر القائمة العلوية ونزيل عتامة الخلفية.

/*take out background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

إذا كان لديك عناصر قائمة فرعية ، فإن CSS هذا يجعل سهم القائمة المنسدلة على يمين عنصر القائمة أكبر:

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

دعنا نتحقق مما لدينا حتى الآن:

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

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('INSERT IMAGE URL') center center !important;
	background-size: cover !important;
}

إذا لم يكن لديك عنوان URL لصورة الخلفية بالفعل ، فقم بتحميل صورة خلفية (1920 × 1080) إلى معرض وسائط WordPress وانسخ عنوان URL.

الآن استبدل النص الذي يقرأ "INSERT IMAGE URL" بلصق عنوان URL للصورة في الكود.

لقد انتهيت الآن!

فيما يلي إصدار مكتمل من كود CSS الذي كان يجب أن تضيفه إلى CSS الإضافي الخاص بك (باستثناء عنوان URL للصورة الذي تحتاج إلى تقديمه):

@media all and (min-width: 980px){

/*adjust position of navigation menu*/
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
	width: 50%;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
	padding-top: 0px !important;
}

/*adjust position of top menu and elements*/
.et_header_style_fullscreen .et_slide_menu_top {
    width: 50%;
    text-align: center;
    display: table !important;
    vertical-align: middle;
    position: initial;
    float: right;
    height: 100%;
}
.et_header_style_fullscreen .et_pb_top_menu_inner {
    display: table-cell !important;
    position: relative;
    vertical-align: middle;
    text-align: left!important;
	padding: 0 15%;
	width: 100%;
}

.et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons {
    width: 100%;
}

.et_header_style_fullscreen div#et-info {
	float: none!important;
	width: 100%;
}

.et_header_style_fullscreen div#et-info span {
	display: block;	
	margin-bottom: 30px;
	
}

/*make search bar and icon larger*/
.et_header_style_fullscreen .et_slide_menu_top .et-search-form {
	margin-top: 30px !important;
	margin-bottom: 15px;
	width: 100% !important;
	max-width: 300px !important;
	padding: 25px !important;
}
.et_slide_menu_top button#searchsubmit_header{
	width: 50px;
	height: 41px;
}
.et_slide_menu_top button#searchsubmit_header:before {
	font-size: 22px;
}

/*make menu right aligned*/
.et_header_style_fullscreen ul#mobile_menu_slide {
	text-align: right;
	padding: 0 15%;
}

/*make close menu icon larger*/
.et_pb_fullscreen_menu_animated .mobile_menu_bar:before {
	font-size: 120px;
}

/*dark background overlay*/
.et_slide_menu_top {
background: none;
}

/*take out background opacity*/
.et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened {
opacity: 1;
}

/*increase size of down arrow for sub menu items*/
.et_slide_in_menu_container span.et_mobile_menu_arrow {
opacity: 1;

}
.et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before {
font-size: 34px;
}

}

/*add background image*/
body #page-container .et_slide_in_menu_container{
	background: url('http://megamenu.wpengine.com/wp-content/uploads/2017/08/bgdark.jpg') center center !important;
	background-size: cover !important;
}

انقر فوق حفظ ونشر

الآن دعنا نتحقق من ذلك:

تخطيط قائمة الشبكة البديل

لإضافة تخطيط شبكة لقائمتك ، أضف CSS التالية أسفل التعليمات البرمجية الحالية وداخل أقواس استعلام الوسائط:

/*add grid menu links*/
.et_header_style_fullscreen .et_mobile_menu li {
    opacity: 1;
    width: 46%;
    float: left !important;
    margin-right: 2%;
    margin-bottom: 2%;
}

.et_slide_in_menu_container #mobile_menu_slide li a, .et_slide_in_menu_container #mobile_menu_slide li.current-menu-item a {
    padding: 20% 0;
    border: 1px solid #fff;
    color: #fff;
    width: 100%;
    text-align: center;
}

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

عناصر القائمة الفرعية في رأس ملء الشاشة

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

مستجيب؟

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

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

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

افكار اخيرة

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

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

حسنًا ، هذا كل ما لدي.

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