5 أمثلة على تخطيطات قسم أسلوب التحرير التي تم إنشاؤها باستخدام Divi

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

دعنا نلقي نظرة على الأمثلة الخمسة التي سنوضح لك كيفية إنشائها.

المثال الأول

سطح المكتب

متحرك

المثال الثاني

سطح المكتب

متحرك

المثال الثالث

سطح المكتب

متحرك

المثال الرابع

سطح المكتب

متحرك

المثال الخامس

سطح المكتب

متحرك

5 أمثلة على تخطيطات قسم أسلوب التحرير التي تم إنشاؤها باستخدام Divi

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

ابدأ في إنشاء المثال الأول

لنبدأ بإنشاء أول تخطيط لأسلوب المحرر الخاص بنا.

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

أضف صفحة جديدة ، وقم بتمكين Divi Builder وانتقل إلى Visual Builder. بمجرد دخولك إلى Visual Builder ، أضف قسمًا قياسيًا.

أضف صفًا ثلاثي الأعمدة

ضمن هذا القسم القياسي ، سنحتاج إلى صف من ثلاثة أعمدة.

خلفية متدرجة

افتح إعدادات الصف وأضف خلفية التدرج التالية إليها:

• اللون الأول: # 636363
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 0٪
• المركز النهائي: 47٪

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

سنحتاج أيضًا إلى تعيين "# d8d8d8" كلون خلفية العمود 2.

تحجيم

انتقل إلى علامة التبويب التصميم واستخدم الإعدادات التالية لفئة التحجيم الفرعية:

• استخدام العرض المخصص: نعم
• العرض المخصص: 100٪
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

افتح فئة التباعد الفرعية وأضف "50 بكسل" إلى الحشوة العلوية واليمنى والسفلية واليسرى للعمود الثاني.

أول وحدة صورة العمود

خلفية متدرجة

أضف صورة إلى العمود الأول من الصف واستخدم خلفية التدرج التالية لها:

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: # 086191
• نوع التدرج: خطي
• اتجاه التدرج: 107deg
• موقف البداية: 60٪
• موضع النهاية: 60٪

انتقام

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

تباعد

بعد ذلك ، افتح الفئة الفرعية Spacing واستخدم إعدادات الهامش والحشو التالية:

• الهامش العلوي: 100 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

وحدة نص العمود الثاني

إعدادات النص

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

• حجم خط النص: 12 بكسل
• لون النص: # 000000
• اتجاه النص: الوسط

تحجيم

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

تباعد

أخيرًا ، أضف "50 بكسل" إلى الهامش العلوي والسفلي.

وحدة صورة العمود الثالث

خلفية متدرجة

أضف وحدة صورة أخرى إلى العمود الثالث واستخدم خلفية التدرج التالية:

• اللون الأول: # a36100
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: خطي
• اتجاه التدرج: 73 درجة
• موقف البداية: 40٪
• موضع النهاية: 40٪

انتقام

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

تباعد

أخيرًا ، أضف الهامش المخصص والحشو التاليين:

• الهامش العلوي: 300 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

نتيجة

دعنا نلقي نظرة أخرى على النتيجة على سطح المكتب:

وعلى الهاتف المحمول:

ابدأ في إنشاء المثال الثاني

المثال الثاني يبدو هكذا على سطح المكتب:

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

أولاً ، قم بإضافة قسم قياسي جديد.

إضافة صف عمودين

ثم أضف صفًا من عمودين إليه.

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

افتح إعدادات الصف وأضف "#eded" كلون خلفية العمود 2.

تحجيم

انتقل إلى علامة التبويب "تصميم" وقم بإجراء التغييرات التالية على الفئة الفرعية "التحجيم":

• استخدام العرض المخصص: نعم
• العرض المخصص: 100٪
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

أول وحدة صورة العمود

انتقام

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

تباعد

افتح فئة التباعد الفرعية واستخدم الإعدادات التالية:

• الهامش العلوي: 100 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

وحدة نص العمود الثاني

إعدادات النص

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

• خط النص: لاتو
• حجم خط النص: 12 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 2.2em
• اتجاه النص: الوسط

تحجيم

افتح فئة التحجيم الفرعية وقم بتطبيق العرض "75٪".

تباعد

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

