كيفية إنشاء صفحة هبوط يوم الثلاثاء مع Divi و GiveWP

في حال لم تكن قد سمعت ، فنحن نستعد لبدء حملة ضخمة الجمعة السوداء وإثنين الإنترنت هنا في Elegant Themes. ولكن هناك شيء رائع آخر يحدث في هذا الوقت من العام. يطلق عليه Giving Tuesday (هذا العام يصادف يوم 28 نوفمبر) وهو جهد من قبل المنظمات غير الربحية في العالم لتذكير الجميع بأنه بينما لديهم محافظهم للتسوق الشخصي ، فقد يرغبون في التفكير في التبرع لمن هم في تحتاج أيضا. يا لها من فكرة رائعة! ونظرًا لأننا نعمل على تمكين مجتمعنا ، فقد اعتقدنا أنه سيكون من الجيد مساعدة أولئك الذين يستخدمون Divi (أو Extra) ويعملون مع المنظمات غير الربحية لتحقيق أفضل صفحة هبوط للتبرع يوم الثلاثاء هم قادر على.

إليك نظرة سريعة على ما سننشئه اليوم.

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

في منشور اليوم ، سننشئ صفحة هبوط جميلة للعطاء الثلاثاء كاملة مع نموذج تبرع مذهل بصريًا (وعملي بالطبع).

قم بتثبيت البرنامج المساعد GiveWP & إنشاء نموذج جديد

يتم إنشاء نموذج التبرع الذي سنستخدمه في هذا البرنامج التعليمي بواسطة البرنامج المساعد GiveWP. لتثبيته ، انتقل في WordPress Admin الخاص بك إلى الإضافات> إضافة جديد . هناك ، استخدم ميزة البحث للعثور على البرنامج المساعد Give. انقر فوق الزر "التثبيت الآن" ثم قم بتنشيطه.

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

بعد ذلك ، ستلاحظ خيارات نموذج التبرع. دعونا نجري من خلالهم علامة تبويب بعلامة تبويب.

في علامة التبويب الأولى ، المسماة خيارات التبرع ، قم بتكوين الإعدادات التالية في القسم العلوي.

خيار التبرع: تبرع متعدد المستويات

عرض التبرع: أزرار

المبلغ المخصص: ممكن

في قسم مستوى التبرع ، قم بإعداد مستويات التبرع التالية: 1 دولار ، 5 دولارات ، 10 دولارات ، 25 دولارًا ، 50 دولارًا ، 100 دولار. تأكد من تعيين مستوى التبرع بقيمة 5.00 دولارات ليكون مستوى التبرع الافتراضي الجديد.

انتقل الآن إلى علامة التبويب عرض النموذج. الشيء الوحيد الذي عليك القيام به هنا هو تغيير إعداد خيارات العرض إلى Modal.

