كيفية إنشاء صفحة رئيسية متجاوبة مع GeneratePress ووردبريس Theme & Elementor

اشترك في قناتنا على YouTube

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

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

في هذا البرنامج التعليمي ، ننظر في كيفية إنشاء صفحة رئيسية ذات مظهر متميز ، وجعلها سريعة الاستجابة باستخدام مجموعة أدوات Elementor Mobile Editing. سنقوم أيضًا بتخصيص تصميم صفحة آخر ، بحيث يناسب لوحة ألوان GeneratePress.

لماذا استخدم Elementor في GeneratePress

يعمل Elementor بسلاسة مع كل من الإصدارين Lite و Pro من GeneratePress. يستحق الإصدار الاحترافي التحقق منه ، لأنه يضيف الكثير من الوظائف الإضافية والميزات المفيدة إلى السمة الأساسية ، مثل التحكم في رأس السمة والألوان والطباعة والمزيد.

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

فيما يلي بعض مزايا استخدام Elementor على GeneratePress.

صمم صفحاتك بشكل مباشر

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

تحكم كامل في التخطيط والمحتوى والأسلوب

GeneratePress يأتي مع محرر ووردبريس الأساسي. باستخدام Elementor ، يمكنك تخصيص تخطيط شبكة الصفحة والتباعد والحشو والأعمدة والخطوط والألوان وجميع عناصر التصميم الأخرى.

تضمين الحاجيات في GeneratePress

يتضمن Elementor مجموعة من الأدوات المفيدة ، بما في ذلك المعرض ، وأيقونات Font Awesome ، والأيقونات الاجتماعية ، و Slider وعشرات من عناصر واجهة المستخدم المختلفة لتجعلك صفحة GeneratePress أكثر جاذبية وديناميكية.

عنصر أو مولد الضغط

الإعدادات الأولية لـ Elementor & GeneratePress

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

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

إزالة عنوان الصفحة

نظرًا لأننا لا نريد أن تعرض الصفحة الرئيسية عنوان الصفحة ، فإننا نستخدم خيار GeneratePress ‘Disable Elements’ لإزالة عنوان الصفحة.

تكامل منشئ الصفحة

كما كتبت سابقًا ، ليست هناك حاجة لإجراء أي تخصيصات باستخدام GeneratePress. يحتوي السمة على مربع اختيار سهل الاستخدام يسمى “Page Builder Integration” ، والذي يسمح بعرض صفحة كاملة.

تخطيط الشريط الجانبي

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

Genatepress- الصفحة الرئيسية

إنشاء الصفحة الرئيسية المستجيبة

كما نوضح في الفيديو ، من السهل جدًا إنشاء صفحة رئيسية جميلة من البداية على GeneratePress.

في الجزء الثاني من الفيديو ، نعرض مدى سهولة جعل الصفحة الرئيسية تستجيب للأجهزة اللوحية والأجهزة المحمولة ، باستخدام مجموعة أدوات Elementor Mobile Editing .

اجعل من المعتاد ، بعد كل صفحة تقوم بتصميمها باستخدام Elementor ، تصفح الصفحة في وضع الهاتف المحمول والكمبيوتر اللوحي ، وتأكد من أن كل عنصر واجهة مستخدم وعمود وقسم لا يزال يبدو رائعًا.

تخصيص قالب لتوليد ألوان الضغط

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

من المهم ملاحظة أنه يمكن تخصيص كل قالب من عشرات القوالب المجانية المتوفرة في Elementor لتلائم أي نظام ألوان بنفس سهولة النموذج الذي اخترناه للفيديو.

الشروع في العمل مع Elementor

إذا كنت تريد السبق مع Elementor ، فراجع هذه الدروس الأربعة الأساسية:

كيفية تثبيت Elementor؟

كيفية إنشاء تخطيط الصفحة الأساسي؟

كيف يتم استخدام المكتبة لإدراج قوالب مسبقة التصميم؟

كيفية استخدام تحرير الهاتف لإنشاء صفحات سريعة الاستجابة بصريًا؟

ملاحظة أخيرة

لقد رأينا أن GeneratePress و Elementor هما زوجان رائعان.

كلاهما سريع وخفيف الوزن ، ويعملان بشكل رائع من حيث تحسين محركات البحث (SEO) وسرعة الصفحات .

أنها توفر إمكانات كبيرة لاستجابة المحمول.

إنها بديهية للغاية وسهلة الاستخدام.

لقد لمسنا للتو سطح القدرات لهذا المكون الإضافي والموضوع. هناك احتمالات لا حصر لها لتصميم ووردبريس الخاص بك باستخدام Elementor. تابعنا على Twitter أو Facebook لتبقى على اطلاع بآخر التحديثات والبرامج التعليمية التي تتدفق باستمرار.

نود أن نسمع منك مستخدمي GeneratePress في التعليقات ، لذا يرجى إخبارنا كيف كانت تجربتك مع Elementor.