صور التفاف النص هي تقنية تصميم شائعة ، تُستخدم عادةً في الوسائط المطبوعة ، مثل المجلات والصحف. ولكن يمكنك أيضًا العثور على هذا مستخدمًا على الويب ، خاصةً منشورات المدونات. يعد التفاف النص حول صورة في الواقع جزءًا قياسيًا من WordPress يتضمن تعديلًا بسيطًا للمحاذاة في محرر WYSIWYG. المشكلة الوحيدة هي أنه من الصعب تصميم صفحتك باستخدام محرر WordPress الافتراضي. هذا هو حيث Divi استطيع المساعدة !
على الرغم من أن هذا البرنامج التعليمي يركز على الصور ، إلا أنه يمكنك بالفعل استخدام نفس العملية لالتفاف النص في أي وحدة نمطية. Divi.
مسح
فيما يلي نظرة على التصميم الرئيسي الذي سنبنيه اليوم.
في هذا المثال ، سأوضح لك كيفية التفاف عمودين من النص حول وحدة صورة مركزية. يتيح لك ذلك إنشاء تصميم فريد لمجلة أو صحيفة. ولكن ، نظرًا لعدم وجود خاصية css "float: center" ، سنحتاج إلى القليل من الإبداع في التخطيط لجعل هذا التصميم يعمل.
إليك كيفية القيام بذلك.
إنشاء محتوى في الصف العلوي مع صورة مركزية
للبدء ، قم بإنشاء قسم عادي جديد بصف من عمود واحد. ثم أضف وحدة صورة إلى صفك. قم بتحميل صورة بحجم 400 بكسل في 250 بكسل. يجب أن يكون الحجم دقيقًا لهذا التصميم.
ثم قم بتحديث معلمات التصميم كما يلي:
الحد الأقصى للعرض: 400px (سطح المكتب) ، 100٪ (الكمبيوتر اللوحي)
محاذاة الوحدة: المركز
الحشوة المخصصة: 2٪ في الأعلى ، 2٪ في الأسفل ، 2٪ في اليسار ، 2٪ في اليمين
ثم احفظ إعداداتك وافتح إعدادات الخط. أخرج الحشوة من أسفل الصف.
الحشوة المخصصة: 0px في الأسفل
إنشاء سطر عمودين من النص
أسفل الصف الذي يحتوي على الصورة ، قم بإنشاء صف جديد بتخطيط عمودين.
في العمود 1، أضف وحدة نصية تحتوي على a محتويات غبي.
خلق مساحة فارغة مع فواصل عائمة
لإنشاء المساحة التي نحتاجها للصورة ، يمكننا استخدام وحدات القسمة. في العمود الأيسر ، سنقوم بإنشاء وحدة فاصل بنصف حجم الصورة ونحركها إلى اليمين حتى تلتف وحدة النص الخاصة بنا حول الحاجز. ثم في العمود الأيمن سنقوم بإنشاء فاصل آخر بنصف حجم الصورة ونقوم بتعويمها إلى اليسار.
للقيام بذلك ، قم بإنشاء وحدة فصل ووضعها أعلى وحدة النص مباشرةً في عمود 1.
ثم قم بتحديث إعدادات وحدة المقسم كما يلي:
إظهار المقسم: لا
العرض: 200px
الارتفاع: 250px
تأكد من أن الارتفاع هو نفسه الذي تم إنشاؤه مسبقًا وأن العرض يساوي نصف عرض الصورة بالضبط.
بالنسبة للجوال، نريد تعطيل الفواصل على الجهاز اللوحي والهاتف. للقيام بذلك، قم بتحديث إعدادات الرؤية لإيقاف تشغيل شاشة الكمبيوتر اللوحي والهاتف.
الآن وبعد إنشاء الفاصل الأول لدينا ، انسخ وحدة الفصل ولصقها أعلى وحدة النص في عمود 2.
بعد ذلك ، نحتاج إلى تعويم فواصلنا. للقيام بذلك ، افتح إعدادات الحاجز في العمود 1 وأضف كود CSS المخصص التالي إلى العنصر الرئيسي:
تعويم: يمين
ثم افتح إعدادات وحدة التقسيم في العمود 2 وأضف كود CSS المخصص التالي إلى العنصر الرئيسي:
تعويم: غادر؛
انقل الصورة إلى مكانها بهامش مخصص
الآن علينا فقط تقليل صورتنا في الصف الأول حتى تتناسب مع المساحة التي أنشأناها باستخدام الفواصل.
افتح إعدادات وحدة الصورة وأضف الهوامش المخصصة التالية:
الهامش المخصص: منخفض - 250px (سطح المكتب) ، 20px (الكمبيوتر اللوحي)
ها هي النتيجة حتى الآن.
أضف عنوانًا للقسم
هذه الخطوة الأخيرة اختيارية ، ولكن إذا كنت تريد إضافة عنوان إلى القسم ، فأنشئ وحدة نصية وضعها فوق الصورة.
ثم قم بإضافة محتويات التالية لوحدة النص:
تعلم المزيد عن كيفية العطاء
ثم قم بتحديث إعدادات النص كما يلي:
لون الخلفية: #000000
العنوان 2 الخط: عرض Playfair
العنوان 2 محاذاة النص: العنوان المركزي
لون نص 2: #ffffff
العنوان 2 ارتفاع الخط: 2em
ضبط النص لتصميم التفاف نص أنظف
عند إحاطة النص بالصور ، خاصةً إذا تم توسيط النص بهذه الطريقة ، فمن الأفضل دائمًا تبرير النص المحيط. في هذه الحالة ، ما عليك سوى تغيير اتجاه النص إلى يبرر وحدتين نصيتين تحتويان على ملفنا محتويات من التفاف النص.
نتيجة نهائية
ها هي النتيجة النهائية.
الأفكار النهائية
إن معرفة كيفية إحاطة النص بالصور بشكل فعال يمكن أن يجعل المحتوى الخاص بك يبدو احترافيًا وسهل القراءة. . المفهوم بسيط جدا كل ما عليك فعله هو تحريك صورتك إلى اليمين أو اليسار ثم استخدام مسافات مخصصة حول الصورة للتخزين المؤقت. وما يعجبني هو أنه يمكنك استخدام أي وحدة (وليس فقط الصور) لإدراج نص في أي نوع من المحتوى Divi. آمل أن يمنحك هذا القليل من الإلهام لمشروعك القادم.
آمل أن أسمع منك في التعليقات.
مرحبا،
أحاول تكييف هذا البرنامج التعليمي ليحيط بالفيديو …… لكن لا يمكنني ذلك.
هل الإجراء متشابه إلى حد ما؟
شكرا لك طابت ليلتك. ستيف