Musisz stworzyć mapę heksadecymalną z efektem najechania przez potężne Page Builder Elementor ? Jeśli tak, dowiedz się z tego artykułu, jak się tam dostać.
Jeśli chcesz mieć przegląd tego, o czym będziemy rozmawiać w tym samouczku, zapraszamy do obejrzenia następującego filmu:
Aby ukończyć ten samouczek, będziesz potrzebować wersja Pro Elementora, ponieważ będziemy używać niestandardowego kodu CSS, który jest obsługiwany tylko w tej wersjiElementor.
Przeczytaj także nasz przewodnik na temat: Jak dodać bułkę tartą do strony internetowej z Elementor
Stwórzmy nową sekcję ze strukturą do 3 kolumny, a następnie w panelu zdefiniujmy HAUTEUR sur Minimalna wysokość, a następnie Minimalna wysokość kliknijmy VH i ustaw suwak na 100.
Dodajmy Widżet sekcji wewnętrznej – Sekcja wewnętrzna – w środkowej kolumnie. Ten widżet jest domyślnie skonfigurowany z 2 kolumnami, usuńmy jedną z nich. Skonfigurujmy to HAUTEUR sur Minimalna wysokość i Minimalna wysokość zdefiniujmy to suwak do 400.
W zakładce Styl, ustawmy obraz tła, wybierając obraz z biblioteki, a następnie ustawmy jego pozycję na Wyższy skoncentrowany, Powtórz wł. Niepowtarzane a rozmiar włączony Pokrywa.
Sur Nakładka w tleKliknij Zdegradowany dla Typ tła, wybierz i zmień główny kolor na #2299EF i lokalizacja włączona 20, następnie drugi kolor włączony #1917 pne i lokalizacja włączona 50, kąt włączony 140 a nieprzezroczystość włączona 0.85
Następnie dodaj Widżet tytułu wSekcja wewnętrzna i jak Tytuł, Podaj Nazwę, a następnie na karcie Styl widżetu Tytuł zmień kolor na # FFFFFF. Następnie dodaj Widżet edytora tekstu, a w zakładce Styl Wyśrodkuj tekst i zmień kolor na # FFFFFF.
Zobacz także: Jak dodać obraz do widżetu tabeli cen za pomocą Elementora
Wybierz ponownie Sekcja wewnętrzna, przejdź do zakładki Zaawansowane, w sekcji Margines wewnętrzny, wchodzić 25-2-2-2
Wybierz ponownie sekcję wewnętrzną i przejdź do zakładki Zaawansowane, a w sekcji Niestandardowy CSS skopiuj i wklej następujący kod:
/*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;
}
Następnie dodajmy drugi fragment kodu poniżej do poprzedniego:
/*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;
}
Następnie wklejmy również poniższy fragment kodu.
/*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);
}
Następnie wybierzmy środkową kolumnę i w zakładce zaawansowany, wchodzić heksa-mama w polu Klasy CSS.
Powielmy tę kolumnę 2 razy i usuńmy pozostałe 2 kolumny.
Zmieńmy obraz tła innych widżetów Sekcja wewnętrzna, tytuł i treść edytora tekstu, a także kolory gradientów nakładki tła. Powinieneś otrzymać wynik wyglądający tak:
Tutaj właśnie z łatwością wykonałeś to zadanie. Wystarczy podejrzeć działanie tabletu i smartfona, próbując zmienić marginesy, aby dopasować je do każdego urządzenia.
Pobierz Elementor Pro teraz!
Wnioski
Więc ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak stworzyć mapę heksadecymalną z efektem. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
