ووردبريس

Elementor 2026: Theme Builder، widgets مخصصة، الأداء والبدائل

7 دقائق للقراءة

السلسلة: WordPress REST API 2026 · تأمين WordPress 2026 · أداء WordPress: Core Web Vitals

Elementor هو page builder الأكثر شعبية في عالم WordPress، مُثبَّت على أكثر من 5 ملايين موقع نشط في 2026. مع Elementor 3.30+ (مايو 2026)، الإصدار النواة (Free) يُغطّي 80% من احتياجات بناء صفحات احترافية، وElementor Pro يُضيف Theme Builder، WooCommerce Builder، Form Builder، Popup Builder وأكثر من 100 widget إضافي. هذا الدرس يستعرض الإعداد الإنتاجي: تثبيت، Hello Theme، Theme Builder، إدارة CSS، performance، وبدائل (Bricks، Gutenberg FSE).

المتطلبات

  • WordPress 6.8+ مُحدَّث
  • PHP 8.3 LTS على الخادم
  • وصول admin إلى wp-admin
  • اختياري: ترخيص Elementor Pro (59 USD/سنة لـ 1 موقع، 199 USD/سنة لـ 25 موقع)
  • الوقت المُقدَّر: 90 دقيقة

الخطوة 1 — تثبيت Elementor + Hello Theme

Hello Theme هو الـ theme الرسمي الخفيف لـ Elementor — 25 KB فقط، صفر CSS غير ضروري، أداء ممتاز. مُوصى به كأساس لأي مشروع Elementor.

# Installation via wp-admin
# 1. Apparence → Thèmes → Ajouter → Rechercher "Hello Elementor" → Installer + Activer
# 2. Extensions → Ajouter → Rechercher "Elementor" → Installer + Activer
# 3. Optionnel : Elementor Pro (après achat licence)

# Via WP-CLI
wp theme install hello-elementor --activate
wp plugin install elementor --activate

# Vérifier les versions
wp plugin list --status=active
# elementor       3.30.1  active  Elementor Website Builder
# hello-elementor 3.5.0   active  Hello Theme

بدائل Hello: Astra (ثقيل قليلًا لكن مرن)، GeneratePress (سريع + flexbox مُدمَج)، Kadence (UI builder متقدم). لمواقع جديدة، Hello Theme + Elementor يعطي أفضل توازن بساطة/أداء.

الخطوة 2 — Editor: workflow أساسي

Elementor Editor يفتح بنقر « Edit with Elementor » على أي صفحة. الواجهة: الـ panel الأيسر (widgets، إعدادات)، منطقة العمل (preview live)، الـ footer (الجهاز، history، تصدير).

هيكل Elementor: Section (container أفقي) → Column (تقسيمات داخل section) → Widget (محتوى فعلي: نص، صورة، زر، etc.). منذ 3.16، Flexbox Container يحل محل sections/columns بنظام أبسط ومرن.

// Activer Flexbox Containers (recommandé pour nouveaux sites)
// Elementor → Settings → Features → "Flexbox Container" → ACTIVE

// Structure recommandée 2026 :
Container (direction: column, max-width: 1200px)
  ├─ Container (direction: row, gap: 24px)
  │   ├─ Heading widget
  │   └─ Image widget
  └─ Container (direction: row, gap: 16px)
      ├─ Button widget
      └─ Button widget

لمواقع موجودة على Sections/Columns، البقاء عليها يعمل لكن Flexbox أنظف بكثير. النقل التدريجي مُمكن — صفحة بصفحة.

الخطوة 3 — Theme Builder (Elementor Pro)

Theme Builder هو الميزة الرئيسية في Pro. يُتيح تخصيص header، footer، single post، archive، 404، search results — كل templates WordPress — عبر Elementor بدلًا من PHP.

الوصول: Templates → Theme Builder → اختر نوع الـ template → Add New.

// Exemples de Theme Builder Templates

// 1. Header global
- Container (sticky, background: white, padding: 16px)
  - Container row (justify-content: space-between)
    - Site Logo widget
    - Nav Menu widget (Menu primaire)
    - Search Form widget

// 2. Single Post Template
- Container
  - Post Title (dynamique)
  - Post Featured Image (dynamique)
  - Post Content
  - Author Box
  - Related Posts (custom HTML query)

// 3. Conditions d'affichage
- Display Conditions:
  - Include: "All Posts" ou "Posts in category X"
  - Exclude: "Page d'accueil"

