مراجعة إضافة Essential Blocks وتجربة تصميم صفحة تعريفية لشركة تقنية

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

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

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

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

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

قوالب منصة tamplately
قوالب منصة tamplately

تتوفر من الإضافة نسخة مجانية وأخرى مدفوعة بأسعار تبدأ من 39 دولارًا سنويًا وتوفر أكثر من 50 مكونًا خفيف الحجم ومتجاوب مع كافة أحجام الأجهزة مع خيارات تخصيص كثيرة ومتنوعة ويمكنك أن تعطل المكونات التي لن تحتاجه في تصاميمك لتحسين أداء موقعك.

كافة مكونات Essential Blocks
كافة مكونات Essential Blocks

سنشرح في الفقرات التالية خطوات تصميم صفحة الهبوط التالية الخاصة بالتعريف بشركة تقنية باستخدام الإصدار المجاني للإضافة ونضيف لها المكونات المناسبة ونخصصها واحدًا تلو الآخر بما يناسبنا.

صفحة هبوط تعريفية
صفحة هبوط تعريفية

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

تثبيت الإضافة
تثبيت الإضافة

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

استيراد قالب tamplately
استيراد قالب tamplately

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

عند الانتقال إلى قسم (ESSENTIAL BLOCKS) ستجد جميع المكونات التي توفرها لك الإضافة ويمكنك إضافة المكون الذي تريده من خلال النقر عليه أو سحبه وإفلاته في الموضع الذي تريده على الصفحة.

وبعد إضافة أي مكون ستتمكن من تخصيصه وفق احتياجاتك من شريط الخيارات الذي يظهر أعلى المكون أو من خلال شريط التخصيص الجانبي الأيسر (بجانب رقم 3) الذي يتضمن العديد من الخصائص المختلفة التي تمكنك من تخصيص أي جزء من أجزاء المكون Advanced Heading.

ستجد خيارات التخصيص موزعة على عدة تبويبات لسهولة تنظيمها كما في الصورة التالية التي تتضمن 3 تبويبات باسم  General للخصائص العامة للمكون وStyle لخصائص المظهر والتنسيق و Advanced للخصائص المتقدمة والأكواد المخصصة.

مكونات إضافة ESSENTIAL BLOCKS
مكونات إضافة ESSENTIAL BLOCKS

سنضع لك فيما يلي قائمة بأهم المكونات التي توفرها إضافة Essential Blocks وفائدة كل مكون منها:

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

المكون Pricing Table
المكون Pricing Table

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

المكون Infobox
المكون Infobox

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

المكون Countdown
المكون Countdown

يسهّل هذا المكون على الزائر مشاركة محتوى موقعك على وسائل التواصل الاجتماعي ويمكنه من القيام بذلك بنقرة واحدة.

المكون Social Icons
المكون Social Icons

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

المكون Team Member
المكون Team Member

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

المكون Table of Contents
المكون Table of Contents

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

المكون From
المكون From

بالإضافة إلى هذه المكونات، توفر الإضافة مجموعة من المكونات الأخرى ويمكنك التعرف عليها وعلى وظيفة كل منها بالرجوع إلى صفحة توثيق الإضافة


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

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

أضف صفحة جديدة
أضف صفحة جديدة

بعد إنشاء الصفحة افتحها في محرر المكونات وأخفي عنوانها من خلال النقر على الرمز الذي يشبه العين بجانب رقم 1 في الصورة التالية حتى لا يظهر هذا العنوان لزائر الموقع، ومن ثم قم بإخفاء ترويسة وتذييل الصفحة من أجل تبسيط التصميم وجعل الزائر يركز على هدف الصفحة الأساسي، وتستطيع القيام بذلك من خلال خيارات القالب عن طريق النقر على خيارات Disable Header و Disable Footer و Disable  Banner Area كما يوضح القسم رقم 2 في الصورة.

إخفاء عنوان الصفحة
إخفاء عنوان الصفحة

ملاحظة: تجدر الإشارة لأن خطوة إخفاء ترويسة أو تذييل الصفحة ستختلف بحسب القالب المستخدم في موقعك، فقد توفر لك بعض القوالب إمكانية تعطيلها مباشرةً من خصائص القالب وقد تحتاج لكتابة أكواد CSS مخصصة في أداة تخصيص القالب Customizer من أجل إخفائها.

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

