كيفية وضع الأزرار تمامًا لإنشاء تخطيطات فريدة للأزرار في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

تحقق من هذه النظرة السريعة على تخطيطات الأزرار الأربعة التي سنقوم ببنائها في هذا البرنامج التعليمي.

قم بتنزيل Divi Button Layouts مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء تخطيط الزر رقم 1: الأزرار السفلية المزدوجة

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

للبدء ، أضف صفًا من عمودين (0 نصف ونصف) إلى القسم.

إعدادات الصف

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• الهامش: 50 بكسل للأسفل
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إعدادات العمود 1

• لون الخلفية: # 2e3858
• الحشو: 50 بكسل للأسفل

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

تصميم الوحدة النمطية Blurb

بعد ذلك ، أضف وحدة دعاية مغالى فيها إلى العمود 1.

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

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

• محاذاة الصورة / الرمز: يسار
• خط العنوان: PT Sans
• وزن خط العنوان: غامق
• لون نص العنوان: #ffffff
• حجم نص العنوان: 38 بكسل
• تباعد حروف العنوان: 2 بكسل
• لون النص الأساسي: #ffffff
• عرض الصورة: 40٪
• عرض المحتوى: 100٪
• العرض: 100٪
• المساحة المتروكة: 50 بكسل ، أعلى ، 50 بكسل أسفل ، 30 بكسل يسار ، 30 بكسل يمين

إضافة الأزرار السفلية المزدوجة

تصميم الزر رقم 1

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

ثم قم بتحديث إعدادات الزر على النحو التالي:

• حجم نص الزر: 16 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 2dc3a3
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 0 بكسل
• تباعد حرف الزر: 2 بكسل
• خط الزر: PT Sans
• وزن خط الزر: غامق
• نمط خط الزر: TT
• الهامش: 0 بكسل للأسفل
• الحشو: 1em أعلى ، 1em أسفل ، 1.5em يسار ، 2.5em يمين

الزر رقم 1 تحديد المواقع المطلقة

لوضع الزر تمامًا في الجزء السفلي الأيسر من العمود ، قم بتحديث ما يلي:

• الموقف: مطلق
• الموقع: أسفل اليسار

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

الزر رقم 2 التصميم والموقع

لإنشاء الزر رقم 2 ، قم بتكرار وحدة الزر السابقة.

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

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

• موقع الموقف: أسفل اليمين

امسح الآن العمود 2 الفارغ والعمود المكرر 1 للحصول على تصميم مكرر دقيق في العمود الأيمن أيضًا.

نتيجة تخطيط الزر رقم 1

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

إنشاء تخطيط الزر رقم 2: ثلاثة أزرار جانبية

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

لبدء تصميم تخطيط الزر التالي ، قم بتكرار الصف السابق.

إعدادات دعاية

قم بتحديث إعدادات blurb كما يلي:

• لون الخلفية: # df4570
• عرض الصورة: 60٪
• العرض: 56٪ (سطح المكتب والجهاز اللوحي) ، 100٪ (الهاتف)

سيؤدي هذا إلى إنشاء الغرفة التي نحتاجها على يمين الدعاية المغطاة لإضافة تصميم ثلاثي الأزرار.

زر تحديد المواقع # 1

لتحديد موضع الزر رقم 1 ، افتح إعدادات الزر للزر الأخضر في الزاوية اليسرى السفلية وقم بتحديث ما يلي:

• المنصب: مطلق (سطح المكتب والجهاز اللوحي) ، نسبي (الهاتف)
• الموقع: أعلى اليمين
• الإزاحة العمودية: 20٪ (سطح المكتب والجهاز اللوحي) ، 0٪ (الهاتف)
• الإزاحة الأفقية: 5٪ (سطح المكتب والجهاز اللوحي) ، 0٪ (الهاتف)

زر تحديد المواقع # 2

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

ثم افتح إعدادات الزر المكرر وقم بتحديث ما يلي:

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

ثم حرك الزر لأسفل قليلاً عن طريق زيادة الإزاحة الرأسية.

• تعويض عمودي: 35٪

زر تحديد المواقع # 3

أخيرًا ، كرر العملية مرة أخرى عن طريق تكرار الزر السابق وتحديث ما يلي:

• لون الخلفية: # 3599e5
• تعويض عمودي: 50٪

نتيجة تخطيط الزر رقم 2

تحقق من النتيجة النهائية للتخطيط ثلاثي الأزرار.

إنشاء تخطيط الزر رقم 3: أزرار متفرقة ومقاسة

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

للبدء ، قم بتكرار الصف السابق الذي يحتوي على تخطيط ثلاثي الأزرار.

إعدادات دعاية

ثم افتح إعدادات وحدة blurb في العمود 1 وقم بتحديث ما يلي:

