7 تقنيات لإنشاء مواقع ويب جريئة وملونة مع Divi

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

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

هذه هي آخر مشاركة في سلسلة المنشورات حيث تعاملنا مع 4 أنماط مختلفة من مواقع الويب وكيفية تحقيقها باستخدام Divi:

1. نظيف ومجرّد
2. الحد الأدنى
3. مسطحة
4. جريئة وملونة

دعنا نذهب اليها!

اشترك في قناتنا على اليوتيوب

1. "تحويل" الصفوف إلى أقسام بها أعمدة

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

2. التدرجات + مواد الخلفية

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

3. ألوان متدرجة شبه شفافة + فواصل القسم السفلي

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

4. تداخل العمود الأفقي للوحدات النمطية

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

5. تقسيم نسخة لمحاذاة مثالية

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

6. اجمع بين ألوان النص الأسود وشبه الشفافة

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

7. تجنب ظل الصندوق في الأعلى أو الأسفل لتوحيد الأقسام

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

معاينة

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

لنبدأ في الإنشاء: أضف القسم القياسي رقم 1

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

أعلى الحاجز

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

• نمط الحاجز: البحث في القائمة
• لون الفاصل: rgba (0،0،0،0.13)
• ارتفاع الفاصل: 900 بكسل
• فاصل الفاصل: عمودي
• ترتيب الحاجز: أسفل محتوى القسم

مقسم سفلي

استمر بإضافة فاصل سفلي مماثل أيضًا.

• نمط الحاجز: البحث في القائمة
• لون الفاصل: rgba (0،0،0،0.13)
• ارتفاع الفاصل: 900 بكسل
• ترتيب الحاجز: أسفل محتوى القسم

تباعد

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

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

زوايا مدورة

ثم افتح إعدادات الحدود وأضف بعض الزوايا الدائرية.

• أعلى اليسار: 20 بكسل
• أعلى اليمين: 20 بكسل

مربع الظل

نحن نستخدم ظل مربع خفي في الجزء العلوي من قسمنا عن طريق إجراء التعديلات التالية:

• مربع الظل الوضع الرأسي: -23 بكسل
• مربع قوة طمس الظل: 37 بكسل
• قوة انتشار الظل المربع: -29 بكسل
• لون الظل: rgba (0،0،0،0.22)
• موضع ظل المربع: الظل الخارجي

أضف صفًا جديدًا

هيكل العمود

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

العمود 1 خلفية متدرجة

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

• اللون 1: rgba (255،191،0،0.76)
• اللون 2: rgba (153،0،255،0.87)

العمود 1 نسيج صورة الخلفية

سنقوم بدمج هذه الخلفية المتدرجة مع خلفية مزخرفة. الصورة التي أستخدمها هي جزء من Divi's Meetup Layout Pack. احفظ الصورة التالية على سطح المكتب الخاص بك عن طريق النقر بزر الماوس الأيمن وحفظها (إنه ملف png بنسيج أبيض ، ولن تتمكن من رؤية الشكل الذي تبدو عليه حتى تفتحه على جهاز الكمبيوتر الخاص بك و / أو تستخدمه على موقع الويب الخاص بك ):

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

لون خلفية العمود 2

بعد ذلك ، امنح العمود الثاني لون الخلفية "# F7F7F7".

تحجيم

سنقوم "بتحويل" صفنا إلى قسم بجعله يشغل عرض القسم بالكامل.

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

تباعد

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

• الحشوة العلوية والسفلية: 0 بكسل

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

إخفاء الحاجز

لنبدأ في إضافة الوحدات! أول شيء سنحتاجه هو Divider Module في العمود الأول. نحن نستخدم هذه الوحدة فقط لإنشاء المساحة التي نحتاجها في العمود الأول. نحن في الواقع لا نريده أن يظهر. بمجرد إضافة الوحدة ، تأكد من تعطيل خيار "إظهار المقسم".

تباعد

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

• الحشوة العلوية: 200 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 150 بكسل (الهاتف)
• الحشو السفلي: 200 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 150 بكسل (الهاتف)

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

أضف نسخة

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

إعدادات النص

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

• وزن خط النص: غامق للغاية
• نمط خط النص: أحرف كبيرة
• لون النص: # 000000
• حجم النص: 250 بكسل (سطح المكتب) ، 200 بكسل (جهاز لوحي) ، 100 بكسل (هاتف)
• ارتفاع خط النص: 0.75em