في علامة التبويب هدف التبرع ، قم أولاً بتمكين خيار هدف التبرع. بمجرد القيام بذلك ، حدد مبلغ الهدف. لقد قمت بتعيين ما لدي على 1000 دولار. لقد قمت أيضًا بتعيين تنسيق الهدف على النسبة المئوية. سيتيح هذا للمشاهدين معرفة النسبة المئوية التي حققناها من هدفنا ، وليس المبلغ الفعلي للأموال التي جمعناها. وأخيرًا ، قمت بتغيير لون شريط التقدم قليلاً ليطابق اللون الأخضر نفسه المستخدم في بقية موقع الويب الخاص بي (# 07c907).

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

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

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

قم بإعداد أصول الصورة الخاصة بك

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

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

إليك كيفية إنشائه.

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

ها هي الصورة التي وجدتها.

ثم فتحت تلك الصورة في الفوتوشوب.

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

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

بعد ذلك ، انتقل في القائمة العلوية إلى Image> Canvas Size وقم بتغيير حجم اللوحة إلى 1920 × 1080. عند القيام بذلك ، من المحتمل أن تكون عناصرك كبيرة جدًا مقارنة بلوحة الرسم الجديدة الأصغر حجمًا.

على لوحة المفاتيح ، اضغط على command + T أو انتقل إلى Edit> Transform> Scale . قم بتغيير حجم طبقة العناصر المعزولة لتلائم حجم اللوحة القماشية الجديد.

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

إنشاء التصميم في Divi

إذا لم تكن قد قمت بذلك بالفعل ، فستحتاج إلى تنزيل حزمة Farmers Market Layout الجديدة (المجانية) وتثبيتها. اتبع التعليمات الواردة في هذا المنشور لتثبيت حزمة التخطيط. بعد تثبيته ، اتبع التعليمات الواردة في منشور المدونة هذا لإعداد موقعك للمرحلة التالية من التخصيص ، والتي سنغطيها هنا.

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

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

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

أخيرًا ، انتقل إلى علامة التبويب تصميم وافتح إعدادات نص العنوان الفرعي. اضبط Subhead Font Weight على غامق.

القسم الأول اكتمل الآن. قم بالتمرير لأسفل إلى القسم الثالث (القسم الذي يحتوي على عرض أسعار كبير) وانقر فوق رمز الترس في عناصر التحكم في القسم الأزرق. اضبط لون الخلفية على # F6F6F6.

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

هذا القسم مكتمل الآن أيضًا. انتقل إلى القسم الرابع أسفله مباشرة. هذا هو قسم نموذج التبرع لدينا.

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

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

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

أعلى: 250 بكسل

اليمين: 40 بكسل

القاع: 250 بكسل

اليسار: 40 بكسل

أخيرًا ، أثناء وجودك في إعدادات القسم ، انتقل إلى علامة التبويب خيارات متقدمة وافتح عناصر التحكم في معرف CSS والفئات. تحت معرف CSS ، اكتب كلمة "تبرع".

احفظ إعداداتك الجديدة.

نحن الآن بحاجة للتخلص من نموذج تعهدنا. يتكون من وحدتين نصيتين ووحدة نموذج جهة اتصال. انطلق وقم بحذفها. في مكانهم ، أضف وحدة نصية.

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

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

ضمن خيارات النص ، قم بتكوين الإعدادات التالية:

حجم نص النص: 18 بكسل

ارتفاع خط النص: 1.8em

ضمن خيارات نص العنوان لـ H2 ، قم بتكوين الإعدادات التالية:

حجم نص العنوان 2: 36 بكسل

ارتفاع خط العنوان 2: 1.5em

ضمن خيارات التباعد ، قم بتكوين الإعدادات التالية:

حشوة مخصصة: 50xp (لجميع الحقول)

ضمن خيارات Box Shadow ، حدد الخيار الأخير في الصف العلوي (في أقصى اليمين). ثم قم بتكوين هذا الخيار:

قوة انتشار الظل المربع: -2 بكسل

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

نمط الرسوم المتحركة: ترتد

اتجاه الرسوم المتحركة: لأعلى

مدة الرسوم المتحركة: 800 مللي ثانية

تأخير الرسوم المتحركة: 400 مللي ثانية

بدء تعتيم الرسوم المتحركة: 100٪

عندما تقوم بتكوين كل إعدادات التصميم هذه ، احفظها. يجب أن يبدو نموذج التبرع الخاص بك الآن مثل هذا.

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

انتقل إلى خيارات السمات الخاصة بك بالانتقال إلى Divi> Divi Library> General قم بالتمرير لأسفل إلى مربع CSS المخصص والصق أنماط زر المتابعة هناك:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

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

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

لإكماله ، قم بتغيير حجم نافذة المتصفح إلى 1920 × 1120. يمكنك استخدام موقع ويب مثل whatsmybrowsersize.com.

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

افتح لقطة الشاشة الجديدة هذه في Photoshop جنبًا إلى جنب مع ملف Photoshop الذي أنشأناه سابقًا.

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

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

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

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

بمجرد أن يكون لديك التكوين النهائي الخاص بك ، ستنتقل إلى ملف> تصدير> تصدير باسم واختر PNG للحفاظ على الخلفية الشفافة.

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

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

حجم صورة الخلفية: الحجم الفعلي

موقف صورة الخلفية: المركز

احفظ هذه الإعدادات. يجب أن يكون قسم النموذج الخاص بك قد اكتمل الآن.

لإنهاء تصميمك بالكامل (لمطابقة معاينة الصفحة الكاملة الخاصة بنا من بداية المنشور) ما عليك سوى تغيير ألوان الخلفية لأقسام الصفحة المتبقية لتتناسب مع تلك الموجودة في لقطة الشاشة. ستستخدم إما الرمادي (# F6F6F6) أو الأبيض (#ffffff).

جمع تبرعات سعيد!

مع Divi ومكوِّن إضافي قوي مثل Give ، نحن على يقين من أن جهود Giving Tuesday ستحقق نجاحًا كبيرًا بالتأكيد. شكرا للمتابعة. إذا كنت لا تزال ترغب في الحصول على بعض المساعدة بشأن أي شيء مغطى في هذا البرنامج التعليمي ، فسأجري بثًا مباشرًا اليوم في الساعة 3 مساءً على صفحتنا على Facebook وقناة YouTube حيث سأعرض هذه العملية بأكملها في لقطة واحدة. سأقوم أيضًا بالرد على الأسئلة بينما نمضي قدمًا. نأمل أن نراكم هناك!