العنصر: كيفية إنشاء خريطة سداسية عشرية بتأثير

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

إذا كنت ترغب في الحصول على نظرة عامة حول ما سنتحدث عنه في هذا البرنامج التعليمي ، فنحن ندعوك لمشاهدة الفيديو التالي:

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

اقرأ أيضًا دليلنا على: كيفية إضافة فتات الخبز إلى موقع ويب مع Elementor

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

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

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

في تراكب الخلفية، اضغط على منحط. تدهور إلى نوع الخلفية، حدد اللون الرئيسي وقم بتغييره # 2299EF والموقع على 20، ثم اللون الثانوي على # 1917BC والموقع على 50، الزاوية 140 والتعتيم على 0.85

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

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

حدد مرة أخرى القسم الداخلي، انتقل إلى علامة التبويب متقدم، في القسم الهامش الداخلي، أدخل +25 2

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

/*Traçage Hexagone*/
selector{
    clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

بعد ذلك ، دعنا نضيف مقتطف الشفرة الثاني أدناه إلى المقتطف السابق:

/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
    -webkit-transition: all 0.5s !important;
    transition: all 0.5s !important;
    opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
    opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

ثم دعنا نلصق المقتطف أدناه أيضًا.

/*CSS d'effet de transition avec ombre*/
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.hexa-mom::before{
    content: '';
    position: absolute;
    bottom: -70px !important;
    width: 100%;
    color: #fff;
    height: 60px;
    border-radius: 50%;
    background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
    display: block;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
    z-index: 999;
}
.hexa-mom:hover::before{
    opacity: 1 !important;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
}

ثم دعنا نحدد العمود الأوسط وفي علامة التبويب متقدم، أدخل سداسي أمي في الحقل فئات CSS.

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

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

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

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

وفي الختام

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

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

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

...