هل تريد إنشاء تخطيط شبكة صورة سريع الاستجابة باستخدام DIVI ?
البناء Divi يحتوي على وحدات مدمجة رائعة تستخدم عروض الشبكة ،
لكن في بعض الأحيان قد ترغب في إنشاء تخطيط شبكة صور مخصص خاص بك باستخدام روابط CTA. وهذا يمنحك المزيد من السيطرة على التصميم و محتويات التي تريد عرضها لكل عنصر في الشبكة دون الحاجة إلى اللجوء إلى مكون إضافي.
سنوضح لك اليوم كيفية إنشاء تخطيط شبكة صور سريع الاستجابة باستخدام روابط CTA باستخدام خيارات التصميم المضمنة في Divi.
دعونا نبدأ!
مسح
فيما يلي نظرة عامة مختصرة على النتيجة التي سنحصل عليها في نهاية هذا البرنامج التعليمي.
قم بإنشاء صفحة باستخدام Divi Theme Builder
من لوحة تحكم WordPress ، قم بإنشاء صفحة ويب جديدة بالانتقال إلى الصفحات >> إضافة
انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI؟
بعد ذلك ، أدخل عنوانًا لصفحتك ، ثم انقر فوق " استخدم Divi Builder ".
ثم انقر فوق " ابدأ البناء«
إنشاء تخطيط القسم الخاص
أضف قسمًا جديدًا " تخصص ". تخطيط الشريط الجانبي الأيسر ثلث وثلثين.
اختر تخطيط الأعمدة كما هو موضح في الصورة أدناه:
احذف القسم الافتراضي بحيث يبقى القسم المتخصص الجديد فقط.
افتح إعدادات القسم وقم بتغيير لون الخلفية كما يلي:
- الخلفية: # 84dbda
تحت علامة التبويب الطراز، قم بتحديث الخيارات التالية:
- معادلة ارتفاعات العمود: نعم
- استخدام عرض هامش مخصص: نعم
- عرض المزراب: 1
- العرض الداخلي: 100٪
اقرأ أيضا: كيف أنشر منشورات المدونة في DIVI؟
- أقصى عرض داخلي: 1 بكسل (سطح المكتب) ، 080 بكسل (الجهاز اللوحي والهاتف)
- الهامش الداخلي (أعلى وأسفل): 12 ساعة
- مساحة العمود 1 (أعلى وأسفل): 0 بكسل
مع وجود أنماط القسم في مكانها ، أضف صفًا مكونًا من عمود واحد إلى القسم.
إعدادات الخط
قم بتحديث معلمات الخط كما يلي:
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- تنسيق ارتفاعات العمود: نعم
- الهامش الداخلي (العلوي والسفلي): 0 بكسل
أنشئ سطرًا ثانيًا عن طريق تكرار السطر الأول.
ثم قم بتغيير الصف المكرر إلى تخطيط من عمودين.
إضافة الصور كصور خلفية العمود
الآن بعد أن أصبحت جميع الصفوف والأعمدة في مكانها الصحيح ، نحن على استعداد لإضافة صورنا إلى تخطيط الشبكة الخاص بنا.
من أجل ضمان استجابة الصور في تخطيط الشبكة ، سنضيف كل صورة من صورنا كصور خلفية لكل عمود من الأعمدة الأربعة في القسم.
نظرًا لأن حجم الخلفية لكل صورة خلفية هو " التغطية "، ستملأ الصورة العمود بالكامل دائمًا عند ضبط حجم المتصفح.
صورة خلفية العمود في الصف العلوي
للبدء ، افتح إعدادات عمود الصف العلوي.
ثم أضف صورة خلفية إلى العمود.
صور خلفية العمود في الصف السفلي
بعد ذلك ، افتح إعدادات العمود 1 في الصف الثاني (السفلي) وقم أيضًا بإضافة صورة خلفية إلى هذا العمود.
بعد ذلك ، أضف صورة خلفية إلى العمود 2 من نفس الصف.
صورة خلفية العمود 1
وأخيرًا ، افتح إعدادات القسم " تخصص " وأضف صورة خلفية إلى العمود 1.
إضافة وحدة "دعوة إلى العمل" متراكبة على الصور لكل عمود
الآن بعد أن تمت إضافة صور الخلفية إلى كل عمود من تخطيط الشبكة ، سنضيف وحدة "دعوة إلى العمل" لكل عمود.
سيسمح لك استخدام تراكب وحدة "الحث على اتخاذ إجراء" على صورة خلفية العمود بسهولة إضافة أنماط تراكب خلفية مخصصة وتأثيرات التمرير إلى صورة خلفية العمود.
في هذا المثال، سنستخدم فقط عنصر الزر من وحدة Action Call، ولكن يمكنك إضافته بسهولة إلى محتويات من العنوان أو النص الموجود أعلى الزر.
سنضيف أول وحدة "دعوة للعمل" في عمود الصف العلوي.
محتويات
حدِّث إعدادات وحدة "الحث على اتخاذ إجراء" كما يلي:
- إزالة نص العنوان
- حذف النص الأساسي
- URL ارتباط الزر: #
تعليق : تعد إضافة "#" لعنوان URL لرابط الزر مجرد حشو في الوقت الحالي لعرض الزر. ستمنحك إضافة لون الخلفية شبه الشفاف عند التمرير لون تراكب مخصص لطيف عند التمرير فوق الوحدة (والصورة الموجودة خلفها).
- لون الخلفية: شفاف (سطح المكتب) ، rgba (255,235,77,0.5،XNUMX،XNUMX،XNUMX) (تحوم)
أنماط الزر
انتقل إلى علامة التبويب الطراز وتعديل إعدادات الأزرار لوحدة "الحث على اتخاذ إجراء" على النحو التالي:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 22 بكسل
- لون نص الزر: # ffeb4d
- زر الخلفية: # 000000 (سطح المكتب) ، # ec5f00 (تحوم)
انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI
- عرض حد الزر: 0 بكسل
- نصف قطر حدود الزر: 100 بكسل
- خط الزر: الرمال المتحركة
- زر ضوء خافت: شبه غامق
- زر الحشو: 0,5 سم علوي ، 0,5 سم سفلي ، 2 سم يسار ، 2 سم يمين
الحجم والحشو والحافة
بعد ذلك ، نحتاج إلى التأكد من أن الوحدة النمطية الخاصة بنا بها ارتفاع معين لكشف صورة الخلفية للعمود الموجود خلفها.
للقيام بذلك ، سنضيف هوامش داخلية (أعلى وأسفل) إلى الوحدة النمطية.
سنضيف أيضًا حدًا دقيقًا إلى الوحدة النمطية لمنحها فصلًا بسيطًا عن الصور الأخرى في تخطيط الشبكة.
قم بتطبيق الإعدادات التالية:
- العرض: 100٪
- الهامش الداخلي (أعلى وأسفل): 15 ساعة
- عرض الحد السفلي: 5 بكسل
- عرض الحد الأيسر: 5 بكسل
- لون الحدود: rgba (255,255,255,0.5،XNUMX،XNUMX،XNUMX)
تعليق : سيؤدي استخدام وحدة الطول vh للحشو إلى جعل قيمة المساحة المتروكة متناسبة مع ارتفاع إطار عرض المتصفح. لذلك ستنمو عناصر شبكة الصور وتتقلص في الارتفاع بما يتناسب مع نافذة المتصفح.
التمركز الرأسي لمحتوى وحدة "دعوة إلى العمل"
للتأكد من أن محتويات من وحدة "Action Call" تظل متمركزة عموديًا، يمكننا إضافة مقتطف صغير من CSS مخصص باستخدام الخاصية flex.
ضمن علامة التبويب خيارات متقدمة ، أضف CSS التالي إلى العنصر الرئيسي:
display:flex;
flex-direction:column;
justify-content:center;
تمت إضافة تراكب عبارة الحث على اتخاذ إجراء إلى أعمدة أخرى
الآن بعد أن تم تخصيص الوحدة النمطية "الحث على اتخاذ إجراء" ، انسخ الوحدة والصقها في الأعمدة الثلاثة الأخرى من التخطيط ، بما في ذلك العمودين في الصف السفلي والعمود 3 في القسم.
للتأكد من أن وحدة "الحث على اتخاذ إجراء" تغطي الارتفاع الكامل للعمود 1 في القسم المتخصص ، عيّن الحد الأدنى للارتفاع إلى 100٪.
- أقل ارتفاع: 100٪
لقد انتهى ! دعونا نرى النتيجة النهائية.
نتيجة نهائية
هذه هي النتيجة النهائية لتخطيط شبكة الصورة سريع الاستجابة على صفحة ويب مع تأثيرات التمرير.
وهذه هي الطريقة التي تتفاعل بها الشبكة عند تعديل حجم المتصفح.
تحميل DIVI Now !!!
وفي الختام
لا تزال تخطيطات شبكة الصور المتجاوبة تمثل جانبًا شائعًا في العديد من مواقع الويب. يمكن للجاذبية المرئية التي توفرها صورة الخلفية جنبًا إلى جنب مع تراكب الحث على اتخاذ إجراء أن تظهر روابط التنقل المهمة هذه.
أيضًا ، ستبدو الطبيعة المتجاوبة لتخطيط شبكة الصور رائعة على جميع الأجهزة ، وهو أمر لا بد منه دائمًا.
نأمل أن يكون هذا الدليل مفيدًا لك في مشاريعك المستقبلية للإنشاء موقع انترنت. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
ومع ذلك ، يمكنك أيضا استشارة مواردنا إذا كنت بحاجة إلى المزيد من العناصر لإكمال مشاريع إنشاء موقع الويب الخاص بك.
يمكنك أيضًا اتباع دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
