تم الكشف عن أفضل الطرق لإنشاء أعمدة في WordPress

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

يمكن تسخير طرق متعددة على WordPress لإنشاء تخطيط متعدد الأعمدة.

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



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

كيفية إنشاء أعمدة في WordPress

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

أضف أعمدة إلى نسق WP الخاص بك باستخدام CSS و HTML

يعمل مُخصص نسق WP على تبسيط عملية تحرير ورقة أنماط السمة الخاصة بك.

انتقل إلى قائمة المظهر ، وحدد 'تخصيص' ، ثم 'CSS إضافية'.

أدخل ما يلي:

.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
}
.column-center {
display: inline-block;
width: 33.333%;
}

ثم في محرر WP ، استخدم محرر 'النص' والصق HTML التالي ...

<div class="container">
<div class="column-left">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-center">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-right">
<h2>insert column title</h2>
Type your text in here.
</div>
</div>

يضيف مخصص CSS الشفرة إلى ورقة أنماط السمة الخاصة بك. بمجرد الإضافة ، استخدم HTML لإدراج الأعمدة.

قم بإنشاء تخطيطات أعمدة معقدة بسهولة باستخدام محرر كتلة WP

توجد كتلة مجمعة في Gutenberg لإنشاء تخطيطات الأعمدة.

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

التالي هو إعداد المحتوى الخاص بك داخل الكتلة.

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

بدلاً من ذلك ، يمكنك بناء الكتل داخل الكتل.

أضف كتلة 'عنوان' ، ثم كتلة فقرة ، أو نص وصورة. صمم أعمدتك حسب رغبتك.

على سبيل المثال ، يستخدم التخطيط أدناه تخطيطًا من عمودين (70:30) لعرض المحتوى الخاص بنا على اليسار مع محاذاة الصور إلى اليمين.

يتم إدراج الصور في العمود الثاني بعمودين 50:50 مكدسين بجانب كتلة الفقرة.

يجعل محرر الكتل من السهل تصميم المخططات المعقدة باستخدام الأعمدة.

قد يستغرق إنشاء تخطيط مثل المخطط الموضح أعلاه وقتًا طويلاً للتشفير يدويًا باستخدام CSS و HTML.

بالنسبة لتخطيطات الأعمدة المعقدة ، سيساعد استخدام محرر الكتلة.

استخدم WordPress الرموز القصيرة في نهاية المطاف توصيل في

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

انتقل إلى صفحة الملحقات الخاصة بك ، وانقر فوق إضافة جديد وابحث عن Shortcodes Ultimate.

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

الأعمدة هي ميزة مجانية. الرموز القصيرة ذات الأيقونة الحمراء مميزة. الآخرون أحرار.

حدد الأعمدة ، ثم اتبع التعليمات لتصميمها بالشكل الذي تريده.

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

وضع هذا في محرر النصوص ...

<h2><span style="color: #ff0000;">Learn More</span></h2>
 About Us 
 Services 
 FAQs 
 Feedback
 Pricing 

عندما يكون '1/5' في الرموز القصيرة أعلاه ، تتحكم هذه الأرقام في عدد الأعمدة التي يتم إدراجها. استخدم '1/3' لثلاثة أعمدة.

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

نظرًا لأنها رموز قصيرة ، يمكن وضعها في أي مكان على موقعك. لا يلزم العبث مع CSS.

إذا كنت لا ترغب في إضافة مكونات إضافية أو استخدام محرر الكتلة ، أو إذا كنت تستخدم WordPress.com ، فلا يزال بإمكانك الاستفادة من الأعمدة ، فقط مع تصميم وتخصيص أقل بكثير ...

كيفية إنشاء أعمدة في WordPress باستخدام HTML

بالنسبة لمستخدمي WordPress.com دون الوصول إلى أداة تخصيص CSS ، فإن HTML داخل محرر WordPress الخاص بك هو الطريقة الوحيدة لإنشاء الأعمدة.

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

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

في محرر WP ، انقر فوق علامة تبويب النص لتحرير المحتوى الخاص بك باستخدام HTML وأدخل ما يلي:

 <div style="width: 33.3%; padding: 20px; float: left;"> 

ثلاثة عناصر HTML تتحكم في تخطيط العمود الخاص بك.

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

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

الجزء الأخير هو العنصر العائم. يستخدم هذا لتعويم الأعمدة إلى يسار أو يمين الصفحة.

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

<div style="width: 50%; padding: 20px; float: left;">Your content here</div>
<div style="width: 50%; padding: 20px; float: left;">Your second column content here</div>

أنشئ جدول HTML لإضافة أعمدة ذات حدود في WordPress

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

تقوم تعليمات HTML البرمجية التالية بإنشاء جدول من عمودين

<table style="width: 100%; height: 48px;" border="”5″" width="”1200″" cellspacing="”50″" cellpadding="”50″">
<tbody>
<tr style="background-color: #fff73f;">
<td style="text-align: center; height: 16px;"><strong>Column Title </strong></td>
<td style="text-align: center; height: 16px;"><strong>Next column title</strong></td>
</tr>
<tr style="height: 16px;">
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
</tr>
</tbody>
</table>

على غرار إنشاء أعمدة بدون حدود في HTML ، يمكن تعديل حجم جداول HTML عن طريق تغيير العرض والارتفاع. كما يمكن ألوان الخلفية.

لإنشاء جدول بتنسيق HTML في WordPress ، اضبط 'نمط الجدول' أولاً ثم اسقطه في لتحميل المحتوى.

هو 'صف الجدول'. هي عبارة عن 'تفاصيل الجدول'.

يتم تعيين عناوين الأعمدة في الصف. استخدم منطقة تفاصيل الجدول لإدراج فقرات المحتوى داخل عمود.