نسّقوا محتوى متعدد الأعمدة.

تعلّم DXPR Builderبناء الصفحاتاتبعوا دليلًا تطبيقيًا

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

يبني الفيديو صفحة جمع نفايات لمجلس.

قبل أن تبدؤوا

  • يملك دوركم صلاحية التحرير باستخدام DXPR Builder.
  • الصفحة مفتوحة في المنشئ. فلصفحة جديدة، انتقلوا إلى المحتوى > إضافة محتوى > صفحة هبوط (/node/add/landing_page) وانقروا حفظ.
  • تهبط العناصر الجديدة في أعلى قسمها. ولذلك يدخل كل عنوان بعد صفه: فيهبط فوقه.

اختيار تخطيط

التخطيط الأنسب لـ الإعداد المسبق
محتوى بشريط جانبي مقالات بروابط ذات صلة 2/3 + 1/3
نصفان متساويان مقارنات، قبل وبعد الافتراضي للصف
ثلاثة أثلاث متساوية أبرز الميزات، الخدمات 1/3 + 1/3 + 1/3
أربعة أرباع متساوية إحصاءات، بطاقات صغيرة 1/4 + 1/4 + 1/4 + 1/4

يأتي الصف الجديد بعمودين متساويين. ويأتي كل تخطيط آخر من أيقونة شبكة الصف (تخطيط الأعمدة).

الخطوة 1: محتوى بشريط جانبي

  1. انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط.
  2. انقروا + على القسم واختاروا صفًا. انقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 2/3 + 1/3 وانقروا حفظ.
  3. انقروا + في العمود الواسع واختاروا نصًا من تبويب المحتوى. اكتبوا المقال، واضبطوا السطر الأول على عنوان 3 وانقروا حفظ.
  4. انقروا + في العمود الضيق واختاروا نصًا. اكتبوا «ذات صلة» كـ عنوان 4، وأضيفوا سطرًا واحدًا لكل صفحة ذات صلة وانقروا حفظ.
  5. انقروا + على القسم واختاروا نصًا؛ فيهبط فوق الصف. اكتبوا «محتوى بشريط جانبي» كـ عنوان 2 وانقروا حفظ.

الخطوة 2: نصفان متساويان

  1. مرّروا المؤشر فوق القسم وانقروا إضافة قسم تحت. افتحوا المزيد > الإعدادات للقسم الجديد، واختاروا خلفية رمادية فاتحة في لوحة النمط وانقروا حفظ.
  2. انقروا + على القسم واختاروا صفًا. فالعمودان المتساويان هما الافتراضي، ولا شيء لتغييره.
  3. أضيفوا عنصر نص في كل عمود: «قبل» و«بعد» كـ عنوان 4 مع سطر واحد لكل منهما.
  4. أضيفوا عنوان «نصفان متساويان» بالطريقة نفسها كما في الخطوة 1.

الخطوة 3: ثلاثة أثلاث متساوية

  1. أضيفوا قسمًا ثالثًا مع إضافة قسم تحت وامنحوه فئة توسيط النص.
  2. أضيفوا صفًا، وانقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.
  3. أضيفوا عنصر نص في كل عمود: «ورق» و«زجاج» و«عضوي» كـ عنوان 4 مع سطر واحد لكل منها.
  4. أضيفوا عنوان «ثلاثة أثلاث متساوية».

الخطوة 4: أربعة أرباع متساوية

  1. أضيفوا قسمًا رابعًا مع خلفية رمادية فاتحة وفئة توسيط النص.
  2. أضيفوا صفًا، وانقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 1/4 + 1/4 + 1/4 + 1/4 وانقروا حفظ.
  3. أضيفوا عنصر نص في كل عمود: اليوم كـ عنوان 4 وما يُجمَع.
  4. أضيفوا عنوان «أربعة أرباع متساوية».

الخطوة 5: الحفظ والمعاينة

  1. انقروا حفظ على شريط أدوات المنشئ.
  2. افتحوا قائمة العرض (أيقونة العين) واختاروا معاينة.

على الشاشات الأصغر

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

للمضي أبعد

غير معروض في الفيديو:

  • ضيق، واسع، ضيق: الإعداد المسبق 1/4 + 1/2 + 1/4 يُبقي النص الطويل مقروءًا بهوامش فارغة.
  • عكس الصف: فعّلوه في إعدادات الصف لتبديل الأعمدة على الأجهزة اللوحية والحواسيب. وتبقي الهواتف على الترتيب الأصلي، فيأتي العمود الأول أولًا هناك أيضًا.

ما سترونه

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

إذا لم تظهر الأعمدة كما هي معروضة

  • الصف بعدد أعمدة خطأ. لا يُطبَّق الإعداد المسبق إلا عندما تنقرون حفظ في مربع التخطيط. انقروا أيقونة شبكة الصف (تخطيط الأعمدة) مجددًا، واختاروا الإعداد المسبق وانقروا حفظ.
  • عنوان يجلس تحت صفه. دخل العنوان قبل الصف، والعناصر الجديدة تهبط في أعلى قسمها. اسحبوا العنوان فوق الصف بمقبض السحب على شريط تحكمه.
  • الأعمدة تتراص على جهاز لوحي. الجهاز اللوحي أضيق من 768 بكسل، كجهاز لوحي صغير بالوضع العمودي. أضيفوا تخطيطًا لذلك العرض مع إضافة حجم شاشة في مربع تخطيط الصف.
  • ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.

ما الخطوة التالية؟