مربع صورة Elementor عبارة عن عنصر واجهة مستخدم يقوم بإقران صورة بعنوان ووصف قصير في كتلة واحدة مرتبطة. إنها الطريقة التي تقوم بها معظم مواقع WordPress ببناء شبكات الخدمات وصفوف الميزات وأقسام الفريق. يقوم Elementor بشحن واحدة مجانًا؛ تستبدله التصميمات الستة عشر أدناه بالتخطيطات والحركة التي لا يمكن لعنصر واجهة المستخدم الافتراضي إنتاجها.
نظرًا لأن كل شخص لديه نفس الأداة، فإن قسم الخدمات في موقع السباك في ليدز تم تصميمه بشكل مماثل لاستوديو التصميم في لشبونة. نفس الأعمدة الثلاثة، نفس الصورة المركزية، نفس الفجوة 16px.
لذلك قمنا ببناء ستة عشر بديلاً. كل واحدة منها عبارة عن أداة Elementor عاملة، ولكل منها عرض توضيحي مباشر يمكنك فتحه الآن ورابط تنزيل على هذه الصفحة. لا تحتاج إلى تسليم عنوان بريد إلكتروني أو إنشاء حساب للحصول على واحد.
على هذه الصفحة
جدول المحتويات
التصاميم الـ 16 في لمحة
| # | تصميم | ماذا يفعل | الأفضل ل |
|---|---|---|---|
| 01 | صناديق صور التجويف | يتبع مصدر الضوء المؤشر عبر البطاقة | المواقع المظلمة والخدمات الفنية |
| 02 | مربعات الصور الحافة | لوحات الأوفست التي تفتح أثناء التمرير | التحرير والأدلة والعلامات التجارية الخارجية |
| 03 | صناديق صور الفتحة | يتم فتح كل صورة من فتحة مقصوصة | التصوير الفوتوغرافي والطباعة والشبكات المكونة من ستة عناصر |
| 04 | صناديق الصور القاعدية | يتم تشغيل البطاقات على المفصلة، وتظهر الوجه الخلفي | قبل وبعد، تكشف المواصفات |
| 05 | صناديق الصور المتتالية | أربع بطاقات تستقر بالتسلسل، وليس كلها مرة واحدة | خطوات العملية، خدمات الاستوديو |
| 06 | صناديق الصور المخرمة | صور مصغرة صغيرة، قواعد دقيقة، قائمة كثيفة من عمودين | قوائم الخدمة الطويلة، وقوائم الأسعار |
| 07 | شريط إفريز | شريط أفقي تقوم بسحبه أو التمرير من خلاله | تسلسلات طويلة، خطوط الإنتاج |
| 08 | صناديق الصور الدوامة | تميل البطاقات نحو المؤشر بلمعان | المنتجات والسلع المصنوعة |
| 09 | صناديق الصور الدافعة | تسحب البطاقات نحو المؤشر مثل المغناطيس | الحجوزات والدورات والتأجير |
| 10 | صناديق الصور كينتسوجي | تصل الصور على شكل شظايا وتتجمع من جديد | الحرف والزجاج والسيراميك والترميم |
| 11 | صناديق الصور الحاجز | ألواح طويلة مبنية من شرائح عمودية | ورش عمل، نجارة، أعمدة ضيقة |
| 12 | صناديق الصور الكسرية | يوجد غسول ملون في وضع المزج فوق كل صورة | الاستوديوهات والموسيقى والترخيص |
| 13 | صناديق الصور الناهضة | ترتفع البطاقات إلى مكانها بشفة تناسب نصها | وكالات الإنتاج |
| 14 | صندوق صور الانقلاب | زوج كبير متدرج مع علاج ثنائي اللون | القهوة، المصادر، رواية القصص |
| 15 | مربع صورة العتبة | تنقسم الأبواب إلى المنتصف لتكشف عن الصورة | يكشف المزارعون والمشاتل |
| 16 | صندوق صور الرق | يتم مسح التمويه الناعم عندما تفتح مشابك البطاقة | ملزمة، المحفوظات، العلامات التجارية الهادئة |
ما تحتاجه لتشغيل هذه
العنصر المجاني يكفي للصفحة نفسها. التصاميم مسألة مختلفة.
- جميع الستة عشر بحاجة إلى إضافات رئيسية. كل واحد منهم مبني على عناصر التحكم (المكرر، الطباعة، الأبعاد، الحدود، منتقي الأيقونات، علامات التبويب) الكاملة منشئ القطعة يوفر. يحتوي المكون الإضافي المجاني على أداة إنشاء عناصر واجهة المستخدم، ولكن تظهر عناصر التحكم هذه على أنها مقفلة.
- التنزيلات على هذه الصفحة مجانية وغير مسورة. احصل على JSON واحتفظ به. يمكنك تعديل الخيارات المحدودة في الإصدار المجاني. لكن الإصدار الاحترافي يفتح كل شيء.
- العروض التوضيحية الحية لا تكلف شيئًا على الإطلاق. افتح واحدًا، وقم بتغيير حجم المتصفح، واسحب البطاقة، وقم بعلامة التبويب باستخدام لوحة المفاتيح. هذه هي الطريقة الصادقة للحكم على ما إذا كان نمط الحركة يناسب المحتوى الخاص بك أم لا، وهو مجاني.
إذا كنت تريد تصميمات تعمل على البرنامج الإضافي المجاني، فإن الأدوات الثمانية المجانية الموجودة لدينا قوالب منزلق العنصر لا تستخدم المجموعة أي عناصر تحكم احترافية، والعديد منها عبارة عن تخطيطات للبطاقات وليست أشرطة تمرير.
01. صناديق الصور لومن

