كيفية إنشاء قائمة دائرية مجزأة باستخدام Divi Blurbs

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

مسح

فيما يلي نظرة عامة على القائمة الدائرية المقسمة التي سنقوم ببنائها في هذا البرنامج التعليمي.

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

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

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

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

إنشاء خط لعناصر القائمة

في القسم العادي الافتراضي ، أضف صفًا من عمود واحد.

تصميم الصف

قبل إضافة وحدة نمطية ، دعنا نسمي الصف للحصول على الشكل الدائري ولون الخلفية. افتح إعدادات الصف وقم بتحديث ما يلي:

لون الخلفية: #8857f2
استخدم عرض مزراب مخصص: نعم
عرض مزراب: 1
العرض: 30em
الارتفاع: 30em
مواد التنجيد: 0px في الأعلى ، 0px في الأسفل

ثم أضف الزوايا الدائرية وظل الصندوق.

زوايا مدورة: 50٪
Box Shadow: انظر لقطة الشاشة

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

إنشاء النيران في القائمة

إضافة نص دعاية جديدة إلى صف العمود داخل الصف الدائري.

Blurb التصميم # 1

تحديث محتويات من أول دعاية مغلوطة تتضمن عنوانًا ورمزًا.

العنوان: رابط
استخدم الأيقونة: نعم
الرمز: انظر لقطة الشاشة

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

لون الخلفية: #773ef2
لون الخلفية (التحويم): #222222
لون الأيقونة: #ffffff
حجم خط رمز: 40px (سطح المكتب) ، 30px (قرص)
محاذاة النص: المركز

ثم قم بتحديث نمط النص الخاص بالعنوان كما يلي:

عنوان الخط: Archivo Narrow
عنوان نمط الخط: TT
عنوان نص اللون: #ffffff
حجم عنوان النص: 14px (سطح المكتب) ، 12px (الكمبيوتر اللوحي)

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

الموقف: المطلق! اليسار: 50٪ ؛ أعلى: 50٪ ؛

عد الآن إلى علامة التبويب Design وقم بتحديث حجم الدعاية والتباعد على النحو التالي:

العرض: 15em
الارتفاع: 15em
الهامش: -15em اليسار

يؤدي ذلك إلى وضع الركن الأيمن السفلي لنص العرض التقديمي مباشرةً في وسط الدائرة.

قم بإنشاء المقطع باستخدام خيارات التحويل

من أجل تحويل الدعاية المغلوطة إلى مقطع دائري ، سنقوم بإمالة الدعاية الدعاية وإدارتها. للقيام بذلك ، قم بتحديث خيارات التحويل التالية:

تحويل المحور X الميل: 60 درجة

أصل التحول: 100٪ 100٪ (أسفل اليمين)

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

فتح المحتوى

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

محتوى CSS Blurb:

تحويل: الانحراف (-60deg) تدوير (-75deg) ؛ الموقف: مطلق ؛ الارتفاع: 27em ؛ العرض: 27em. أسفل: -13.5em. اليمين: -13.5em ؛

ثم قم بتقليل الهامش بين الرمز والعنوان عن طريق إضافة كود CSS التالي لصورة Blurb:

Blurb Image CSS

الهامش السفلي: 15px ؛

والآن ، نظرًا لأن مساحة محتوى الدعاية الدعائية تمتد إلى ما وراء الدعاية (على الرغم من أنك لا تستطيع رؤيتها) ، نحتاج إلى إخفاء الفائض كما يلي:

تجاوز أفقي: مخفي
تجاوز عمودي: مخفي

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

خلق بقية العالم

لإنشاء بقية الدعاية المغطاة ، انشر وضع عرض الإطار السلكي وكرر الدعاية الحالية 5 مرات ليصبح المجموع 6 تخطيطات دعاية متطابقة.

Blurb rotation # 2

ثم افتح إعدادات Blurb # 2 وقم بتدوير الوحدة كما يلي:

تحويل Z محور الدوران: 30deg

سيؤدي هذا إلى تدوير النص رقم 2 في اتجاه عقارب الساعة من النقطة المركزية للدائرة.

بعد ذلك ، يمكننا الاستمرار في تدوير بقية نص العرض التقديمي بزيادات من درجات 30 لإنشاء نصف دائرة من القطع.

تدوير blurb # 3

افتح إعدادات Blurb # 3 وقم بتحديث ما يلي:

تحويل Z محور الدوران: 60deg

Blurb rotation # 4

افتح إعدادات Blurb # 4 وقم بتحديث ما يلي:

تحويل Z محور الدوران: 90deg

تدوير blurb # 5

افتح إعدادات Blurb # 5 وقم بتحديث ما يلي:

تحويل Z محور الدوران: 120deg

