كيفية إنشاء موقع ووردبريس كامل باستخدام Elementor

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

قم ببناء موقعك باستخدام Elementor Pro

هل تريد معرفة كيفية استخدام Elementor؟

كانت هناك عدة مرات شعرت فيها بخيبة أمل من الموضوعات المتميزة الواعدة التي أثبتت أنها بطيئة بشكل لا يصدق.

كان هذا المال الذي تم إهداره لأنه لم تكن هناك فرصة للبقاء مع أي موضوع متعدد الأغراض ، وعد العالم ، ولكن انتهى الأمر بصفحات استغرق تحميلها من 4 إلى 5 ثوانٍ. كارثة من حيث تحسين محركات البحث.

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

كيفية استخدام Elementor؟

تثبيت Elementor

النظام في ل تثبيت Elementor ، تأكد من حصولك على تركيب وورد الخاص بك جاهزة. في لوحة تحكم ووردبريس ، انتقل إلى “الإضافات”> “إضافة جديد” ، وأدخل “العنصر” في شريط البحث. ثم انقر فوق الزر “تثبيت” ، ثم فوق الزر “تنشيط”.

تحرير صفحة جديدة باستخدام Elementor

انتقل إلى “الصفحات”> “إضافة جديد”. ثم ، انقر فوق الزر “تحرير باستخدام Elementor”.

إدراج قالب عنصر

يجب أن تكون الآن داخل محرر Elementor. انقر فوق “إضافة نموذج” واختر من بين مجموعة كبيرة من القوالب المجانية والمدفوعة. يُنصح بالبدء بقالب للتعرف على كيفية إنشاء العناصر المختلفة للصفحة. أوصي أيضًا بمشاهدة هذا الفيديو القصير حول بنية Elementor.

جعل القالب بالعرض الكامل

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

فهم هيكل Elementor

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

إضافة أداة

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

تغيير صورة الخلفية

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

تغيير الخطوط

انتقل إلى عنصر واجهة مستخدم العنوان على الصفحة وانقر فوقه. سيفتح إعدادات العنوان على اللوحة اليسرى. انتقل إلى علامة التبويب “النمط” في المنتصف ، وقم بتشغيل “الطباعة”. الآن ، ضمن “العائلة” ، يمكنك تصفح الخطوط المختلفة واختيار مجموعة خطوط مختلفة.

يتعلم أكثر.

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

عنصر عنصر

داخل موضوع مرحبا

ما يجعل Hello Theme رائعًا جدًا لمنشئي الصفحات ، بخلاف السرعة وعدم وجود زغب بالطبع ، هو أنك تحصل على ستة قوالب مفيدة مضمنة:

النموذج الافتراضي: هذا هو القالب الأساسي ، مع وجود الشريط الجانبي على اليمين

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

صفحة الشريط الجانبي الأيسر: عندما تحتاج إلى تبديل موضع الشريط الجانبي

Page Builder فارغ: هذا مثالي للصفحات المقصودة ، لأنك تحصل على لوحة فارغة ، بدون رأس ولا تذييل. صمم الصفحة بأكملها باستخدام منشئ الصفحة

Page Builder Boxed: هذا قالب مفيد للغاية ، لأنه يزيل عنوان الصفحة ، وجميع المساحات غير الضرورية ذات الصلة

العرض الكامل لـ Page Builder Full Width: هذا هو نفس سمة Page Builder Boxed ، لكن المحتوى يمتد إلى العرض الكامل للشاشة

وورد-لوحة القيادة

Page Builder For Hello Theme

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

تحرير المحمول لتصميم الصفحة بشكل مرئي لتكون مستجيبة للهاتف المحمول بنسبة 100٪

قوالب مصممة مسبقًا تتيح لك إعداد ملف

تصميم الصفحة بنقرة واحدة

تأثيرات مثل Box Shadows والرسوم المتحركة لجعل الصفحات أكثر جاذبية

مكتبة القوالب لحفظ الصفحات المصممة لإعادة استخدامها وللتصدير

العشرات من الأدوات المفيدة مثل الشهادات والعداد

التحكم في تخطيط الواجهة الأمامية الحية للتحكم في تخطيط الصفحة على الواجهة الأمامية

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

احصل على ELEMENTOR مجانًا

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

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

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

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

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

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

استنتاج

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