تواجه معظم قوالب أقسام بطل Elementor المجانية نفس المشكلة: يمكنك استيراد ملف JSON، والحصول على تخطيط مجمد، ثم قضاء ساعة في النقر على عناصر واجهة المستخدم الفردية، وعناصر واجهة المستخدم للصور، والفواصل في محاولة لجعلها ملكك. تغيير لون اللكنة؟ هذه اثنتي عشرة لوحة نمط منفصلة.
قبل التمرير: نمت هذه المجموعة للتو إلى 11. الأحدث، نهايات فضفاضة، تم إنشاء بطل جسيمات GPU الجالس في #11، بعد أن قمنا بتصوير فيديو YouTube، لذلك لن تجده هناك. لا تخطيها. ألف جسيم يدور حول عنوانك الرئيسي ويتفادى مؤشر الزائر الخاص بك ليس شيئًا ستراه في أي مكتبة Elementor أخرى، وهناك معاينة متحركة أدناه حتى تتمكن من مشاهدته وهو يتحرك.
لقد بنينا أقسام الأبطال العشرة هذه بشكل مختلف. كل واحد يستورد باعتباره القطعة واحدة من خلال منشئ عناصر واجهة المستخدم الرئيسية. عند سحبه إلى Elementor، يكون كل عنوان وفقرة وزر ورابط وصورة عبارة عن حقل مُسمى في علامة التبويب "المحتوى"، ويوجد نظام الألوان بأكمله في علامة التبويب "النمط" على شكل منتقي ألوان من 3 إلى 6. قم بتغيير “Accent Color” والأزرار وحالات التمرير والتوهج والتسطير، ويتم تحديثها معًا، لأن CSS يستمد كل لون ثانوي من الألوان الأساسية التي تختارها.
جميع العناصر العشرة مجانية للتنزيل على هذه الصفحة. يحتوي كل سحاب على ملف الأداة، والصور التجريبية التي تراها في لقطات الشاشة (مثل PNGs الجاهزة للتحميل بالإضافة إلى SVGs الأصلية)، وREADME الذي يعين كل صورة في مجالها الدقيق. تأتي الرسوم المتحركة (جبال المنظر، والرسوم البيانية ذاتية الرسم، وشارات المكونات المدارية) تلقائيًا، وكل واحدة منها تحترم إعداد الحركة المنخفضة للزائر، لذلك لا تقوم بشحن مشكلات إمكانية الوصول إلى جانب حلوى العين.
لقطات الشاشة لا تشرح كيف تبدو الرسوم المتحركة فعليًا. لقد قمت بإنشاء مقطع فيديو لك يجب عليك مشاهدته حتى تحصل على فكرة مناسبة عن الرسوم المتحركة وما ستحصل عليه بعد تنزيل قالب أقسام البطل.
والبطل هو الشاشة الأولى فقط. كل ما يمرره الزائر بعده، شبكة الميزات التي تشرح، والشهادات التي تقنع، وجدول التسعير الذي يغلق، والأسئلة الشائعة التي تقتل الاعتراض الأخير 5 لا تزال بحاجة إلى البناء. لقد جمعنا كل ذلك في مجموعة مصاحبة من 30+ قوالب قسم العنصر المجانية، تم إنشاء نفس الطريقة القائمة على عناصر واجهة المستخدم: اختر بطلاً هنا، وقم بتكديس بقية الصفحة من هناك، وستجتمع الصفحة المقصودة الكاملة معًا في فترة ما بعد الظهر بدلاً من أسبوع.
ستجد أدناه جميع التصميمات العشرة مع لقطات شاشة حقيقية، وملاحظة صادقة حول من يناسب كل تصميم بالفعل، ثم أ دليل الاستيراد خطوة بخطوة مع لقطات شاشة من سير العمل الدقيق.
يقرأ بعض الأبطال بالحركة بشكل أفضل من الصورة الثابتة. إذا كان هذا هو الاتجاه الذي تتجه إليه، فإن 20 تصميمًا دائريًا للعنصر هل تم ضبط الرفيق على تدفق الغلاف هذا، وأكورديون الصورة، ومسح الستارة، والمدار، وشريط التمرير السحب، ومنزلق البطل كامل النزيف المسمى Plinth الذي يحمل لوحة التسميات التوضيحية الخاصة به والدعوة إلى الإجراء.
إنهم يستوردون تمامًا مثل الأبطال أدناه: ملف JSON واحد، Widget Builder، ثم عنصر واجهة مستخدم به حقول مُسمى. ثمانية من العشرين تعمل على البرنامج الإضافي المجاني واثني عشر تحتاج إلى Pro، وهو الاختلاف الوحيد الذي يستحق المعرفة قبل الاختيار. يحتوي كل تصميم على عرض توضيحي مباشر، حتى تتمكن من مشاهدة نمط الحركة لمدة عشر ثوانٍ بدلاً من التخمين من لقطة الشاشة.
ماذا يوجد في هذه المجموعة
- 1. لوحة النبض مع SaaS/منتج التحليلات
- 2. ألبينروت السفر والمغامرة
- 3. مقهى/مطعم Ember & Oak
- 4. أتيليه نور للأزياء والتجارة الإلكترونية
- 5. Offbeat Studio وكالة إبداعية
- 6. صياغة ألعاب القوى 4 صالة الألعاب الرياضية واللياقة البدنية
- 7. Wiggly Minds تطبيقات وتعليم الأطفال
- 8. استوديو ميريديان للهندسة المعمارية والديكورات الداخلية
- 9. Lowtone up الأحداث والموسيقى
- 10. ماني للتجميل والعناية بالبشرة
- 11. نهايات فضفاضة للمحافظ والاستوديوهات وصفحات الإطلاق التي تحتاج إلى إسقاط فك
- كيفية استيراد قسم البطل إلى Elementor (خطوة بخطوة)
- الأسئلة الشائعة
لماذا هذه ليست قوالب الأقسام العادية
تمييز سريع قبل العرض، لأنه يغير كيفية استخدامها.
قالب قسم Elementor العادي عبارة عن ترتيب محفوظ لعناصر واجهة المستخدم الخاصة بالمخزون. يبدو الأمر مكتملًا، لكنه من الناحية الهيكلية يحتوي على العشرات من الأجزاء السائبة. هؤلاء الأبطال العشرة هم الحاجيات المخصصة تم إنشاؤه باستخدام Widget Builder: HTML وCSS وJavaScript معبأة خلف عناصر تحكم Elementor. ثلاث عواقب عملية:
- التحرير أسرع. يمتلك بطل مهرجان الموسيقى 24 حقلاً (التاريخ، الموقع، ثلاثة صفوف من التشكيلة مع روابط خاصة بها، زرين، ألوان). يمكنك تحريرها في لوحة واحدة بدلاً من البحث في شجرة من الحاويات المتداخلة.
- الرسوم المتحركة تبقى على قيد الحياة. تأتي JavaScript داخل الأداة: الأزرار المغناطيسية، وإحصائيات العد التنازلي، واختلاف اختلاف الماوس. لا توجد مكونات إضافية، ولا مكالمات CDN باستثناء خطوط Google، التي يتم تحميلها مرة واحدة، بمفردها.
- لا شيء يتسرب. يتم تحديد نطاق كل ورقة أنماط إلى فئة الغلاف الخاصة بها وكل اسم رسوم متحركة مسبوق، لذلك لن يقاتل بطلان في نفس الصفحة بعضهما البعض أو أنماط موضوعك. لقد تعلمنا ذلك بالطريقة الصعبة.
سوف تحتاج إلى البرنامج المساعد للإضافات الرئيسية تم تثبيت PRO جنبًا إلى جنب مع Elementor. تم تضمين Widget Builder وميزة الاستيراد الخاصة به في الإصدار المجاني، وهي الطريقة التي يقوم بها 30.000+ موقع بتشغيله بالفعل.
1. لوحة النبض لمنتجات SaaS والتحليلات
البطل الكلاسيكي المقسم، نسخة على اليسار والمنتج على اليمين، ولكن مع ثلاث تفاصيل تجعل الزوار يتوقفون. مخطط الإيرادات يرسم نفسه عند التحميل بنقطة نبضية تنتقل على طول الخط. تطفو بطاقتان ثابتتان فوق لوحة القيادة على بوب بطيء. ويميل المظهر بأكمله بضع درجات نحو المؤشر، مما يجعل النموذج المسطح يُقرأ ككائن.
الصف الاجتماعي الموجود أسفله يصل إلى رقمك (الافتراضي: 4700 فريق). تكتب رقمًا عاديًا في اللوحة وتتولى الرسوم المتحركة الباقي. هذا هو التخطيط الذي يجب اختياره إذا كان منتجك يحتوي على شاشة تستحق العرض: أدوات التحليلات، وإدارة علاقات العملاء، ولوحات المعلومات، وأنظمة الحجز. إذا لم يتم عرض منتجك بشكل جيد في لقطة الشاشة، فانظر إلى Offbeat (#5) بدلاً من ذلك، لأن هذا التخطيط موجود أو يموت على تلك الصورة اليمنى.
يمكنك التعديل: عنوان رئيسي مكون من 4 أجزاء (كلمة اللكنة التي تحتها خط هي حقل خاص بها)، نص شارة، فقرة، زرين مع عناصر تحكم كاملة في الارتباط، رقم العد التنازلي، نص إثبات، 3 صور، 6 ألوان.
2. Alpenrute 1 للسفر والجولات والعلامات التجارية الخارجية
بانوراما جبلية بملء الشاشة مبنية من ثلاث طبقات صور منفصلة. حرك الماوس وتتحول الطبقات بسرعات مختلفة. هذا هو العمق الحقيقي، وليس صورة مسطحة مع نص في الأعلى. تنجرف السحب عبر حلقات مدتها 55 و90 ثانية، ويتم احتساب مؤشر الارتفاع الرأسي الموجود على اليمين من 0 إلى 2847 مترًا أثناء تحميل الصفحة. حتى أن هناك متنزهًا صغيرًا به مصباح أمامي وامض على التلال الأمامية. لا أحد يحتاج إلى المتجول. الجميع يتذكر المتجول.
نظرًا لأن المشهد يأتي من ثلاثة حقول للصور، يمكنك استبدال الجبال بأعمالك الفنية ذات الطبقات (الكثبان الرملية، والساحل، وأفق المدينة) والحفاظ على اختلاف المنظر. صف الحقائق (27 طريقًا/8 متنزهين كحد أقصى/19 عامًا) عبارة عن ستة حقول قابلة للتحرير، وهنا يكسب هذا البطل الثقة: أرقام محددة بدلاً من الصفات. الأنسب: شركات الرحلات، ومنظمي الرحلات السياحية، ومواقع المتنزهات الوطنية، وأي علامة تجارية تبيع مكانًا بدلاً من المنتج.
يمكنك التعديل: عنوان رئيسي مكون من سطرين، حاجب، فقرة، زرين + روابط، رقم الارتفاع والتسمية، 3 أزواج حقائق، 4 صور للمناظر الطبيعية، 4 ألوان (إعادة صبغ تدرج السماء بالكامل من لون أساسي واحد).
3. Ember & Oak للمقاهي والمقاهي والمطاعم
خلفية إسبرسو داكنة، وعنوان رقيق مع كلمة كهرمانية مائلة، وقطعة التوقيع: حلقة من النص تقرأ “SMALL BATCH · مشوي كل يوم خميس · SINGLE ORIGIN” الذي يدور ببطء حول صورة لاتيه من أعلى إلى أسفل بينما يرتفع البخار من الكوب. يميل كيس القهوة إلى الزاوية ويستقيم عند التحليق. في الأسفل، يتم تمرير سرادق الاسم الأصلي (Yirgacheffe، Huila، Sidra...) في حلقة ويتوقف مؤقتًا عند التحليق.
النص الدائري عبارة عن حقل واحد قابل للتحرير، لذلك يكتب المخبز “SOURDOUGH · BAKED AT 5AM · NO SHORTCUTS” ويتم نقل الشخصية بالكامل. نفس الشيء بالنسبة للسرادق: حقل واحد، يُطبع مرتين داخليًا حتى لا تظهر الحلقة أي درز. يعمل في أي مجال غذائي حيث تكون الحرفة هي المحامص والمخابز ومصانع الجعة والمطاعم من المزرعة إلى المائدة.
يمكنك التعديل: عنوان مكون من 3 أجزاء مع كلمة مميزة، فقرة، ملاحظة السعر، زرين + روابط، نص حلقي، نص سرادق، صورتان، 5 ألوان.
4. Atelier Norr 5 لعلامات الأزياء والتجارة الإلكترونية المتميزة
التصميم الأكثر هدوءًا في المجموعة والأكثر تحريرًا. كلمتان كبيرتان الحجم (هادئ/خياطة افتراضيًا) تمتدان على إطار عمودي مقوس، وتمسح كل كلمة من حافة مقطوعة عند التحميل. قم بتحريك الصورة الشخصية وتتلاشى إلى نظرة ثانية بينما يتحول التعليق الموجود أسفلها من “01 /02 5 THERE Longline Coat” إلى “02 /02 ONF The Drape Dress”. إن تبديل التحويم المكون من صورتين هو الأداة الكاملة المصغرة: مقيدة، ولكنها حية.
ثلاثة ألوان فقط يجب إدارتها (القماش، الحبر، اللهجة الحكيمة) لأن قوة التصميم هي الطباعة والمساحة السلبية بدلاً من لوحة الألوان. إذا كانت علامتك التجارية تلتقط صورًا جيدة وتريد أن يبدو الموقع وكأنه كتاب مراقبة، فهذا هو الكتاب. الموضة والمجوهرات والسيراميك والأثاث. إذا كنت بحاجة إلى حشر خمسة عروض قيمة فوق الطية، فسوف يحاربك، وينبغي أن يفعل ذلك.
يمكنك التعديل: كلتا الكلمتين الرئيسيتين، تسمية الموسم العمودي، الفقرة، الزر + الرابط، تلميح التمرير، صورتان بمظهر مع تعليقين، شريط تذييل، 3 ألوان.
5. Offbeat Studio 1 للوكالات والاستوديوهات الإبداعية
الكوبالت والمرجان والليمون على ملصق الطاقة باللون الأبيض الفاتح من طراز Bouhaus. يصرخ العنوان بأحرف كبيرة مع كلمة مميزة مميزة تحصل على تمريرة صفراء تسطير لمدة نصف ثانية بعد التحميل. أسفله، توجد ثلاثة بلاطات للمحفظة يتم تدويرها قليلاً مثل المطبوعات على الطاولة؛ كل واحدة منها تستقيم وترفع وتميل نحو المؤشر بشكل ثلاثي الأبعاد عند التمرير. يدور ملصق “BOOKING FOR Q4” بتكاسل فوق الكولاج.
الدعوة الدائرية للعمل هي القطعة التي يلعب بها الناس. إنه مغناطيسي: يتبع المؤشر داخل نصف قطره ويعود للخلف عند المغادرة. كل بلاطة لها حقل رابط خاص بها، لذلك يمكن استخدام الكولاج كمحفظة صغيرة تحتوي على ثلاث دراسات حالة يمكن النقر عليها مباشرة من البطل. للوكالات والمصممين والمصورين وأي شخص يعمل يكون الملعب.
يمكنك التعديل: 3 علامات خدمة، كيكر، عنوان رئيسي مكون من 5 أجزاء (كلمة بلكنة منفصلة)، فقرة، زر مغناطيسي + رابط، 3 مربعات مع 3 روابط، نص ملصق، سرادق العميل، 5 ألوان.
6. صياغة ألعاب القوى للصالات الرياضية وعلامات اللياقة البدنية
الفحم والفولت الأخضر، نوع كبير مكثف، وعنوان رئيسي ينتقد في: يهبط كل سطر بضربة انحراف ومقياس بدلاً من التلاشي المهذب. تم تحديد السطر الثاني بدلاً من ملئه، ويأخذ السطر الثالث لون الفولت. خلف كل شيء، تنجرف كلمة شبح عملاقة (FORGE) على التمرير الخاص بك. تقع صورة الرياضي في إطار متوازي الأضلاع بزاوية مع شرطة مائلة فولت تقطع التخطيط قطريًا.
الإحصائيات تحسب على طول الجزء السفلي: 14 منصة، 31 فئة، 24 عضوًا لكل مدرب كحد أقصى. لاحظ ما يفعله هذا الرقم الأخير. “أعضاء لكل مدرب، max” هو وعد وليس تفاخر، وهو نوع الخط الذي يملأ جلسات المقدمة. استبدل الكلمة الشبحية باسم صالة الألعاب الرياضية الخاصة بك في حقل واحد. مصممة لصالات الألعاب الرياضية القوية وصناديق CrossFit واستوديوهات الفنون القتالية والمدربين الذين تتميز علامتهم التجارية بالكثافة.
يمكنك التعديل: عنوان مكون من 3 أسطر، حاجب، فقرة، كلمة شبح، علامة رأسية، زرين + روابط، 3 أزواج إحصائيات، صورة رياضي، 4 ألوان.
7. Wiggly Minds ob لتطبيقات الأطفال والمدارس والتعليم
باستيل الحلوى، والنوع المستدير، وثلاث تمائم نقطية: واحدة تقرأ كتابًا، وواحدة تحمل قلم رصاص، وواحدة تلوح بعصا النجمة. إنها تنبثق بنابض، وتتمايل بلطف، وتخجل من المؤشر أثناء تحركه. تتلألأ النجوم عبر الخلفية، ويرسم تمايل أصفر نفسه تحت الكلمة المميزة المائلة، ويسحق الزر الرئيسي مثل الهلام عند الضغط عليه. تغلق موجة بيضاء القسم بحيث يتدفق إلى كل ما يأتي بعد ذلك.
يحافظ التصميم المركزي على الآباء (المشترين الفعليين) على مسار واضح: شارة الفئة العمرية، والوعد، وفقرة واحدة تجيب على “، هل هذا هو وقت الشاشة الذي سأندم عليه؟”، خط الثقة مع تصنيف متجر التطبيقات. التمائم عبارة عن ثلاثة حقول للصور. قم بتبديل شخصياتك الخاصة وسيتم تطبيق سلوك الارتداد والظل والخجل من المؤشر تلقائيًا. لتطبيقات التعلم، والرعاية النهارية، ونوادي الأطفال، وممارسات طب الأطفال، والعلامات التجارية للألعاب.
يمكنك التعديل: عنوان مع كلمة مميزة مائلة، شارة، فقرة، زرين + روابط، خط ثقة، 3 صور تميمة، 6 ألوان.
8. ستوديو ميريديان 9 للمهندسين المعماريين ومصممي الديكور الداخلي والمحافظ
انضباط الشبكة السويسرية: عمود تعريفي (ممارسة، مؤسسة، مشاريع في الموقع)، عنوان رفيع يبلغ وزنه 300 وزن مع كلمة واحدة تحتها خط من الطوب، وصورة مشروع كبيرة تكشف عن طريق المسح. تنزلق ستارة ورقية اللون وتستقر الصورة من تكبير طفيف خلال ثانية كاملة. التفاصيل التي يرسلها الأشخاص إلينا عبر البريد الإلكتروني هي مخطط الأرضية في الشريط الجانبي، والذي يرسم نفسه ipol الجدران أولاً، ثم يتأرجح الباب، ثم تتلاشى ملصقات الغرفة. إنها رسوم متحركة SVG يتم شحنها داخل الصورة التجريبية، ولا يوجد أي مكون إضافي.
خمسة وعشرون حقلاً قابلاً للتحرير تجعل هذا البطل الأكثر ثراءً بالبيانات من بين العشرة. كل تسمية تعريفية، وكلا التسميات التوضيحية، وحتى الإحداثيات في القاعدة السفلية. ثلاثة ألوان فقط، وهذا متعمد: الجرافيت والورق والطوب هو نظام، والأنظمة هي ما يحترمه هذا الجمهور. لشركات الهندسة المعمارية والاستوديوهات الداخلية والمهندسين الإنشائيين وأي محفظة يشير فيها ضبط النفس إلى الكفاءة.
يمكنك التعديل: عنوان مكون من 5 أجزاء، فقرة، زر + رابط نصي مع عناوين URL، 3 أزواج تعريفية، صورة + تسمية توضيحية، مخطط أرضي + تسمية توضيحية، قاعدة إحداثية، 3 ألوان.
9. Lowtone ob للمهرجانات والحفلات الموسيقية وصفحات الفعاليات
التصميم الأعلى هنا، ويكسبه. تنقسم العلامة النصية العملاقة في منتصف الكلمة إلى تدرج برتقالي إلى بنفسجي، وينجرف الجرم السماوي المتوهج خلف المحتوى ويميل بعيدًا عن المؤشر، ويمتد على طول الجزء السفلي بعرض كامل المعادل: العشرات من الأشرطة، كل منها متحرك على إيقاعه الخاص بحيث لا يتكرر الشريط بشكل واضح أبدًا. يتم إنشاء الأشرطة بواسطة البرنامج النصي الخاص بالعنصر واجهة المستخدم وتسحب تدرجها من ألوان علامة التبويب "النمط" الخاصة بك، لذا فإن إعادة تلوين المهرجان يعيد تلوين الصوت.
ثلاثة صفوف من التشكيلة (FRI / SAT / SUN) يحمل كل منها علامته التجارية وقائمة أعماله ورابطه الخاص، حتى تتمكن من الإرسال كل يوم إلى صفحة الجدول الزمني الخاصة به. التدرج عبارة عن ثلاث توقفات ألوان منفصلة في علامة التبويب "النمط". قم بتغييرها وتتبعها العلامة النصية والأزرار والتوهج والمعادل. للمهرجانات والأماكن وليالي النوادي والمؤتمرات التي تتصدر العناوين الرئيسية وإطلاق الألبومات.
يمكنك التعديل: تقسيم العلامة النصية، التاريخ، الموقع، الفقرة، 3 صفوف تشكيلة مع 3 روابط، 2 أزرار + روابط، صورة مدارية، 5 ألوان بما في ذلك جميع نقاط التوقف الثلاثة المتدرجة.
10. Manne op للعلامات التجارية للعناية بالبشرة والجمال والعافية
ضباب الخزامى والخوخ الضبابي يتلاشى وينجرف خلف عنوان رقيق خطه المائل، “النوبة الليلية.”، يحصل على تسطير متدرج ناعم يزهر للخارج. تطفو زجاجة المنتج بلطف في وسط حلقة متقطعة، وثلاث شارات مكونة (2% شبكية، 5% خميرة شوفان، 0% عطر) مدار إنها في حلقة مدتها 26 ثانية، وتدور بشكل معاكس بحيث تظل في وضع مستقيم طوال الطريق.
هذه الشارات هي مسرحية التحويل. المطالبات المئوية هي ما يبحث عنه مشترو العناية بالبشرة، وهنا يدورون حول المنتج حرفيًا. جميع قيم الشارات والملصقات الستة عبارة عن حقول نصية عادية. صف المطالبات الموجود أسفله (تم اختبار طبيب الأمراض الجلدية · خالٍ من العطور · زجاج قابل لإعادة التدوير) يكمل قصة الثقة. للعناية بالبشرة والمكملات الغذائية والشموع والعناية بالشعر 5 أي منتج تكون قائمة المكونات فيه هي الحجة.
يمكنك التعديل: عنوان مكون من جزأين، حاجب، فقرة، زرين + روابط، 3 مطالبات، 3 أزواج شارات مدارية، صورة زجاجة، 4 ألوان.
11. نهايات فضفاضة للمحافظ والاستوديوهات وصفحات الإطلاق التي تحتاج إلى إسقاط فك
هذا جديد، وهو الشيء الأكثر طموحًا الذي دفعناه عبر Widget Builder حتى الآن: عنوان ملء الشاشة يجلس في عين دوامة ألف جسيم، تمت محاكاتها على وحدة معالجة الرسومات الخاصة بالزائر في الوقت الفعلي. حرك الماوس وأجزاء السرب حول المؤشر، ثم قم بالرجوع للخلف. تنجرف الكاميرا قليلاً أيضًا، مما يجعل الحقل يُقرأ كمساحة بدلاً من فيديو في الخلفية. يقوم العنوان بفك تشفير نفسه باستخدام تدافع الشخصية عند التحميل، ويحمل الزر الأساسي مسحًا بطيئًا للضوء، وتحافظ طبقة حبيبات الفيلم على الخلفية الداكنة من النطاقات.
الجسيمات ليست نظرة واحدة ثابتة. يؤدي الانخفاض في علامة التبويب "النمط" إلى تبديل الحقل بينهما فروع (خيوط دوامية ملونة)، ثلج (الانجراف الأبيض البطيء)، النجوم (حقل نجمي شبه ساكن)، و الكون (خصلات طويلة في الفضاء السحيق). أربعة أشرطة تمرير تتحكم في الكثافة (100 إلى 2000 جسيم)، والحجم، والعمق، ومدى صعوبة تفاعل السرب مع الماوس. هناك أيضًا عنصر تحكم في المحاذاة يحرك حزمة المحتوى بأكملها إلى اليسار أو الوسط أو اليمين، لذا تعمل نفس الأداة كبطل تحريري محاذٍ لليسار أو صفحة دفقة مركزية. ملاحظة صادقة: يتم تحميل المحرك ثلاثي الأبعاد من CDN، ويتم تخزينه مؤقتًا بحوالي 1.2 ميجابايت بعد الزيارة الأولى، ويعمل على WebGPU في Chrome وEdge مع احتياطي WebGL2 في كل مكان آخر. إذا فشل هذا الطلب، فسيتم عرض البطل كقسم عادي ولا ينكسر أي شيء. لا توجد صور لتحميلها أيضًا؛ يتم إنشاء المشهد بأكمله.
يمكنك التعديل: نص حبوب منع الحمل، الحاجب، العنوان، الشعار، زرين مع عناصر تحكم كاملة في الارتباط، إشارة التمرير، 3 نصوص للشريط السفلي، محاذاة المحتوى (يسار/وسط/يمين)، نوع الجسيم (خيوط /ثلج / نجوم / كون)، الكثافة والحجم والعمق ومنزلقات تفاعل الماوس، 5 ألوان.
كيفية استيراد قالب قسم البطل إلى Elementor (خطوة بخطوة)
تستغرق العملية برمتها حوالي دقيقتين لكل عنصر واجهة مستخدم. تحتاج إلى ووردبريس مع العنصر و ال الإضافات الرئيسية البرنامج المساعد PRO نشط. إليك سير العمل الدقيق، الذي تم التقاطه بالشاشة من استيراد حقيقي لبطل مهرجان الموسيقى.
الخطوة 1: قم بفك ضغط التنزيل
انقر نقرًا مزدوجًا فوق الرمز البريدي (هنا، music-festival-hero.zip). ستجد في الداخل ثلاثة أشياء: ملف القطعة (widget-music-festival.json)، أ demo-images مجلد يحتوي على PNGs جاهزة للتحميل، و README.txt وهذا يخبرك بالصورة التي تنتمي إلى أي حقل. هناك أيضا svg-originals المجلد 2 المزيد عن ذلك في الأسئلة الشائعة.
الخطوة 2: استيراد JSON إلى منشئ عناصر واجهة المستخدم
في مسؤول WordPress الخاص بك، انتقل إلى الإضافات الرئيسية → منشئ القطعة وانقر استيراد القطعة. اسحب ال .json قم بإدخال الملف في مربع الحوار، أو انقر فوق تصفح الملفات. فقط JSON يذهب هنا. الصور تأتي لاحقا، من خلال مكتبة الوسائط العادية.
الخطوة 3: تحقق من الأداة واحفظها
يتم فتح الأداة في أداة الإنشاء مع كل شيء سلكي بالفعل: أقسام المحتوى على اليسار، وعلامات التبويب HTML/CSS/JS خلف علامات التبويب، وشريط جانبي للمستندات يسرد كل رمز حقل. لا تحتاج إلى لمس أي منه. فقط اضغط حفظ الإعدادات. إذا كنت مهتمًا بكيفية اتصال الحقول بالرمز، فإن دليل إعدادات منشئ القطعة يشرح نظام الرمز المميز.
الخطوة 4: اسحبه إلى صفحتك
افتح أي صفحة باستخدام Elementor. تظهر عنصر واجهة المستخدم الجديد الخاص بك في اللوحة أدناه المفضلة؛ ابحث عن اسمه إذا لم تكتشفه. اسحبه إلى حاوية. نصيحة واحدة لك: قم بتعيين الحاوية عرض المحتوى إلى العرض الكامل لذا فإن التصميمات المتطورة مثل المهرجان وأبطال السفر يمكن أن تصل بالفعل إلى الحواف.
الخطوة 5: تحرير المحتوى والروابط
انقر فوق الأداة وسرد علامة التبويب "المحتوى" كل قطعة قابلة للتحرير، وتم تجميعها بالطريقة التي تم بها تجميع التصميم: منطقة المحتوى، وصفوف التشكيلة، والأزرار، والصور. اكتب أي نص وتحديثات المعاينة مباشرة. يحتوي كل زر وصف مرتبط على عنصر تحكم مناسب في رابط Elementor. الصق عنوان URL الخاص بك، ثم اضغط على الترس لتبديل “افتح في نافذة” جديدة و“nofollow”.
الخطوة 6: تحميل الصور التجريبية
في قسم الصور، انقر فوق كل حقل وقم بتحميل الملف المطابق من ملف demo-images مجلد. يقوم README بتعيينها إذا كانت الأداة تحتوي على عدة عناصر واجهة مستخدم. يتم تصدير ملفات PNG التجريبية بدقة 2x، بحيث تظل حادة على شاشات شبكية العين. مبادلة الصور الخاصة بك في أي وقت؛ الحقل هو منتقي وسائط WordPress القياسي. ثم ينشر. منتهي.
لإعادة التصميم: افتح علامة تبويب النمط. يكشف كل بطل عن لوحته الكاملة كحفنة من عناصر التحكم في الألوان، وكل ظل مشتق (حالات التحويم، والتوهج، والحدود، والتدرجات) يعاد حسابه من تلك. لا يمكنك إعادة تلوين هذه التصميمات إلى النصف، وهذا هو الهدف بالضبط.
الأسئلة الشائعة
هل تعمل قوالب قسم البطل هذه مع Elementor المجاني؟
نعم. كل شيء هنا يعمل على Elementor المجاني بالإضافة إلى البرنامج الإضافي Master Addons PRO. لا حاجة إلى Elementor Pro. تأتي ميزة استيراد Widget Builder في الإصدار المجاني.
هل الرسوم المتحركة سوف تبطئ موقعي؟
لا يوجد فرق قابل للقياس في اختباراتنا. الرسوم المتحركة هي CSS وبرنامج نصي صغير النطاق لكل عنصر واجهة مستخدم. لا توجد مكتبات للرسوم المتحركة، ولا تبعية jQuery، ولا توجد طلبات خارجية باستثناء استدعاء واحد لخطوط Google لكل عنصر واجهة مستخدم (ويتم تحميله مرة واحدة حتى إذا ظهرت عنصر واجهة المستخدم مرتين). تعمل السحابات نفسها بسعة 30 كيلو بايت إلى 2 ميجابايت، وهذه هي الصور التجريبية بالكامل تقريبًا.
ماذا يحدث للزوار الذين يقومون بإيقاف تشغيل الرسوم المتحركة؟
تتحقق كل عنصر واجهة مستخدم من تفضيلات الحركة المنخفضة لنظام التشغيل. إذا تم تشغيله، فسيتم عرض المداخل على الفور، وتتوقف السرادقات والمدارات، وتظهر العدادات أرقامها النهائية. يبقى التصميم سليما؛ الحركة تغادر بأدب.
لماذا توجد ملفات SVG في الرمز البريدي إذا لم يقم WordPress بتحميلها؟
يقوم WordPress بحظر تحميلات SVG افتراضيًا لأسباب أمنية، لذا تتضمن السحابات إصدارات PNG التي يتم تحميلها في أي مكان. هذا هو ما يستخدمه دليل الاستيراد. ال svg-originals يعد المجلد بمثابة مكافأة: إذا كان موقعك يسمح بـ SVG (من خلال مكون إضافي مثل Safe SVG)، فإن الإصدارات المتجهة تكون حادة بشكل لا نهائي بجزء صغير من حجم الملف.
هل يمكنني استخدام قسمين من أقسام الأبطال هذه على نفس الموقع؟
نعم، حتى في نفس الصفحة. يتم تحديد نطاق أنماط كل عنصر واجهة مستخدم إلى فئة الغلاف الخاصة به وتكون أسماء الرسوم المتحركة الخاصة به مسبوقة، لذلك لا يمكن أن تتصادم مع بعضها البعض أو مع السمة الخاصة بك.
هل يمكنني تغيير الخطوط؟
تقوم كل عنصر واجهة مستخدم بتحميل خطي Google تلقائيًا لمطابقة التصميم. لمبادلتهما، افتح عنصر واجهة المستخدم في Widget Builder، وقم بتحرير عنوان URL للخط في علامة التبويب JS وأسماء عائلة الخطوط في علامة التبويب CSS. إنه تغيير من سطرين. ال مستندات منشئ القطعة قم بتغطية كيفية عمل علامات تبويب التعليمات البرمجية.
هل يمكنني تعديل التصميم نفسه، وليس المحتوى فقط؟
هذا هو الجزء الممتع. كل عنصر واجهة مستخدم مفتوح بالكامل في Widget Builder. توجد HTML وCSS وJS في علامات التبويب، ويتم التعليق عليها وقراءتها. إضافة حقل، وإزالة قسم، وتغيير نقطة التوقف. إذا كان بإمكانك تحرير ورقة الأنماط، فيمكنك دمج أي منها في شيء جديد. ال منشئ القطعة تحتوي الصفحة على نظرة عامة، وإذا قمت ببناء شيء جيد، فنحن نريد رؤيته.
جميع أقسام الأبطال العشرة مجانية للمشاريع الشخصية والتجارية. تم تصميمه واختباره بواسطة فريق Master Addons على Elementor باستخدام Master Addons v3.x. أسئلة أم طلب عنصر واجهة مستخدم؟ أخبرنا في التعليقات. تنمو المجموعة بناءً على ما يطلبه الناس.
