20 رؤوس Flexbox لـ Divi 5 (تنزيل مجاني!)

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

المعاينة والتوضيح المباشر

لنلقي نظرة على جميع رؤوس Flexbox العشرين في هذه العبوة. هذه العبوة مجانية لك لتنزيل المزيد من المنشور.

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

عرض التوضيح المباشر

قم بتنزيل 20 رؤوس Flexbox لـ Divi 5

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

قم بتنزيل الملفات

تنزيل مجانًا

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

تحميل

لقد اشتركت بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والوصول إلى حزم تخطيط Divi الأسبوعية المجانية!

ما هو مدرج (42 صادر)

بمجرد تنزيل المجلد وفك ضغطه ، ستجد جميع صادرات التصميم الـ 42 منظمة بشكل جيد في إصدارات افتراضية ومثبتة كرؤوس فردية وكمحزم "جميع الرؤوس" الكاملة.

الافتراضي - الرؤوس الفردية (20) → يستخدم أنماطك العالمية.
الافتراضي - جميع الرؤوس (1) → حزمة كاملة باستخدام أنماطك العالمية.

Prestyled-الرؤوس الفردية (20) → يتضمن تصميمًا مضمّنًا لإلقاء نظرة فورية جاهزة.
Prestyled - جميع الرؤوس (1) → حزمة كاملة مع التصميم المضمّن.

كيفية تثبيت التخطيطات

حافظ على قرب مجلد التنزيل الخاص بك للبدء في استيراده إلى موقع Divi الخاص بك.

1. استيراد تخطيطات في مكتبة Divi

اذهب إلى Divi → Divi Library.

بمجرد الوصول إلى هناك ، انقر فوق زر الاستيراد والتصدير لتثبيت الملفات.

ابحث عن ملف تخطيطات رأس Flexbox (All) وانقر لاستيراده.

2. قم بإنشاء قالب رأس جديد

اذهب إلى Divi → باني السمة.

قم بإنشاء قالب رأس جديد أو افتح جهازًا موجودًا.

3. تحميل تخطيط الرأس

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

حدد التصميم المحفوظ .

انقر فوق تخطيط الرأس الذي ترغب في إضافته إلى منشئ السمة.

انقر فوق الزر " استخدام هذا التصميم هذا" لتحميل الرأس.

تأكد من حفظ تغييرات رأسك الجديدة وباني السمة.

الافتراضي مقابل Prestyled: ما الذي يجب أن تختاره؟

عندما تفتح مجلد التنزيل ، سترى نسختين من كل رأس: ** افتراضي ** و ** prestyled **. لقد تم بناؤها بالضبط بنفس الطريقة ، والفرق هو في كيفية التعامل مع التصميم.

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

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

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

تخصيص الرؤوس

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

1. ضبط إعدادات المرن

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

هنا ، يمكنك تغيير اتجاه التصميم من صف إلى صف عكس ، العمود ، أو العكس. تتيح لك هذه الميزة تغيير اتجاه التصميم.

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

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

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

2. إظهار/إخفاء العناصر في نقاط توقف مختلفة

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

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

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

3. أضف الروابط عند الضرورة

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

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

تأكد من حفظ رأسك قبل الخروج من منشئ السمة.

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

انقر فوق خانة الاختيار القائمة الأساسية ثم انقر فوق "إنشاء قائمة" .

لإضافة صفحات إلى القائمة ، انقر فوق " عرض جميع علامة التبويب" وحدد الصفحات التي ترغب في ظهورها في القائمة. انقر فوق إضافة إلى القائمة لتعيينها.

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

استخدم Divi 5 لبناء رؤوسك اليوم

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