كيفية إنشاء صفحة رئيسية للتنقل بأيقونة مستجيبة باستخدام Divi

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

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

دعنا نذهب اليها!

معاينة

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

إنشاء صفحة جديدة

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

أضف صفحة جديدة

ابدأ بإضافة صفحة جديدة إلى موقع WordPress الخاص بك.

امنح صفحتك عنوانًا وانشرها

امنح صفحتك عنوانًا وانشر الصفحة على الفور.

قم بتعيين الصفحة كصفحة رئيسية

انتقل إلى إعدادات قراءة موقع الويب

بعد ذلك ، انتقل إلى إعدادات القراءة في موقع الويب الخاص بك.

تعيين صفحة جديدة كصفحة رئيسية

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

إخفاء شريط القوائم والتذييل الأساسي في صفحة التنقل الخاصة بالأيقونة

ارجع إلى صفحة التنقل الخاصة بالأيقونة وقم بتمكين Divi's Visual Builder

الآن بعد أن حددنا الصفحة الرئيسية ، يمكننا البدء في إنشاء صفحة التنقل الخاصة بنا. ارجع إلى الصفحة التي قمت بإنشائها وانتقل إلى Divi's Visual Builder.

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

أضف CSS مخصصًا لإخفاء شريط وتذييل القائمة الأساسي في هذه الصفحة فقط

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

#main-header, #main-footer {
display: none;}

لنبدأ في التصميم!

أضف القسم رقم 1

لنبدأ في إنشاء تصميم متجاوب مع Divi! أضف أول قسم عادي.

اضف سطر

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتمكين خيار "Make This Row Fullwidth" في إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم

إضافة وحدة صورة

تحميل شعار الشركة

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

انتقام

بعد ذلك ، قم بتغيير محاذاة الصورة في علامة تبويب التصميم. تأكد من تعطيل خيار "مركز الصورة على الهاتف دائمًا".

• محاذاة الصورة: يسار

تباعد

أضف بعض الهامش السفلي المخصص بعد ذلك.

• الجزء السفلي: 10vw (سطح المكتب) ، 20vw (الجهاز اللوحي والهاتف)

أضف وحدة نصية

أضف محتوى H1

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

إعدادات نص H1

تابع عن طريق تعديل إعدادات نص H1 في علامة تبويب التصميم.

• خط العنوان: Didact Gothic
• وزن خط العنوان: غامق
• محاذاة نص العنوان: يسار
• لون نص العنوان: # 333333
• حجم نص العنوان: 5vw (Desktop) ، 6vw (Tablet) ، 7vw (Phone)
• ارتفاع خط العنوان: 0.8em

تحجيم

قم بتعديل إعدادات التحجيم بعد ذلك.

• العرض: 68٪ (كمبيوتر مكتبي) ، 80٪ (كمبيوتر لوحي) ، 88٪ (هاتف)
• محاذاة الوحدة: يسار

إضافة وحدة المقسم

الرؤية

الوحدة التالية والأخيرة التي نحتاجها في هذا الصف هي Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

بعد ذلك ، انتقل إلى علامة تبويب التصميم وقم بتغيير لون الرمز.

• اللون: # 333333

تحجيم

قم بتعديل إعدادات تغيير حجم الوحدة أيضًا.

• وزن الحاجز: 10 بكسل
• العرض: 8٪ (كمبيوتر مكتبي) ، 20٪ (كمبيوتر لوحي) ، 25٪ (هاتف)
• محاذاة الوحدة: يسار

أضف القسم رقم 1

إلى القسم التالي! أضف قسمًا عاديًا أسفل القسم السابق.

اضف سطر

هيكل العمود

تواصل بإضافة صف جديد إلى القسم.

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

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

• الحشو السفلي: 0.2vw
• الحشو الأيسر: 4vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 1vw (هاتف)
• الحشو الأيمن: 25vw (Desktop) ، 2vw (Tablet) ، 1vw (Phone)
• الحشوة اليمنى للعمود 1: 0.2vw
• العمود 2 الحشوة اليسرى: 0.1vw
• العمود 2 الحشوة اليمنى: 0.1vw
• العمود 3 الحشوة اليسرى: 0.2vw

لغة تنسيق ويب حسب الطلب

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

display: flex;

أضف الوحدة النمطية للدعاية إلى العمود 1

أضف عنوانا