• العرض: 60٪

• لون الخلفية: شفاف
• العرض: 60٪
• محاذاة الوحدة: المركز

• محاذاة النص: مركز
• محاذاة الوحدة: مركز

• عرض الحدود: 2 بكسل
• لون الحدود: rgba (255،255،255،0.15)

• حجم نص النص: 20 بكسل

• الهامش: 50 بكسل للأعلى

زر # 1 لتحديد المواقع

• تعويض عمودي: 8٪
• الإزاحة الأفقية: -7٪

زر # 2 لتحديد المواقع

• موقع المنصب: أعلى اليمين
• تعويض عمودي: 34٪
• الإزاحة الأفقية: -10٪

• مقياس التحويل: 80٪

زر # 3 تحديد المواقع

• موقع المركز: أسفل اليمين
• الإزاحة العمودية: -3٪
• إزاحة أفقية: 5٪

• مقياس التحويل: 138٪

إعدادات الصف

• عرض المزراب: 4
• العرض: 80٪ (سطح المكتب)

نتيجة تخطيط الزر رقم 3

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

إنشاء تخطيط الزر رقم 4: أزرار تبويب السحب

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

لبدء التصميم ، قم بتكرار صف تخطيط الزر رقم 2.

إعدادات العمود

بعد ذلك ، قم بتحديث إعدادات الخلفية للعمود رقم 1 على النحو التالي:

• لون الخلفية (سطح المكتب): لا شيء (افتراضي)
• لون الخلفية (الهاتف): # 2e3858

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيار الرؤية بحيث يكون الفائض مخفيًا على شاشة الهاتف.

• تجاوز أفقي (هاتف): مخفي
• تجاوز عمودي (الهاتف): مخفي

زر سحب الموضع # 1

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

• الإزاحة العمودية: 0 بكسل
• الإزاحة الأفقية: 0 بكسل

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

• الحشوة: 2em يسار ، 3em يمين

ثم أضف CSS المخصص التالي إلى العنصر After:

padding-left: 10px;

ثم قم بتحديث الإزاحة الأفقية بالهاتف على النحو التالي:

• الإزاحة الأفقية (الهاتف): -134 بكسل

سيؤدي هذا إلى إخفاء الجانب الأيسر من الزر خارج العمود على شاشة الهاتف بحيث يظهر الزر الكامل عند التمرير / النقر.

وضع زر سحب علامة التبويب # 2

لتعيين موضع زر السحب الثاني ، قم بتكرار الزر السابق وقم بتحديث لون خلفية النسخة المكررة.

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

بعد ذلك ، قم بتحديث الوظيفة على النحو التالي:

• الإزاحة العمودية: 63 بكسل

ثم قم بتحديث خيارات الموضع التالية لشاشة الهاتف:

• المنصب (الهاتف): نسبي
• الإزاحة العمودية (الهاتف): 0٪

وضع زر سحب علامة التبويب # 3

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

• لون الخلفية: # 3599e5
• الإزاحة العمودية: 126 بكسل

بمجرد وضع الزر الثالث في مكانه ، استخدم ميزة التحديد المتعدد لـ Divi بالضغط باستمرار على Cmd (أو Ctrl) والنقر فوق كل وحدة من وحدات الزر.

ثم افتح إعدادات إحدى وحدات الأزرار وأضف ترجمة التحويل التالية عند التمرير.

• تحويل ترجمة المحور X (تحوم): 68٪

سيؤدي هذا إلى تحديث جميع الأزرار الثلاثة بوظيفة سحب علامة التبويب عند التمرير عن طريق تحريكها إلى اليمين 68٪.

وضع الوحدة النمطية دعاية

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

افتح إعدادات الوحدة النمطية Blurb وقم بتحديث ما يلي:

• العرض: تلقائي
• الهامش: 50 بكسل يمين
• الموقف: نسبي
• الفهرس Z: 11

ثم قم بتحديث لون الخلفية.

• لون الخلفية: # 2e3858

إعدادات الصف

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

• العرض: 80٪

احذف العمود 2 ثم قم بتكرار العمود 1 بحيث يكون لديك نفس التصميم في كلٍ منهما.

ثم افتح إعدادات العمود 1 وأعطه فهرس Z التالي:

• الفهرس Z: 12

سيؤدي هذا إلى التأكد من عدم إخفاء الأزرار الموجودة في العمود الأول خلف المحتوى الموجود في العمود 2 عند التمرير.

إذا كنت ترغب في ذلك ، يمكنك تحديث الرموز لكل زر ليناسب احتياجاتك.

نتيجة تخطيط الزر # 4

تحقق من النتيجة النهائية لتخطيط زر السحب.

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

افكار اخيرة

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

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

هتافات!