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

إذا لم تكن لديك فكرة عما نريد التحدث عنه اليوم ، فنحن ندعوك لمشاهدة الفيديو التالي:

إنشاء بطاقة مع تأثير المحفظة

ثم دعنا نعود إلى سبب وجودنا هنا.

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

اقرأ أيضا: كيفية عرض النص فوق صورة باستخدام Elementor

لنقم بإنشاء قسم جديد بهيكل من 3 أعمدة ، ثم في اللوحة ، دعنا نحدد ملف الإستكبار في ارتفاع الحد الأدنىثم أدنى ارتفاع دعنا نضغط VH واضبط شريط التمرير على 100.

قسم 3 عمود

دعنا نختار العمود الأوسط ، ونضع في هذا العمود ملف القطعة الداخلية للقسم. يتم تكوين عنصر واجهة المستخدم للقسم الداخلي بعمودين افتراضيًا. تحت العمودين ، دعنا نسقط الأداة لقب مع العنوان المطعم، تحديد H4 لعلامة HTML و مركز للمحاذاة.

في علامة التبويب متقدم من القطعة العنوان ، دعنا ندخل 30 إلى الهامش العلوي

إنشاء بطاقة مع تأثير المحفظة

دعنا نختار مرة أخرى قسمنا الداخلي. في اللوحة ، دعنا نعدل ملف الإستكبار في ارتفاع الحد الأدنى و أدنى ارتفاع دعنا نضبط المؤشر على 380. بعد ذلك ، دعنا نحذف العمود الأيمن أو الأيسر من القسم الداخلي

إنشاء بطاقة مع تأثير المحفظة

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

إنشاء بطاقة مع تأثير المحفظة

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

اكتشف أيضًا: كيفية إنشاء معرض صور باستخدام Elementor

ثم في علامة التبويب الطراز، انقر فوق PX de عرض، فلنضبط شريط التمرير على 260 و أشعة الحدود في 10

بعد ذلك ، دعنا نعدل Box Shadow عن طريق تغيير Blur إلى 40 و Diffuse إلى -10.

إنشاء بطاقة مع تأثير المحفظة

في علامة التبويب خيارات متقدمة ، في القسم وضع، تحديد مطلق إلى الموقع الحالي, الاتجاه الأفقي في غير لبقو الوقت الفرق في 0، L 'الاتجاه العمودي في BAS.

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

إنشاء بطاقة مع تأثير المحفظة

دعنا نستبدل صورة القطعة الثانية وفي علامة التبويب الخاصة بها متقدم، فلنعدّلها الهوامش السفلية et غير لبق عن طريق الدخول 30 لكل. سترى الآن تأخرًا طفيفًا ، 

افعل الشيء نفسه مع أداة Image Widget الثالثة ، لكن قم بتطبيق هوامش 60 للهوامش السفلى واليسرى. يجب أن يكون لديك الآن نظرة عامة على جميع الحاجيات الثلاثة للصور.

إنشاء بطاقة مع تأثير المحفظة

دعنا نختار عنصر واجهة المستخدم للقسم الداخلي ، انتقل إلى علامة التبويب الخاصة به متقدم وفي القسم CSS مخصصة، انسخ والصق مقتطف الشفرة التالي:

selector .elementor-widget-image{
    transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
    transform: scale(.65);
}
selector:hover .front-img{
    transform-origin: center left;
}
selector:hover .mid-img{
    transform-origin: center top;
}
selector:hover .last-img{
    transform-origin: bottom right;
}

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

الآن إذا قمت بالتمرير فوق خريطتنا ، فسيكون لديك رسم متحرك للتكبير

إنشاء بطاقة مع تأثير المحفظة

دعنا نختار أول عنصر واجهة مستخدم للصور (أدنى واحد) وفي علامة التبويب الخاصة به متقدم، دعونا ننتزع الجبهة- IMG ل فئات CSS.

بالنسبة إلى أداة الصورة الثانية ، دعنا نكتب منتصف IMG لفئات CSS.

بالنسبة إلى أداة الصورة الثالثة ، دعنا نكتب مشاركة - IMG لفئات CSS.

انظر أيضا: كيفية إنشاء معرض الصور المبوب باستخدام Elementor

عند المرور فوق عمودنا الآن، سنرى رسمًا متحركًا رائعًا لـ محتويات من قسمنا الداخلي.

إنشاء بطاقة مع تأثير المحفظة

دعنا نعرض صفحتنا في وضع الجهاز اللوحي سنرى أن الصور لن يتم عرضها بشكل صحيح.

إنشاء بطاقة مع تأثير المحفظة

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

دعونا نختار القسم الداخلي لدينا، في القسم الخاص به محتويات، دعنا نعدل أدنى ارتفاع في 225.

إنشاء بطاقة مع تأثير المحفظة

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

الآن دعنا نكرر العمود الأوسط مرتين ، ثم نحذف العمودين الفارغين الآخرين.

إنشاء بطاقة مع تأثير المحفظة

دعونا نعدل عناوين هذه الأعمدة ثم نغير الصور

يجب أن يكون لديك قسم رائع هنا النتائج:

إنشاء بطاقة مع تأثير المحفظة

ها أنت ذا ، لقد قمت للتو بهذه المهمة بسهولة.

احصل على Elementor Pro الآن!

وفي الختام

ذلك هو ! هذا كل شيء في هذه المقالة التي توضح لك كيفية إنشاء بطاقة بتأثير المحفظة. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...