دليل مفيد لتصميم العناصر الدائرية في Divi

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

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

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

تحقق من ذلك!

نظرة خاطفة

قم بتنزيل نموذج مخطط العناصر الدائري مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

للبدء ، قم بإنشاء صفحة جديدة في Divi. ثم أعطك عنوانًا للصفحة وقم بنشر Divi builder على الواجهة الأمامية. حدد الخيار "البناء من الصفر".

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

أنت الآن على استعداد للذهاب!

ثلاث خطوات أساسية لتكوين عنصر دائري

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

الخطوة 1: تحديد حجم العنصر بقيم طول وعرض متساوية

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

الخطوة 2: أضف نصف قطر حد 50٪ لجميع الزوايا الأربع

الخطوة الثانية هي ضبط نصف قطر الحد للعنصر (أو الوحدة النمطية) على 50٪ على الزوايا الأربع. في Divi ، يمكنك تغيير نصف قطر الحد لعنصر ما تحت الخيار المسمى "Rounded Corners".

الخطوة 3: محاذاة المحتوى داخل العنصر الدائري

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

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

الحشو المخصص: 18vw top ، 3vw left ، 3vw right

بالطبع ، لا تزال هناك تعديلات قد يلزم إجراؤها للتأكد من أن النص / المحتوى يناسب العنصر الدائري على الهاتف المحمول ، ولكن هذا يغطي الإعداد الأساسي.

قد تلاحظ أنني استخدمت وحدة طول فولكس فاجن لتغيير حجم العنصر الدائري ومساحته. هذا مفيد لإنشاء تصميم متجاوب أكثر اتساقًا. سأشرح.

استخدام وحدات الطول النسبية لجعل العناصر الدائرية مستجيبة

باستخدام وحدة الطول VW للارتفاع والعرض

من بين جميع وحدات الطول النسبية ، تعد وحدة الطول vw واحدة من مفضلاتي للتصميم سريع الاستجابة. نظرًا لأن وحدة طول vw مرتبطة بعرض نافذة المتصفح (وليس العنصر الأصلي) ، يمكنك الحصول على تصميم متناسق يتكيف بسلاسة مع حجم نافذة المتصفح.

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

استخدام وحدة الطول VW لمحتوى العنصر الدائري

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

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

باستخدام مثالنا الحالي ، يمكنك إعطاء نص العنوان قيمة طول vw ثم تغيير حجم الوحدة على الهاتف المحمول على النحو التالي:

