كيفية التبديل بين الصور في تصميم مذهل لقسم Divi Split

نشرت: 2019-10-31

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Toggle Image Design مجانًا

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

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

تنزيل مجاني

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

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

لنبدأ في إعادة التكوين

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

تباعد

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

الحشوة العلوية والسفلية: 0vw

الرؤية

بعد ذلك ، اضبط تجاوز القسم على "مخفي".

أفقي + عمودي تجاوز: مخفي

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

هيكل العمود

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

تحجيم

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

عرض الحضيض: 1
العرض: 100٪
العرض الأقصى: 100٪

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية للصف أيضًا.

الحشوة العلوية والسفلية: 0vw

إعدادات العمود 1

خلفية

افتح إعدادات العمود 1 بعد ذلك وأضف لون الخلفية.

اللون: شاحب # E7BAC6

الحدود

بعد ذلك ، اضبط إعدادات حدود العمود عبر أحجام الشاشات المختلفة.

الزوايا الدائرية: أعلى اليمين + أسفل اليمين
- سطح المكتب: 10vw
- الجهاز اللوحي والهاتف: 0vw

الرؤية

انتقل إلى علامة التبويب خيارات متقدمة واضبط إعدادات الرؤية على النحو التالي:

أفقي + عمودي تجاوز
- سطح المكتب: افتراضي
- تحوم: مرئي
الفهرس Z:
- سطح المكتب: 10
- تحوم: 11

إعدادات العمود 2

خلفية

الآن ، أضف خلفية اللون إلى العمود 2.

اللون: شاحب أخضر # bfd5a5

الحدود

قم بتغيير إعدادات حدود العمود الثاني كما يلي:

الزوايا الدائرية: أعلى اليسار + أسفل اليسار
- سطح المكتب: 10vw
- الجهاز اللوحي والهاتف: 0vw

الرؤية

أخيرًا وليس آخرًا ، قم بتغيير إعدادات الرؤية وفقًا لذلك:

أفقي + عمودي تجاوز
- سطح المكتب: افتراضي
- تحوم: مرئي
الفهرس Z:
- سطح المكتب: 9
- تحوم: 11

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

إضافة صورة

حان الوقت لبدء إضافة الوحدات! أضف وحدة صورة إلى العمود 1 وقم بتحميل صورة شبه شفافة من اختيارك.

خلفية

استخدم لون خلفية العمود كلون لخلفية صورتك.

اللون: شاحب # E7BAC6

تحجيم

ثم ، في علامة تبويب التصميم ، اضبط إعدادات التحجيم.

فرض عرض كامل: نعم

تباعد

أضف بعض الحشو المخصص أيضًا.

الحشوة اليمنى:
- الجهاز اللوحي: 18vw
- هاتف: 20vw

تحول

أخيرًا وليس آخرًا ، اضبط إعدادات ترجمة تحويل الوحدة.

ترجمة التحويل: المحور السيني 19vw

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

إضافة محتوى

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

نص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص على النحو التالي.

الخط: Verdana
اللون: أبيض #ffffff
مقاس:
- سطح المكتب: 2vw
- الجهاز اللوحي: 3vw
- الهاتف: 3.5vw
تباعد الأحرف: 1 بكسل
المحاذاة: تتمحور

نص العنوان

نمط نص العنوان التالي.

مستوى العنوان: H2
الخط: Verdana
الوزن: جريء
المحاذاة: المركز
اللون: أرجواني # 9d3056
مقاس:
- سطح المكتب: 6vw
- الجهاز اللوحي + الهاتف: 8vw

تحجيم

ثم اضبط حجم الوحدة.

عرض:
- سطح المكتب: 56٪
- الجهاز اللوحي + الهاتف: 43٪

تباعد

أكمل إعدادات الوحدة عن طريق تعديل إعدادات التباعد عبر أحجام الشاشات المختلفة.

الهامش العلوي:
- سطح المكتب: -55vw
- الجهاز اللوحي: -70vw
- الهاتف: -90vw
الحشوة السفلية:
- سطح المكتب + الجهاز اللوحي: 0vw
الحشوة اليسرى: 2vw

إضافة وحدة عدادات الشريط إلى العمود 1

إعدادات عداد الشريط 1-4

الألقاب

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة عدادات الشريط. أضف عناوين إلى عدادات الشريط.

فراولة
توت
شجر العليق - أجهزة البلاك بيري
توت العليق

النسب المئوية

جنبا إلى جنب مع النسب المئوية.

تحجيم

انقر فوق الشريط الأول واضبط الارتفاع. كرر هذه الخطوة لجميع الأشرطة الأربعة.

الارتفاع: 1.5vw

إعدادات عدادات الشريط العامة

عناصر

في إعدادات عداد الشريط العامة ، افتح إعدادات العناصر. بدّل النسبة المئوية إلى "لا".

إظهار النسبة المئوية:

خلفية

الآن ، أضف خلفية شبه شفافة.

اللون: وردي شاحب مع شفافية rgba (157،48،86،0.18)

شريط

في علامة تبويب التصميم ، امنح الأشرطة لون شريط أرجواني.

لون الخلفية: أرجواني # 9d3056

نص العنوان

نمط إعدادات نص العنوان بعد ذلك.

الخط: Verdana
اللون: أبيض #ffffff
مقاس:
- سطح المكتب: 1vw
- الجهاز اللوحي: 2vw
- الهاتف: 3vw

