هل سبق لك أن أردت تقديم إنشاء بطاقة منتج باستخدام Elementor ?
هذا ما سنعرضه لك في هذا البرنامج التعليمي. للحصول على فكرة دقيقة إلى حد ما عما سنتحدث عنه اليوم ، ندعوك لمشاهدة الفيديو التالي:
يدور هذا البرنامج التعليمي حول تقديم منتجات عبارة عن أحذية من خلال إبراز أحجامها وألوانها وزر الشراء لكل منها. عندما تحوم فوق كل بطاقة ، ستظهر هذه المعلومات. فيما يلي ملخص موجز لما سنفعله.
لمتابعة هذا البرنامج التعليمي ، ندعوك للعثور على صور للأحذية والحصول عليها نسخة احترافية من Elementor. إذا لم يكن لديك حتى الآن ، فانقر فوق هذا الارتباط للحصول عليه.
لكن دعنا نعود إلى ما نحن هنا من أجله.
لنقم بإنشاء صفحة وتعديلها باستخدام Elementor.
في هذا ، دعنا نختار هيكلًا مكونًا من 3 أعمدة. لنقم بتسويتها ارتفاع في ارتفاع الحد الأدنى و الحد الأدنى للارتفاع على VH واضبط المؤشر على 100
في علامة التبويب "النمط" ، اختر لون الخلفية #130640
في العمود الأوسط ، أدخل ملف القطعة الصورة من خلال اختيار صورة حذاء من مكتبتك.
انتقل إلى علامة تبويب النمط وفي خاصية الصورة ، اضبط العرض على 80
ثم اسحب ملف القطعة العنوان وأدخل العنوان احذية نايك - هذا مثال ، يمكن أن يكون علامة تجارية أخرى بالكامل -
اقرأ أيضا: كيفية تحسين تخطيط موقع الويب الخاص بك باستخدام Elementor
اضبط علامة HTML على H3 وقم بتوسيط المحاذاة
انتقل إلى علامة تبويب النمط وقم بتغيير لون النص إلى اللون الأبيض
قم بتغيير أسلوب الطباعة أيضًا
ثم اسحب ملف عنصر واجهة مستخدم القسم الداخلي تحت ال القطعة العنوان التي قمت بإدراجها أعلاه.
بشكل افتراضي ، ستقدم لك هذه الأداة عمودين ، احذف أحدهما. في هذا عنصر واجهة مستخدم القسم الداخلي، أدخل أ القطعة العنوان.
أعطه كعنوان يقطع : وقم بتعيين علامة HTML على امتداد.
في علامة تبويب النمط ، قم بتغيير لون العنوان والحجم إلى 15 والدهون إلى 300
في علامة التبويب خيارات متقدمة ، قم بتعيين الهامش الأيمن فقط على 5 وفي الخاصية وضع حدد مضمنة (تلقائي).
قم بإضافة عنصر واجهة مستخدم للأزرار في نفس القسم الداخلي للنص 8 وتباعد الرموز على 0.
اقرأ أيضا: كيفية التمرير عبر صورة طويلة لمحفظة باستخدام Elementor
في علامة تبويب النمط ، قم بتغيير لون النص ولون خلفية الزر على التوالي إلى الأسود والأبيض وفي الهامش الداخلي أدخل 6-10-6-10 على التوالي للهوامش الداخلية العلوية اليمنى-السفلية-اليسرى.
في علامة التبويب خيارات متقدمة ، اضبط الهامش الأيسر فقط على 5 ، وفي خاصية تحديد الموقع ، حدد مضمن (تلقائي).
كرر هذا الزر 3 مرات وقم بتغيير نص الأزرار الثلاثة الأخيرة إلى 3،9,10,11،XNUMX - يمكنك القيام بذلك أيضًا باستخدام الأحرف S ، M ، L ، XL ، XXL-
انقر فوق قسم التحرير وقم بتعيين المحاذاة الأفقية على المركز
ثم قم بتكرار هذا القسم الداخلي - القسم الداخلي - وقم بتعديل الحجم حسب اللون ، قم بإزالة 3 أزرار وعلى الزر الذي سيبقى محو نص الزر.
في علامة التبويب محتويات من الزر، حدد رمز الدائرة من مكتبة الأيقونات، وانقر فوق "إدراج" لإضافته إلى الزر.
في علامة تبويب النمط ، أعط الحجم 24 للطباعة واربط الهوامش الداخلية وأدخل 0. في لون الخلفية ، اضبط الشفافية على min ثم يمكنك تغيير لون النص إلى اللون الأزرق على سبيل المثال.
ثم كرر هذا الزر 3 مرات وقم بتغيير ألوان الاثنين الآخرين إلى الأصفر والأحمر. ثم انقر فوق القسم الداخلي لتحريره ، وفي علامة التبويب خيارات متقدمة ، اضبط الهوامش العلوية والسفلية على -5 و 10.
سنقوم الآن بإضافة عنصر واجهة مستخدم زر أسفل عنصر واجهة القسم الداخلي الثاني ، أدخل كنص اشتري الآن والمحاذاة إلى المركز. في علامة تبويب النمط ، اضبط الزر على الأبيض ونص الزر على الأسود ، ثم اضبط كل نصف قطر الحد على 20.
حدد العمود الرئيسي الذي عملنا عليه وقم بتعيين المحاذاة عمودي في محيط، في علامة التبويب "النمط" ، اختر نوع الخلفية كـ منحط. تدهور وكنوع حدد شعاعي ثم على اللون الرئيسي اضبط الشفافية والموقع 94. للون الثاني ، اضبط الموقع على 77 ونصف قطر الحواف يزيد عن 10.
في علامة التبويب خيارات متقدمة ، اضبط الهوامش على 0-35-0-35 والهوامش الداخلية إلى 50-20-50-20.
يمكنك بعد ذلك إخفاء اللوحة لترى كيف يبدو عملك. سترى أن بطاقتك جميلة جدًا ، لكننا سنجعلها تنبض بالحياة من خلال تحريك أقسام معينة. ولهذا سنقوم بتحريك الحجم واللون وزر الشراء.
انظر أيضا: كيفية تغيير رأس الصفحة في التمرير على Elementor
لنقم أولاً بقسم القسم الداخلي الأول الذي يعرض حجم المنتج وفي علامة التبويب خيارات متقدمة ، حدد تتلاشى في الأعلى كتأثير الحركة - تشغيل الرسوم المتحركة للدخول وتأخير الرسوم المتحركة 300.
لنفعل الشيء نفسه مع القسم الداخلي الذي يعرض الألوان ولكن مع تأخير للرسوم المتحركة 800. بالنسبة لزر الشراء ، سيكون التأخير 1000
الآن سنقوم بتعيين الفصل إخفاء أولا القسم الداخلي وزر الشراء. حدد القسم الداخلي الأول ، في علامة التبويب خيارات متقدمة وفي الخاصية خيارات متقدمة ، أدخل إخفاء أولاً في حقل فئات CSS. افعل الشيء نفسه بالنسبة للقسم الداخلي الآخر ولزر الشراء.
لذلك سنقوم بإضافة كود CSS الذي سيحرك العمود بأكمله. انسخ الكود التالي:
المحدد {
الطول: 400px؛
عرض: المرن.
}
/ * CSS للإظهار / إخفاء * /
المحدد. إخفاء-أولا {
عرض: لا شيء؛
}
المحدد: التمرير. إخفاء-أولا {
العرض محجوب؛
}
/ * تحويل الصورة * /
المحدد img {
الانتقال: سهولة .5 ثانية ؛
}
المحدد: التمرير فوق img {
تحويل: ترجم (-20 بكسل ، -40 بكسل) مقياس تدوير (-25 درجة) (1.4) ؛
}
/ * نظرة عامة على الهاتف المحمول * /
media (أقصى عرض: 767 بكسل) {
المحدد: التمرير فوق img {
تحويل: ترجمة (-20 بكسل ، 0 بكسل) تدوير (-10 درجة) مقياس (1) ؛
}
المحدد {
الهامش: 50 بكسل 10 بكسل ؛
}
}
حدد العمود لتعديله وانتقل إلى علامة التبويب خيارات متقدمة وفي حقل CSS المخصص ، الصق هذا الرمز.
ملحوظة: يجب أن تعلم أن هذا الخيار متاح فقط إذا كان لديك الإصدار ProElementor.
إذا تم ذلك ، فسيتم تحريك خريطتك عند تمرير الماوس أثناء إخفاء الأحجام والألوان وزر الشراء افتراضيًا.
فيما يتعلق بشرح الكود ، يقدم جزء التعليق نظرة عامة. ولكن عن طريق تعديل القيم سوف تفهم الغرض من كل تعليمات.
انظر أيضا: كيفية إضافة زرين جنبًا إلى جنب في نفس العمود مع العنصر
إذا كان كل شيء يعمل بشكل طبيعي ، فكرر هذا العمود مرتين واحذف الأعمدة الفارغة الأخرى.
كل ما عليك فعله هو استبدال صور وعناوين الكتل الأخرى وأخيرا معاينة عملك.
لقد قمت للتو بإنشاء بطاقة منتج جميلة.
احصل على Elementor Pro الآن!
وفي الختام
لذا ! هذا كل شيء في هذا البرنامج التعليمي الذي يوضح لك كيفية إنشاء بطاقة منتج باستخدام Elementor. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك في تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...