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

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

احصل على الصفحة المقصودة الحصرية لـ Black Friday UI Kit

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

طالب بالصفقة قبل أن تختفي!

استخدام هياكل عمود Divi لإدراج المنتجات والميزات بشكل جميل

بالنسبة لبقية هذا المنشور ، سنفترض أنك إما استفدت من صفقة الجمعة السوداء الخاصة بنا أو أنك بالفعل عضو مدى الحياة ولديك حق الوصول إلى صفحة Black Friday UI Kit Landing Page.

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

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

معاينة

دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.

تحوم والرسوم المتحركة

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

هيا بنا نبدأ!

أضف صفحة جديدة باستخدام الصفحة المقصودة لمجموعة أدوات واجهة المستخدم

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

حدد موقع قسم الميزات على الصفحة

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

إزالة الصفوف الموجودة

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

أضف صفًا جديدًا أسفل الصف الذي يحتوي على صف

هيكل العمود

أضف صفًا جديدًا إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وقم بتعديل إعدادات التحجيم في علامة تبويب التصميم.

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

تباعد

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

• الهامش الأعلى: 100 بكسل
• الهامش السفلي: 100 بكسل
• الحشوة العلوية: 87 بكسل
• الحشوة العلوية للعمود 1: 100 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة العلوية للعمود 2: 100 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة العلوية للعمود 3: 100 بكسل (سطح المكتب). 0 بكسل (الجهاز اللوحي والهاتف)
• الحشوة السفلية للعمود 3: 50 بكسل (الجهاز اللوحي والهاتف)
• العمود 4 ، البطانة اليسرى: 10 بكسل (الهاتف فقط)
• العمود 4 الحشوة اليمنى: 10 بكسل
• العمود 5 ، الحشوة اليسرى: 5 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 10 بكسل (الهاتف)
• الحشوة اليمنى للعمود 5: 5 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 10 بكسل (الهاتف)
• العمود 6 الحشو الأيسر: 10 بكسل
• العمود 6 ، البطانة اليسرى: 10 بكسل (الهاتف فقط)

أضف وحدة نصية إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! أضف وحدة نصية إلى العمود الأول برقم.

لون الخلفية الافتراضي

أضف لون الخلفية إلى هذه الوحدة.

• لون الخلفية: # 0f0f0f

لون الخلفية تحوم

وتغيير لون الخلفية عند التمرير.

• لون الخلفية: # ff5400

الصورة الخلفية

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

• حجم صورة الخلفية: الحجم الفعلي
• موقف صورة الخلفية: المركز
• تكرار صورة الخلفية: لا يوجد تكرار

الإعدادات الافتراضية للنص

تابع عن طريق تعديل إعدادات النص.

• خط النص: مولي
• وزن خط النص: خفيف
• لون النص: #ffffff
• حجم النص: 80 بكسل (سطح المكتب والهاتف) ، 40 بكسل (هاتف)
• ارتفاع خط النص: 1em

• لون ظل النص: ## ffffff
• اتجاه النص: يسار

التباعد الافتراضي

أضف بعض الحشو المخصص لإنشاء مربع.

• الحشوة العلوية: 200 بكسل
• الحشو الأيسر: 50 بكسل (الهاتف فقط)
• الحشو الأيمن: 50 بكسل (الهاتف فقط)

تحوم التباعد

قم بتعديل إعدادات التباعد عند التمرير.

• الحشوة اليسرى: 100 بكسل

الحدود

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

مربع الظل

استخدم ظل الصندوق التالي لإضافة بعض الألوان للوحدة أيضًا:

• مربع الظل الأفقي: 20 بكسل
• مربع الظل الوضع الرأسي: -50 بكسل
• قوة انتشار الظل المربع: 17 بكسل
• لون الظل: # 593aff

حيوية

أخيرًا وليس آخرًا ، أضف حركة شرائح دقيقة جدًا إلى وحدة النص.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح
• كثافة الرسوم المتحركة: 3٪

أضف وحدة Divider إلى العمود 2

الرؤية

الوحدة التالية التي سنحتاجها هي وحدة Divider Module. استمر وأضف واحدًا إلى العمود الثاني. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

قم بتغيير لون الفاصل بعد ذلك.

• اللون: #ffffff

تباعد

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

• الهامش العلوي: 30 بكسل
• الهامش الأيسر: -200 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الهامش الأيمن: 200 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)

أضف وحدة النص رقم 1 إلى العمود 3

إضافة محتوى

إلى العمود التالي! هنا ، الوحدة الأولى التي سنحتاجها هي وحدة نص العنوان. انطلق وأضف عنوان الميزة أو المنتج الأول.

إعدادات نص العنوان

بعد ذلك ، انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات لمطابقة حزمة تخطيط UI Kit.

• خط العنوان 3: مولي
• وزن خط العنوان 3: خفيف
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 30 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 18 بكسل (الهاتف)

تباعد

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