القوة الحقيقية: Dynamic Tags. أي حقل يقبل بيانات ديناميكية: عنوان المقال، الصورة المميزة، meta fields (مع ACF)، تواريخ، تأليف. تُولّد template واحد يُطبَّق على آلاف المقالات.

الخطوة 4 — Widget custom (PHP)

للوظائف غير الموجودة في Elementor، اكتب widget مخصص:

// plugin custom : my-elementor-widgets.php
<?php
/**
 * Plugin Name: My Elementor Widgets
 */

add_action('elementor/widgets/register', function($widgets_manager) {
    require_once __DIR__ . '/widgets/widget-stats.php';
    $widgets_manager->register(new \My_Stats_Widget());
});

// widgets/widget-stats.php
class My_Stats_Widget extends \Elementor\Widget_Base {
    public function get_name() { return 'stats_widget'; }
    public function get_title() { return 'Stats personnalisées'; }
    public function get_icon() { return 'eicon-counter'; }
    public function get_categories() { return ['general']; }

    protected function register_controls() {
        $this->start_controls_section('content_section', [
            'label' => 'Contenu',
            'tab' => \Elementor\Controls_Manager::TAB_CONTENT
        ]);

        $this->add_control('valeur', [
            'label' => 'Valeur',
            'type' => \Elementor\Controls_Manager::NUMBER,
            'default' => 100
        ]);

        $this->add_control('label', [
            'label' => 'Libellé',
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => 'Clients satisfaits'
        ]);

        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        echo '<div class="stat-box">';
        echo '<span class="stat-value">' . esc_html($s['valeur']) . '</span>';
        echo '<span class="stat-label">' . esc_html($s['label']) . '</span>';
        echo '</div>';
    }
}

هذا widget يظهر في Elementor panel تحت « General ». مفيد لحالات استخدام متكررة في موقعك (counters، testimonials customs، badges مهمة) مع تحكم كامل في HTML/CSS النهائي.

الخطوة 5 — Performance: تحسينات إلزامية

Elementor يُولّد كثيرًا من CSS/JS. على إعداد افتراضي، صفحة بسيطة قد تُحمّل 500 KB+ من Elementor frontend. التحسينات الإلزامية:

// Elementor → Settings → Features → ACTIVE :
// ✓ Optimized DOM Output
// ✓ Improved Asset Loading
// ✓ Improved CSS Loading
// ✓ Inline Font Icons
// ✓ Optimized Gutenberg Loading
// ✓ Lazy Load Background Images

// Elementor → Settings → Performance :
// ✓ CSS Print Method: External File
// ✓ Google Fonts Load: Swap
// ✓ Load Font Awesome Inline

// wp-config.php : désactiver Cron HTTP (mieux : cron système)
define('DISABLE_WP_CRON', true);

// .htaccess : compression Gzip + cache navigateur
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json
</IfModule>

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType image/webp "access plus 6 months"
</IfModule>

مع هذه التحسينات + LiteSpeed Cache أو WP Rocket، صفحة Elementor تنخفض من LCP 4.5s إلى 1.8s. لـ Core Web Vitals الخضراء (LCP < 2.5s، INP < 200ms، CLS < 0.1)، احذف widgets غير الضرورية وقلّل effects (animations، parallax) على mobile.

الخطوة 6 — Custom CSS وtokens تصميمية

Elementor 3.18+ يُقدّم Global Colors وGlobal Fonts — design tokens مركزية. تُعرّف primary، secondary، accent مرة واحدة، تُطبَّق في كل widgets.

// Site Settings → Global Colors
Primary:   #0F1B3D (bleu nuit)
Secondary: #FF8C42 (orange)
Accent:    #1ABC9C (turquoise)
Text:      #2C3E50
Background: #F5F5F5

// Site Settings → Global Fonts
Primary:   Inter (Body)
Secondary: Inter (Headings, weight 700)
Accent:    Cairo (Arabe RTL)

