طرق بسيطة ومبتكرة لعرض شعارات الشركة في Divi

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

إليك ما سيتم تناوله في هذا البرنامج التعليمي:

• تجهيز صور شعارك
• استخدام وحدة معرض Divi لعرض الشعارات بسحب وإفلات بسيط
• استخدام معرض WordPress Embed لعرض الشعارات
• استخدام Divi Builder لإنشاء تخطيط مخصص للشعارات

هيا بنا نبدأ!

نظرة خاطفة

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

تجهيز صور شعارك

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

نظرًا لأن كل شعار له حجم فريد ، فمن المستحيل إلى حد كبير جعلها جميعًا ذات أبعاد دقيقة. هذا هو المكان الذي يكون فيه محرر الصور مفيدًا. على سبيل المثال ، باستخدام Photoshop ، يمكنك إنشاء ملف جديد وتعيين أبعاد المستند إلى أي حجم تريد أن تكون جميع صور شعارك (في هذه الحالة 226 بكسل × 100 بكسل).

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

ثم قم بتصدير الصورة كملف png للحفاظ على الخلفية الشفافة.

ثم كرر العملية لبقية شعاراتك.

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

اشترك في قناتنا على اليوتيوب

# 1 استخدام وحدة معرض Divi لعرض شعارات الشركة (سحب وإفلات بسيط)

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

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

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

نظرًا لأنني أقوم بإضافة 8 صور شعار ولا أريد عرض أي عناوين أو تسميات توضيحية أو ترقيم الصفحات ، يمكنني تحديث ما يلي:

عدد الصور: 8
إظهار العنوان والتسمية التوضيحية: NO
إظهار ترقيم الصفحات: NO

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

للحفاظ على الأشياء نظيفة وبسيطة ، يمكنك التخلص من تراكب التمرير عن طريق تعيين لون أيقونة التكبير ولون تراكب التمرير إلى شفاف.

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

عرض حدود الصورة: 1 بكسل
لون حدود الصورة: #dddddd
ظل مربع الصورة: انظر الصورة

إليك كيف سيبدو التصميم النهائي على أحجام المتصفح المختلفة.

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

# 2 استخدام معرض WordPress Embed لعرض شعارات الشركة (مع أي وحدة Divi)

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

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

في Divi Builder ، أنشئ قسمًا جديدًا بهيكل عمود رباعي من ثلاثة أرباع.

لنفترض أنك تريد أن يكون لديك بعض النص على يسار شعارات شركتك في معرض ستة أعمدة. قم أولاً بإضافة وحدة نصية في العمود الأيسر وقم بتحديث ما يلي:

المحتوى: "كما يظهر في"
خط النص: مونتسيرات
وزن خط النص: غامق
حجم نص النص: 26 بكسل
اتجاه النص: الوسط

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

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

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

ارتباط بـ: لا شيء
الأعمدة: 8 (يجب أن يساوي هذا عدد الصور في المعرض بحيث تظل في سطر واحد)
الحجم: الحجم الكامل

ثم انقر فوق الزر "إنشاء معرض جديد".

سيؤدي ذلك إلى تضمين الرمز المختصر للمعرض الضروري المدمج في WordPress وعرض المعرض داخل وحدة النص.

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

اجعل هذا الصف بعرض كامل: نعم
استخدام عرض مزراب مخصص: نعم
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم

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

align-items: center;

يعمل CSS لأننا قمنا بتعيين Equalize Column Heights على YES ، وبالتالي تمكين خاصية "display: flex" للصف. لمزيد من المعلومات حول هذا الأمر ، تحقق من كيفية محاذاة المحتوى عموديًا في Divi.

ولإزالة الحد الرمادي حول صورنا ، نحتاج إلى إضافة مقتطف CSS التالي إلى إعدادات صفحتنا:

.gallery img {
border: none !important;
}

ها هو التصميم النهائي.

ها هو مع خلفية سوداء مضافة إلى الصف.

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

تضمين معارض الشعار في أي وحدة Divi

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

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

فيما يلي مثال على الشكل الذي سيبدو عليه عند إضافة الرمز المختصر لمعرض WordPress لشعاراتك إلى علامتي تبويب مختلفتين.
في هذا المثال ، قمت بتحديد 6 شعارات مع 3 أعمدة لكل معرض.

قد يكون هذا مفيدًا للمواقع التي تتطلب الكثير من الشعارات.

# 3 استخدام Divi Builder لإنشاء تخطيط مخصص لشعارات الشركة

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

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

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

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

العرض المخصص: 90٪
عرض الحضيض: 1
معادلة ارتفاعات العمود: نعم

الحشو المخصص: 4vw Top ، 4vw Bottom

احفظ التغييرات.

ثم أضف وحدة صورة إلى العمود الأول ثم حدد إحدى صور شعارك.

ثم تابع إضافة صور شعار لكل عمود على النحو التالي:

شعار العمود 1: 1
العمود 2: 2 الشعارات
العمود 3: 3 شعارات
العمود 4: 3 شعارات
العمود 5: 2 الشعارات
شعار العمود 6: 1

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

align-items: center;

كما ترى ، يؤدي هذا إلى إنشاء تخطيط دائري للشعارات.

لكن بالنسبة لهذا التصميم ، سأقوم بمحاذاة الوحدات أسفل الصف. لذا استبدل مقتطف "align-items: center" بما يلي:

align-items: flex-end;

يؤدي هذا إلى محاذاة جميع الوحدات في الجزء السفلي من الصف والتي ستعمل بشكل جيد مع فواصل القسم التي سنضيفها.

الآن نحن جاهزون لتخصيص قسمنا. افتح إعدادات القسم وقم بتحديث ما يلي:

الخلفية: # 2a3443

نمط الفاصل العلوي: انظر الصورة
لون الحاجز العلوي: rgba (255،255،255،0.03)
ارتفاع الحاجز العلوي: 13vw
الوجه الفاصل العلوي: عمودي

المساحة المتروكة المخصصة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

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

لون الخلفية: # 2a3443

نمط الحاجز السفلي: انظر الصورة
لون الحاجز السفلي: rgba (238،238،238،0.09)
ارتفاع الحاجز السفلي: 13vw

الحشو المخصص: أسفل 0 بكسل

الآن احفظ إعداداتك وأضف وحدة نصية إلى الصف وقم بتحديث ما يلي:

للمحتوى يضاف ما يلي:

<h2>As Featured In</h2>

خط العنوان 2: مونتسيرات
وزن خط العنوان 2: غامق
العنوان 2 محاذاة النص: الوسط
لون نص العنوان 2: #ffffff
حجم نص العنوان 2: 32 بكسل

الهامش المخصص: 0 بكسل للأسفل

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

محاذاة الصورة: المركز
الهامش المخصص: -75 بكسل

تحقق من النتيجة النهائية.

افكار اخيرة

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

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

هتافات!