Müssen Sie eine Hex-Karte mit Hover-Effekt durch die Mächtigen erstellen Page Builder Elementor ? Dann erfahren Sie in diesem Artikel, wie Sie dorthin gelangen.
Wenn Sie sich einen Überblick darüber verschaffen möchten, worüber wir in diesem Tutorial sprechen werden, laden wir Sie ein, sich das folgende Video anzusehen:
Um dieses Tutorial abzuschließen, benötigen Sie die Pro-Version von Elementor, da wir benutzerdefinierten CSS-Code verwenden werden, der nur von dieser Version von unterstützt wirdElementor.
Lesen Sie auch unseren Leitfaden über: So fügen Sie Breadcrumbs zu einer Website hinzu mit Elementor
Lassen Sie uns einen neuen Abschnitt mit einer Struktur erstellen 3 Spalten, dann definieren wir im Panel die Hauteur von Mindesthöheund dann Mindesthöhe lass uns auf klicken VH und stellen Sie den Schieberegler auf 100.
Lassen Sie uns ein hinzufügen Widget für den internen Abschnitt – Innerer Teil – in der mittleren Spalte. Dieses Widget ist standardmäßig mit 2 Spalten konfiguriert, löschen wir eine davon. Lass es uns konfigurieren Hauteur von Mindesthöhe und Mindesthöhe lass es uns definieren Schieberegler auf 400.
In der Registerkarte Design, lassen Sie uns das Hintergrundbild festlegen, indem Sie ein Bild aus Ihrer Bibliothek auswählen und dann seine Position auf festlegen Überlegen zentriert, Wiederholen Sie auf Nicht wiederholt und die Größe an Abdeckung.
auf HintergrundüberlagerungKlicken Sie auf Degradieren für Hintergrundtyp, wählen und ändern Sie die Hauptfarbe ein #2299EF und Standort an 20, dann die Sekundärfarbe an #1917 v und Standort an 50, der Winkel an 140 und die Deckkraft an 0.85
Fügen Sie dann ein hinzu Titel-Widget imInnenteil und als Titel, geben wir einen Namen ein und ändern Sie dann auf der Registerkarte „Stil“ des Titel-Widgets die Farbe in #FFFFFF. Fügen Sie dann ein hinzu Texteditor-Widget, und in der Registerkarte Design Zentrieren Sie den Text und ändern Sie die Farbe in #FFFFFF.
Siehe auch: So fügen Sie mit Elementor ein Bild zum Preistabellen-Widget hinzu
Wählen Sie erneut aus Innerer Abschnitt, gehen Sie zur Registerkarte Fortgeschrittene, im Abschnitt Interne Marge, eingeben 25-2-2-2
Wählen Sie erneut den inneren Abschnitt und gehen Sie zur Registerkarte Erweitert und kopieren Sie im Abschnitt Benutzerdefiniertes CSS den folgenden Code und fügen Sie ihn ein:
/*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;
}
Als Nächstes fügen wir das zweite Code-Snippet unten zum vorherigen hinzu:
/*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;
}
Dann fügen wir auch das Snippet unten ein.
/*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);
}
Dann wählen wir die mittlere Spalte und in der Registerkarte fortgeschritten, eingeben Hexa-Mutter auf dem Gebiet CSS-Klassen.
Lassen Sie uns diese Spalte 2 Mal duplizieren und die anderen 2 Spalten löschen.
Lassen Sie uns das Hintergrundbild anderer Widgets ändern Innenteil, der Titel und die Inhalt des Texteditors und auch die Farben der Hintergrundüberlagerungsverläufe. Sie sollten ein Ergebnis erhalten, das so aussieht:
Hier haben Sie diese Aufgabe gerade einfach erledigt. Sehen Sie sich einfach Ihre Tablet- und Smartphone-Arbeit an und versuchen Sie, die Ränder so zu ändern, dass sie zu jedem Gerät passen.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie eine Hex-Map mit Effekt erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
