صمم قسم ميزة فريدة في Divi مع أيقونات متحركة بواسطة عدادات الدائرة
نشرت: 2018-08-20تحتاج معظم مواقع الويب إلى قسم ميزات جيد التصميم لعرض ميزات المنتجات أو الخدمات. لذلك ، في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء قسم ميزة فريدة في Divi. للقيام بذلك ، سنكون أكثر إبداعًا مع وحدة Divi Circle Counter لإضافة رسوم متحركة إلى أيقونات الدعاية المغلوطة الخاصة بك. وباستخدام بعض التباعد المخصص ، سأوضح لك كيف يمكنك بسهولة وضع دلالاتك الدعائية لتتوافق بشكل جيد مع خلفية الفاصل. التصميم النهائي نظيف وفريد. ومع بعض اللمسات البسيطة ، يمكن أن تكون إضافة رائعة لمشروعك القادم.
هيا بنا نبدأ!
نظرة خاطفة
إليك نظرة خاطفة سريعة على التصميم و gif للمساعدة في توضيح عنصر الرسوم المتحركة.
إنشاء صفحة جديدة ونشر Visual Builder
لبدء الأمور ، انتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى الصفحات> إضافة جديد. ثم أعط الصفحة عنوانًا وانقر لاستخدام Divi Builder. ثم انقر لاستخدام Visual Builder. سيُطلب منك ثلاثة خيارات. اختر خيار "البناء من الصفر".
قماشك الفارغ في انتظارك!
إنشاء رأس قسم الميزة
العنوان العلوي لقسم الميزات الخاص بك بسيط جدًا. العنصر الفريد هو ظل الصندوق الخفيف المعروض أسفله لإعطاء عمق بسيط للتصميم.
لإنشائه ، أدخل صفًا من عمود واحد إلى القسم العادي.
ثم أضف وحدة نصية إلى الصف وقم بتحديث الإعدادات على النحو التالي:
المحتوى:
<h1>Our Features</h2> Everything you need.
خط النص: مونتسيرات
وزن خط النص: شبه عريض
حجم نص النص: 22 بكسل
اتجاه النص: الوسط
وزن خط العنوان: عريض للغاية
حجم نص العنوان: 6vw (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي) ، 30 بكسل (الهاتف الذكي)
الآن احفظ إعداداتك وانتقل إلى إعدادات القسم وأضف ظل الصندوق كما يلي:
Box Shadow: انظر لقطة الشاشة
مربع الظل الرأسي: 19 بكسل
مربع قوة طمس الظل: 80 بكسل
قوة انتشار الظل المربع: -16 بكسل
لون الظل: rgba (136،150،171،0.13)
احفظ التغييرات.
أشياء بسيطة جدا. الآن دعنا نصل إلى الجزء الممتع.
إنشاء قسم الميزات الرئيسية وتصميم الخلفية
نحتاج إلى إضافة قسم جديد لاستيعاب ميزاتنا. عادة ، يمكنك ببساطة إضافة صف جديد إلى القسم السابق ، ولكن في هذه الحالة نحتاج إلى إضافة خلفية Divider المتوفرة في عنصر القسم.
انطلق وأضف قسمًا جديدًا مباشرةً أسفل القسم الذي انتهيت منه للتو. ثم أضف تخطيطًا من أربعة أعمدة إلى الصف. 
سنقوم بإضافة دعاية مغالى فيها إلى هذه الأعمدة ، ولكن دعونا الآن نقوم بتحديث إعدادات القسم الخاصة بنا.
في هذا القسم ، نحتاج إلى منحه عرضًا مخصصًا بحد أقصى. هذا مهم للحفاظ على التصميم في مكانه على أحجام أكبر للمتصفح. نحتاج أيضًا إلى إضافة قسم قسم ليكون بمثابة الخلفية التي تتزامن مع ترتيب دلالاتنا (المزيد حول هذا لاحقًا).
انتقل إلى إعدادات القسم وقم بتحديث ما يلي:
العرض: 1080 بكسل
محاذاة القسم: المركز
الفواصل: أعلى
نمط الفاصل: انظر قطة
لون الفاصل: rgba (136،150،171،0.07)
ارتفاع الحاجز: 52٪
احفظ التغييرات.
إن إعطاء القسم عرضًا مخصصًا (أو أقصى عرض) 1080 بكسل هو في الأساس كيفية إعداد صفوفك افتراضيًا داخل القسم. لذلك ، بشكل أساسي ، نجعل قسمنا بأكمله بحجم الصف الافتراضي.
إضافة دعاية إلى صف الأعمدة الأربعة
في هذه المرحلة ، يمكننا المضي قدمًا والبدء في إضافة دلالاتنا إلى كل عمود من الأعمدة الأربعة. انقر فوق الرمز الرمادي في العمود الأول لإضافة دعاية دعاية مغالى فيها الأولى. قم بتحديث المحتوى في المربع لتضمين نص أقل (جملتان) ، ثم اختر استخدام رمز بدلاً من صورة (اخترت رمز الصورة).
ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:
لون الأيقونة: # 974450
رمز الدائرة: نعم
لون الدائرة: rgba (255،255،255،0.5)
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 48 بكسل
اتجاه النص: الوسط
احفظ التغييرات.
الآن انسخ والصق وحدة blurb في كل عمود من الأعمدة المتبقية بحيث يكون لديك دعاية مغالى فيها واحدة في كل عمود.
يمكنك العودة وتحديث الرموز إذا كنت تريد في هذه المرحلة ، ولكن ليس عليك ذلك.
أضف عدادات الدوائر لتداخل أيقونات Blurb
لإضافة الرسوم المتحركة إلى أيقوناتنا الدعاية ، سنقوم بتداخل كل رمز مع عداد دائرة له قيمة رقمية مختلفة. سيؤدي هذا إلى زيادة حركة الدائرة تدريجياً مع كل رمز لإظهار التقدم. ومع ذلك ، يمكنك استخدام أي قيمة nubmer تريدها مع كل عداد دائرة.
انقر على أيقونة "Add New Module" الرمادية أسفل وحدة blurb في العمود الأول ثم أضف وحدة العداد.
قبل أن تبدأ في تعديل إعدادات وحدة الدائرة ، انطلق واسحبه فوق الوحدة النمطية للدائرة. يمكنك الآن تحديث إعدادات المحتوى على النحو التالي:
احذف النص في مربع العنوان
العدد: 25
ثم قم بتحديث إعدادات علامة تبويب التصميم كما يلي:
لون خلفية الشريط: # 974450 (نفس لون أيقوناتك الغامضة)
رقم نص اللون: rgba (0،0،0،0) (هذا شفاف تمامًا بحيث يخفي الرقم)
حجم نص الرقم: 0 بكسل (للتخلص من أي مساحة نص غير مرغوب فيها داخل الدائرة)
العرض: 109 بكسل (تم تعيين هذا بناءً على حجم الرمز الذي سيتداخل معه)
محاذاة الوحدة: المركز
Margin-bottom: -102px (سيتداخل هذا تمامًا مع الرمز)
احفظ التغييرات.
الآن كل ما عليك فعله هو نسخ وحدة عداد الدائرة ولصقها في كل عمود من الأعمدة المتبقية ثم سحبها إلى أعلى كل دعاية. بعد وضع عدادات الدائرة المكررة في مكانها ، قم بتحديث رقم عداد الدائرة الثانية إلى 50 ورقم العداد الثالث إلى 75 ورقم العداد الرابع إلى 100. يجب أن تبدو النتيجة هكذا بعد اكتمال الرسم المتحرك.
استخدم حشوة الصف لوضع الأيقونات بحيث تتطابق مع الحاجز
تتمثل الخطوة الأخيرة في هذا التصميم في وضع الرموز بحيث تتزامن مع قوس خلفية المقسم. للقيام بذلك ، نحتاج إلى إضافة بعض الحشو المخصص للصف. افتح إعدادات الصف وقم بتحديث ما يلي:
اجعل هذا الصف بعرض كامل: نعم
مساحة العمود 2 المخصصة: 9٪ علوي (سطح المكتب) ، 0٪ علوي (كمبيوتر لوحي)
المساحة المتروكة المخصصة للعمود 3: 9٪ أعلى (سطح المكتب) ، 0٪ أعلى (كمبيوتر لوحي)
هذا كل شيء!
تحقق من النتيجة النهائية.
لاحظ كيف يتم الآن تحريك الرموز بواسطة عداد الدائرة بقيم رقمية متغيرة. وتتزامن الأيقونات مع خلفية الفاصل.
كيف يبدو قسم الميزات على الهاتف المحمول
فيما يلي نظرة على كيفية ظهور التصميم على شاشات الأجهزة اللوحية والهواتف الذكية.
افكار اخيرة
تتميز العناصر الفريدة لتصميم قسم الميزات هذا بأنها خفيفة ودقيقة ، مما يجعل من السهل عليك دمجها في تخطيطاتك الخاصة مع بعض التعديلات الطفيفة. وإذا لم تكن الرسوم المتحركة للعداد الدائري هي كوب الشاي الذي تفضله ، فلا تتردد في تركها بالخارج واستخدام رمز الدائرة الخاص بالوحدة الدعاية. أو يمكنك اختيار استخدام عدادات الدائرة فقط مع القيم الرقمية المرئية للتخطيط الإبداعي لعرض الإحصائيات. إذا كان هناك أي شيء ، آمل أن يمنحك هذا بعض الأفكار لاستكشافها بنفسك.
أتطلع إلى الاستماع منك في التعليقات.
هتافات!