• الهامش العلوي: 20 بكسل
• الهامش السفلي: 20 بكسل
• الهامش الأيسر: -180 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الحشوة اليسرى: 20 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)
• الحشوة اليمنى: 20 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)

أضف وحدة النص رقم 2 إلى العمود 3

إضافة محتوى

الوحدة التالية التي سنحتاجها هي وحدة نص الوصف. انطلق وأدخل وصف ميزتك أو منتجك.

إعدادات النص

قم بتغيير إعدادات النص بعد ذلك.

• لون النص: rgba (255،255،255،0.5)
• ارتفاع خط النص: 2.2em

تباعد

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

• الهامش الأيسر: -180 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 0 بكسل (الهاتف)
• الحشوة اليسرى: 20 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)
• الحشوة اليمنى: 20 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)

وحدة استنساخ ووضع الزر في العمود 3

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

تغيير المحتوى

قم بتغيير محتوى وحدة الزر.

تغيير التباعد

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

• الهامش الأعلى: 50 بكسل
• الهامش الأيسر: -160 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)
• الهامش الأيمن: 50 بكسل (الهاتف فقط)

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

تحميل الصور

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

مربع الظل

أضف ظل مربع دقيق لهذه الوحدة.

• لون الظل: #ffffff

حيوية

ولإضافته إلى أعلى ، أضف رسمًا متحركًا للشرائح إلى الصورة أيضًا.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار
• تأخير الرسوم المتحركة: 100 مللي ثانية
• كثافة الرسوم المتحركة: 3٪

أضف وحدة النص رقم 1 إلى العمود 4

إضافة محتوى

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

لون الخلفية الافتراضي

قم بتغيير لون الخلفية لهذه الوحدة.

• لون الخلفية: # 0f0f0f

لون الخلفية تحوم

واستخدم لون خلفية آخر عند التمرير.

• لون الخلفية: # 593aff

إعدادات نص العنوان

تابع عن طريق تغيير إعدادات نص العنوان لتتناسب مع الصفحة المقصودة لمجموعة أدوات واجهة المستخدم.

• خط العنوان 4: مولي
• وزن خط العنوان 4: خفيف
• لون نص العنوان 4: #ffffff
• حجم نص العنوان 4: 23 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 18 بكسل (الهاتف)

التباعد الافتراضي

أضف بعض قيم التباعد المخصصة بعد ذلك.

• الحشوة العلوية: 50 بكسل
• الحشوة اليسرى: 30 بكسل
• الحشو الأيمن: 30 بكسل

تحوم التباعد

وقم بتغيير هذه القيم عند التمرير لإنشاء انتقال لطيف.

• أسفل مارين: 50 بكسل
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

أضف وحدة النص رقم 2 إلى العمود 4

إضافة محتوى

الوحدة الثانية والأخيرة التي سنحتاجها في العمود 4 هي وحدة نص الوصف. أدخل بعض المحتوى المفضل.

لون الخلفية

قم بتغيير لون الخلفية بعد ذلك.

• لون الخلفية: # 0f0f0f

إعدادات النص

وتعديل إعدادات النص.

• لون النص: rgba (255،255،255،0.5)
• ارتفاع خط النص: 2.2em

تباعد

لإنشاء مظهر ومظهر نظيفين ، أضف بعض الحشو المخصص إلى هذه الوحدة.

• الحشو السفلي: 50 بكسل
• الحشوة اليسرى: 30 بكسل
• الحشو الأيمن: 30 بكسل

الحدود

أخيرًا وليس آخرًا ، أضف "20 بكسل" إلى الركنين السفليين من الوحدة.

استنساخ جميع الوحدات في العمود 4 مرتين ووضعها في الأعمدة المتبقية

تغيير الصورة والمحتوى

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

صف استنساخ بقدر ما هو مطلوب (حسب عدد عناصر القائمة)

لقد انتهينا من أول عنصر في القائمة! يمكنك الآن المضي قدمًا واستنساخ هذا الصف عدة مرات كما تريد ، اعتمادًا على عدد الميزات و / أو المنتجات التي تريد عرضها.

تغيير محتوى الاستنساخ

لكل واحد من التكرارات ، ستحتاج إلى تغيير المحتوى.

البحث عن اللون واستبداله

يمكنك أيضًا استخدام ميزة بحث واستبدال Divi لتغيير لوحة الألوان لعنصر القائمة بسرعة.

تغيير لون خلفية التمرير

تأكد من أنه بمجرد تغيير لوحة الألوان ، يمكنك تغيير لون خلفية التمرير لوحدة نص الرقم أيضًا.

• لون الخلفية: # 593aff

تغيير صورة الخلفية

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

افكار اخيرة

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

• خصم 25٪ على كل شيء
• جميع الصفحات المقصودة الست مجانًا
• الوصول إلى السمات والإضافات الرائعة لدينا
• جوائز المكافآت

اغتنم الفرصة وكن عضوا اليوم!