ابنوا صفحة اتصال.

Learn DXPR BuilderBuild pagesVolg een tutorial

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

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

قبل أن تبدؤوا

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

الخطوة 1: إضافة الخريطة

  1. انقروا إضافة العناصر على الصفحة الفارغة واختاروا القسم من تبويب التخطيط.
  2. انقروا + على القسم واختاروا الخريطة من تبويب المحتوى.
  3. اكتبوا العنوان الخاص بكم، واضبطوا ارتفاع الخريطة على 400 وانقروا حفظ.

تضمّن الخريطة خرائط Google موسّطة على العنوان.

الخطوة 2: إضافة بيانات الاتصال

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

اختاروا الحجم نفسه للأيقونات الثلاثة ليصطف الصف.

الخطوة 3: إضافة النموذج

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

النماذج المصنوعة على البنية > نماذج الاتصال (/admin/structure/contact) بلا كتلة في نواة Drupal. تضيف وحدة Contact Block المساهَمة كتلة اتصال إلى التبويب نفسه.

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

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

للمضي أبعد

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

  • النقر للاتصال: حدّدوا رقم الهاتف في النص، وانقروا زر الرابط على شريط الأدوات وأدخلوا tel:+31104001234
  • النقر للمراسلة: حدّدوا العنوان واربطوه بـ mailto:info@example.com
  • أي كتلة: يضمّن تبويب كتل Drupal الكتل على موقعكم، مثل نماذج البحث والاشتراكات في النشرات والكتل المخصصة

ما سترونه

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

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

  • الخريطة تعرض المكان الخطأ. تبحث خرائط Google عن العنوان كما كُتِب. أضيفوا الرمز البريدي والمدينة والبلد إلى العنوان واحفظوا مجددًا.
  • نموذجكم ليس في تبويب كتل Drupal. يسرد المنشئ نماذج الويب المفتوحة فقط، ونماذج اتصال النواة تحتاج وحدة Contact Block. اضبطوا حالة نموذج الويب على مفتوح على البنية > نماذج الويب (/admin/structure/webform).
  • الأيقونات بأحجام مختلفة. تحتفظ كل أيقونة بـ الحجم الخاص بها. افتحوا إعدادات كل أيقونة واختاروا الحجم نفسه.
  • ذهبت تغييراتكم بعد إعادة التحميل. غادرتم الصفحة قبل نقر حفظ على شريط أدوات المنشئ. وإذا عرض الحفظ خطأ، راجعوا التغييرات لا تُحفَظ.

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