كيفية إنشاء صفحة هبوط قمة افتراضية باستخدام Divi
نشرت: 2020-07-02يتضمن الترويج لحدث افتراضي عددًا من الاستراتيجيات الترويجية. يعد إنشاء صفحة مقصودة جذابة أحدها. يعد إنشاء صفحة مقصودة لقمة افتراضية طريقة مثالية لإثارة فضول جمهورك. باستخدام المجموعة الصحيحة من الأقسام ، يمكنك دعوة الحاضرين المسجلين وإبلاغهم وجمعهم. سنشرح لك اليوم كيفية إنشاء صفحة هبوط افتراضية للقمة من خمسة أقسام. يتضمن التصميم صورًا ثنائية اللون وفواصل قسم التمرير. لقد قمنا أيضًا بتضمين ملف JSON قابل للتنزيل إذا كنت تريد تخطي البرنامج التعليمي خطوة بخطوة. في المجلد ، ستجد أيضًا رسومات الرأس والتذييل في كل من PNG و AI.
دعنا نذهب اليها!
معاينة
دعنا نلقي نظرة على تصميم الصفحة المقصودة على أحجام الشاشات المختلفة.
سطح المكتب
لوح
متحرك
قم بتنزيل الصفحة المقصودة للقمة الافتراضية مجانًا
لوضع يديك على تخطيط الصفحة المقصودة للقمة الافتراضية المجانية ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
أقسام الصفحة المقصودة للقمة الافتراضية
لكي تقوم صفحتك المقصودة بعملها ، فإنها تحتاج إلى مجموعة محددة من الأقسام. بصرف النظر عن جذب انتباه المشاهد ، يجب أن تقوم الصفحات المقصودة أيضًا بالتحويل. تحتاج الصفحة المقصودة الافتراضية للقمة ، على سبيل المثال ، إلى تضمين المعلومات ذات الصلة وعبارة تحث المستخدم على اتخاذ إجراء. يجب أن تتدفق جميع الأقسام من قسم إلى آخر بسلاسة حتى يشعر المشاهد بالإلهام للعمل والاشتراك.
لقد قمنا بتضمين الأقسام التالية في الصفحة المقصودة للقمة الافتراضية:
رأس
يتضمن قسم العنوان معلومات مهمة مثل عنوان القمة وتاريخ الحدث. هذه هي المعلومات الأكثر أهمية ، وهذا هو سبب وجودها في القمة. لا يوجد رأس مكتمل بدون عبارة تحث المستخدم على اتخاذ إجراء والتنقل السهل لبقية الصفحة.
في تصميمنا ، قمنا بتضمين زرين مع روابط إرساء تنتقل إلى مكبرات الصوت وأقسام الجدول. الأهم من ذلك ، لقد قمنا بتضمين زر به رابط إلى قسم التسجيل. في جميع أنحاء الصفحة ، تبدو جميع أزرار "التسجيل" متشابهة ، من أجل الحصول على الوحدة البصرية في التصميم.
معلومة
القسم الثاني هو قسم إعلامي يحث المشاهد على التفكير في حضور القمة الافتراضية. في التصميم ، أضفنا أربعة دعاية وصورة يمكن تغييرها بسهولة إلى فيديو. تسرد الدعاية أربعة أسباب لحضور القمة والصورة (أو الفيديو) هي المرئية لدعم القرار.
المتحدثون
في القسم التالي ، ستجد مجموعة من ستة وحدات فردية. هذا هو المكان الذي تقدم فيه المتحدثين الذين سيشاركون في القمة. تتضمن كل وحدة العناصر التالية:
- صورة
- اسم
- موقع
- وصف
- روابط وسائل التواصل الاجتماعي
تأكد من إدخال جميع المعلومات ذات الصلة لكل متحدث. حاول أيضًا استخدام نفس القدر من الأسطر في النص الأساسي للحفاظ على مظهر التصميم واضحًا. كما ترون ، استخدمنا تأثير لوني ثنائي اللون على جميع صور مكبرات الصوت لإعطاء التصميم مظهرًا وشعورًا مثيرًا للاهتمام. يوجد أدناه برنامج تعليمي خطوة بخطوة حول كيفية تحقيق هذا التأثير في Photoshop.
إذا كان لديك أكثر من ستة مكبرات صوت ، فقم ببساطة بتكرار الصف أو نسخ الوحدات النمطية في صفوف بها عدد أعمدة أكثر أو أقل.
الجدول
قسم الجدول هو التالي. في هذا المجال ، شاركنا جدول القمة بأناقة وتأكدنا من أنه هيكلي. للاحتفاظ بنمط تصميم النص ، تأكد من تغيير المحتوى وليس مستويات العناوين. حاول الاحتفاظ بالمحتوى بنفس الطول تقريبًا حتى يظل التصميم أنيقًا.
يتم تنظيم الصفوف حسب الأيام مع صورة العنوان ومجموعة من الدعاية. في الجزء السفلي من العمود الأخير ، يمكنك العثور على زر الحث على اتخاذ إجراء للجمهور للتسجيل.
يسجل
أخيرًا وليس آخرًا هو قسم التسجيل. لقد قمنا بتضمين مؤقت للعد التنازلي لإضافة إحساس بالإلحاح. يجب أن يكون نموذج الاتصال مرتبطًا مباشرة بقائمة RSVP الخاصة بك بحيث يتم تسجيل كل مدعو تلقائيًا.
خلال تصميم الصفحة المقصودة للقمة الافتراضية ، ستجد ثلاثة أزرار تنتقل إلى هذا القسم لتوليد العملاء المحتملين المحسّن.
قم بإنشاء خريطة متدرجة ثنائية اللون باستخدام Photoshop
افتح الصورة في Adobe Photoshop
إذا كنت ترغب في محاكاة الصور ثنائية اللون في تصميمنا ، فاتبع الخطوات أدناه. أولاً ، افتح صورة في Photoshop.
افتح التعديلات وحدد خريطة التدرج
افتح شريط أدوات التعديلات وانقر على خريطة التدرج اللوني. في علامة التبويب "الخصائص" ، انقر نقرًا مزدوجًا فوق شريط التدرج لفتح نافذة الإعدادات المنبثقة.
ضبط ألوان التدرج
في إعدادات التدرج ، انقر نقرًا مزدوجًا فوق كل لون لتخصيص الإعدادات.
لتحقيق تأثير تصميمنا ، اضبط التدرج على النحو التالي:
- نوع التدرج: صلب
- النعومة: 100٪
- توقف التعتيم رقم 1: 100٪
- توقف اللون # 2
- أرجواني غامق # 202060
- المركز: 19٪
- نقطة المنتصف:
- نقطة منتصف العتامة: 85٪
- نقطة منتصف اللون: 50٪
- توقف العتامة رقم 2: 55٪
- توقف اللون #
- البنفسجي # f895f8
- المركز: 100٪
حفظ كخريطة متدرجة مخصصة
أضف اسمًا للتدرج اللوني الخاص بك وانقر فوق جديد لحفظه. سيتم بعد ذلك تخزينها في مكتبة التدرج الخاصة بك. احفظ الصورة للويب بطول 700 بكسل. كرر العملية مع العديد من الصور التي تحتاجها. بعد تطبيق خريطة التدرج اللوني ، حدد التدرج المحفوظ.
1. إنشاء قسم الرأس
إضافة قسم جديد
خلفية
لنبدأ في إعادة إنشاء الصفحة المقصودة للقمة الافتراضية. قم بإنشاء صفحة جديدة وافتحها باستخدام Divi Builder. قبل إضافة صفوف ، أضف صورة خلفية وتدرجًا إلى قسم جديد. ستجد رسم الخلفية في المجلد القابل للتنزيل أعلاه.
- تدرج الخلفية
- اللون 1: # 1f4068
- اللون 2: # 202040
- صورة الخلفية: Header Graphic
تحجيم
اضبط الحد الأدنى للارتفاع بعد ذلك.
- ارتفاع الحد الأدنى: 1050 بكسل
تباعد
التباعد كذلك.
- الحشو العلوي والسفلي
- الجدول والهاتف: 90 بكسل
الرؤية
أخيرًا ، اضبط إعدادات الرؤية في علامة التبويب المتقدمة.
- الفائض الأفقي والعمودي: مخفي
أضف صفًا جديدًا
هيكل العمود
أضف صفًا بثلاثة أعمدة. حدد هيكل العمود 1/2 ، 1/4 ، 1/4.
تحجيم
اضبط حجم الصف كما يلي:
- العرض: 90٪
- العرض الأقصى: 1800 بكسل
- المحاذاة: المركز
تباعد
\ أضف بعض الهامش العلوي أيضًا.
- الهامش الأعلى: 200 بكسل
العمود 2 ، 3 إعدادات
تباعد
اضبط إعدادات العمودين 2 و 3. أولاً التباعد
- الهامش العلوي: 30 بكسل
الرؤية
ثم قم بإخفاء الأعمدة على الهاتف.
- تعطيل في: الهاتف
أضف وحدة النص الأولى إلى العمود 1
نص
أضف وحدة نصية أولى في العمود 1. أدخل العنوان كمحتوى H1.
- الجسم: محتوى H1
نص العنوان
في علامة تبويب التصميم ، حدد نمط نص العنوان بعد ذلك.
- مستوى العنوان: H1
- الخط: الااتا
- الوزن: جريء
- المحاذاة: المركز
- اللون: أوف وايت #eaeaea
- مقاس
- سطح المكتب: 85 بكسل
- الجهاز اللوحي: 70 بكسل
- الهاتف: 44 بكسل
- تباعد الأحرف: 2 بكسل
- ارتفاع الخط: 1.1em
- ظل النص: الخيار الأول
- لون الظل: rgba (o، 0،0،0.26)
أضف وحدة النص الثانية إلى العمود 1
نص
أضف وحدة نصية ثانية. أدخل التاريخ كمحتوى H2.
- النص الأساسي: محتوى H2 ، 15 + 16 يوليو 2020
نص العنوان
نمط نص العنوان التالي.
- مستوى العنوان: H2
- الخط: الااتا
- الوزن: عادي
- المحاذاة: المركز
- اللون: Fucshia # b030b0
- مقاس
- سطح المكتب والجهاز اللوحي: 60 بكسل
- الهاتف: 45 بكسل
- ارتفاع الخط: 1.3em
تباعد
أضف بعض المسافات أيضًا.
- الحشو السفلي: 20 بكسل
أضف وحدة الزر إلى العمود 1
نص
أضف وحدة زر للدعوة إلى العمل.
- زر: تسجيل
وصلة
أضف رابط الارتساء.
- عنوان URL للرابط: #Register
انتقام
انتقل إلى علامة تبويب التصميم واضبط المحاذاة.
- محاذاة الزر: الوسط
أنماط الزر المخصصة
صمم الزر أيضًا.
- حجم الخط
- سطح المكتب: 30 بكسل
- الجهاز اللوحي: 25 بكسل
- الهاتف: 20 بكسل
- لون النص: أبيض #ffffff
- الخلفية: أرجواني # 602080
- نصف قطر الحدود: 35 بكسل
- تباعد الأحرف: 1 بكسل
- الخط: الااتا
تباعد
أخيرًا ، اضبط التباعد.
- الهامش العلوي
- الجهاز اللوحي والهاتف: 15 بكسل
- الحشوة العلوية: 2 بكسل
أضف وحدة الزر إلى العمود 2
نص
انتقل إلى العمود 2 وأضف وحدة زر. أضف نسخة من اختيارك.
- الزر: مكبرات الصوت
وصلة
بعد ذلك ، قم بإضافة رابط الارتساء.
- عنوان URL للرابط: # المتحدثون
انتقام
في علامة تبويب التصميم ، اضبط المحاذاة.
- محاذاة الزر
- سطح المكتب: صحيح
- الجهاز اللوحي والهاتف: المركز
نمط زر مخصص
اضبط أنماط الزر المخصص أيضًا.
- حجم النص: 24 بكسل
- لون النص: أبيض #ffffff
- الخلفية: شفافة
- تباعد الأحرف: 1 بكسل
- خط الزر: Alata
- نصف قطر الحدود: 0 بكسل
مربع الظل
أخيرًا ، أضف ظل الصندوق.
- Box Shadow: الخيار الرابع
- الوضع الأفقي: 0 بكسل
- الوضع الرأسي: 5 بكسل
- لون الظل: الفوشيه: # b030b0
وحدة زر استنساخ للعمود 3
زر استنساخ
انسخ الزر في العمود 2 وضع الوحدة المكررة في العمود 3.
ضبط وحدة الزر
نص
قم بتغيير النص الموجود في الزر المستنسخ.
- الزر: جدولة
وصلة
قم بتغيير رابط الارتساء أيضًا.
- عنوان URL للرابط: #Schedule
انتقام
لا تنس تغيير المحاذاة أيضًا.
- محاذاة الزر
- يسار سطح المكتب
أضف صفًا جديدًا
هيكل العمود
أضف صفًا جديدًا بعمودين متساويين.
تحجيم
اضبط عرض الحضيض أولاً.
- عرض مزراب مخصص: 2
تباعد
أضف المسافات بعد ذلك.
- الهامش العلوي
- الهاتف: -35 بكسل
الرؤية
ثم اضبط رؤية الصف.
- تعطيل على: الكمبيوتر اللوحي وسطح المكتب
وحدة زر النسخ ووضع نسخة مكررة في العمود 1
زر استنساخ
استنساخ وحدة الزر في العمود 2 من الصف السابق ووضع الوحدة النمطية المكررة في العمود 1 من الصف الجديد.
ضبط وحدة الزر
نمط زر مخصص
اضبط النص في الزر الجديد.
- حجم النص: 20 بكسل
مربع الظل
قم بتعديل ظل الصندوق أيضًا.
- الوضع الرأسي: 4 بكسل
أضف وحدة الزر المستنسخة إلى العمود 2
زر استنساخ
وحدة زر مكررة من العمود 3 في الصف السابق. الصقه في العمود 2 من هذا الصف.
ضبط وحدة الزر
نص
اضبط محتوى النص في الزر المستنسخ.
- النص: الجدول
2. إنشاء قسم المعلومات
إضافة قسم جديد
خلفية
لإنشاء قسم المعلومات ، أضف قسمًا جديدًا وقم بنمط الخلفية أولاً.
- تدرج الخلفية
- اللون 1: # 202040
- اللون 2: # 202060
تباعد
أضف بعض الحشو أيضًا.
- الحشوة العلوية: 170 بكسل
- الحشو السفلي: 5 بكسل
الرؤية
أخيرًا ، اضبط إعدادات الرؤية في علامة التبويب المتقدمة.
- الفائض الأفقي والعمودي: مخفي
أضف صفًا جديدًا
هيكل العمود
أضف صفًا جديدًا بعمود واحد. سنسمي هذا صف العنوان.
تحجيم
تعيين الحجم التالي.
- العرض: 80٪
- العرض الأقصى: 1800 بكسل
أضف وحدة نصية
نص
أضف وحدة نصية.
- Body: H2 Content - لماذا تحضر القمة الافتراضية للتسويق الرقمي؟
نص العنوان
في علامة تبويب التصميم ، حدد نمط نص العنوان.
- مستوى العنوان: H2
- الخط: الااتا
- لون النص: أبيض #ffffff
- مقاس
- سطح المكتب: 55 بكسل
- الجهاز اللوحي: 45 بكسل
- الهاتف: 40 بكسل
- تباعد الأحرف: 2 بكسل
- ارتفاع الخط: 1.1 م
إضافة وحدة المقسم
خط
أضف الآن وحدة فاصل وقم بتصميم الخط في علامة تبويب التصميم.
- لون الخط: فوشيا # b030b0
تحجيم
اضبط الحجم بعد ذلك.
- وزن الحاجز: 50 بكسل
- أقصى ارتفاع: 50 بكسل
تأثيرات التمرير
في علامة التبويب "خيارات متقدمة" ، أضف تأثير تمرير أفقي.
- تفعيل الحركة الأفقية
- سطح المكتب
- بداية الإزاحة: -6
- تعويض متوسط: 50٪ / 0
- إزاحة النهاية: 6
- الجهاز اللوحي والهاتف
- بيان الإزاحة: -4
- تعويض متوسط: 50٪ / 0
- إزاحة النهاية: 4
أضف صفًا جديدًا
هيكل العمود
أضف الآن صفًا جديدًا بثلاثة أعمدة. حدد هيكل العمود 1/2 ، 1/4 ، 1/4.
تحجيم
قبل إضافة الوحدات ، اضبط حجم الصف.
- العرض: 80٪
- العرض الأقصى: 1800 بكسل
إعدادات العمود 1
تباعد
أيضا ، اضبط تباعد العمود الأول.
- الحشوة العلوية: 20 بكسل
أضف وحدة الصورة النمطية إلى العمود 1
صورة
أضف الآن وحدة صورة إلى العمود 1. استخدم إحدى صورك بتأثير الثنائي.
- الصورة: الصورة مع تأثير الثنائي
الحدود
اضبط الحدود أيضًا.
- الزوايا الدائرية: 15 بكسل
أضف الوحدة النمطية للدعاية إلى العمود 2
نص
انتقل إلى العمود 2 وأضف وحدة دعاية مغالى فيها. أدخل المحتوى.
- العنوان: اصنع اتصالات جديدة
- النص الأساسي: المحتوى الوصفي
صورة
قم بتحميل الصورة رقم 1 التي يمكنك العثور عليها في المجلد القابل للتنزيل.
- الصورة: PNG رقم 1
صورة وأيقونة
اضبط موضع الصورة بعد ذلك.
- التنسيب: الأعلى
- المحاذاة: اليسار
نص العنوان
صمم نص العنوان أيضًا.
- مستوى العنوان: H4
- الخط: الااتا
- اللون: أبيض #ffffff
- الحجم: 23 بكسل
نص أساسي
لا تنس تصميم النص الأساسي.
- الخط: Open Sans
- اللون: أبيض #ffffff
- الحجم: 14 بكسل
- تباعد الأحرف: 1 بكسل
لغة تنسيق ويب حسب الطلب
أخيرًا ، أضف بعض الحشو الإضافي باستخدام CSS المخصص إلى عنوان الدعاية في علامة التبويب المتقدمة.
- عنوان دعاية: padding-bottom: 15px ؛
padding-bottom: 15px;
استنساخ وحدة Blurb ووضع نسخة مكررة في العمود 2
استنساخ دعاية
تكرار الدعاية الأولى في العمود 2.
المحتوى
قم بتحديث المحتوى.
- العنوان: عنوان جديد
- النص الأساسي: نص وصفي جديد
صورة
ثم قم بتغيير صورة الرقم. يمكنك العثور على الجديد في المجلد القابل للتنزيل.
- صورة: PNG رقم 2
احذف العمود 3 واستنساخ العمود 2
عمود استنساخ
في إعدادات الصف ، احذف العمود الثالث وكرر الثاني. تأكد من إعادة بنية العمود إلى 1/2 ، 1/4 ، 1/4.
اضبط Blurb 1 في العمود 3
المحتوى
قم بتحديث محتوى النص في الدعاية المستنسخة.
- العنوان: عنوان جديد
- النص الأساسي: نص وصفي جديد
صورة
قم بتغيير صورة الرقم أيضًا.
- صورة: PNG رقم 3
اضبط Blurb 2 في العمود 3
المحتوى
تعديل محتوى هذا الدعاية أيضا. أولا النص.
- العنوان: عنوان جديد
- النص الأساسي: نص وصفي جديد
صورة
ثم قم بتغيير صورة الرقم.
- صورة: PNG رقم 4
3. قسم إنشاء مكبرات الصوت
إضافة قسم جديد
خلفية
ننتقل إلى قسم مكبرات الصوت. أضف قسمًا جديدًا وقم بتصميم الخلفية.
- تدرج الخلفية
- اللون 1: # 202060
- اللون 2: # 162447
الرؤية
اضبط إعدادات الرؤية في علامة التبويب خيارات متقدمة.
- الفائض الأفقي والعمودي: مخفي
استنساخ صف العنوان ومكان مكرر في قسم جديد
صف مكرر
كرر صف العنوان من القسم أعلاه وضع النسخة المكررة في القسم المستنسخ. سنسمي هذا ، صف العنوان 2.
ضبط وحدة النص
نص
بعد ذلك ، حدد نمط إعدادات نص H3 في علامة تبويب التصميم. اضبط معرف CSS في وحدة النص المستنسخة أيضًا. بعد ذلك ، قم بتغيير لون خط وحدة المقسم. أضف الآن صفًا جديدًا يحتوي على 5 وحدات متساوية الحجم. اضبط حجم الصف كما يلي: أضف بعض المسافات أيضًا. أضف وحدة الشخص الأول إلى العمود 1. قم بتحميل صورة السماعة بتأثير اللون. نوصي بحجم صورة 550 × 770 بكسل. أضف بعض الزوايا الدائرية إلى الصورة التالية. بعد ذلك ، حدد نمط نص العنوان. صمم النص الأساسي أيضًا. لا تنس نص الموقف. أخيرًا ، أضف بعض CSS المخصص لتوفير مساحة إضافية. في إعدادات الصف ، احذف الأعمدة 2-5. العمود 1 مكرر أربع مرات. قم بتحديث المحتوى في جميع الوحدات المستنسخة. أولا النص. ثم الصورة. الآن سنقوم بإنشاء قسم الجدول الزمني. أضف قسمًا جديدًا وقم بتصميم الخلفية على النحو التالي: اضبط إعدادات الرؤية في علامة التبويب خيارات متقدمة. استنساخ صف العنوان من القسم أعلاه والصقه في هذا القسم. تغيير محتوى العنوان. قم بتغيير معرف CSS في وحدة النص المستنسخة. قم بتغيير لون الحاجز أيضًا. الآن ، أضف صفًا جديدًا بثلاثة أعمدة متساوية الحجم. اضبط حجم الصف. أضف بعض المسافات أيضًا. أضف وحدة نصية إلى العمود الأول. أدخل المحتوى. انتقل إلى علامة تبويب التصميم وحدد نص العنوان. أضف بعض المسافات بعد ذلك. أضف الآن وحدة دعوة للعمل مع بعض المحتوى الذي تختاره. أضف صورة خلفية أيضًا. في علامة تبويب التصميم ، حدد نمط نص العنوان. نمط النص الأساسي بعد ذلك. أضف بعض المسافات أيضًا. ثم ، حدد نمط الحدود. أخيرًا ، أضف CSS مخصصًا لتصميم إضافي. انتقل إلى العمود 2 وأضف وحدة نصية. اتبع هيكل المحتوى هذا: في علامة تبويب التصميم ، حدد نمط النص. ثم نمط جميع مستويات العناوين. صمم الحدود أيضًا. قم بتكرار الوحدة النصية الأولى مرتين. قم بتغيير المحتوى في وحدات النص المستنسخة. قم بإزالة حد الوحدة الأخيرة في العمود. في إعدادات الصف ، احذف العمود 3. تكرار العمود 2. امسح وحدة النص الثالثة في العمود المستنسخ. قم بتحديث المحتوى في كل وحدة نصية جديدة. انسخ الزر "تسجيل" في قسم العنوان والصقه أسفل وحدة النص الأخيرة في العمود 3. قم بتغيير محاذاة الزر إلى اليسار. اضبط حجم النص قليلاً. قم بتكرار الصف الأول في قسم الجدول. قم بتغيير المحتوى في وحدة النص المستنسخة. اضبط محتوى وحدة الدعوة إلى العمل. قم بتغيير صورة الخلفية أيضًا. اضبط المحتوى في الوحدات النصية أيضًا. القسم الأخير مخصص للتسجيل. أضف قسمًا جديدًا وقم بتصميم الخلفية على النحو التالي. ستجد رسم التذييل في مجلد التنزيل أعلاه. اضبط تباعد المقطع أيضًا. وقم بتغيير إعدادات الرؤية في علامة التبويب خيارات متقدمة. أضف الآن صفًا جديدًا بعمود واحد. أضف فاصلًا غير مرئي ليكون بمثابة رابط الارتساء للقسم. أدخل معرف CSS الذي يرتبط بجميع أزرار "التسجيل". أضف صفًا ثانيًا بعمودين متساويين. اضبط إعدادات تحجيم الصف. أضف وحدة للعد التنازلي إلى العمود الأول. أضف محتوى وتاريخ الحدث. نمط الخلفية بعد ذلك. في علامة تبويب التصميم ، حدد نمط نص العنوان. نمط نص الأرقام أيضا. أيضا ، نص التسمية. ثم اضبط حجم الصف. أضف بعض الحشو أيضًا. أخيرًا ، صمم الحدود. أضف وحدة نموذج جهة اتصال جديدة إلى العمود 2. قم بإزالة حقل الرسالة. أدخل الإعدادات لكل حقل. في علامة تبويب التصميم ، تحت التنسيق ، انقر فوق "جعل العرض الكامل". افعل نفس الشيء بالنسبة للحقل الثاني. ارجع إلى إعدادات نموذج الاتصال العامة وأضف بعض المحتوى. بعد ذلك ، قم بتصميم الحقول على النحو التالي: صمم نص العنوان أيضًا. اضبط أنماط الزر المخصصة أيضًا. لا تنس ضبط نصف قطر الحدود. أخيرًا ، أضف CSS مخصصًا لحشو إضافي. لقد انتهينا! دعنا نلقي نظرة على تصميم الصفحة المقصودة مرة أخرى عبر أحجام الشاشات المختلفة. لقد فعلتها! كيف تبدو الصفحة المقصودة لقمة القمة الافتراضية الخاصة بك؟ استخدم هذا التصميم للقمة الافتراضية الخاصة بك أو لعميل تصميم الويب. تم تحسين التنقل للتحويل بالكمية المناسبة من المعلومات. أضفنا فواصل قسم التمرير للحصول على القليل من البصريات الإضافية أيضًا. دعنا نعرف بماذا تفكر في التعليقات. هل قمت بتنزيل التنسيق أم اتبعت الخطوات؟
نص العنوان
لغة تنسيق ويب حسب الطلب
ضبط الحاجز
خط
أضف صفًا جديدًا
هيكل العمود
تحجيم
تباعد
أضف وحدة الشخص إلى العمود 1
نص
صورة
صورة
نص العنوان
نص أساسي
نص المركز
لغة تنسيق ويب حسب الطلب
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
عمود مكرر 1
عمود استنساخ
اضبط المحتوى لوحدات الأشخاص الجديدة
نص
صورة
4. إنشاء قسم الجدول الزمني
إضافة قسم جديد
خلفية
الرؤية
استنساخ صف العنوان 2
صف مكرر
ضبط وحدة النص
نص
لغة تنسيق ويب حسب الطلب
ضبط الحاجز
خط
أضف صفًا جديدًا
هيكل العمود
تحجيم
تباعد
أضف وحدة نصية إلى العمود 1
نص
نص العنوان
تباعد
قم بإضافة عبارة الحث على اتخاذ إجراء إلى العمود 1
نص
خلفية
نص العنوان
نص أساسي
تباعد
الحدود
لغة تنسيق ويب حسب الطلب
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
أضف وحدة نصية إلى العمود 2
نص
نص
نص العنوان
الحدود
وحدة استنساخ النص 2 مرات
وحدة استنساخ النص
ضبط وحدات نصية جديدة
نص
إزالة حدود وحدة النص الثالثة
الحدود
احذف العمود 3 واستنساخ العمود 2
أعمدة استنساخ
إزالة وضبط وحدات النص
حذف وحدة النص
ضبط المحتوى
وحدة زر النسخ ووضع نسخة مكررة في العمود 3
زر استنساخ
ضبط وحدة الزر
انتقام
نمط زر مخصص
استنساخ الصف الأول من قسم الجدول
صف استنساخ
ضبط وحدة النص في العمود 1
نص
ضبط وحدة الدعوة إلى العمل
نص
خلفية
ضبط وحدات النص
نص
5. إنشاء قسم التسجيل
إضافة قسم جديد
خلفية
تباعد
الرؤية
أضف صفًا جديدًا
هيكل العمود
إضافة وحدة المقسم
الرؤية
معرف CSS
أضف صفًا جديدًا
هيكل العمود
تحجيم
أضف وحدة العد التنازلي إلى العمود 1
نص
خلفية
نص العنوان
نص الأرقام
نص التسمية
تحجيم
تباعد
الحدود
أضف وحدة نموذج الاتصال إلى COlumn 2
عناصر
تخطيط الحقول
نص
مجالات
نص العنوان
أنماط الزر المخصصة
الحدود
لغة تنسيق ويب حسب الطلب
padding-bottom: 30px;
معاينة
سطح المكتب
لوح
متحرك
هذا هو التفاف