عند تغطية مراجعات المنتجات وجداول المقارنة والبرامج التعليمية وقصص السفر والرسوم البيانية والمحتوى التعليمي وما إلى ذلك، قد تضطر إلى وضع النصوص والصور جنبًا إلى جنب. هناك العديد من الطرق للقيام بذلك في WordPress.
في هذه المقالة، سنعرض لك عدة طرق فعّالة لوضع النص والصورة جنبًا إلى جنب في WordPress. لذا، كن معنا حتى النهاية. ستتعلم شيئًا مثيرًا حقًا.
الطريقة 1: استخدام كتلة الوسائط والنص
الوسائط والنصوص هي كتلة افتراضية لمحرر الكتل Gutenberg. باستخدام هذه الكتلة، يمكنك وضع النصوص والصور جنبًا إلى جنب دون الاعتماد على أي أداة خارجية.
الخطوة 01: إضافة الوسائط والنص إلى المحرر
انقر على أيقونة زائد (+) على المحرر. النوع الوسائط والنصوص في شريط البحث. أضف الكتلة إلى المحرر.
الخطوة 02: إضافة/تحميل صورة إلى الكتلة
يمكنك إضافة صورة سواء عن طريق تحميلها من محرك الأقراص المحلي أو مكتبة الوسائط أو من محرك الأقراص المميز. اختر الخيار الذي يعجبك.
يمكنك رؤية الصورة المضافة إلى الكتلة.
الخطوة 03: إضافة نص إلى الوسائط وكتلة النص
اكتب النص الذي تريده في العمود الأيمن من المربع. يمكنك تخصيص لون النص ومحاذاته وغير ذلك إذا أردت.
الخطوة 04: تبديل موضع النص وملف الوسائط
تتيح لك هذه الكتلة تبديل موضع النصوص وملفات الوسائط من خلال النقر فوق الخيارات ذات الصلة على شريط الأدوات.
الطريقة 2: استخدام كتلة الأعمدة
ال الأعمدة إنها أيضًا كتلة افتراضية للمحرر. وهي واحدة من أكثر الكتل استخدامًا في إنشاء محتوى WordPress.
الخطوة 01: إضافة كتلة الأعمدة إلى المحرر
يمكنك عرض النص والصورة جنبًا إلى جنب عن طريق إضافة فقرة و كتل الصور بشكل منفصل داخل كتل الأعمدة.
لذا، أضف كتلة الأعمدة أولا إلى المحرر.
حدد تخطيطًا مكونًا من عمودين.
الخطوة 02: إضافة كتلة الصورة إلى كتلة الأعمدة
من الأفضل عرضها على اليسار. أضف كتلة الصورة إلى العمود الأيسر.
مرة أخرى، قم بإضافة الصورة المطلوبة، سواء من محرك الأقراص المحلي، أو مكتبة الوسائط، أو من خلال عنوان URL.
يمكنك رؤية الصورة التي تمت إضافتها إلى الكتلة.
الخطوة 03: إضافة نص إلى كتلة Cloumns
أضف كتلة الفقرة إلى العمود الأيمن. سيسمح لك هذا بإضافة نص.
يمكنك رؤية النص المضاف إلى العمود.
بعد ذلك، يمكنك تخصيص كتلة الأعمدة، بما في ذلك الصورة والنص الموجود عليها.
الطريقة 3: استخدام كتلة Tableberg
Tableberg هو مكون إضافي رائع لبناء الجداول يتيح لك تصميم أجزاء عديدة لموقعك على الويب. يتيح لك هذا المكون الإضافي أيضًا وضع النصوص والصور جنبًا إلى جنب. قم بتنزيل المكون الإضافي بالنقر فوق الأزرار المرفقة باللافتة أدناه.
إنشاء جداول جميلة
مع محرر الكتل
ابدأ باتباع البرنامج التعليمي الآن.
الخطوة 01: إضافة كتلة Tableberg إلى المحرر
تضيف هذه الإضافة كتلة تسمى Tableberg إلى مكتبة كتل Gutenberg. أضف كتلة Tableberg الى المحرر.
حدد عدد الأعمدة والصفوف التي تحتاجها للتخطيط. سنختار 2*1.
يمكنك رؤية الأعمدة والصفوف جاهزة.
الخطوة 02: إضافة صورة إلى خلية الجدول
يتيح لك Tableberg إضافة عدة كتل مخصصة إلى خلاياه. بالنقر فوق أيقونة زائد (+)، تجد و أضف كتلة الصورة إلى إحدى خلاياها.
قم بتحميل الصورة إلى محرك الأقراص المحلي أو أضف واحدة من مكتبة الوسائط الخاصة بك.
لقد أضفنا صورة، يمكنك رؤيتها أدناه.
الخطوة 03: إضافة نص إلى الجدول
قم ببساطة بإضافة النص إلى العمود الأيمن باستخدام كتلة الفقرة.
الخطوة 04: تعديل حدود Tableberg
يمكنك جعل هذا القسم أكثر جاذبية عن طريق إزالة حدود الجدول أو استعمارها. اذهب الى ال علامة التبويب "الأنماط".
تعال إلى حدود الطاولة من خلال التمرير لأسفل علامة التبويب، ستحصل على خيارات لإزالة حدود الجدول أو تلوينها من هذه الخيارات.
وبذلك، يمكنك إنشاء أقسام ويب لوضع النص والصورة جنبًا إلى جنب في WordPress.
الطريقة 4: استخدام كتلة المنزلق
هل تريد عرض النص والصور جنبًا إلى جنب في شريط تمرير تفاعلي؟ يمكنك استخدام سلايدربرج تتيح لك الإضافة القيام بذلك بالضبط - باستخدام مكوِّن الوسائط والنصوص المألوف، بمرونة كاملة. إليك كيفية إعداده في بضع دقائق فقط:
الخطوة 1: تثبيت ملحق Sliderberg وتفعيله
أولاً، انتقل إلى الإضافات → إضافة جديد في لوحة تحكم WordPress الخاصة بك، وابحث عن "Sliderberg"، وانقر على قم بالتثبيت الآن. ثم قم بتفعيل المكون الإضافي.
الخطوة 2: إدراج مكوِّن المنزلق المنزلق
قم بتحرير مشاركتك أو صفحتك. انقر على + وابحث عن "Sliderberg"، وأدرج مكوِّن Sliderberg في المكان الذي تريد أن يظهر فيه شريط التمرير.
الخطوة 3: حدد نوع "شريط تمرير الكتل
عندما يُطلب منك ذلك، اختر شريط تمرير الكتل الخيار. يتيح لك هذا إضافة أي مكوِّنات Gutenberg داخل كل شريحة.
الخطوة 4: اختر لون خلفية لشريط التمرير
اختر لون خلفية لشريط التمرير الخاص بك لتتناسب مع نمط موقعك، أو احتفظ به شفافًا للحصول على مظهر نظيف.
الخطوة 5: إضافة مكوِّن "الوسائط والنص" داخل شريط التمرير
داخل الشريحة الأولى، انقر على + وأدخل زر الوسائط والنصوص حاجز.
الخطوة 6: إضافة صورة ونص إلى شريط التمرير
استخدم مكوِّن الوسائط والنص لرفع صورتك (الجانب الأيسر) وإضافة نصك (الجانب الأيمن). يمكنك استخدام العناوين أو الفقرات أو الأزرار أو أي مكوِّنات أخرى تحتاج إليها.
الخطوة 7: إضافة الشرائح أو تكرارها
هل تريد المزيد من الشرائح؟ انقر فوق إضافة شريحة لإنشاء واحدة جديدة، أو شريحة مكررة لنسخ تخطيط موجود.
الخطوة 8: تخصيص شريط التمرير والنشر
عدِّل إعدادات شريط التمرير (الرسوم المتحركة، والتشغيل التلقائي، وأسهم التنقل، وما إلى ذلك) لتتناسب مع تفضيلاتك. عندما تكون جاهزًا، انقر على نشر لبدء البث المباشر!
أصبح لديك الآن شريط تمرير سلس وسريع الاستجابة يعرض النص والصورة جنبًا إلى جنب - مثالي لعروض الفريق والمنتجات والشهادات والمزيد.
نصيحة للمحترفين: يمكنك استخدام أي مكوِّن داخل شرائح Sliderberg الخاصة بك - وليس فقط الوسائط والنصوص! كن مبدعًا باستخدام الأزرار، أو الأيقونات، أو الأعمدة، أو حتى مكوِّنات الطرف الثالث.
خاتمة
في الواقع، يمكنك الاستفادة من كتل Gutenberg الافتراضية لإنشاء وتصميم منشوراتك وصفحاتك على الويب. ولكن نظرًا لأنها تفتقر إلى العديد من الميزات المتقدمة، فغالبًا ما تحتاج إلى مكونات إضافية للكتل تأتي مع العديد من الميزات المثيرة.
Tableberg هو مكون إضافي مثير يمكنك استخدامه في هذه الحالة. Ultimate Blocks هو مكون إضافي آخر رائع يجب أن تفكر فيه. استكشف الإصدارات المجانية لهذين المكونين الإضافيين من خلال النقر على الأزرار المرفقة أدناه.
اقرأ أيضاً:
