Na stronach ofertowych bardzo często widzimy statyczne listy usług. Nagłówki, czasem przycisk i tyle. To działa, ale nie zatrzymuje użytkownika na dłużej. My w Nacji lubimy projektować takie sekcje, które reagują na ruch kursora i naturalnie prowadzą użytkownika dalej.
W tym wpisie pokażemy Ci, jak stworzyć w Elementorze interaktywną sekcję oferty. Po najechaniu na nazwę usługi zmienia się tło, strzałka delikatnie się animuje, a cały element działa jak jeden duży przycisk prowadzący bezpośrednio do oferty.
Dodajemy główny kontener i układ kolumn
Zaczynamy od dodania nowego kontenera i kliknięcia ikony plus. Wybieramy Flexbox z dwiema kolumnami. Ten układ daje nam pełną kontrolę nad zachowaniem elementów i jest znacznie bardziej elastyczny niż stare sekcje i kolumny.
Lewa kolumna będzie pełniła funkcję wizualnego tła. Prawa kolumna stanie się listą usług, z którą użytkownik będzie wchodził w interakcję.
Ustawiamy animowane tło po lewej stronie
Klikamy lewy kontener i przechodzimy do zakładki Układ. Ustawiamy wysokość, na przykład 600 px. Stała wysokość jest tutaj ważna, ponieważ pozwala nam kontrolować wygląd całej sekcji niezależnie od ilości treści po prawej stronie.
Następnie przechodzimy do Styl → Tło → Pokaz slajdów. W tym miejscu dodajemy zdjęcia, które będą wyświetlane w tle. To właśnie ten kontener odpowiada za wizualny efekt zmiany tła, kiedy użytkownik porusza się po ofercie. Na tym etapie nie dodajemy żadnych animacji. Przygotowujemy tylko bazę, na której później „zagra” interakcja.
Przygotowujemy prawą kolumnę pod ofertę
Teraz klikamy prawy kontener i dodajemy w nim kolejny kontener. Ten wewnętrzny kontener będzie pojedynczym elementem oferty, dlatego warto od razu myśleć o nim jak o przyszłym przycisku. Wchodzimy w Układ i ustawiamy Justowanie treści → Koniec. Dzięki temu zawartość ląduje przy dolnej krawędzi. Taki układ sprawia, że sekcja wygląda bardziej stabilnie i „ciężko”, co dobrze działa w ofertach premium.
Dodajemy nagłówek i ikonę
Do wewnętrznego kontenera dodajemy Nagłówek i zmieniamy Tag HTML → H3. To nie jest przypadkowy wybór. Nagłówki H3 dobrze sprawdzają się jako elementy oferty i zachowują poprawną hierarchię semantyczną strony. Wpisujemy nazwę usługi, na przykład „Projekty wnętrz”.
Następnie dodajemy Ikonę. Używamy własnego pliku SVG, ponieważ daje nam on największą kontrolę nad wyglądem i animacją. W Stylu ustawiamy rozmiar ikony, na przykład 28 px, a w Zaawansowane → Align self → Wyśrodkowanie dbamy o to, aby ikona była optycznie dobrze ustawiona względem tekstu.
Ustawiamy układ poziomy i rozkład elementów
Klikamy kontener, w którym znajduje się nagłówek i ikona, i zmieniamy Kierunek → Wiersz (poziomo). Dzięki temu oba elementy ustawiają się obok siebie.
Domyślnie Elementor ustawia je przy lewej krawędzi, dlatego zmieniamy Justowanie treści → Przestrzeń pomiędzy. Ten wybór powoduje, że nagłówek zostaje po lewej stronie, a strzałka po prawej, co od razu sugeruje interakcję i przejście dalej.
Dodajemy też Dopełnienie → 15 px. Padding sprawia, że element jest wygodny do kliknięcia i nie wygląda zbyt ciasno.
Nadajemy klasy CSS i „nazywamy” elementy
Zanim dodamy animację, musimy jasno określić, które elementy będą nią sterowane. Klikamy kontener z nagłówkiem i ikoną i w Zaawansowane → Klasy CSS wpisujemy:
my-container
To klasa, która będzie reagować na najechanie kursorem. Następnie klikamy ikonę i w tym samym miejscu dodajemy klasę:
my-icon
Dzięki temu możemy animować tylko strzałkę, a nie cały kontener. Ten krok jest kluczowy. Bez poprawnie nadanych klas CSS kod nie będzie wiedział, na co ma reagować.
Dodajemy Custom CSS i uruchamiamy animację
Wracamy do kontenera z nagłówkiem i ikoną. W Zaawansowane → Spersonalizowany CSS wklejamy przygotowany kod. Ten kod odpowiada za reakcję na hover, przesunięcie ikony i powiązanie interakcji z tłem.
.my-container {
position: relative;
overflow: hidden;
z-index: 0;
border: none;
}
/* Element z gradientem */
.my-container::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #F5F2EE;
transition: left 0.6s ease;
z-index: -1;
border: none;
box-shadow: none;
}
/* Po najechaniu - gradient wjeżdża */
.my-container:hover::before {
left: 0;
}
.my-icon {
transition: transform 0.4s ease;
display: inline-block;
transform-origin: center center;
}
.my-container:hover .my-icon {
transform: rotate(-45deg);
}
W tym momencie sekcja zaczyna „żyć”. I to jest dokładnie ten etap, w którym Elementor przestaje być tylko kreatorem wizualnym, a zaczyna być narzędziem do świadomego projektowania.
Powielamy elementy i budujemy listę usług
Gdy pierwszy element działa poprawnie, powielamy kontener i zmieniamy treść nagłówka na kolejne usługi. Jeżeli pomiędzy elementami pojawiają się przerwy, klikamy główny kontener po prawej stronie i ustawiamy Odstępy → 0 px. Dzięki temu lista wygląda spójnie i czytelnie.
Aby elementy oferty nie zlewały się ze sobą, dodajemy subtelne oddzielenie. Wchodzimy w Styl → Obramowanie, ustawiamy Typ → Jednolite i dodajemy 1 px tylko od góry. To prosty zabieg, ale bardzo skuteczny wizualnie.
Zamieniamy element oferty w klikalny link
Na sam koniec sprawiamy, że element oferty działa jak przycisk. Klikamy kontener z nagłówkiem i ikoną i przechodzimy do Układ → Opcje dodatkowe.
Zmieniamy Tag HTML → a (odnośnik) i wklejamy link do odpowiedniej usługi. Dzięki temu cały kontener staje się klikalny, a użytkownik nie musi szukać osobnego przycisku.