8 تقنيات لإنشاء مواقع ويب صغيرة باستخدام Divi

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

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

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

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

1. الأقل هو الأكثر

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

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

2. الهامش والحشو هما أفضل أصدقائك

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

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

3. استخدم لون تمييز واحد

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

4. إما الصور أو الرسوم التوضيحية - وليس كلاهما

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

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

5. ضع في اعتبارك استخدام وحدات النص بدلاً من وحدات الأزرار ل CTAs

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

6. يمكن أن تساعد المقسمات في موازنة المسافات

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

تميل إلى ربط عناصر التصميم المختلفة ببعضها البعض وإنشاء نتيجة متماسكة.

7. استخدم أشكال بسيطة ودقيقة

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

8. استخدم الرسوم المتحركة الدقيقة (إذا كانت مطلوبة على الإطلاق)

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

معاينة

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

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

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

تباعد

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

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

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

هيكل العمود

تابع بإضافة صف جديد يحتوي على عمود واحد.

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

افتح إعدادات هذا الصف وأضف خلفية التدرج التالية للعمود إليه:

• اللون # 1: #ffffff
• اللون رقم 2: #efefef
• نوع التدرج للعمود: شعاعي
• اتجاه العمود الشعاعي: المركز
• موضع بداية العمود: 40٪
• موضع نهاية العمود: 40٪

تحجيم

بعد ذلك ، قم بزيادة عرض الصف عن طريق إجراء التغييرات التالية على إعدادات التحجيم:

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

تباعد

أخيرًا ، أضف المسافات التالية إلى صفك أيضًا:

• الحشوة العلوية والسفلية: 0 بكسل
• الحشوة العلوية والسفلية للعمود: 250 بكسل
• الحشوة اليسرى للعمود: 150 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 0 بكسل (هاتف)

أول وحدة نصية

إعدادات النص

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

• وزن خط النص: شبه عريض
• نمط خط النص: أحرف كبيرة
• تباعد الرسائل النصية: 8 بكسل

حيوية

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

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

وحدة النص الثانية

إعدادات نص H1

أسفل وحدة النص السابقة مباشرةً ، امض قدمًا وأضف وحدة نص H1 تحتوي على إعدادات نص H2 التالية:

• خط العنوان: جورجيا
• لون نص العنوان: # 666666
• حجم نص العنوان: 78 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• تباعد حروف العنوان: 3 بكسل

تباعد

سنقوم بإنشاء مساحة حول هذه الوحدة باستخدام إعدادات التباعد التالية:

• الهامش العلوي والسفلي: 100 بكسل
• الهامش الأيسر: 100 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 20 بكسل (الهاتف)
• الحشوة اليسرى: 40 بكسل

الحدود

سنحتاج أيضًا إلى حد أيسر ، لذا تابع وإضافة حد أيسر بالإعدادات التالية:

• عرض الحد الأيسر: 6 بكسل
• لون الحد الأيسر: # d67787

وحدة نص الزر

إضافة رابط

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

إعدادات نص الارتباط

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

• وزن خط الارتباط: شبه عريض
• نمط خط الرابط: مائل وأحرف كبيرة
• محاذاة نص الارتباط: يسار
• لون نص الرابط: # 666666
• تباعد حروف الارتباط: 8 بكسل

تحجيم

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

• العرض: 46٪
• محاذاة الوحدة: يسار

تباعد

وللتأكد من أن الحد السفلي ليس قريبًا جدًا من النص ، سنضيف حشوة سفلية "10 بكسل" أيضًا.

• الحشو السفلي: 10 بكسل

الحدود

الآن يمكننا المضي قدمًا في إضافة حد سفلي باستخدام الإعدادات التالية:

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 666666

حيوية

نضيف أيضًا رسمًا متحركًا دقيقًا:

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

إضافة وحدة المقسم

الرؤية

آخر وحدة سنحتاجها في هذا الصف هي Divider Module. تأكد من ترك خيار "إظهار الحاجز" ممكّنًا.

اللون

نحن نستخدم نفس اللون لهذا الحاجز كما فعلنا مع الحد الأيسر من العنوان Text Module: '# d67787'.

تحجيم

