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

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

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

النتيجة على سطح المكتب

تبدو النتيجة التي سنقوم بإعادة إنشائها كما يلي على سطح المكتب:

النتيجة على الهاتف المحمول

النتيجة على الهاتف المحمول مختلفة قليلاً وتبدو كالتالي:

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

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

إعادة إنشاء نسخة سطح المكتب

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

إضافة قسم جديد

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

أعد إنشاء أول صف تنقل

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

هيكل العمود

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

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

أثناء التواجد في علامة التبويب "المحتوى" ، فإن أول شيء سنفعله هو إضافة صورة خلفية إلى صفك. نوصي باستخدام صورة بعرض "1400 بكسل" وارتفاع "934 بكسل" لأنها ستؤدي إلى أفضل نتيجة. تأكد أيضًا من وضع الصورة على "عدم تكرار".

انتقام

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

تحجيم

بعد ذلك ، افتح فئة التحجيم الفرعية ، وقم بتمكين خيار "استخدام العرض المخصص" واستخدم النسبة المئوية للعرض "100٪".

تباعد

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

الرؤية

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

وحدة نصية لوصف الصفحة

إعدادات النص

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

• خط النص: Andika
• وزن خط النص: عادي
• حجم النص: 13 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1.1em
• اتجاه النص: يسار

تحجيم

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

تباعد

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

• الهامش الأعلى: 150 بكسل
• الهامش الأيسر: -20 بكسل
• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل

وحدة المقسم

الرؤية

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

اللون

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وأضف "#FFFFFF" كلون للمقسم.

الأنماط

بالانتقال ، اختر "صلب" كنمط الحاجز و "أعلى" ليكون موضع الحاجز.

تحجيم

أخيرًا ، اجعل الإعدادات التالية تنطبق على فئة التحجيم الفرعية:

• وزن الحاجز: 5 بكسل
• الارتفاع: 23 بكسل
• العرض: 47٪
• محاذاة الوحدة: يسار

وحدة النص لعنصر القائمة

ربط النص في Content Box

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

لون الخلفية المتدرج

أثناء التواجد في علامة التبويب "المحتوى" ، استخدم إعدادات الخلفية المتدرجة التالية:

• اللون الأول: #FFFFFF
• اللون الثاني: rgba (12،113،195،0.62)
• نوع التدرج: خطي
• اتجاه التدرج: 108 درجة
• موقف البداية: 31٪
• المركز النهائي: 21٪

إعدادات نص الارتباط

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وقم بإجراء الإعدادات التالية على علامة تبويب الارتباط الخاصة بفئة النص الفرعية:

• خط الارتباط: Andika
• وزن خط الارتباط: غامق
• نمط خط الارتباط: أحرف كبيرة وتسطير
• نمط تسطير الرابط: صلب
• حجم نص الرابط: 100 بكسل
• لون نص الرابط: # 000000
• ارتفاع خط الارتباط: 1em

تباعد

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

• الهامش العلوي: -33 بكسل
• الهامش السفلي: 250 بكسل
• الهامش الأيسر: -20 بكسل
• الحشوة العلوية: 80 بكسل
• الحشو السفلي: 80 بكسل

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

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

تغيير خلفية الصف

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

تغيير وحدة النص لعنصر القائمة

تغيير الارتباط

ثم افتح وحدة نص عنصر التنقل وقم بتغيير النص مع الارتباط.

تغيير خلفية التدرج حسب طول النص

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

إعادة إنشاء نسخة الهاتف المحمول

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

أعد إنشاء أول صف تنقل

ابدأ بإضافة صف آخر إلى القسم الذي أنشأناه في بداية هذا المنشور.

هيكل العمود

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

تحجيم

حجم هذا الصف هو كما يلي:

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

ستعمل هذه الإعدادات على التأكد من أن صفنا يشغل عرض الشاشة بالكامل.

الرؤية

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

وحدة نصية لوصف الصفحة

إعدادات النص

انطلق وقم بإضافة أول وحدة نصية إلى الصف. اجعل الإعدادات التالية تنطبق على فئة النص الفرعية:

• خط النص: Andika
• وزن خط النص: عادي
• حجم النص: 13 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1.1em
• اتجاه النص: الوسط

تحجيم

بعد ذلك ، افتح الفئة الفرعية Sizing واستخدم عرض "71٪" ومحاذاة الوحدة النمطية المركزية.

تباعد

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

وحدة النص لعنصر القائمة

ربط النص في Content Box

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

لون الخلفية المتدرج

الخلفية المتدرجة التي سنستخدمها لوحدة النص هذه هي نفس نسخة سطح المكتب الأولى:

• اللون الأول: #FFFFFF
• اللون الثاني: rgba (12،113،195،0.62)
• نوع التدرج: خطي
• اتجاه التدرج: 108 درجة
• موقف البداية: 31٪
• المركز النهائي: 21٪

إعدادات نص الارتباط

استفد من الإعدادات التالية لفئة النص الفرعية:

• خط الارتباط: Andika
• وزن خط الارتباط: غامق
• حجم النص: 65 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: يسار

تباعد

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

وحدة الصورة

تحميل الصور

أخيرًا ، أضف وحدة صورة كوحدة أخيرة في صفك وقم بتحميل صورة من اختيارك.

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

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

تغيير وحدة النص لعنصر القائمة

تغيير الارتباط

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

تغيير خلفية التدرج حسب طول النص

بعد ذلك ، يمكنك أيضًا تغيير لون التدرج الثاني إلى "rgba (224،43،32،0.62)" وتغيير قيمة موضع البداية وفقًا لطول النص الخاص بك.

تغيير وحدة الصورة

أخيرًا ، يمكنك أيضًا تغيير صورة وحدة الصورة داخل هذا الصف.

نتيجة

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

النتيجة على سطح المكتب

النتيجة على الهاتف المحمول

افكار اخيرة

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

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

صورة مميزة من LanKogal / shutterstock.com