هل ترغب في إنشاء تصميم شبكة صور متجاوب باستخدام Divi؟
يحتوي مُنشئ Divi على وحدات مدمجة رائعة تستخدم شاشات الشبكة،
لكن في بعض الأحيان قد ترغب في إنشاء تخطيط شبكة صور مخصص خاص بك مع روابط دعوة للعمل. يمنحك هذا مزيدًا من التحكم في التصميم والمحتوى الذي تريد عرضه لكل عنصر من عناصر الشبكة دون الحاجة إلى استخدام إضافة.
سنوضح لكم اليوم كيفية إنشاء تخطيط شبكة صور متجاوب مع روابط CTA باستخدام خيارات التصميم المدمجة في Divi.
دعونا نبدأ!
مسح
فيما يلي نظرة عامة مختصرة على النتيجة التي سنحصل عليها في نهاية هذا البرنامج التعليمي.
قم بإنشاء صفحة باستخدام Divi Theme Builder
من لوحة تحكم WordPress ، قم بإنشاء صفحة ويب جديدة بالانتقال إلى الصفحات >> إضافة
انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI؟
بعد ذلك ، أدخل عنوانًا لصفحتك ، ثم انقر فوق " استخدم Divi Builder ".
ثم انقر فوق " ابدأ البناء«
إنشاء تخطيط القسم الخاص
أضف قسمًا جديدًا "تخصص". تخطيط الشريط الجانبي الأيسر ثلث وثلثين.
اختر تخطيط الأعمدة كما هو موضح في الصورة أدناه:
احذف القسم الافتراضي بحيث يبقى القسم المتخصص الجديد فقط.
افتح إعدادات القسم وقم بتغيير لون الخلفية كما يلي:
- الخلفية: # 84dbda
تحت علامة التبويب الطراز، قم بتحديث الخيارات التالية:
- معادلة ارتفاعات العمود: نعم
- استخدام عرض هامش مخصص: نعم
- عرض المزراب: 1
- العرض الداخلي: 100٪
اقرأ أيضا: كيف أنشر منشورات المدونة في DIVI؟
- أقصى عرض داخلي: 1 بكسل (سطح المكتب) ، 080 بكسل (الجهاز اللوحي والهاتف)
- الهامش الداخلي (أعلى وأسفل): 12 ساعة
- مساحة العمود 1 (أعلى وأسفل): 0 بكسل
مع وجود أنماط القسم في مكانها ، أضف صفًا مكونًا من عمود واحد إلى القسم.
إعدادات الخط
قم بتحديث معلمات الخط كما يلي:
- استخدام عرض مزراب مخصص: نعم
- تباعد العمود: 1
- تنسيق ارتفاعات العمود: نعم
- الهامش الداخلي (العلوي والسفلي): 0 بكسل
أنشئ سطرًا ثانيًا عن طريق تكرار السطر الأول.
ثم قم بتغيير الصف المكرر إلى تخطيط من عمودين.
إضافة صور كصور خلفية للأعمدة
الآن بعد أن أصبحت جميع الصفوف والأعمدة في مكانها الصحيح ، نحن على استعداد لإضافة صورنا إلى تخطيط الشبكة الخاص بنا.
لضمان استجابة الصور في تخطيط الشبكة، سنضيف كل صورة من صورنا كصورة خلفية لكل عمود من الأعمدة الأربعة للقسم.
بافتراض أن كل صورة خلفية سيكون لها حجم خلفية قدره "بطانية"ستملأ الصورة العمود بأكمله دائمًا عند تعديل حجم المتصفح.
صورة خلفية لعمود الصف العلوي
للبدء ، افتح إعدادات عمود الصف العلوي.
بعد ذلك، أضف صورة خلفية للعمود.
صور خلفية للأعمدة في الصف السفلي
بعد ذلك، افتح إعدادات العمود 1 في الصف الثاني (من الأسفل) وأضف أيضًا صورة خلفية لهذا العمود.
بعد ذلك، أضف صورة خلفية إلى العمود الثاني من نفس الصف.
صورة خلفية للعمود الأول من القسم
وأخيرًا ، افتح إعدادات القسم "تخصص" وأضف صورة خلفية إلى العمود 1.
تمت إضافة وحدة "دعوة للعمل" فوق الصور في كل عمود
الآن بعد أن أضفنا صور الخلفية إلى كل عمود من أعمدة تخطيط الشبكة، سنضيف وحدة "دعوة للعمل" إلى كل عمود.
إن استخدام وحدة "دعوة للعمل" الموضوعة فوق صورة خلفية العمود سيتيح لك إضافة أنماط تراكب خلفية مخصصة وتأثيرات تمرير المؤشر على الصورة بسهولة.
في هذا المثال، سنستخدم ببساطة عنصر الزر من وحدة "دعوة للعمل"، ولكن يمكنك بسهولة إضافة محتوى إلى العنوان أو نص الصفحة أعلى الزر.
سنضيف أول وحدة "دعوة للعمل" إلى عمود الصف العلوي.
محتويات
قم بتحديث إعدادات وحدة "دعوة للعمل" على النحو التالي:
- إزالة نص العنوان
- حذف النص الأساسي
- URL ارتباط الزر: #
تعليق : إضافة علامة "#" إلى رابط الزر هي مجرد إجراء مؤقت لضمان عرض الزر بشكل صحيح. أما إضافة لون خلفية شبه شفاف عند تمرير المؤشر فوق الزر، فستمنحك لونًا مميزًا عند تمرير المؤشر فوق العنصر (والصورة خلفه).
- لون الخلفية: شفاف (سطح المكتب)، rgba (255,235,77,0.5) (عند التمرير)
أنماط الزر
انتقل إلى علامة التبويب الطراز وقم بتعديل إعدادات زر وحدة "دعوة للعمل" على النحو التالي:
- استخدام الأنماط المخصصة للزر: نعم
- حجم نص الزر: 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 للحشو سيجعل قيمة الحشو مرتبطة بارتفاع نافذة المتصفح. وبالتالي، ستزداد عناصر شبكة الصور وتنقص في الارتفاع بشكل متناسب مع ارتفاع نافذة المتصفح.
توسيط محتوى وحدة "دعوة للعمل" عموديًا
لضمان بقاء محتوى وحدة "دعوة للعمل" متمركزًا رأسيًا، يمكننا إضافة جزء صغير من CSS مخصص باستخدام خاصية flex.
ضمن علامة التبويب "متقدم"، أضف CSS التالي إلى العنصر الرئيسي:
display:flex;
flex-direction:column;
justify-content:center;
تمت إضافة عبارة تحث المستخدم على اتخاذ إجراء إلى الأعمدة الأخرى
الآن بعد تخصيص وحدة "دعوة للعمل" الأولى، انسخ والصق الوحدة في الأعمدة الثلاثة الأخرى من التخطيط، بما في ذلك العمودين في الصف السفلي والعمود 1 من القسم.
لضمان أن تغطي وحدة "دعوة للعمل" الارتفاع الكامل للعمود 1 في القسم المتخصص، قم بتعيين الحد الأدنى للارتفاع إلى 100٪.
- أقل ارتفاع: 100٪
انتهى الأمر! لنرَ النتيجة النهائية.
نتيجة نهائية
هذه هي النتيجة النهائية لتصميم شبكة الصور المتجاوبة على صفحة ويب مع تأثيرات التمرير.
وهذه هي طريقة تفاعل الشبكة عند تعديل حجم المتصفح.
تحميل DIVI Now !!!
خاتمة
لا تزال تصميمات شبكة الصور المتجاوبة ميزة شائعة في العديد من المواقع الإلكترونية. فالجاذبية البصرية التي توفرها صورة الخلفية، بالإضافة إلى زر الحث على اتخاذ إجراء، تجعل روابط التنقل المهمة بارزة بشكل لافت.
بالإضافة إلى ذلك، فإن الطبيعة المتجاوبة لتصميم شبكة الصور ستجعلها تبدو رائعة على جميع الأجهزة، وهو أمر ضروري دائمًا.
نأمل أن تجدوا هذا الدليل مفيدًا في مشاريعكم المستقبلية لبناء مواقع الويب. إذا كانت لديكم أي استفسارات أو اقتراحات، يُرجى إعلامنا بها. قسم التعليقات لمناقشته.
ومع ذلك ، يمكنك أيضا استشارة مواردنا إذا كنت بحاجة إلى المزيد من العناصر لإكمال مشاريع إنشاء موقع الويب الخاص بك.
يمكنك أيضًا اتباع دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...