تدوير blurb # 6

افتح إعدادات Blurb # 6 وقم بتحديث ما يلي:

تحويل Z محور الدوران: 150deg

ها هي النتيجة حتى الآن.

إنشاء زر القائمة

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

للقيام بذلك ، ابدأ بإضافة قسم عادي جديد أسفل القسم الحالي.

ثم أضف صفًا من عمود واحد إلى القسم.

إنشاء رمز Blurb للزر

ثم أضف وحدة blurb إلى الخط.

احذف المحتوى الافتراضي للعنوان والنص واستخدم الرمز كما يلي:

استخدم الأيقونة: نعم
الرمز: رمز زائد (انظر لقطة الشاشة)

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

لون الأيقونة: # 222222
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 50 بكسل
الرسوم المتحركة للصورة / الأيقونة: لا توجد رسوم متحركة

ثم أضف كود CSS المخصص التالي إلى العنصر الرئيسي لإزالة الهامش الافتراضي أسفل الرمز.

CSS العنصر الرئيسي

الهامش السفلي: 0px ؛

الحشو الصف

بعد ذلك ، قم بإزالة التعبئة الافتراضية من السطر.

مواد التنجيد: 0px في الأعلى ، 0px في الأسفل

إعدادات القسم

لإكمال الزر ، سنقوم بتشكيل قسمنا في دائرة.

افتح إعدادات القسم وقم بتحديث العناصر التالية:

العرض: 100px
الارتفاع: 100px
مواد التنجيد: 0px في الأعلى ، 0px في الأسفل
زوايا مدورة: 50٪
Box Shadow: انظر لقطة الشاشة

ثم أعطه خلفية بيضاء.

لون الخلفية: #ffffff

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

الموقف: ثابت! أسفل: -50px ؛ اليسار: 50٪ ؛ الهامش الأيسر: -50px؛

نحتاج أيضًا إلى إضافة فئة CSS يمكن استهدافها باستخدام jQuery. يضاف ما يلي:

فئة CSS: convert_target

ثم قم بتحديث فهرس Z (لا يزال في نفس النافذة) بحيث يظل الزر فوق باقي محتوى الصفحة.

مؤشر Z: 12

وضع خط القائمة الدائرية

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

للقيام بذلك ، افتح معلمات السطر الذي يحتوي على تخطيط القائمة وإضافة CSS المخصص التالي:

CSS العنصر الرئيسي

الموقف: ثابت! أسفل: -10em. اليسار: 25٪ ؛ الهامش الأيسر: -15em ؛ الهامش السفلي: -5em ؛

قم بتحديث الفهرس z كما يلي:

مؤشر Z: 11

ثم أضف فئة CSS التالية.

CSS class: has-convert

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

تحديث العناصر التالية:

نطاق التحول: 1٪

مع وجود قائمة دائرية مجزأة وزر القائمة في مكانه ، كل ما عليك فعله هو إضافة CSS المخصص و jQuery لإكمال وظيفة الزر.

إضافة CSS مخصص خارجي إلى إعدادات الصفحة

افتح إعدادات الصفحة من القائمة الموجودة أسفل المنشئ المرئي وأضف CSS المخصص التالي ضمن علامة التبويب خيارات متقدمة:

.for-convert، .transform_menu .and-pb-icon، .toggle-convert-animation {transfer: all 400ms-in-out؛ } .for-convert، .toggle-convert-animation {font-size: 14px؛ } .toggle-convert-animation {convert: none! important؛ } .transform_target {cursor: pointer؛ } .toggle-active-target .and_pb_blurb .et-pb-icon {convert: rotateZ (45deg)؛ }media all و (max-width: 980px) {. to-convert {-webkit-mask-image: -webkit-radial-gradient (white، black)؛ } .for-convert، .toggle-convert-animation {font-size: 10px؛ }}

إضافة مسج مع وحدة رمز

بعد ذلك ، انشر وضع عرض الإطار السلكي وأضف وحدة رمز ضمن زر القائمة.

ثم أضف الكود التالي إلى الوحدة.

(function($) {
$(document).ready(function(){
$('.transform_menu').click(function(){
$(this).toggleClass('toggle-active-target');
$('.pour-transformer').toggleClass('toggle-transform-animation');
});
});
})( jQuery );

نتيجة نهائية

الآن دعونا نرى النتيجة النهائية على صفحة حية.

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

تحديد حجم القائمة الدائرية

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

الأفكار النهائية

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

يسمح لنا JQuery بتشغيل وإيقاف خاصية مقياس التحول لإنشاء تأثير توسيع وانهيار القائمة عند النقر فوق زر القائمة.

بشكل عام ، أعتقد أنك ستجد الكثير من الإلهام في هذا البرنامج التعليمي.