حجم نص العنوان: 4vw
العرض (الهاتف): 70vw
الارتفاع (الهاتف: 70vw

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

ماذا عن البكسل؟

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

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

يمكنك تحديث الارتفاع والعرض والحشو كما يلي:

العرض: 500 بكسل
الارتفاع: 500 بكسل
الحشو المخصص: 200 بكسل للأعلى ، 20 بكسل لليسار ، 20 بكسل لليمين

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

TT لهذا السبب من المهم ضبط قيم العرض والبكسل المتروكة على شاشات الهاتف المحمول. على سبيل المثال ، قد تحتاج إلى تغيير العرض والارتفاع إلى 300 بكسل بدلاً من ذلك.

لماذا لا تعمل وحدة الطول٪ بشكل جيد في تحجيم العناصر الدائرية

إذا كنت تريد حلاً أكثر استجابة للعناصر الدائرية ، فقد تعتقد أن استخدام النسب المئوية هو الحل. ومع ذلك ، عند تغيير حجم العناصر على صفحة ويب ، لا تعمل وحدة النسبة المئوية للطول بنفس طريقة وحدة النسبة المئوية للعرض. هذا لأن الارتفاع الافتراضي للعناصر يُترك عادةً إلى الوضع الافتراضي (الارتفاع: تلقائي). على سبيل المثال ، إذا كنت تحاول تعيين ارتفاع بنسبة 100٪ إلى وحدة Divi ، فلن يتم ضبط الوحدة نظرًا لأن الحاويات الأصلية (العمود ، الصف ، القسم ، إلخ ...) تحتوي جميعها على قيمة غير محددة للارتفاع. لا يحاول المستعرض بشكل أساسي ضبط الوحدة على 100٪ من لا شيء (وهو ما لا يمكنه ذلك). هذا ليس هو الحال بالنسبة للعرض. العرض الافتراضي لأي عنصر كتلة (أو div) هو 100٪. لذلك فإن جميع الأقسام والصفوف والوحدات النمطية لها هذا العرض الافتراضي بنسبة 100٪ ما لم يتم تغييره بواسطة الإعدادات. هذا هو السبب في أن وحدة٪ length ليست الخيار الأفضل لاستخدامه عند محاولة إنشاء عنصر دائري سريع الاستجابة. يجب أن يكون للعنصر الدائري نفس الارتفاع والعرض في جميع أحجام المتصفح ، لذلك من الصعب تحقيق ذلك باستخدام وحدة النسبة المئوية للطول للارتفاع. ومع ذلك ، هناك طرق لجعل الارتفاع والعرض بنسبة 100٪ يعملان باستخدام المزيد من CSS المخصص المطبق على العناصر الأصلية. ولكن لجعل العناصر الدائرية في Divi ، قد تجد أن وحدة طول vw أسهل في العمل معها.

محاذاة المحتوى داخل عنصر دائري

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

محاذاة محتوى العنصر الدائري مع الحشو

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

هذا هو السبب في أنني اقترحت استخدام vw padding في مثال وحدة الدعوة إلى العمل.

محاذاة محتوى العنصر الدائري مع خاصية Flex

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

هذا ما أعنيه.

باستخدام مثالنا ، افتح إعدادات وحدة الدعوة إلى اتخاذ إجراء.

ثم اضبط المساحة المتروكة العلوية والسفلية على 0 بكسل.

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

display:flex;
align-items: center;

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

padding-bottom: 0px

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

وضعه في الممارسة: إضافة عناصر دائرية إلى تخطيط مسبق الصنع

الآن بعد أن أصبح لديك فهم أفضل لكيفية إنشاء عناصر دائرية في Divi ، دعنا نرى كيف يمكن أن يعمل هذا على تصميم تخطيط فعلي. في هذا المثال ، سأستخدم Divi's Farmer Landing Page من Farmer Layout Pack.

قم بتحميل تخطيط الصفحة المقصودة للمزارع إلى صفحتك

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

سيؤدي هذا إلى تحميل التخطيط إلى الصفحة.

عمل رأس قسم دائري

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

1: حجم العنصر بقيم طول وعرض متساوية
2: أضف نصف قطر حد 50٪ لجميع الزوايا الأربع
3: محاذاة المحتوى داخل العنصر الدائري

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

العرض: 70vw (سطح المكتب) ، 70vw (الكمبيوتر اللوحي) ، 80vw (الهاتف)
أقصى عرض: 1080 بكسل
محاذاة القسم: المركز
الارتفاع: 70vw (سطح المكتب) ، 70vw (الكمبيوتر اللوحي) ، 80vw (الهاتف)
أقصى ارتفاع: 1080 بكسل

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

نحتاج الآن إلى إضافة نصف قطر الحد الذي يساوي 50٪ على الزوايا الأربع.

الزوايا المستديرة: 50٪ (جميع الزوايا الأربع)

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

أولاً ، افتح إعدادات وحدة النص العليا في العمود 1 الذي يحتوي على عنوان القسم. ثم قم بتحديث حجم نص العنوان كما يلي:

حجم نص العنوان: 4vw

ثم قم بتقليل مقدار النص الأساسي في وحدة النص مباشرةً أسفل وحدة النص التي تحتوي على الرأس.

الآن يمكننا محاذاة المحتوى عن طريق تعديل التباعد بين الصفوف. افتح إعدادات الصف وقم بتحديث ما يلي:

الهامش المخصص: 10vw top (desktop)، 5vw (tablet)، 0vw (phone)
الحشو المخصص: 3vw يسار ، 3vw يمين

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

الآن دعنا نتحقق من النتيجة.

صنع وحدات الدعاية الدائرية

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

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

عرض الصورة: 7vw
العرض: 50vw (سطح المكتب) ، 80vw (الهاتف)
العرض الأقصى: 400 بكسل
محاذاة الوحدة: مركز
الارتفاع: 50vw (سطح المكتب) ، 80vw (الهاتف)
أقصى ارتفاع: 400 بكسل

بعد ذلك ، أضف نصف قطر الحد أو الزوايا الدائرية:

زوايا دائرية: 50٪

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

وضع الصورة / الرمز: علوي
حجم نص العنوان: 2vw (سطح المكتب) ، 20 بكسل (جهاز لوحي)
اتجاه النص: الوسط

الحشو المخصص: 0vw Top ، 0vw bottom ، 4vw left ، 4vw right

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

display: flex;
align-items: center;

تمديد النمط الدائري لجميع الدلالات في القسم

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

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

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

افكار اخيرة

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

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

هتافات!