افتح إعدادات التحجيم بعد ذلك وقم بتغيير وزن الحاجز إلى "2 بكسل".

تباعد

سنقوم بدفع Divider Module إلى اليمين باستخدام إعدادات التباعد التالية:

• الهامش الأيسر: 200 بكسل
• الهامش الأيمن: -100 بكسل

حيوية

أخيرًا وليس آخرًا ، سنقوم بتضمين الرسوم المتحركة التالية:

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

أضف قسمًا قياسيًا ثانيًا

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

تباعد

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

• الهامش العلوي والسفلي: 80 بكسل

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

هيكل العمود

تابع بإضافة صف بهيكل العمود التالي:

تحجيم

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

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

تباعد

سنحتاج إلى إضافة بعض المساحة المتروكة للعمود 2 أيضًا:

• الحشوة اليسرى للعمود 2: 100 بكسل (سطح المكتب) ، 0 بكسل (الكمبيوتر اللوحي والهاتف)

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

تحميل الصور

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

تباعد

سنزيد عرض وحدة الصورة عن طريق إضافة هامش أيمن سلبي:

• الهامش الأيمن: -100 بكسل

مربع الظل

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

• مربع الظل الأفقي: 100 بكسل
• مربع الظل الرأسي: 100 بكسل
• قوة انتشار الظل المربع: -14 بكسل
• لون الظل: #efefef

وحدة نص زر استنساخ ووضع أسفل وحدة الصورة

حدد & استنساخ وحدة نص الزر

سنقوم بإعادة استخدام جميع الوحدات النصية الثلاثة للقسم الأول بدءًا من الزر Text Module. المضي قدما واستنساخه.

ضع الصورة أدناه

ثم ضعه أسفل وحدة الصورة في العمود الأول.

استنساخ الوحدة النمطية الأولى للنص في القسم الأول ووضعها في العمود 2

حدد موقع & استنساخ وحدة النص

الوحدة النصية التالية التي نحتاجها هي الأولى في قسمنا. المضي قدما واستنساخ هذا أيضا.

ضع في العمود 2

بدلاً من وضعها في العمود الأول ، قم بإسقاطها في العمود الثاني.

استنساخ وحدة نص العنوان ووضعها في العمود 2

حدد موقع & استنساخ وحدة النص

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

ضع في العمود 2

بعد استنساخه ، ضعه في العمود الثاني من صفك الجديد.

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

قم بتغيير المحتوى في مربع المحتوى الخاص بك إلى H2.

إعدادات نص H2

بعد ذلك ، أضف الإعدادات التالية إلى إعدادات نص H2:

• خط العنوان 2: جورجيا
• لون نص العنوان 2: # 666666
• حجم نص العنوان 2: 58 بكسل
• العنوان 2 تباعد الأحرف: 3 بكسل

إضافة وحدة نص الوصف

إعدادات النص

أسفل العنوان Text Module ، سنضيف وصفًا لوحدة نصية مع إعدادات النص التالية:

• وزن خط النص: خفيف
• تباعد حروف النص: 1 بكسل

تحجيم

انطلق وقم بتغيير حجم وحدة النص هذه:

• العرض: 70٪
• محاذاة الوحدة: صحيح

أضف وحدة Divider Module # 1

الرؤية

الوحدة التالية التي سنحتاجها هي وحدة Divider Module. تأكد من تمكين خيار إظهار الحاجز.

اللون

غيّر لون المقسّم إلى "# 666666".

تباعد

أضف بعض المسافات بعد ذلك:

• الهامش الأعلى: 100 بكسل
• الهامش الأيسر: 400 بكسل (سطح المكتب) ، 300 بكسل (جهاز لوحي) ، 200 بكسل (هاتف)
• الهامش الأيمن: -100 بكسل

حيوية

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

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

إضافة وحدة تقسيم رقم 2

الرؤية

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

اللون

غيّر لون المقسّم إلى "# d67787".

تحجيم

استخدم "2 بكسل" لوزن الحاجز.

تباعد

وأضف إعدادات التباعد التالية:

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

حيوية

للإنهاء ، أضف رسمًا متحركًا دقيقًا إلى الحاجز:

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

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة.

افكار اخيرة

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