أنشئوا موقع صفحة واحدة ممرَّرة.

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

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

يبني الفيديو موقع استوديو تصميم اسمه Studio Nord.

قبل أن تبدؤوا

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

الخطوة 1: بناء البطل

  1. انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط.
  2. مرّروا المؤشر فوق القسم وافتحوا المزيد > الإعدادات. اضبطوا معرف HTML على hero، وتحت فئات HTML اختاروا توسيط النص.
  3. فعّلوا ارتفاع 100% ليملأ القسم الشاشة، والتوسيط العمودي ليجلس المحتوى في الوسط.
  4. افتحوا لوحة النمط. تحت صورة الخلفية انقروا اختيار صورة، وحدّدوا صورة وانقروا إدراج المحدد. اضبطوا نمط الخلفية على التغطية، واختاروا الخلفية الكحلية ولون الخط الأبيض، ثم انقروا حفظ.
  5. انقروا + على القسم واختاروا زرًا. اضبطوا العنوان على «اتصال» والرابط على #contact والنوع على فاتح، ثم انقروا حفظ. أضيفوا زرين آخرين بالطريقة نفسها: «الخدمات» مع #services، ثم «نبذة» مع #about. فيهبط كل منهما فوق السابق.
  6. انقروا + مجددًا واختاروا نصًا؛ فيهبط فوق الأزرار. اكتبوا «Studio Nord» كـ عنوان 2 وأضيفوا السطر التعريفي. اضبطوا لون الخط على الأبيض في لوحة النمط وانقروا حفظ. يطبع القالب عنوان الصفحة كالعنوان 1 للصفحة. ولجعل هذا العنوان هو العنوان 1 بدلًا منه، راجعوا بناء صفحات صديقة لتحسين محركات البحث.

الخطوة 2: إضافة قسم النبذة

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

الخطوة 3: إضافة قسم الخدمات

  1. أضيفوا قسمًا ثالثًا مع إضافة قسم تحت وافتحوا المزيد > الإعدادات الخاصة به. اضبطوا معرف HTML على services، واختاروا توسيط النص تحت فئات HTML وخلفية رمادية فاتحة في لوحة النمط. انقروا حفظ.
  2. أضيفوا صفًا، وانقروا أيقونة الشبكة (تخطيط الأعمدة) الخاصة به، واختاروا الإعداد المسبق 1/3 + 1/3 + 1/3 وانقروا حفظ.
  3. انقروا + في العمود الأول واختاروا نصًا. اكتبوا «العلامة» كـ عنوان 3، وأضيفوا سطرًا واحدًا وانقروا حفظ.
  4. انقروا + في العمود نفسه واختاروا الأيقونة؛ فتهبط فوق النص. اختاروا مجموعة Font Awesome Free Solid، وابحثوا عن pen-nib وانقروا الأيقونة. اضبطوا الحجم على كبير للغاية (3x)، وافتحوا أدوات الأيقونة، واضبطوا النمط على دائرة وانقروا حفظ.
  5. كرّروا لـ «المواقع» مع laptop-code ولـ «التحليلات» مع chart-pie.

الخطوة 4: إضافة قسم الاتصال

  1. أضيفوا قسمًا رابعًا وافتحوا المزيد > الإعدادات الخاصة به. اضبطوا معرف HTML على contact، واختاروا توسيط النص تحت فئات HTML وانقروا حفظ.
  2. انقروا + على القسم واختاروا الروابط الاجتماعية. اكتبوا linkedin كعلامة الصف الأول والصقوا عنوان URL للملف، ثم instagram وعنوانه في الثاني. اضبطوا النمط على دائرة والحجم على 2x، ثم انقروا حفظ.
  3. انقروا + مجددًا واختاروا زرًا؛ فيهبط فوق الروابط. اضبطوا العنوان على «راسلونا» والرابط على mailto:hello@studionord.example وأبقوا النوع على أساسي، ثم انقروا حفظ.
  4. انقروا + مجددًا واختاروا نصًا؛ فيهبط فوق الزر. اكتبوا «اتصلوا بنا» كـ عنوان 2 وعنوان بريدكم ورقم هاتفكم تحته، ثم انقروا حفظ.

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

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

للمضي أبعد

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

  • قائمة ثابتة: أنشئوا قائمة على البنية > القوائم > إضافة قائمة برابط واحد لكل قسم، مثل /studio-nord#about، أو <front>#about على الصفحة الأمامية. ضعوها في منطقة الترويسة على البنية > تخطيط الكتل. وفي DXPR Theme، فعّلوا الترويسة الثابتة على المظهر > الإعدادات > DXPR Theme.
  • الصفحة الأمامية: اجعلوا الصفحة صفحتكم الأمامية على الإعدادات > النظام > إعدادات الموقع الأساسية.
  • نموذج الاتصال: أدرجوا نموذجًا من تبويب كتل Drupal بدل النص التمهيدي؛ راجعوا إضافة النماذج إلى الصفحات.

ما سترونه

تملأ الصورة الشاشة مع «Studio Nord» والسطر التعريفي وثلاثة أزرار فاتحة. والنقرة على زر تمرّر الصفحة بسلاسة إلى قسمه. تعرض النبذة صورة الفريق بجانب القصة، والخدمات ثلاث أيقونات محاطة بدوائر على الرمادي، والاتصال عنوان «اتصلوا بنا» وزر راسلونا فوق أيقونتي تواصل دائريتين.

إذا لم تظهر الصفحة كما هي معروضة

  • زر لا يقفز إلى قسمه. الرابط الخاص به لا يطابق معرف HTML للقسم. فالرابط هو # مع المعرف نفسه تمامًا، مثل #about للمعرف about.
  • قسم يهبط تحت ترويستكم الثابتة. لا يعرف المنشئ ارتفاع الترويسة. تحت الإعدادات المتقدمة على DXPR Studio > DXPR Builder > الإعدادات العامة (/admin/dxpr_studio/dxpr_builder/settings)، اضبطوا محدد إزاحة التمرير على محدد CSS لترويستكم.
  • رابط تواصل يعرض «تعذّر العثور على أيقونة علامة مطابقة». العلامة ليست اسم أيقونة معروفًا. اكتبوها بأحرف صغيرة، مثل linkedin أو instagram.
  • ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.

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