الآن يمكننا البدء في إضافة وحداتنا! أضف وحدة Blurb Module جديدة إلى العمود الأول وأدخل عنوانًا.

حدد أيقونة

ثم حدد رمزًا من اختيارك.

وصلة

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

• عنوان URL لارتباط الوحدة النمطية: https://www.yourwebsite.com/homepage

خلفية متدرجة

أضف خلفية متدرجة بعد ذلك.

• اللون 1: # 4b42ff
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 60٪
• موضع النهاية: 60٪

الصورة الخلفية

جنبا إلى جنب مع صورة الخلفية. احفظ الصورة التالية على سطح المكتب الخاص بك:

واستخدمه مع إعدادات الخلفية التالية:

• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: لا يوجد تكرار

إعدادات الرمز

تابع عن طريق تعديل إعدادات الرمز في علامة تبويب التصميم.

• لون الأيقونة: #ffffff
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 4vw (سطح المكتب) ، 6vw (الجهاز اللوحي) ، 8vw (الهاتف)

إعدادات نص العنوان

قم بتغيير إعدادات نص العنوان أيضًا.

• خط العنوان: Didact Gothic
• محاذاة نص العنوان: الوسط
• لون نص العنوان: #ffffff
• حجم نص العنوان: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• تباعد حرف العنوان: -2 بكسل
• ارتفاع خط العنوان: 0em

تباعد

وأضف بعض قيم الحشو العلوية والسفلية المخصصة لأحجام الشاشة المختلفة.

• الحشوة العلوية: 9vw (سطح المكتب والكمبيوتر اللوحي) ، 12vw (الهاتف)
• الحشوة السفلية: 9vw (سطح المكتب والكمبيوتر اللوحي) ، 12vw (الهاتف)

استنساخ وحدة Blurb مرتين ووضع التكرارات في الأعمدة المتبقية

بمجرد الانتهاء من تعديل Blurb Module في العمود 1 ، يمكنك المضي قدمًا واستنساخ الوحدة مرتين. ضع التكرارات في الأعمدة المتبقية من الصف.

تغيير محتوى دعاية وإعلان

بالطبع ، ستحتاج إلى تغيير عناوين كل نسخة مكررة.

تغيير أيقونات الدعاية الدسمة

جنبا إلى جنب مع الرموز.

تغيير ارتباطات Blurb

قم بمطابقة وحدات Blurb النمطية الجديدة بعنوان URL فريد يؤدي إلى الصفحة الصحيحة.

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/about

تغيير الخلفيات المتدرجة الدعاية

بعد ذلك ، قم بتغيير الألوان الأولى للخلفيات المتدرجة لكلا النسختين.

• اللون 1: # f9f9f9

• اللون 1: # ff445d

تغيير ألوان الأيقونة والنص لوحدة Blurb النمطية في العمود 2

وقم بمطابقة رمز Blurb Module وألوان النص مع لون الخلفية المتدرج الجديد.

• لون الأيقونة: # 000000
• لون نص العنوان: # 000000

استنساخ صف كامل

بمجرد الانتهاء من الصف ، يمكنك استنساخه بالكامل.

وحدة استنساخ الدعاية في العمود 2

استنساخ الوحدة النمطية Blurb في العمود 2.

ضع وحدات Blurb للخلفية الخفيفة في العمود 1 والعمود 3

وضع وحدات Blurb ذات الخلفية الفاتحة في العمود 1 و 3.

ضع وحدة Blurb الخلفية الملونة في العمود 2

انقل إحدى وحدات Blurb النمطية لخلفية اللون إلى العمود الثاني.

إزالة وحدة Blurb المتبقية

وحذف باقي وحدة Blurb Module.

تغيير محتوى دعاية وإعلان

مرة أخرى ، ستحتاج إلى تغيير عناوين كل وحدة Blurb Module.

تغيير أيقونات الدعاية الدسمة

جنبا إلى جنب مع الرموز.

تغيير ارتباطات Blurb

والروابط أيضا.

• عنوان URL لرابط الوحدة النمطية: https://www.yourwebsite.com/shop

تغيير الخلفية المتدرجة لوحدة Blurb النمطية في العمود 2

أخيرًا وليس آخرًا ، قم بتغيير اللون الأول للخلفية المتدرجة لوحدة Blurb Module في العمود 2.

• اللون 1: # 000000

معاينة

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

افكار اخيرة

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