Moet een hex-kaart met zweefeffect maken via de krachtige Pagina Builder Elementor ? Zo ja, lees dan in dit artikel hoe je daar komt.
Als je een overzicht wilt hebben van wat we in deze tutorial zullen bespreken, nodigen we je uit om de volgende video te bekijken:
Om deze tutorial te voltooien, heb je nodig: de Pro-versie van Elementor, omdat we aangepaste CSS-code zullen gebruiken die alleen wordt ondersteund door deze versie vanElementor.
Lees ook onze gids over: Hoe broodkruimels aan een website toe te voegen avec Elementor
Laten we een nieuwe sectie maken met een structuur om 3 kolommen, laten we dan in het paneel de . definiëren hoogmoed op Minimale hoogte, en dan Minimale hoogte laten we klikken op VH en zet de schuifregelaar op 100.
Laten we een . toevoegen Interne sectie-widget – Binnenste sectie – in de middelste kolom. Deze widget is standaard geconfigureerd met 2 kolommen, laten we er een verwijderen. Laten we het configureren hoogmoed op Minimale hoogte en Minimale hoogte laten we het definiëren cursor op 400.
In het tabblad Style , laten we de achtergrondafbeelding instellen door een afbeelding uit uw bibliotheek te selecteren en de positie ervan in te stellen op Superieur gecentreerd, Herhaal aan niet herhaald en de maat aan Bedekken.
Op het zuiden AchtergrondoverlayKlik op Gedegradeerd voor Achtergrondtype, selecteer en verander de hoofdkleur op #2299EF en locatie op 20, dan de secundaire kleur aan #1917 v. Chr en locatie op 50, de hoek aan 140 en de dekking op 0.85
Voeg dan een toe Titelwidget in deBinnenste gedeelte en als Titel, Laten we een naam geven en vervolgens in het tabblad Stijl van de titelwidget de kleur wijzigen in # FFFFFF. Voeg dan een toe Teksteditor-widget, en in het tabblad Style Centreer de tekst en verander de kleur in # FFFFFF.
Zie ook: Afbeelding toevoegen aan prijstabelwidget met Elementor
Selecteer opnieuw Binnenste gedeelte, ga naar het tabblad Geavanceerd, in de sectie Interne marge, voer in 25-2-2-2
Selecteer opnieuw het binnenste gedeelte en ga naar het tabblad Geavanceerd en kopieer en plak in het gedeelte Aangepaste CSS de volgende code:
/*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;
}
Laten we vervolgens het tweede codefragment hieronder toevoegen aan het vorige:
/*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;
}
Laten we dan ook het onderstaande fragment plakken.
/*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);
}
Laten we dan de middelste kolom selecteren en in het tabblad vergevorderd, voer in hexa-moeder in het veld CSS-klassen.
Laten we deze kolom 2 keer dupliceren en de andere 2 kolommen verwijderen.
Laten we de achtergrondafbeelding van andere widgets wijzigen Binnenste gedeelte, de titel en de inhoud van de teksteditor en ook de kleuren van de achtergrondoverlay-gradiënten. U zou een resultaat moeten hebben dat er als volgt uitziet:
Hier heb je zojuist deze taak gemakkelijk voltooid. Bekijk een voorbeeld van uw tablet- en smartphonewerk en probeer de marges aan te passen aan elk apparaat.
Download Elementor Pro nu!
Conclusie
Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u met effect een hex-kaart kunt maken. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