• الهامش العلوي: 120 بكسل (سطح المكتب) ، -80 (الجهاز اللوحي والهاتف)
• الهامش الأيسر: -240 بكسل (سطح المكتب) ، 80 (كمبيوتر لوحي) ، 45 (هاتف)
• الحشوة العلوية واليمنى والسفلية واليسرى: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)

نتيجة

بمجرد الانتهاء من ذلك ، ستلاحظ التصميم التالي على سطح المكتب:

وعلى الهاتف المحمول:

ابدأ في إنشاء المثال الثالث

بعد ذلك ، لدينا المثال التالي الذي يبدو كالتالي:

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

مرة أخرى ، قم بإضافة قسم قياسي جديد.

إضافة صف عمودين

هيكل العمود الذي سنحتاجه لهذا الصف هو كما يلي:

لون خلفية العمود 1

افتح إعدادات الصف واستخدم "# e8e8e8" كلون خلفية العمود 1.

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

خلفية التدرج المطلوبة للعمود الثاني هي التالية:

• اللون الأول: # e8e8e8
• اللون الثاني: rgba (255،255،255،0)
• العمود 2 نوع التدرج: خطي
• العمود 2 اتجاه التدرج: 147 درجة
• موضع البداية للعمود 2: 25٪
• موضع نهاية العمود 2: 9٪

تحجيم

افتح فئة التحجيم الفرعية واستخدم الإعدادات التالية:

• استخدام العرض المخصص: نعم
• العرض المخصص: 100٪
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

أخيرًا ، أضف "70 بكسل" إلى المساحة المتروكة العلوية والسفلية للعمود الأول.

أول وحدة صورة العمود

انتقام

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

تباعد

افتح فئة التباعد الفرعية وأضف "-300 بكسل" إلى الهامش الأيسر.

وحدة نص العمود الثاني

لون الخلفية

أضف وحدة نصية إلى العمود الثاني واستخدم '# 3d3d3d' كلون للخلفية.

إعدادات النص

انتقل إلى علامة التبويب تصميم واستخدم الإعدادات التالية لفئة النص الفرعية:

• خط النص: لاتو
• حجم خط النص: 12 بكسل
• لون النص: #FFFFFF
• ارتفاع خط النص: 2.2em
• اتجاه النص: الوسط

تحجيم

افتح فئة التحجيم الفرعية واستخدم "75٪" للعرض.

تباعد

أخيرًا ، استخدم الإعدادات التالية لفئة التباعد الفرعية:

• الهامش العلوي: 130 بكسل (سطح المكتب) ، -200 (كمبيوتر لوحي وهاتف)
• الهامش الأيسر: -180 بكسل (سطح المكتب) ، 80 (جهاز لوحي) ، 50 (هاتف)
• الحشوة العلوية واليمنى والسفلية واليسرى: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)

نتيجة

بمجرد الانتهاء ، ستبدو النتيجة على سطح المكتب كما يلي:

ومثل هذا على الهاتف المحمول:

ابدأ في إنشاء المثال الرابع

المثال الرابع الذي سننشئه يبدو كالتالي:

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

ابدأ بإضافة قسم قياسي إلى الصفحة التي تعمل عليها.

إضافة صف عمودين

ثم أضف صفًا من عمودين إليه.

تحجيم

افتح فئة التحجيم الفرعية وقم بإجراء التغييرات التالية:

• استخدام العرض المخصص: نعم
• العرض المخصص: 60٪
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

الوحدة النمطية للصورة الأولى للعمود الأول

انتقام

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

تحجيم

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

الرؤية

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

وحدة الصورة الثانية للعمود الأول

انتقام

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

الحدود

قم بالتمرير لأسفل واستفد من الحد التالي:

• استخدام الحدود: نعم
• لون الحدود: #FFFFFF
• عرض الحدود: 5 بكسل
• نمط الحدود: صلب

الرؤية

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

العمود الثاني وحدة الصورة الأولى

انتقام

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

الحدود

قم بالتمرير لأسفل ، وافتح الفئة الفرعية Border وقم بتطبيق الإعدادات التالية:

• استخدام الحدود: نعم
• لون الحدود: #FFFFFF
• عرض الحدود: 4 بكسل
• نمط الحدود: صلب

وحدة الصورة الثانية للعمود الثاني

انتقام

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

تحجيم