العرض المباشر تحميل القطعة JSON
أربع بطاقات على خلفية شبه سوداء. حرك المؤشر عبرها ويتحرك معها ضوء ناعم، مما يؤدي إلى تفتيح جزء الصورة الموجود أسفل المؤشر وترك الباقي خافتًا. البطاقة التي تنظر إليها هي البطاقة المضاءة.
ما يجعلها تعمل هو ضبط النفس. البطاقات لا تتحرك أو تتدرج عند التحليق. الشيء الوحيد الذي يتغير هو مكان سقوط الضوء، وهو قريب من الطريقة التي تنظر بها فعليًا إلى الأشياء الموجودة على طاولة العمل أسفل المصباح.
استخدمه من أجل: الخدمات الفنية، والمواقع ذات الطابع المظلم، وأي شيء تم تصويره على أرض مظلمة.
لا تستخدمه من أجل: خلفيات بيضاء. ليس لدى الأضواء ما تعمل ضده، والأمر برمته يُقرأ على أنه حالة تحوم قذرة بعض الشيء.
02. مربعات الصور الحافة

العرض المباشر تحميل القطعة JSON
عمودان، خارج الخطوة عمدًا، بحيث يكون العمود الأيمن أقل من اليسار. تفتح كل لوحة عند عبورها إلى المنظر. تحمل العناوين سهمًا دائريًا صغيرًا، ويوجد أسفلها ملصق حاجب بأغطية متباعدة بين الحروف: SNOWCRAFT، SUMMITS، TRAVERSES.
هذا الإزاحة يقوم بعمل حقيقي. شبكة مستقيمة تخبر العين بالمسح في صفوف وتتوقف عن القراءة. قم بترتيب الأعمدة وعليها الانتقال إلى أسفل الصفحة بدلاً من ذلك، وهو الاتجاه الذي تريده بالفعل.
استخدمه من أجل: الصفحات الافتتاحية والأدلة وأي شيء يحتوي على أربعة إلى ستة عناصر جوهرية.
لا تستخدمه من أجل: أكثر من ثمانية عناصر تقريبًا. يتراكم الترنح وتصبح الصفحة طويلة جدًا وسريعة جدًا.
03. صناديق الصور ذات الفتحة

العرض المباشر تحميل القطعة JSON
ستة صناديق في صفين من ثلاثة، على ورق رمادي دافئ. يتم إخفاء كل صورة ويفتح القناع للخارج عند وصول الصف، بالطريقة التي تفعلها فتحة العدسة. تحمل كل بطاقة رابطًا صغيرًا SEE DETAILS تحت وصفها.
هذا هو الشيء الذي يجب الوصول إليه عندما يكون لديك ستة أشياء وتكون متساوية حقًا. تقوم معظم تخطيطات صندوق الصور بترتيب عناصرها بهدوء حسب الحجم أو الموضع. هذا لا.
استخدمه من أجل: خدمات الغرفة المظلمة والطباعة، وشبكات الميزات المكونة من ستة عناصر، وأي شيء فوتوغرافي.
لا تستخدمه من أجل: ثلاثة عناصر. الإيقاع المكون من صفين هو التصميم بأكمله ويفقده صف واحد من ثلاثة.
04. صناديق الصور القاعدية

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

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

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

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

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

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