تباعد

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

• الهامش العلوي: 200 بكسل (سطح المكتب) ، -250 بكسل (جهاز لوحي) ، -120 بكسل (الهاتف)
• الهامش الأيسر: -279 بكسل (سطح المكتب) ، 5٪ (الجهاز اللوحي والهاتف)

استنساخ وحدة النص مرتين

استنساخ # 1

تغيير النص

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

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

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

• الهامش الأيسر: -360.7 بكسل (سطح المكتب) ، 5٪ (الجهاز اللوحي والهاتف)

استنساخ # 2

تغيير النص

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

تغيير لون النص

ولجعل التصميم أكثر تميزًا ، سنقوم بتغيير لون نص هذه الوحدة إلى "rgba (0،0،0،0.19)".

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

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

• الهامش السفلي: 200 بكسل
• الهامش الأيسر: -410 بكسل (سطح المكتب) ، 5٪ (الجهاز اللوحي والهاتف)

أضف القسم القياسي رقم 2

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

تباعد

انتهينا من القسم الأول ، حان الوقت للانتقال إلى القسم التالي! بمجرد إضافة قسم قياسي جديد ، افتح إعدادات التباعد وقم بإجراء التغييرات التالية:

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

زوايا مدورة

استمر بإضافة بعض الزوايا السفلية الدائرية:

• أسفل اليسار: 20 بكسل
• أسفل اليمين: 20 بكسل

مربع الظل

أضف Box Shadow إلى أسفل القسم أيضًا.

• مربع الظل الوضع الرأسي: 47 بكسل
• مربع قوة طمس الظل: 37 بكسل
• قوة انتشار الظل المربع: -29 بكسل
• لون الظل: rgba (0،0،0،0.22)
• موضع ظل المربع: الظل الخارجي

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

نحن أيضًا "نحول" هذا الصف إلى قسم:

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

تباعد

وسنزيل الحشوة الافتراضية العلوية والسفلية.

• الحشوة العلوية والسفلية: 0 بكسل

قم بإضافة الوحدة النمطية للدعاية والإعلان رقم 1 إلى العمود 1

اختر الرمز

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

خلفية متدرجة

سنجعل الأمر يبدو وكأن الرمز يتداخل مع الجزء العلوي من وحدة Blurb Module باستخدام خلفية متدرجة له:

• اللون 1: rgba (255،255،255،0)
• اللون 2: # A21DF9
• موقف البداية: 20٪
• موضع النهاية: 20٪

نسيج صورة الخلفية

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

إعدادات الرمز

قم بتغيير إعدادات الرمز بعد ذلك:

• لون الأيقونة: # 000000
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 85 بكسل

إعدادات النص

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

• اتجاه النص: الوسط
• لون النص: فاتح

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

بعد ذلك ، سنستخدم الإعدادات التالية لتصميم عنوان دعاية مغالى فيها:

• وزن خط العنوان: غامق للغاية
• نمط خط النص: أحرف كبيرة
• حجم نص العنوان: 46 بكسل

إعدادات النص الأساسي

والإعدادات التالية للنص الأساسي:

• وزن خط الجسم: خفيف
• حجم النص الأساسي: 18 بكسل

تباعد

أخيرًا وليس آخرًا ، سنمنح وحدة Blurb Module بعض المساحة للتنفس عن طريق إضافة حشوة مخصصة:

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

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

استنساخ # 1

تغيير الايقونة

عند الانتهاء من تعديل Blurb Module ، قم باستنساخه مرتين. بعد القيام بذلك ، ضع التكرارات في الأعمدة المتبقية. بعد ذلك ، افتح الوحدة النمطية Blurb في العمود الثاني وقم بتغيير الرمز الذي يتم استخدامه.

تغيير خلفية التدرج

تابع عن طريق تغيير لون الخلفية المتدرج الثاني إلى "# D47A9A".

استنساخ # 2

تغيير الايقونة

افعل نفس الشيء مع Blurb Module في العمود الأخير.

تغيير خلفية التدرج

بالنسبة لهذه الوحدة ، نستخدم "# F3BF3E" باعتباره لون خلفية التدرج الثاني بدلاً من ذلك.

معاينة

إذا اتبعت كل خطوة من الخطوات المذكورة أعلاه ، فيجب أن تكون قد حققت النتيجة التالية على أحجام شاشات مختلفة:

افكار اخيرة

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