كيفية إنشاء تخطيط شبكة صورة مستجيبة باستخدام عبارات الحث على اتخاذ إجراء وتراكبات التمرير في Divi

تعد تخطيطات الشبكة المستجيبة مثالية لعرض مجموعة من الصور ذات الروابط (أو عبارات الحث على اتخاذ إجراء) لأنها تبدو جيدة على كل جهاز. يحتوي Divi builder على بعض الوحدات المدمجة الرائعة التي تستخدم عروض الشبكة ، بما في ذلك Portfolio Grid و Blog Grid و Gallery Grid. لكن في بعض الأحيان قد ترغب في إنشاء تخطيط شبكة صور مخصص باستخدام عبارات الحث على اتخاذ إجراء. يمنحك هذا مزيدًا من التحكم في التصميم والمحتوى الذي تريد عرضه لكل عنصر شبكة دون الحاجة إلى اللجوء إلى مكون إضافي.

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

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

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

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

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

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

إنشاء تخطيط شبكة صورة مستجيبة باستخدام عبارات الحث على اتخاذ إجراء وتراكبات التمرير في Divi

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

للبدء ، أضف قسمًا تخصصيًا جديدًا بتخطيط الشريط الجانبي الأيسر بمقدار الثلثين والثلثين.

احذف القسم العادي الافتراضي بحيث يبقى قسم التخصص الجديد فقط.

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

• لون الخلفية: # 84dbda

ضمن علامة تبويب التصميم ، قم بتحديث خيارات التحجيم والعرض والحشو كما يلي:

• معادلة ارتفاعات العمود: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض الداخلي: 100٪
• العرض الداخلي الأقصى: 1080 بكسل (سطح المكتب) ، 500 بكسل (الجهاز اللوحي والهاتف)
• الحشوة: 12vh أعلى ، 12vh أسفل
• حشوة العمود 1: 0 بكسل للأعلى و 0 بكسل للأسفل

بعد وضع أنماط القسم في مكانها ، أضف صفًا مكونًا من عمود واحد إلى القسم.

إعدادات الصف

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

• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

لإنشاء صف ثاني ، قم بتكرار الصف الأول.

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

الجزء 2: إضافة الصور كصور خلفية العمود

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

صورة خلفية العمود في الصف العلوي

للبدء ، افتح إعدادات العمود للعمود الموجود في الصف العلوي.

ثم أضف صورة خلفية إلى العمود.

أعمدة الصف السفلي صور الخلفية

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

بعد ذلك ، أضف صورة خلفية إلى العمود 2 في نفس الصف.

قسم خاص العمود 1 صورة الخلفية

وأخيرًا ، افتح إعدادات قسم التخصص وأضف صورة خلفية إلى العمود 1.

الجزء 3: إضافة دعوة إجراء تراكب الصور إلى كل عمود

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

إنشاء وحدة الدعوة إلى العمل

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

المحتوى

يتم تحديث محتوى عبارة الحث على اتخاذ إجراء على النحو التالي:

• احذف نص العنوان
• حذف النص الأساسي
• URL ارتباط الزر: #
• لون الخلفية: شفاف (سطح المكتب) ، rgba (255،235،77،0.5) (تحوم)

ملاحظة: إضافة "#" لعنوان URL لرابط الزر هي مجرد حشو في الوقت الحالي حتى يظهر الزر. ستمنحك إضافة لون الخلفية شبه الشفاف عند التمرير لون تراكب مخصص لطيف عند التمرير فوق الوحدة (والصورة الموجودة خلفها).

أنماط باتون

تابع تحديث إعدادات تصميم عبارة الحث على اتخاذ إجراء للزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 22 بكسل
• لون نص الزر: # ffeb4d
• لون خلفية الزر: # 000 (سطح المكتب) ، # ec5f00 (تحوم)
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل
• خط الزر: الرمال المتحركة
• وزن خط الزر: شبه عريض
• حشوة الزر: 0.5 مللي متر علوي ، 0.5 مللي متر أسفل ، 2 مللي متر يسار ، 2 مللي متر يمين

التحجيم والحشو والحدود

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

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

• العرض: 100٪
• الحشوة: 15vh أعلى ، 15vh أسفل
• عرض الحد السفلي: 5 بكسل
• عرض الحد الأيسر: 5 بكسل
• لون الحدود: rgba (255،255،255،0.5)

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

توسيط محتوى CTA رأسياً

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

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

display:flex;
flex-direction:column;
justify-content:center;

إضافة تراكب الحث على اتخاذ إجراء إلى الأعمدة الأخرى

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

للتأكد من أن وحدة الحث على اتخاذ إجراء تمتد عبر الارتفاع الكامل للعمود 1 في قسم التخصص ، قم بتحديث الحد الأدنى للارتفاع إلى 100٪.

• ارتفاع الحد الأدنى: 100٪

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

هذا كل شيء. دعنا نتحقق من النتيجة النهائية.

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

هذه هي النتيجة النهائية لتخطيط شبكة الصورة سريعة الاستجابة على صفحة مباشرة.

وها هي تأثيرات التحويم.

وإليك كيفية استجابة التصميم عند ضبط حجم المتصفح.

افكار اخيرة

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

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

هتافات!