بعد ذلك ، افتح فئة التحجيم الفرعية ، واستخدم عرضًا بنسبة 89٪ وحدد محاذاة الوحدة النمطية اليسرى.

الرؤية

قم بتعطيل وحدة الصور هذه على الهاتف والجهاز اللوحي أيضًا.

أضف صف عمود واحد

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

تحجيم

انتقل إلى علامة التبويب تصميم في إعدادات الصف ، وقم بتمكين خيار "استخدام العرض المخصص" واستخدم "581 بكسل" باعتباره العرض المخصص.

وحدة النص

لون الخلفية

أضف وحدة نصية إلى هذا الصف الجديد وحدد "rgba (255،255،255،0.92)" كلون للخلفية.

إعدادات النص

انتقل إلى علامة التبويب التصميم وقم بإجراء الإعدادات التالية على فئة النص الفرعية:

• خط النص: لاتو
• حجم خط النص: 12 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 2.2em
• اتجاه النص: الوسط

تحجيم

بعد ذلك ، افتح فئة Sizing الفرعية ، وأضف "75٪" إلى العرض وحدد محاذاة الوحدة النمطية المركزية.

تباعد

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

• الهامش العلوي: -580 بكسل (سطح المكتب) ، -200 (كمبيوتر لوحي وهاتف)
• الهامش الأيسر: - 180 بكسل (سطح المكتب) ، 80 (جهاز لوحي) ، 50 (هاتف)
• الحشوة العلوية واليمنى والسفلية واليسرى: 50 بكسل

نتيجة

بمجرد الانتهاء ، ستتمكن من مشاهدة النتيجة التالية على سطح المكتب:

وما يلي على الجوال:

ابدأ في إنشاء المثال الخامس

المثال الأخير الذي سنعرضه لك كيفية إعادة الإنشاء هو ما يلي:

أضف مقطع عرض كامل

ابدأ بإضافة قسم كامل العرض إلى صفحتك.

وحدة الصورة ذات العرض الكامل

ضمن قسم العرض الكامل هذا ، أضف وحدة صورة بعرض كامل.

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

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

أضف ثلاثة صفوف أعمدة

أضف صفًا من ثلاثة أعمدة إلى هذا القسم القياسي الجديد.

لون الخلفية للعمود 1 و 2 و 3

افتح إعدادات الصف وقم بتعيين ألوان الخلفية التالية للأعمدة:

• العمود 1: #eaeaea
• العمود 2: rgba (12،113،195،0.17)
• العمود 3: rgba (131،0،233،0.09)

تحجيم

انتقل إلى علامة التبويب "تصميم" وقم بإجراء التغييرات التالية على الفئة الفرعية "التحجيم":

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

تباعد

ثم افتح فئة التباعد الفرعية ، وأضف "-60 بكسل" إلى الهامش العلوي و "50 بكسل" إلى الحشوة السفلية لكل عمود.

الوحدة النمطية الأولى لنص العمود

لون الخلفية

تابع بإضافة وحدة نصية إلى العمود الأول واستخدام "rgba (255،255،255،0.89)" كلون للخلفية.

إعدادات النص

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

• خط النص: لاتو
• حجم خط النص: 12 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 2.2em
• اتجاه النص: الوسط

الحدود

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

• استخدام الحدود: نعم
• لون الحدود: #FFFFFF
• عرض الحدود: 17 بكسل
• نمط الحدود: صلب

تحجيم

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

تباعد

أخيرًا ، افتح الفئة الفرعية Spacing وقم بإجراء الإعدادات التالية:

• الهامش العلوي: -300 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة العلوية واليمنى والسفلية واليسرى: 50 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)

استنساخ وحدة النص مرتين ووضعها في عمودين آخرين

انطلق واستنسخ وحدة النص مرتين. ثم ضع كل واحد من النسخ المستنسخة في العمودين المتبقيين.

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

سيتعين علينا تغيير الهامش العلوي لوحدة النص الموضوعة داخل العمود الثاني إلى "-220 بكسل".

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

نفس الأعداد للوحدة النمطية للنص في العمود الثالث ولكن القيمة بدلاً من ذلك هي "-140 بكسل".

نتيجة

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

وعلى الهاتف المحمول:

افكار اخيرة

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

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

صورة مميزة بواسطة جوليا تيم / shutterstock.com