كيفية إنشاء تنقل عمودي باستخدام Divi الذي يقود الأعمال

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

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

نتيجة

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

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

إلهام

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

كيفية إنشاء تنقل عمودي باستخدام Divi الذي يقود الأعمال

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

تمكين التنقل العمودي

للبدء ، سيتعين علينا تنشيط خيار التنقل العمودي الذي تقدمه Divi. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress> المظهر> الرأس والتنقل> تنسيق الرأس> تمكين التنقل العمودي.

تمكين التنقل الثابت

سيتم إصلاح التنقل العمودي الذي نعيد إنشائه ، مثل موقع Eat Thai Restaurant على الويب. لإصلاح التنقل العمودي ، انتقل إلى لوحة معلومات WordPress> Divi> خيارات السمة> علامة التبويب عام> تمكين التنقل الثابت.

إعدادات القائمة الأساسية (مُخصص السمة)

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

• إخفاء صورة الشعار: تعطيل
• أقصى ارتفاع للشعار: 100
• الهامش العلوي للقائمة: 0
• حجم النص: 14
• تباعد الأحرف: -1
• الخط: Lato Light
• لون النص: #FFFFFF
• لون الارتباط النشط: #FFFFFF
• لون الخلفية: # 004159
• لون خلفية القائمة المنسدلة: # 004159

إعدادات قائمة التنقل الثابتة (مُخصص السمة)

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

أضف عناصر القائمة

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

تنشيط فئات CSS

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

أضف قائمة جديدة

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

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

رقم الهاتف

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

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

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

عنوان

وبالمثل ، سنضيف العنوان. املأ العنوان في تسمية التنقل وأضف عنوان URL إذا كنت تريد ذلك. الفصل الذي نستخدمه لعنصر قائمة العناوين هو ببساطة "العنوان".

الرموز الاجتماعية

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

أضف Font Awesome

أول شيء عليك القيام به ، إذا لم تكن قد قمت بذلك بالفعل ، هو إضافة Font Awesome إلى خيارات السمة الخاصة بك. للقيام بذلك ، انتقل إلى WordPress Dashboard> Divi> Theme Options> Integration> والصق الرمز القصير التالي في رأس موقع الويب الخاص بك:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

احصل على الرموز القصيرة

للحصول على الرموز القصيرة للرموز الاجتماعية ؛ افتح هذه الصفحة على موقع Font Awesome. في حقل البحث الذي ستراه في تلك الصفحة ، ابحث عن الرموز المختلفة التي ترغب في إضافتها إلى التنقل العمودي.

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

أضف الرموز الاجتماعية إلى القائمة

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

<a href="#" target="_blank"><i class="fa fa-facebook-official facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram instagram" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-envelope envelope" aria-hidden="true"></i></a>

لا تنس إضافة عنوان URL لكل رمز من الرموز. الفصل الذي نستخدمه لجميع الرموز الاجتماعية الثلاثة مجتمعة هو "icon-wrapper" ولكننا قمنا أيضًا بتعيين فئة إضافية لكل رمز من الرموز الاجتماعية لإجراء تعديلات فردية. يمكنك ملاحظة هذه الفئات مباشرة بعد فئة Font Awesome. يطلق عليهم اسم "facebook" و "instagram" و "envelope".

الاتجاهات

بالنسبة لعنصر القائمة التالي ، استخدمنا كلمة "الاتجاهات" كاسم فئة CSS.

خط

لإضافة سطر أسفل الاتجاهات مباشرة ، يتعين علينا إضافة حرف فارغ في Label Navigation. هذا لأن WordPress لا يسمح لك بإنشاء عنصر قائمة دون وجود تسمية مرتبطة به. لإضافة حرف فارغ إلى عنصر قائمة السطر ، ما عليك سوى إضافة "& nbsp؛" إلى تسمية التنقل. علاوة على ذلك ، أضف أيضًا "سطر" كاسم فئة CSS إلى عنصر القائمة هذا.

ساعات العمل

للمضي قدمًا ، سنقوم بإضافة ساعات العمل وتعيين اسم فئة CSS "للساعات" إليها.

الحث على اتخاذ إجراء 1

بعد ذلك ، سنضيف أول CTA. سنقوم بتعيين اسم فئة CSS "cta-1" لها.

CTA 2

بالنسبة إلى CTA الثاني ، سنستخدم اسم فئة Cta-2 "CSS.

زر CTA

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

إنشاء زر في الصفحة المقصودة

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

<div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> 
<a class="et_pb_button et_pb_button_0 et_pb_module et_pb_bg_layout_light"> 
ORDER NOW 
</a> 
</div>

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

ملاحظة: تأكد من ضبط حجم الخط والمساحة المتروكة للزر داخل وحدة الأزرار بحيث تتناسب تمامًا مع التنقل العمودي.

إضافة كعنصر قائمة

الآن بعد أن قمت بنسخ كود HTML المطلوب المرتبط بالزر ، أضف رابطًا مخصصًا جديدًا وأضف الرمز إلى تسمية التنقل. فئة CSS التي نستخدمها لعنصر القائمة هذا هي "cta-3".

أضف خطوط كود CSS

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

لإضافة رمز CSS ، انتقل إلى لوحة معلومات WordPress> Divi> Theme Options> قم بالتمرير لأسفل في علامة التبويب General وأضف الأسطر التالية من كود CSS إلى مربع CSS المخصص:

@media only screen and (min-width:992px) {
.et_vertical_nav #page-container #main-header {
margin: 10px !important;
height: 93% !important;
z-index: 9999;
}}
.phone-number {
font-size: 1.9em !important;
font-weight: 400 !important;
}
.address {
font-weight: 300 !important;
}
@media only screen and (min-width:769px){
#main-header div#et-top-navigation {
padding-top: 110px;
height: 100%;
position: static !important;
}}
@media only screen and (min-width:769px){
.et_vertical_nav span.logo_helper {
display: none;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header #logo {
margin-bottom: 28px;
}}
@media only screen and (min-width:769px){
.et_vertical_nav #main-header .container {
margin-left: 25px !important;
margin-right: 25px !important;
height: 100% !important;
}}
.facebook, .instagram, .envelope {
padding: 7px 13px 7px 13px;
font-size: 1.6em;
}
.icon-wrapper a {
display: inline-block !important;
}
.directions {
font-size: 1.2em;
font-weight: 400;
padding-top: 0;
text-align: center;
}
.line {
border-top: 1px solid;
color: #fff;
margin: 8px auto auto;
width: 20%;
}
.hours {
color: #ffffff;
font-size: 10px;
font-weight: 300;
text-align: center;
}
.cta-1 {
margin-top: 5px !important;
font-size: 1.3em;
font-weight: 600;
text-align: center;
}
.cta-2{
font-size: 1.1em;
font-weight: 300;
letter-spacing: 0.02em;
text-align: center;
}
#page-container {
background: #d6d4d1;
}

@media only screen and (max-width:768px) {
.directions, .line, .cta-1, .cta-2, .cta-3 {
display: none !important;
}}

#main-header #top-menu-nav .nav li {
line-height: 10.5px;
}

تغيير لون خلفية الأقسام

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

نتيجة

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

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Vectomart / shutterstock.com