كيفية تصميم ووضع الصور في أماكن مجردة في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل أمثلة التصميم من هذا البرنامج التعليمي مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

بدأت Gettings

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

أنت الآن جاهز للتصميم!

وضع الصور جزئيًا خارج إطار العرض (إلى اليمين أو اليسار)

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

هيريس كيفية القيام بذلك.

إنشاء وتصميم وحدة النص

أولاً ، سنقوم بإنشاء وحدة نصية ستكون بمثابة المحتوى الرئيسي لقسمنا.

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

قم بتحديث المحتوى ليشمل ما يلي:

<h2>About Us</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

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

خط النص: Raleway
خط العنوان 2: Raleway
العنوان 2 وزن الخط: غامق
حجم نص العنوان 2: 44 بكسل (سطح المكتب) ، 24 بكسل (الهاتف)
العرض: 680 بكسل (سطح المكتب) ، 60٪ (كمبيوتر لوحي) ، 80٪ (هاتف)
حشوة مخصصة: 10٪ علوي ، 10٪ سفلي ، 10٪ يسار ، 5٪ يمين

أضف الصورة رقم 1

الآن نحن جاهزون لإضافة الصورة الأولى. انطلق وأضف وحدة صورة مباشرة فوق وحدة النص.

ثم قم بتحميل صورتك إلى وحدة الصورة. تأكد من أن الصورة كبيرة بما يكفي بحيث لا تفقد الجودة عند تكبير الصورة باستخدام خاصية التحويل. أنا أستخدم صورة 400 × 580 بكسل.

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

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

يتيح لنا تقليص وحدة الصورة مثل هذه في البداية تقليل المساحة السلبية للتخطيط. بهذه الطريقة لا يتعين علينا تعديل التباعد باستخدام الهوامش السالبة.

الآن يمكننا تكبير الصورة باستخدام خيارات التحويل كما يلي:

مقياس التحويل - المحور السيني: 416٪
مقياس التحويل المحور ص: 416٪

ثم يمكننا وضع الصورة باستخدام ترجمة التحويل كما يلي:

تحويل المحور السيني للترجمة: -36٪
تحويل المحور ص للترجمة: 41٪

أخيرًا ، يمكنك تدوير الصورة باستخدام استدارة التحويل:

تحويل تدوير المحور Z: 11 درجة

الآن نحن جاهزون لإضافة الصورة الثانية. انطلق وأضف وحدة صورة مباشرة أسفل وحدة النص.

ثم قم بتحميل صورة جديدة إلى وحدة الصورة.

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

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

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

ثم قم بتحديث خيارات التحويل كما يلي:

مقياس التحويل X- المحور: 464٪
مقياس التحويل المحور ص: 464٪

تحويل المحور السيني للترجمة: 7٪
تحويل المحور ص للترجمة: -80٪

تحويل تدوير المحور Z: -10deg

ثم أضف ظل مربع لعنصر تصميم إضافي.

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: -20 بكسل
مربع الظل الوضع الرأسي: -7 بكسل

التأكد من بقاء وحدة النص في المقدمة

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

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

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

position: relative;

ثم اضبط Z-index على 1.

إخفاء تجاوز القسم

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

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

overflow: hidden;

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

إنشاء خلفية صورة مجمعة مجردة لرأسك

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

هيريس كيفية القيام بذلك.

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

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

<h1>Interior Design</h1>
<p>This is some content</p>

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

لون الخلفية: rgba (0،0،0،0.07)
لون نص النص: #ffffff
اتجاه النص: الوسط
خط العنوان: Raleway
وزن خط العنوان: غامق
محاذاة نص العنوان: صحيح
لون نص العنوان: #ffffff
حجم نص العنوان: 44 بكسل (سطح المكتب) ، 34 بكسل (الجهاز اللوحي) ، 24 بكسل (الهاتف)
العرض: 500 بكسل (سطح المكتب) ، 60٪ (كمبيوتر لوحي) ، 80٪ (هاتف)
محاذاة الوحدة: المركز
الحشو المخصص: 5vw top ، 5vw bottom ، 1vw right

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

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

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

لون الخلفية: # 4c606d
الحشو المخصص (سطح المكتب): 0 بكسل أعلى ، 0 بكسل أسفل
الحشو المخصص (الكمبيوتر اللوحي): 20 بكسل أسفل
الحشو المخصص (الهاتف): 40 بكسل أسفل

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

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: -80 بكسل
لون الظل: #ffffff

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

overflow: hidden;

إعدادات الصف 1

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

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

الحشو المخصص: أعلى 10vw
الفهرس Z: 10

إنشاء كلية الصور المجردة

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

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

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

مضيفا صف الصور

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

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

العرض المخصص: 50٪
عرض الحضيض: 1

ولمحاذاة جميع الوحدات في هذا الصف أفقيًا ، أضف CSS التالي إلى Column Main Element:

display: flex;

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

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

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

وضع الصور مع تحويل الترجمة

حان الوقت لبدء وضع صورنا لإنشاء مجمعة لدينا.

الصورة رقم 1

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

مقياس التحويل - المحور السيني: 266٪
مقياس التحويل المحور ص: 266٪

ترجمة التحويل: المحور السيني: -68٪
ترجمة التحويل: المحور الصادي: -54٪

الصورة رقم 2

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

مقياس التحويل - المحور السيني: 184٪
مقياس التحويل المحور ص: 184٪

ترجمة التحويل: المحور السيني: -36٪
ترجمة التحويل: المحور الصادي: -66٪

الصورة رقم 3

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

مقياس التحويل X- المحور: 206٪
مقياس التحويل Y- المحور: 206٪

ترجمة التحويل: المحور السيني: -51٪
ترجمة التحويل: المحور الصادي: -27٪

الصورة رقم 4

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

مقياس التحويل المحور السيني: 180٪
مقياس التحويل المحور ص: 180٪

ترجمة التحويل: المحور السيني: 20٪
ترجمة التحويل: المحور الصادي: 42٪

الصورة رقم 5

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

مقياس التحويل X- المحور: 290٪
مقياس التحويل Y- المحور: 290٪

ترجمة التحويل: المحور السيني: -50٪
ترجمة التحويل: المحور الصادي: 72٪

إضافة مربع الظل للصور

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

ثم قم بتحديث ما يلي:

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: -40 بكسل
مربع الظل الرأسي: 40 بكسل
لون الظل: rgba (255،255،255،0.13)

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

ها هي النتيجة النهائية للتصميم.

سطح المكتب

لوح

هاتف

افكار اخيرة

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

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

هتافات!