كيفية إنشاء تخطيط كامل الشاشة منقسمة مع تبديل فريد في Divi

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

تبديل الفتح

تبديل مغلق

متحرك

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء 1: إنشاء تخطيط تقسيم الشاشة من قسمين

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

القسم 1 الإعدادات

بالنسبة لهذا القسم الأول من قسمين ، لنبدأ بإضافة إعدادات التصميم التالية:

خلفية

• أضف صورة الخلفية
• لون الخلفية المتدرجة اليسرى: #ffffff
• خلفية متدرجة اللون الأيسر: rgba (255،255،255،0.45)

الحجم والتباعد

ثم قم بتحديث الحجم والتباعد بحيث يأخذ القسم 50٪ من عرض المتصفح و 100٪ من ارتفاع المتصفح.

• العرض: 50٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
• الحد الأدنى للارتفاع: 900 بكسل (سطح المكتب) ، لا شيء (الجهاز اللوحي والهاتف)
• الارتفاع: 100 فولت في الساعة (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

أعلى الحاجز

• نمط الفاصل العلوي: انظر الصورة
• لون الفاصل العلوي: # 333333
• ارتفاع الحاجز العلوي: 50vh (سطح المكتب) ، 10vh (الكمبيوتر اللوحي والهاتف)
• تكرار أفقي للمقسم العلوي: 0.5x (سطح المكتب) ، 1x (الكمبيوتر اللوحي والهاتف)
• ترتيب الحاجز العلوي: أسفل محتوى القسم

مقسم سفلي

• نمط الحاجز السفلي: انظر الصورة
• لون الحاجز السفلي: # 02c39a
• ارتفاع الحاجز السفلي: 50vh (سطح المكتب) ، 30vh (الكمبيوتر اللوحي والهاتف)
• تكرار المقسم السفلي الأفقي: 0.5x (سطح المكتب) ، 1x (الكمبيوتر اللوحي والهاتف)
• ترتيب الحاجز السفلي: أسفل محتوى القسم

القسم 2

قسم مكرر 1

لإنشاء القسم المجاور الذي سيشغل الجانب الأيمن من تخطيط الشاشة المنقسمة ، قم بتكرار القسم 1.

ثم قم بتحديث الإعدادات كما يلي:

موقع

• الموضع: مطلق (سطح المكتب) ، نسبي (الكمبيوتر اللوحي والهاتف)
• الموقع: أعلى اليمين
• الفهرس Z: 10

خلفية

• لون الخلفية: لا شيء / أبيض

تحديثات أعلى الحاجز

• نمط الفاصل العلوي: انظر الصورة
• لون الفاصل العلوي: # 02c39a
• تكرار الفاصل العلوي الأفقي: 1x
• الوجه الفاصل العلوي: عمودي

يجب أن يتماشى الحاجز تمامًا مع الرأس العلوي المجاور في القسم 1.

مقسم سفلي

• نمط الحاجز السفلي: انظر الصورة
• لون الحاجز السفلي # f0f3bd
• تكرار المقسم السفلي الأفقي: 1x
• الوجه الفاصل السفلي: عمودي

الجزء 2: القسم 1 العنوان والقائمة

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

خلق العنوان

للبدء ، سننشئ عنوانًا كبيرًا في القسم الأيسر.

إعدادات الصف

قبل أن نضيف وحدة نصية ، نحتاج إلى تحديث إعدادات الصف للصف في القسم 1 على النحو التالي:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى ، 0 بكسل للأسفل ، 10٪ على اليمين
• الموضع: مطلق (سطح المكتب) ، نسبي (الكمبيوتر اللوحي والهاتف)
• الموقع: يسار الوسط

وحدة النص

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

محتوى النص

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

<h1>Divi <br />Web <br />Design</h1>

تصميم نصي

ثم قم بتحديث إعدادات تصميم النص على النحو التالي:

• خط العنوان: بوبينز
• وزن خط العنوان: غامق
• محاذاة نص العنوان: صحيح
• حجم نص العنوان: 10vw
• ارتفاع خط العنوان: 1.2em
• المساحة المتروكة: اليسار 5٪

إنشاء القائمة

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

إليك كيفية القيام بذلك ...

أضف صفًا جديدًا

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

إعدادات الصف

ثم قم بتحديث إعدادات الصف التالية:

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
• الموضع: مطلق (سطح المكتب) ، نسبي (الكمبيوتر اللوحي والهاتف)
• الموقع: أسفل اليسار
• الفهرس Z: 3

الوحدة النمطية Blurb

بعد ذلك ، أضف وحدة دعاية مغالى فيها إلى الصف الجديد.

محتوى دعاية

ثم قم بتحديث محتوى الدعاية كالتالي:

• العنوان: الأعمال
• الرمز: المباني

تصميم دعاية

ثم قم بتحديث إعدادات التصميم على النحو التالي:

• لون الايقونة: # 333333
• حجم خط الأيقونة: 40 بكسل
• محاذاة النص: الوسط
• حجم نص العنوان: 12 بكسل

ثم أضف CSS المخصص التالي إلى Blurb Image

margin-bottom: 10px;

عمود مكرر

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

تحديث المحتوى للدلالات

بمجرد إنشاء جميع الأعمدة / الرموز الستة ، ارجع وقم بتحديث العنوان والأيقونة وعنوان URL لكل دعاية.

الجزء 3 القسم 2 التبديل

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

إعدادات الصف

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

• عرض الحضيض: 1
• العرض: 100٪
• أقصى عرض: 100٪ (سطح المكتب) ، لا شيء (الجهاز اللوحي والهاتف)
• ارتفاع: 100٪

ارتفاع العمود

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

height: 100%;

أعلى وحدة تبديل

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

تبديل المحتوى

ثم قم بتحديث محتوى التبديل بالعنوان "Divi" والصقه في محتوى الجسم التالي:

Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here.

<a href="#">| Learn More ></a>

تبديل التصميم

قم بتحديث تصميم التبديل على النحو التالي:

• لون الايقونة: # 333333
• حجم خط الأيقونة: 40 بكسل
• فتح تبديل لون الخلفية: شفاف
• مغلق تبديل لون الخلفية: شفاف
• فتح لون نص العنوان: # 333333
• لون نص العنوان: # 333333
• خط العنوان: بوبينز
• وزن خط العنوان: خفيف للغاية
• حجم نص العنوان: 40 بكسل
• لون النص الأساسي: # 333333
• وزن خط الرابط: # 333333
• وزن خط الارتباط: غامق
• نمط خط الارتباط: TT
• لون نص الرابط: # 333333
• تباعد حروف الارتباط: 3 بكسل (سطح المكتب) ، 5 بكسل (تحوم)

تبديل الحجم والموضع

• العرض: 50٪ (سطح المكتب) ، 80٪ (الجهاز اللوحي والهاتف)
• العرض الأقصى: 400 بكسل
• عرض الحدود: 0 بكسل
• تبديل رمز CSS المخصص:

  left:-60px;

• الموضع: مطلق (سطح المكتب) ، نسبي (الكمبيوتر اللوحي والهاتف)
• تعويض عمودي: 22٪
• إزاحة أفقية: 50٪
• الفهرس Z: 2

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

أسفل وحدة تبديل

تكرار أعلى تبديل

لإنشاء مفتاح التبديل السفلي ، قم بتكرار مفتاح التبديل الذي تم إنشاؤه للتو.

تحديث الوظيفة

ثم افتح إعدادات التبديل المكررة باستخدام مربع الطبقات وقم بتحديث إزاحة الموضع على النحو التالي:

• الإزاحة الرأسية: 70٪

وحدة تبديل الوسط

تكرار أسفل التبديل

لإنشاء مفتاح التبديل الأوسط ، قم بتكرار مفتاح التبديل السفلي.

تحديث الوظيفة

ثم قم بتحديث ما يلي:

• الموقع: مركز اليسار
• الإزاحة الأفقية: 19 بكسل

حجم التحديث

• العرض: 95٪
• العرض الأقصى: 500 بكسل

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

لميزة تصميم اختيارية ، يمكننا إضافة مقتطف CSS مخصص إلى العنصر الرئيسي لمحاذاة النص على يمين العنوان.

للقيام بذلك ، الصق CSS التالي في العنصر الرئيسي:

display:flex;
align-items:center;

خطوط الفاصل

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

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

لإنشاء خط الفاصل العلوي ، أضف وحدة فاصل جديدة أسفل مفتاح التبديل العلوي.

تصميم فاصل

ثم قم بتحديث إعدادات تصميم الحاجز كما يلي:

• لون الخط: # 333333
• موضع الخط: توسيط رأسيًا
• وزن الحاجز: 2 بكسل
• العرض: 50٪
• تحويل المحور Y للترجمة: 29 بكسل
• تحويل المحور العاشر للترجمة: -12 بكسل
• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح
• مدة الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 10٪
• بدء تعتيم الرسوم المتحركة: 100٪

رؤية المقسم وموضعه

الآن ، كل ما علينا فعله هو إخفاء الحاجز على الهاتف المحمول ووضعه بحيث يتماشى مع مفتاح التبديل العلوي.

• تعطيل في: الهاتف وسطح المكتب
• الموقف: مطلق
• تعويض عمودي: 22٪
• الفهرس Z: 1

وحدة المقسم السفلي

وحدة مكررة أعلى الحاجز

لإنشاء الحاجز السفلي ، قم بتكرار وحدة الفاصل العلوي.

تحديث الوظيفة

ثم قم بتحديث إزاحة الموضع لمحاذاة مفتاح التبديل السفلي:

• تعويض عمودي: 70٪

النتيجة النهائية

بمجرد الانتهاء ، تحقق من النتيجة النهائية على الصفحة المباشرة.

تبديل الفتح

تبديل مغلق

متحرك

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!