العرض المباشر تحميل القطعة JSON
تصل الصور على شكل قطع وتعيد تجميعها. يأتي معها نمطان من أنماط الكسر: ثلاث قطع طويلة، مثل لوح متصدع عبر ارتفاعه، وستة أسافين تشع من نقطة بعيدة عن المركز، والتي تُقرأ على أنها تأثير وليس كسرًا نظيفًا.
الأوعية المنفوخة، المصبوبة والفرن، الترميم، مقعد التدريس. العرض التوضيحي عبارة عن عمل زجاجي طوال الوقت. تم تصميم التصميم لمتجر ساخن ويظهر ذلك، لكنه يهبط في أي مكان يكون فيه الموضوع شيئًا مصنوعًا أو مكسورًا أو تم تجميعه مرة أخرى.
استخدمه من أجل: الزجاج والسيراميك والترميم والإصلاح والحفظ.
لا تستخدمه من أجل: المستشفيات والتأمين وأي شيء يحمل فيه “shattering” معنى لا تريده.
11. صناديق الصور ذات الحاجز

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

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

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

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

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

العرض المباشر تحميل القطعة JSON
تفتح كل بطاقة من مقطع بينما يقوم التمويه الناعم بمسح الصورة، مثل سحب الورق بعيدًا. يتم تسليح كل بطاقة في القسم في التزام واحد، مما يعني تمرير تخطيط واحد للصف بأكمله بدلاً من تخطيط واحد لكل بطاقة.
تجليد الحالة، والحفظ، والصناديق والمرفقات، وأعمال الطبعة. العرض التوضيحي عبارة عن تجليد كتب. هذه هي الحركة اللطيفة في المجموعة والتي من المرجح أن تنجو من العميل الذي يقول إنه يكره الرسوم المتحركة.
استخدمه من أجل: المحفوظات والتجليد والحفظ والعلامات التجارية الهادئة والمكلفة.
لا تستخدمه من أجل: أي شيء يحتاج إلى الاستعجال. هذا التصميم ليس له أي شيء ولا يتظاهر بذلك.
ما الذي يمكن أن تفعله أداة Elementor image box الافتراضية؟
يمنحك مربع صورة Elementor المجاني صورة وعنوانًا ووصفًا ورابطًا اختياريًا. في علامة التبويب "النمط"، يمكنك ضبط عرض الصورة ونصف قطر الحدود والتباعد بين الصورة والنص والمحاذاة وموضع الصورة (أعلى أو يسار أو يمين). تقتصر تأثيرات التمرير على مرشحات وتحويلات CSS العامة الخاصة بـ Elementor.
يغطي ذلك الكثير من المواقع، وإذا كان يغطي موقعك، فاستخدمه. لا تحتاج إلى ملحق لوضع صورة فوق العنوان.
حيث ينفد الحركة والبنية. لا يوجد وجه خلفي، ولا تسلسل لكل بطاقة، ولا تخطيط أفقي، ولا توجد طريقة لجعل بطاقة واحدة تتصرف بشكل مختلف عن جيرانها. هذه هي الفجوات التي تملأها التصميمات الستة عشر المذكورة أعلاه.
مربع الصورة مقابل مربع الأيقونة: ما الذي يجب عليك استخدامه؟
استخدم مربع صورة عندما تكون الصورة هي المحتوى، مثل صورة فوتوغرافية للعمل أو الغرفة أو المنتج. استخدم مربع أيقونة عندما تكون الصورة مزخرفة والكلمات تحمل المعنى. تكون عناصر واجهة المستخدم شبه متطابقة: كلاهما يربطان رسمًا بعنوان ووصفًا في كتلة واحدة مرتبطة.
الاختبار العملي هو ما إذا كنت ستلاحظ اختفاء الرسم أم لا. إذا كانت شبكة الخدمات لا تزال تقرأ بشكل جيد مع اختفاء الرموز، فقد كانت مزخرفة وكان مربع الأيقونات هو المكالمة الصحيحة. إذا كانت إزالة الصور تترك لك قائمة بالأسماء، فأنت بحاجة إلى مربع صورة.
الخيار الثالث الذي ينساه الناس: أ flipbox، وهو صندوق صور ذو ظهر. Bascule أعلاه هو تلك الفكرة التي أعيد بناؤها بمفصلة.
كيف يمكنك إضافة تأثير التمرير إلى مربع صورة Elementor؟
حدد عنصر واجهة المستخدم، وافتح علامة التبويب "النمط"، وقم بتوسيع قسم الصورة وانتقل إلى علامة التبويب "تمويه". تحصل على العتامة ومرشحات CSS (الطمس والسطوع والتشبع والتباين ودرجة اللون) ومدة الانتقال. لإجراء تحويلات مثل القياس أو التدوير، استخدم عناصر التحكم في التمرير الخاصة بعلامة التبويب المتقدمة.
هذا هو السطح المدمج بالكامل. أي شيء يتجاوزه، مثل الضوء الذي يتتبع المؤشر، أو السحب المغناطيسي، أو اللمعان الذي يتقاطع عند الإمالة، يحتاج إلى CSS مخصص أو أداة تشحن السلوك.
إذا كنت تبحث عن تأثيرات النص فوق الصورة على وجه التحديد، فقد قمنا بفهرستها 25+ نص العنصر فوق تأثيرات تحويم الصورة بشكل منفصل، وتلك تعمل مع عنصر واجهة المستخدم الأسهم.
كيفية استيراد تصميمات صندوق الصور Elementor هذه
قم بتنزيل JSON من أي تصميم أعلاه، ثم انتقل إلى WordPress الإضافات الرئيسية → منشئ عناصر واجهة المستخدم → استيراد عناصر واجهة المستخدم وتحميل الملف. تظهر الأداة في لوحة Elementor ضمن المفضلة، مع عناصر التحكم الخاصة بها في علامتي التبويب "المحتوى والنمط".
- انقر تحميل القطعة JSON على التصميم الذي تريده. يحتوي الرمز البريدي على JSON وصورة معاينة.
- فك ضغطه. لن يقرأ مستورد القالب الخاص بـ Elementor هذا الملف، لأنه ينتقل إلى Widget Builder بدلاً من القوالب.
- اذهب الى الإضافات الرئيسية → منشئ القطعة واختر استيراد القطعة.
- تحميل JSON. قم بتحرير أي صفحة باستخدام Elementor وابحث في اللوحة عن اسم عنصر واجهة المستخدم.
- استبدال الصور والنصوص العنصر النائب. البطاقات عبارة عن مكرر، لذا قم بإضافة العناصر أو إزالتها هناك بدلاً من تكرار الأداة.
الخطأ الشائع هو الخطوة 2. هذه هي عناصر واجهة مستخدم Widget Builder، وليست كذلك قوالب قسم العنصر، لذا فإن استيرادها من خلال القوالب → الاستيراد سيفشل ولن توضح رسالة الخطأ السبب.
هل تعمل صناديق الصور هذه على الهاتف المحمول، وهل يمكن الوصول إليها؟
نعم لكليهما، مع تحذير واحد على مستوى التصميم. كل عنصر واجهة مستخدم هنا يحترم prefers-reduced-motion: إذا قام الزائر بتمكين الحركة المنخفضة على مستوى نظام التشغيل، فلن يتم تشغيل الرسوم المتحركة للمدخل وستعرض البطاقات في حالتها النهائية. يتم التعامل مع هذا في الأداة، ولا يترك لك.
التصميمات التي تعتمد على المؤشر تتدهور بدلاً من أن تنكسر. يحتاج مغناطيس Gyre's Tilt وImpulse إلى موضع مؤشر لا توفره شاشة اللمس، لذلك تصبح البطاقات ثابتة على الهاتف المحمول ويظل كل شيء قابلاً للقراءة والنقر. يقوم Bascule بتبديل قلبه أسفل نقطة التوقف عمدًا.
يتعامل Gyre أيضًا مع تركيز لوحة المفاتيح بشكل منفصل عن التمرير. علامة التبويب على البطاقة وستحصل على الرفع واللمعان بدون التدوير. تتخطى معظم تأثيرات الإمالة ذلك وتترك لمستخدمي لوحة المفاتيح شيئًا.
ما هو مربع صورة العنصر الذي يجب عليك اختياره بالفعل؟
ابدأ من عدد العناصر الخاصة بك، وليس من التأثير.
- عنصران إلى أربعة عناصر، كل منها مهم: الانقلاب أو الحافة.
- ثلاث خدمات بالضبط: الناهض أو الدوامة أو القاعدية.
- أربعة عناصر: التجويف أو الشلال أو كينتسوجي أو العتبة أو الرق.
- ستة عناصر متساوية: فتحة.
- ثمانية أو أكثر: شريط إفريز إذا كانت عبارة عن تسلسل، وتخميل إذا كانت قائمة.
- صور طويلة، صورة شخصية: حاجز.
- الصور التي لا تتطابق مع بعضها البعض: ينكسر.
- تنتهي كل بطاقة بزر: دفعة.
ثم تحقق من التأثير ضد موضوعك. Kintsugi في مكتب محاماة هو مزحة سيئة. عتبة الحديقة أنيقة للغاية تقريبًا. إذا لم تذكر الحركة شيئًا عن العمل، قم بإسقاطه واستخدم Riser.
الأسئلة المتداولة
هل أداة Elementor image box مجانية؟
نعم. يأتي صندوق الصور في البرنامج الإضافي Elementor المجاني، مع الصورة والعنوان والوصف والرابط وموضع الصورة ومرشحات التمرير الأساسية. تختلف التصميمات الستة عشر الموجودة في هذه الصفحة: فهي عناصر واجهة مستخدم Master Addons Widget Builder وتحتاج إلى Master Addons Pro لتحريرها، على الرغم من أن التنزيلات نفسها مجانية.
هل يمكنني إضافة زر إلى مربع صورة Elementor؟
ليس في عنصر واجهة المستخدم الخاص بالمخزون، والذي يربط الصندوق بأكمله بدلاً من إعطائك زرًا منفصلاً. للحصول على زر حقيقي، يمكنك إما وضع عنصر واجهة مستخدم الزر أسفل داخل نفس الحاوية، أو استخدام تصميم يتضمن واحدًا. يتم شحن كل من Impulse وAperture وCascade وGyre مع زر في البطاقة.
كيف أجعل مربعات صور Elementor بنفس الارتفاع؟
ضع المربعات في حاوية مرنة واضبط عناصر محاذاة الحاوية على التمدد، ثم اضبط كل عمود في مربع الصورة على الارتفاع الكامل. أطوال النص غير المتساوية هي السبب المعتاد. يتعامل كل تصميم في هذه الصفحة مع ارتفاعات متساوية في CSS الخاص به، لذلك لا تنشأ المشكلة.
ما الفرق بين مربع الصورة وعنصر واجهة المستخدم للصورة؟
تضع أداة الصورة صورة واحدة مع تسمية توضيحية ورابط اختياري. مربع الصورة مركب: الصورة والعنوان والوصف والرابط في كتلة واحدة، تم تصميمه وتباعده كوحدة واحدة. استخدم عنصر واجهة المستخدم للصورة للحصول على صورة مستقلة، وصندوق الصور للحصول على بطاقة في الشبكة.
هل أحتاج إلى Elementor Pro لهذه التصميمات؟
لا. يعد الإصدار المجاني من Elementor كافيًا، لأن التصميمات تم إنشاؤها باستخدام Master Addons بدلاً من عناصر واجهة المستخدم Elementor Pro. ما تحتاجه هو Master Addons Pro، نظرًا لأن كل تصميم يستخدم عناصر تحكم Widget Builder (المكرر، والطباعة، والأبعاد، والحدود، والأيقونات، وعلامات التبويب) المقفلة في البرنامج الإضافي المجاني.
أين تذهب بعد ذلك
إذا كنت تريد المزيد من التصاميم القابلة للاستيراد، فإن 20 قوالب منزلق Elementor المجموعة هي الأخ الأقرب لهذه الصفحة وثمانية منها تعمل على البرنامج الإضافي المجاني. للاطلاع على الدوارات على وجه التحديد، راجع الحاجيات الدائرية Elementor، أو ما هو في الواقع مجاني إذا كان سؤال الترخيص هو الذي تهتم به.
لأنماط البطاقات ذات الصلة: نقاط اتصال الصورة للتعليق على صورة واحدة كبيرة، أقسام أعضاء الفريق للأشخاص بدلاً من الخدمات، و الرسوم المتحركة 3D flipbox إذا لفت باسكول انتباهك. تفاصيل الترخيص موجودة على صفحة التسعير، وقائمة الأدوات الكاملة موجودة 100+ أفضل إضافات العناصر.