تحجيم

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

عرض:
- سطح المكتب: 49٪
- الجهاز اللوحي + الهاتف: 33٪

تباعد

قم بتعديل إعدادات التباعد أيضًا.

الهامش العلوي:
- الجهاز اللوحي + الهاتف: -3vw
الهامش السفلي:
- سطح المكتب: 21vw
- الجهاز اللوحي + الهاتف: 28vw
الهامش الأيسر:
- سطح المكتب: 3vw
- الجهاز اللوحي + الهاتف: 6vw
الحشوة السفلية + اليسرى: 0vw

الحدود

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

الزوايا الدائرية: 1vw من جميع الزوايا الأربع

الرؤية

أخيرًا ، اضبط الفهرس z والفيضانات في علامة تبويب الرؤية.

التدفق الأفقي: مرئي
الفائض العمودي: مخفي
الفهرس Z: 11

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

إضافة صورة

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

خلفية

استخدم لون خلفية العمود 2 كلون خلفية صورتك بعد ذلك.

اللون: شاحب أخضر # bfd5a5

تحجيم

في علامة تبويب التصميم ، اضبط حجم الوحدة.

فرض عرض كامل: نعم

تباعد

أضف بعض المساحة المتروكة المخصصة اليسرى على أحجام أصغر للشاشة أيضًا.

الحشوة اليسرى:
- الجهاز اللوحي: 16vw
- هاتف: 18vw

تحول

أخيرًا وليس آخرًا ، قم بتغيير إعدادات ترجمة التحويل.

ترجمة التحويل: x-axis -19.6vw

أضف وحدة نصية إلى العمود 2

إضافة محتوى

تابع بإضافة "وحدة نصية" إلى العمود 2 مع بعض محتوى H2 والفقرة.

نص

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

الخط: Verdana
اللون: أبيض #ffffff
مقاس:
- سطح المكتب: 2vw
- الجهاز اللوحي: 3vw
- الهاتف: 3.5vw
تباعد الأحرف: 1 بكسل
المحاذاة: المركز

نص العنوان

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

مستوى العنوان: H2
الخط: Verdana
الوزن: جريء
المحاذاة: المركز
اللون: أخضر # 2c5b00
مقاس:
- سطح المكتب: 6vw
- الجهاز اللوحي + الهاتف: 8vw

تحجيم

واضبط إعدادات تحجيم الوحدة.

العرض: 60٪
المحاذاة: صحيح

تباعد

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

الهامش العلوي:
- سطح المكتب: -55vw
- الجهاز اللوحي: -63vw
- الهاتف: -90vw
الحشوة السفلية:
- سطح المكتب + الجهاز اللوحي: 37vw
الحشوة اليسرى:
- سطح المكتب: 0vw
- تابلت + هاتف: 16vw
الحشوة اليمنى:
- الجهاز اللوحي + الهاتف: 2vw

إضافة وحدة عدادات الشريط إلى العمود 2

إعدادات عداد الشريط 1-4

الألقاب

آخر وحدة نحتاجها في العمود 2 هي وحدة عدادات الشريط. أضف أربعة عدادات شريط.

بروكلي
كرفس
خيار
كرنب

النسب المئوية

قم بتعيين نسبة مئوية لكل عداد شريط.

تحجيم

افتح الإعدادات الفردية للشريط الأول وقم بتعديل الارتفاع في إعدادات التحجيم. كرر هذه الخطوة لجميع الأشرطة الأربعة.

الارتفاع: 1.5vw

إعدادات عدادات الشريط العامة

عناصر

في إعدادات عداد الشريط العامة ، قم بتغيير النسبة المئوية للتبديل إلى "لا".

إظهار النسبة المئوية:

خلفية

بعد ذلك ، أضف لون خلفية شبه شفاف.

اللون: أخضر باهت مع شفافية rgba (17،119،3،0.18)

شريط

ثم ، في علامة تبويب التصميم ، أضف لونًا إلى شريط العداد.

لون الشريط: أخضر # 9d3056

نص العنوان

تواصل عن طريق تصميم النص.

الخط: Verdana
اللون: أبيض #ffffff
مقاس:
- سطح المكتب: 1vw
- الجهاز اللوحي: 2vw
- الهاتف: 3vw

تحجيم

قم بتعديل العرض عبر أحجام الشاشات المختلفة أيضًا.

عرض:
- سطح المكتب: 49٪
- الجهاز اللوحي + الهاتف: 33٪

تباعد

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

الهامش العلوي:
- سطح المكتب: -37vw
- الجهاز اللوحي + الهاتف: -40vw
الهامش السفلي:
- سطح المكتب: 21vw
- الجهاز اللوحي + الهاتف: 28vw
الهامش الأيسر:
- سطح المكتب: 23vw
- الكمبيوتر اللوحي + الهاتف: 60vw
الحشوة السفلية + اليسرى: 0vw

الحدود

نضيف بعض الزوايا الدائرية أيضًا.

الزوايا الدائرية: 1vw من جميع الزوايا الأربع

الرؤية

أكمل إعدادات الوحدة عن طريق ضبط الفائض والفهرس z في علامة تبويب الرؤية.

التدفق الأفقي: مرئي
الفائض العمودي: مخفي
الفهرس Z: 11

معاينة

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

سطح المكتب

متحرك

انها التفاف!

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