// Custom CSS dans un widget
/* Cible un widget spécifique via son CSS Class */
.btn-cta {
    background: var(--e-global-color-secondary);
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.btn-cta:hover {
    transform: translateY(-2px);
}

لمواقع متعددة الصفحات، استخدام Global Colors يُتيح تغيير العلامة التجارية كلها بنقرة واحدة. للنص العربي، أضف Cairo أو Tajawal أو Almarai كخط رئيسي. RTL يُكتشف تلقائيًا من WordPress locale.

الخطوة 7 — Forms (Elementor Pro)

Form Widget في Pro يُقدّم بناءًا visuel لـ forms مع validations، integrations (Mailchimp، MailerLite، HubSpot، webhooks)، حماية CAPTCHA.

// Form Widget configuration
Fields:
  - Name (required, text)
  - Email (required, email validation)
  - Phone (required, tel, pattern: ^\+?[0-9]{8,15}$)
  - Message (required, textarea, max: 500 chars)
  - Honeypot (anti-spam)

Actions After Submit:
  ✓ Email (vers admin@moncite.com)
  ✓ Webhook (vers https://hooks.zapier.com/...)
  ✓ Redirect (vers /merci/)
  ✓ MailerLite (ajouter à liste "Prospects 2026")

Security:
  ✓ reCAPTCHA v3 (score >= 0.5)
  ✓ Honeypot field actif

للـ forms المعقدة (multi-step، conditional logic، payment)، إضافات مكمّلة: Fluent Forms، WPForms، Gravity Forms. Elementor Forms أبسط لكن كافٍ لـ contact، newsletter، demande de devis.

الخطوة 8 — البدائل: Bricks، Gutenberg FSE

Bricks Builder (149 USD/Lifetime) صعد بسرعة منذ 2023. أداء أفضل من Elementor (HTML أنظف، JS أقل)، API أعمق للمطوّرين، طبقة CSS أكثر تفصيلية. منحنى تعلّم أعلى لكن النتيجة على Core Web Vitals مُبهرة.

Gutenberg + Full Site Editing (مجاني، مُدمَج WordPress 6.x) ينضج بسرعة. لمواقع content-heavy بـ blocks ثابتة، FSE يُقدّم تجربة أنظف من Elementor مع أداء أفضل ولا اعتماد على إضافة. لمواقع مع animations كثيفة وlayouts معقدة، Elementor/Bricks يبقيان أنسب.

// Comparatif 2026
                    Elementor    Bricks      Gutenberg FSE
Prix Free            Oui          Non         Oui (core)
Prix Pro             59 USD/an    149 USD     0
Performance LCP      2.0-2.5s     1.4-1.8s    1.2-1.6s
Communauté           5M+ sites    100K sites  WordPress core
Theme Builder        Pro          Inclus      Inclus (FSE)
Apprentissage        Facile       Modéré      Modéré
Widgets prêts        100+         60+         50+ blocks
RTL/Arabic           Excellent    Excellent   Excellent

أخطاء شائعة

الخطأ السبب الحل
صفحة تُحمَّل ببطء كثير من widgets + animations فعّل Performance features، قلّل widgets، lazy load
Layout مكسور mobile responsive controls غير مُعَدّ اضبط padding/margin لكل breakpoint (Desktop/Tablet/Mobile)
CSS مُكرَّر بين صفحات « CSS Print Method » خاطئ Settings → Performance → External File
RTL غير مُتعرَّف WordPress locale خاطئ Settings → General → Site Language: العربية
Theme Builder template لا يظهر Display Conditions غير مُعَدَّة راجع conditions، حدّد « All Posts » أو فئة محددة
Elementor يتعارض مع plugin آخر JS/CSS conflict تعطيل المكوّن الإضافي مؤقتًا، اختبار

الأسئلة الشائعة

Elementor Free أم Pro؟
Free كافٍ للمواقع البسيطة (landing pages، blogs). Pro ضروري للـ Theme Builder، WooCommerce Builder، Forms مع integrations. للوكالات، Studio license (1000 sites) بـ 999 USD/سنة.

Elementor أم Bricks في 2026؟
Elementor للمبتدئين والوكالات التي تحتاج منظومة غنية. Bricks للمطوّرين الذين يُولُون أهمية الأداء وتحكم CSS.

هل Elementor يُبطّئ موقعي؟
نعم إذا غير مُحسَّن. مع Performance features مُفعَّلة + caching + CDN، صفحة Elementor تصل LCP < 2.5s بسهولة.

كيف أُرحّل من Divi/WPBakery إلى Elementor؟
لا أداة آلية. الإجراء: إعادة بناء صفحة بصفحة. ابدأ بالصفحات الأقل أهمية، احفظ الصفحات الأصلية في drafts كاحتياط.

هل Elementor يدعم WooCommerce بالكامل؟
نعم، عبر WooCommerce Builder في Pro: تصميم single product، archive، cart، checkout كلها قابلة للتخصيص.

مقالات ذات صلة

#cluster-wordpress-ar
Sponsoriser ce contenu

Cet emplacement est à vous

Position premium en fin d'article — c'est l'instant où les lecteurs sont le plus engagés. Réservez cet espace pour votre marque, votre formation ou votre offre.

Recevoir nos tarifs
Publicité

مقالات مشابهة