قم بتنزيل تصميم لافتة مبيعات مجانية متعددة الأغراض لـ Divi

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

هيا بنا نبدأ!

ما يحتويه

فيما يلي نظرة خاطفة على تصميم لافتة المبيعات المضمنة في التنزيل.

قم بتنزيل تصميم لافتة المبيعات مجانًا

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

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

تنزيل مجاني

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

تحميل

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

تحميل التخطيط إلى مكتبة Divi

بعد تنزيل الملف ، قم بفك ضغطه. ستجد أنه يحتوي على ملف باسم "sales-banner-design.json". هذا ما ستقوم بتحميله إلى مكتبة Divi الخاصة بك. انتقل الآن إلى لوحة معلومات Wordpress الخاصة بك وانتقل إلى Divi> Divi Library. ثم انقر فوق زر الاستيراد في الجزء العلوي من الصفحة. من نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد واختر ملف sales-banner-design.json. ثم انقر فوق الزر Import Divi Builder Layouts.

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

كيفية إنشاء لافتة المبيعات من Scratch in Divi

إضافة خلفية القسم

لبدء الأشياء ، قم بإنشاء صفحة جديدة. بعد إعطاء عنوان لصفحتك ، انشر المنشئ المرئي وحدد خيار "Build From Scratch". ثم أضف قسمًا جديدًا بصف عمود واحد.

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

تخصيص صفوف لافتة المبيعات

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

العرض المخصص: 700 بكسل
عرض المزراب: 1
الهامش المخصص: 0 بكسل أعلى ، 0 بكسل ، أسفل
المساحة المتروكة المخصصة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

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

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

المحتوى: "عبر الإنترنت فقط"

تابع إلى علامة تبويب التصميم وقم بتحديث ما يلي:

وزن خط النص: غامق
نمط خط النص: TT
لون نص النص: rgba (255،255،255،0.9)
حجم نص النص: 15 بكسل
تباعد حروف النص: 2 بكسل
ارتفاع خط النص: 1em
العرض: 22٪ (كمبيوتر مكتبي) ، 25٪ (كمبيوتر لوحي) ، 40٪ (هاتف ذكي)
وحدة المحاذاة: اليسار
الهامش المخصص: 0 بكسل للأعلى ، -15 بكسل للأسفل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

أضف الآن وحدة مقسم أسفل وحدة النص في نفس الصف. ثم قم بتحديث إعدادات الحاجز كما يلي:

اللون: rgba (255،255،255،0.9)
موضع الحاجز: سفلي
وزن الحاجز: 15 بكسل
الارتفاع: 15 بكسل
العرض: 78٪ (كمبيوتر مكتبي) ، 75٪ (كمبيوتر لوحي) ، 60٪ (هاتف ذكي)
محاذاة الوحدة: صحيح
الهامش المخصص: 0 بكسل للأعلى و 0 بكسل للأسفل
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

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

للقيام بذلك ، قم بتكرار وحدة التقسيم وتحديث ما يلي:

العرض: 15 بكسل
الهامش المخصص: -1 بكسل للأسفل

إضافة إطار الحد السفلي مع النص المجاور

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

بعد ذلك ، انسخ وحدة الفاصل الأطول من الصف العلوي والصقها أسفل مقسم 15 بكسل في الصف السفلي. ثم اضبط ما يلي:

العرض: 75٪ (كمبيوتر مكتبي) ، 70٪ (كمبيوتر لوحي) ، 50٪ (هاتف ذكي)
وحدة المحاذاة: اليسار

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

المحتوى: "يبدأ في الأول من تشرين الثاني (نوفمبر)"
العرض: 25٪ (كمبيوتر مكتبي) ، 30٪ (كمبيوتر لوحي) ، 50٪ (هاتف ذكي)
محاذاة الوحدة: صحيح
الهامش المخصص: -15 بكسل للأعلى و 0 بكسل للأسفل
الحشو المخصص: 15 بكسل يسار

إضافة وحدات النص إلى الصف الأوسط

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

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

المحتوى: "خصم 20٪ على كل شيء"
لون الخلفية: rgba (255،255،255،0.9)

وزن خط النص: شبه عريض
نمط خط النص: TT
لون نص النص: # 000000
حجم نص النص: 34 بكسل (سطح المكتب) ، 20 بكسل (هاتف ذكي)
تباعد حروف النص: 2 بكسل
ارتفاع خط النص: 1em
اتجاه النص: الوسط
الحشو المخصص: 2vw top، 2vw bottom، 5vw left، 5vw right

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

الآن قم بتكرار وحدة النص لبدء تصميم الوحدة النصية التالية. ثم قم بتحديث المحتوى باستخدام html التالي:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

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

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

وزن خط العنوان 2: غامق
نمط خط العنوان 2: TT
لون نص العنوان 2: # 000000
حجم نص العنوان 2: 100 بكسل (سطح المكتب) ، 80 بكسل (الكمبيوتر اللوحي) ، 60 بكسل (الهاتف الذكي)
العنوان 2 تباعد الأحرف: 2 بكسل
الهامش المخصص: 0 بكسل أعلى
الحشو المخصص: 0 بكسل أعلى ، 0 بكسل أسفل

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

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

المحتوى: "تسوق الآن"
نمط خط النص: TT ، U (تحته خط)
الهامش المخصص: 0 بكسل أعلى
الحشو المخصص: 1vw top ، 2vw bottom

تصميم الصف الأوسط

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

الحشو المخصص: 15 بكسل يسار ، 15 بكسل يمين
عرض الحد الأيمن: 15 بكسل
لون الحد الأيمن: rgba (255،255،255،0.9)
عرض الحد الأيسر: 15 بكسل
لون الحد الأيسر: rgba (255،255،255،0.9)
وضع المزج: الشاشة

يسمح وضع مزج الشاشة للنص بمزج صورة الخلفية لتظهر من خلال النص للحصول على تأثير رائع!

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

إضافة رابط إلى لافتة المبيعات الخاصة بك

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

إضافة خلفيات أقسام مختلفة للتصاميم الفريدة

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

وفيما يلي بعض الأمثلة على ذلك.

افكار اخيرة

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

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

هتافات!