لتصميم هذا القسم كل ما عليك فعله هو إضافة مكون حاوية wrapper وضمنه مكون سطر Row من 3 أعمدة في أعلى الصفحة كما يلي:

مكون حاوية مع سطر بثلاثة أعمدة
مكون حاوية مع سطر بثلاثة أعمدة

سنخصص لون خلفية السطر Background Color من التبويب Advanced في الشريط الجانبي  ليكون (#3A078F) وهو لون بنفسجي داكن.

أضف في العمود الأول مكون عنوان Advanced Heading من المستوى H2 واكتب ضمنه النص الذي تريده (في صفحتنا سنكتب النص التالي”شركة تكنوماتيك للخدمات التقينة”) ثم عين محاذاته للوسط ولونه أبيض من خلال تغيير قيمة الخاصية Title Color، ثم من التبويب Style حدد نوع الخط ليكون كايرو ووزن الخط 400 وخصص قيمة الهوامش لتكون 26 بكسل من كافة الجوانب.

ثم أضف تحته مكون عنوان H2 آخر واكتب ضمنه النص الذي تريده (في صفحتنا سنكتب النص التالي “الثقة والتواصل الفعال أساس في علاقتنا مع العملاء”)، بعد ذلك اجعل محاذاة النص لليمين ولونه أبيض ونوع الخط كايرو وحجم الخط 48 ووزنه 700 ثم أضف له تأثيرًا حركيًا من قسم Select Animation ولتكن الحركة FadeInUp.

العمود الأول قسم هيرو
العمود الأول قسم هيرو

بعد ذلك قم بإضافة مكون زر واكتب نصه كما تريد (في صفحتنا سيكون نص الزر “تعرف على خدماتنا”) ليكون زر اتخاذ الإجراء CTA الذي ينقل الزائر للصفحة الرئيسية للشركة، ثم خصص لون نص الزر ليكون أبيض والخلفية باللون (#33B383) أخضر واجعل نوع نص الزر كايرو وحجمه 20، ثم اجعل قيمة Border Radius صفر من كل الجوانب وقيمة الهامش 20 بكسل من الأعلى والأسفل و35 من اليمين واليسار ليظهر الزر على النحو التالي:

مكون الزر CTA
مكون الزر CTA

انتقل الآن إلى العمود الثاني وأضف مكون صورة احترافية Advanced Image وارفع ضمنه الصورة التي تريدها، في صفحتنا قمنا برفع الصورة الموضحة و خصصناها لتكون خاصية Styles بالقيمة square والهوامش لتكون 0 من الأسفل وتأثير الحركة ليكون FadeInUp، ويمكنك تخصيصها بالشكل الذي تريده أنت.

العمود الثاني قسم الهيرو
العمود الثاني قسم الهيرو

والآن في العمود الثالث قم بإضافة 3 مكونات صندوق معلومات Infobox تحت بعضها البعض وخصص قيمة التخطيط Layout Preset لتكون Presrt 4 وألغي تفعيل Show button لإخفاء عرض الزر من الصندوق، ثم نسق شكل الأيقونة ونوع الخط واللون والهوامش وغيرها من الخصائص لكل جزء من أجزاء الصندوق، وستظهر مكونات الصندوق في صفحتنا كما توضح الصورة التالية:

العمود الثالث قسم الهيرو
العمود الثالث قسم الهيرو

ملاحظة: يفضل للسهولة أن نضيف أول مكون Infobox وننسقه بالكامل ثم ننسخه مرتين ونعدّل محتواه النصي، والصورة التالية توضح أبرز تنسيقات المكون:

تخصيص المكون Infobox
تخصيص المكون Infobox

لتصميم هذا القسم كما هو موضح في صفحتنا يجب عليك إضافة حاوية جديدة wrapper وبداخلها المكون Advanced Heading المؤلف من عنوان رئيسي نكتب ضمنه “لماذا تختارنا” وعنوان فرعي نكتب فيه النص الظاهر تحت العنوان الرئيسي ومكون فاصل Separator، يمكن أن يكون هذا المكون سطر Line أو أيقونة icon أو غير ذلك، في حالتنا عرضنا أيقونة سهم متجه للأسفل كما خصصنا نوع الخط ليكون كايرو وحددنا حجمه ووزنه وألوانه لتناسب تصميم الصفحة وأضفنا كذلك تأثير حركة FadeInUp ليتناسب مع القسم السابق.

القسم الثاني من الصفحة
القسم الثاني من الصفحة

بعد ذلك أضف مكون صورة Advanced Image تحت هذا العنوان واجعل نمطها بشكل مربع square وفعل خيار Auto Height ليتغير ارتفاع الصورة ديناميكيًا ويحافظ على نسبة العرض إلى الارتفاع الأصلية للصورة، ثم خصص قيمة تأثير الحركة FadeInUp أيضًا ليظهر القسم على النحو التالي:

مكون الصورة المتقدمة
مكون الصورة المتقدمة

لتصميم هذا القسم أضف مكون حاوية wrapper جديد وأضف داخلها مكون العنوان Advanced Heading المؤلف من عنوان رئيسي تكتب ضمنه النص الذي تريده وفي حالتنا هو “مميزات تكنوماتيك” وتحته مكون سطر Row مكون من ثلاثة أعمدة بداخل كل عمود مكون صندوق معلومات Infobox له التوضع Layout Preset من نمط 1 Preset، ثم ألغي خياري Clickable Infobox و Show button، وخصص لكل صندوق العنوان Title واكتب فيه اسم الميزة والمحتوى، في صفحتنا سنكتب وصفًا مختصرًا للميزة ونرفع  صورة تمثل كل ميزة كما سنخصص الألوان والخطوط والمحاذاة للحصول على هذا الشكل:

قسم مميزات الشركة
قسم مميزات الشركة

يمكن إضافة نموذج اشتراك إلى صفحة ووردبريس باستخدام Essential Blocks بسهولة لأن الإضافة توفر مكون جاهز Form مخصص لإضافة النماذج، ويمكن تخصيصه بسهولة لإنشاء نماذج اشتراك بأقل جهد ممكن.

وللقيام بذلك في صفحتنا سنضيف حاوية جديدة wrapper لهذا القسم ونضيف داخلها المكون Form، بمجرد إضافة المكون ستظهر خيارات لتحديد نوع النموذج. نختار منها Subscription Form كالتالي:

نموذج الاشتراك
نموذج الاشتراك

سنخصص بعدها عنوان النموذج وحقوله وننسقه بما يناسب موقعنا، من التبويبين “General” و “Style” على لوحة التخصيص. كما سنخصص إعداد الإشعارات البريدية التي سنتلقاها عند اشتراك شخص جديد ورسائل التأكيد ورسائل الخطأ التي يراها المستخدم بعد إكمال نموذج الاشتراك.

مكون فورم الاشتراك
مكون فورم الاشتراك

ملاحظة: إذا كنت تستخدم النسخة الاحترافية Essential Blocks PRO، فستتمكن أيضًا من تفعيل ميزات إضافية مثل Google reCAPTCHA ودمج MailChimp لزيادة الأمان وإدارة المشتركين بسهولة.

بعد الانتهاء من إضافة وتخصيص جميع مكونات صفحة الهبوط، حان وقت معاينتها في المتصفح، ستظهر صفحتنا على النحو التالي:

صفحة الهبوط النهائية
صفحة الهبوط النهائية

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

وبهذا عزيزي القارئ نكون قد عرفناك على إضافة Essential Blocks المميزة التي تسرع وتحسن تجربة تصميم صفحات موقع ووردبريس. كما قمنا باستعراض أبرز مكوناتها وشرحنا لك طريقة استخدامها العملية لتصميم صفحة هبوط تعريفية لشركة خدمات تقنية.

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

المجتمع الأكبر عربيًا لمستخدمي ووردبريس

انضم لمجتمع عرب ووردبريس الأكبر عربيًا لدعم مستخدمي ووردبريس. من خلال المجتمع ستحصل على المساعدة اللازمة في إنشاء موقعك الووردبريس أو تخصيص متجرك على ووكومرس

زيارة منتدى عرب ووردبريس ←
مهندس برمجيات ذو خبرة في تصميم المواقع، عمل سابقًا كمدرب في الجمعية العلمية السورية للمعلوماتية لتعليم لغات البرمجة ، وشغل أيضًا منصب مدير تكنولوجيا المعلومات في شركة ويسترن يونيون.