العنصر: كيفية تكبير بطاقة الملف الشخصي

هل ترغب في معرفة كيفية تكبير بطاقة الملف الشخصي باستخدام المكون الإضافي منشئ الصفحة Elementor ?

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

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

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

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

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

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

في علامة التبويب الطراز، دعنا نعدل تراكب الخلفية. اضغط على كلاسيكي في نوع الخلفية ، وحدد صورة من المكتبة وفي إعدادات الصورة ، حدد توسيط في الوسط في الموقف غطاء في الحجم. غموض في 1 و

في القسم الحدود اضغط على % وادخل 4 لجميع كبح نصف القطر.

في عدد المربعات ، اضبط شريط التمرير على 0 في أفقيل 70 في عموديل 63 في Flouل -60 في الناشر. يجب أن ترى تأثير ظل جميل تحت صورتك.

في القسم الداخلي حرك ال القطعة العنوان. كعنوان أدخل Steve Jobs ، في علامة التبويب Style ، حدد اللون الأبيض # FFFFFF. في الطباعة ، حدد الحجم 20.

ثم حدد عمود عنصر واجهة القسم الداخلي وفي علامة التبويب "النمط" ، حدد نوع الحدود بالنقر فوق "صلب" ، وجميع العروض على 1 ، والألوان على #FFFFFF.

في علامة التبويب متقدم، قم بتغيير الهوامش إلى 15 والهوامش الداخلية على 20.

أدخل الآن أيقونات الوسائط الاجتماعية عن طريق سحب أداة أيقونات الوسائط الاجتماعية إلى القسم الداخلي.

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

في حقل الأيقونة ، انقر فوق مكتبة الأيقونة وفي شريط البحث اكتب الأحرف الأولى من شبكتك الاجتماعية ، بمجرد العثور عليها ، حددها وانقر فوق الزر "إدراج".

ثم انتقل إلى علامة التبويب الطراز، في القسم أيقونة، قم بتغيير اللون إلى Personnalisé.

اقرأ أيضًا دليلنا على ؛ كيفية إضافة ترقيم الصفحات باستخدام Elementor

في اللون الأساسي، اضبط الشفافية على الحد الأدنى.

في اللون الثانوي، حدد اللون # FFFFFF. في الحجم ، أدخل 20، الهامش الداخلي على 0.4.

الآن انقر فوق علامة التبويب متقدم، وفي القسم وضع، اضغط على Personnalisé. في عرض مخصص، أدخل 0.

اكتشف ايضا كيفية استخدام Color Picker مع Elementor

في الموقع الحالي، حدد مطلق، في Shift 15في الاتجاه العمودي choisir BASو عوض في 20.

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

انسخ الكود التالي والصقه في هذا القسم:

/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
    overflow: hidden !important;
}
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    -webkit-transform-origin: left;
            transform-origin: left;
}
selector:hover .elementor-background-overlay{
    -webkit-transform: scale(2);
            transform: scale(2);
}

يجب ألا ترى الكثير بشكل مسبق ، ولكن إذا قمت بالمرور فوق الصورة ، يجب أن ترى تكبيرًا مطبقًا على الصورة.

الآن انسخ والصق الكود التالي بعد الكود السابق لإظهار أو إخفاء عناصر معينة من العمود:

/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.75s !important;
    transition: all 0.75s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

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

دعنا نكرر هذا العمود مرتين ونحذف العمودين الآخرين.

تغيير صورة الخلفية للأقسام الداخلية ، وكذلك اسم وروابط الشبكات الاجتماعية.

ها أنت ذا ، لقد قمت للتو بهذه المهمة بسهولة. فقط قم بمعاينة عمل جهازك اللوحي والهاتف الذكي ، في محاولة لتغيير الهوامش لتتناسب مع كل جهاز.

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

وفي الختام

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

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

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

...