كيفية التفاف النص حول الصور في Divi (3 طرق)

نشرت: 2019-05-27

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

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

  1. كيفية التفاف النص حول الصور (والاقتباسات) داخل وحدة نصية باستخدام محرر WYSIWYG
  2. كيفية التفاف النص حول صورة عن طريق تحريك وحدة صورة بجانب وحدة نصية في Divi
  3. كيفية التفاف النص حول صورة مركزية لتخطيط فريد من عمودين

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

نظرة خاطفة

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

ديفي التفاف النص حول الصور

هيا بنا نبدأ!

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

قم بتنزيل نص التفاف حول تخطيط الصور مجانًا

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

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

تنزيل مجاني

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

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

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

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

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

للبدء ، كل ما تحتاجه هو Divi وبعض الصور.

  • Divi - تأكد من تثبيت Divi Theme وتنشيطه. سنقوم بإنشاء تصميماتنا من البداية باستخدام Divi Builder في الواجهة الأمامية (منشئ بصري).
  • الصور - تأكد أيضًا من وجود صورة واحدة على الأقل بحجم 400 × 250 بكسل لاستخدامها في البرنامج التعليمي.

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

كيفية التفاف النص حول الصور والاقتباسات المحظورة داخل وحدة نصية باستخدام محرر WYSIWYG

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

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

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

ديفي التفاف النص حول الصور

قم بتحديث محتوى الوحدة النصية بنسختك. في الوقت الحالي ، أستخدم فقرتين من lorem ipsum.

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

سيضيف WordPress فئة إلى صورتك (تسمى "alignleft") والتي ستطفو الصورة إلى اليسار. ستسمح خاصية الطفو التي تمت إضافتها للنص بالالتفاف حول الصورة. سيضيف WordPress أيضًا مخزنًا مؤقتًا حول الصورة باستخدام الهوامش لإنشاء مسافة صغيرة بين الصورة والنص المحيط.

ديفي التفاف النص حول الصور

وبالطبع ، إذا أعطيت الصورة محاذاة صحيحة ، فستطفو الصورة إلى اليمين مما يسمح للنص بالالتفاف حول الصورة.

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

ثم نمط blockquote باستخدام إعدادات الوحدات النمطية النصية المضمنة لـ blockquote.

ديفي التفاف النص حول الصور

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

<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>

ديفي التفاف النص حول الصور

الآن سوف يلتف النص حول blockquote.

ديفي التفاف النص حول الصور

كيفية التفاف النص حول صورة عن طريق تحريك وحدة صورة بجانب وحدة نص في Divi

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

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

قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف وحدة صورة إلى الصف بالصورة التي تختارها. الصورة التي أستخدمها مأخوذة من Charity Layout Pack وهي 400 × 250 بكسل.

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

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

float:left;

ديفي التفاف النص حول الصور

ثم قم بتحديث الهامش المخصص للصورة لإنشاء المخزن المؤقت الذي نحتاجه لالتفاف النص حول الصورة:

الهامش المخصص: 2٪ أعلى ، 2٪ أسفل ، 2٪ يمين

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

ديفي التفاف النص حول الصور

ديفي التفاف النص حول الصور

وإذا كنت تريد تحريك الصورة إلى اليمين ، فافتح إعدادات وحدة الصورة واستبدل css بما يلي: 

float:right;

ديفي التفاف النص حول الصور

وتحديث تباعد الهامش إلى ما يلي:

الهامش المخصص: 2٪ للأعلى ، 2 دولار للأسفل ، 2٪ متبقية

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

باستخدام هذا التصميم على عدة أعمدة

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

ديفي التفاف النص حول الصور

ثم امنح الصورة قيمة النسبة المئوية للعرض الأقصى بحيث تستجيب لعروض المتصفح المختلفة.

أقصى عرض: 33.33٪ (سطح المكتب) ، 100٪ (الهاتف)

ديفي التفاف النص حول الصور

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

هذا كل شيء. ها هي النتيجة.

ديفي التفاف النص حول الصور

ديفي التفاف النص حول الصور

ديفي التفاف النص حول الصور

كيفية التفاف النص حول صورة مركزية أو وحدة نمطية لتخطيط فريد من عمودين

ديفي التفاف النص حول الصور

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

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

إنشاء محتوى الصف العلوي بصورة مركزية

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

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

العرض الأقصى: 400 بكسل (سطح المكتب) ، 100٪ (الكمبيوتر اللوحي)
محاذاة الوحدة: مركز
حشوة مخصصة: 2٪ أعلى ، 2٪ أسفل ، 2٪ يسار ، 2٪ يمين

ديفي التفاف النص حول الصور

ثم احفظ إعداداتك وافتح إعدادات الصف. أخرج الحشوة السفلية للصف.

الحشو المخصص: أسفل 0 بكسل

ديفي التفاف النص حول الصور

قم بإنشاء صف عمودين للنص

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

ديفي التفاف النص حول الصور

في العمود 1 ، أضف وحدة نصية مع بعض المحتوى الوهمي.

ديفي التفاف النص حول الصور

ثم انسخ وحدة النص والصقها في العمود 2 للعمود الثاني من النص.

ديفي التفاف النص حول الصور

إنشاء مساحة فارغة مع فواصل عائمة

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

للقيام بذلك ، قم بإنشاء وحدة فاصل ووضعها مباشرة فوق وحدة النص في العمود 1.

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

إظهار المقسم:
العرض: 200 بكسل
الارتفاع: 250 بكسل

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

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

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

ديفي التفاف النص حول الصور

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

float: right;

ديفي التفاف النص حول الصور

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

float: left;

ديفي التفاف النص حول الصور

نقل الصورة إلى مكانها باستخدام هامش مخصص

كل ما علينا فعله الآن هو إنزال صورتنا في الصف الأول إلى الأسفل بحيث تتناسب مع المساحة التي أنشأناها باستخدام المقسمات.

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

الهامش المخصص: -250 بكسل أسفل (سطح المكتب) ، 20 بكسل (جهاز لوحي)

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

ديفي التفاف النص حول الصور

إضافة عنوان للقسم

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

ثم أضف المحتوى التالي إلى وحدة النص: 

<h2>Learn more about how to give</h2>

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

لون الخلفية: # 000000
خط العنوان 2: عرض Playfair
العنوان 2 محاذاة النص: الوسط
لون النص العنوان 2: #ffffff
ارتفاع خط العنوان 2: 2em

ديفي التفاف النص حول الصور

ضبط النص لتصميم التفاف النص الأنظف

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

ديفي التفاف النص حول الصور

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

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

ديفي التفاف النص حول الصور

وها هو على شاشة الكمبيوتر اللوحي والهاتف.

ديفي التفاف النص حول الصور

ديفي التفاف النص حول الصور

افكار اخيرة

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

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

هتافات!