5–8 minut
3 efekty do strony w WordPress – Paralaksa, Tilt i Animowany Gradient.
Cześć! Czy zdarzyło Ci się wejść na stronę, która wyglądała poprawnie, ale brakowało jej „tego czegoś”? Subtelne animacje potrafią ożywić stronę i sprawić, że użytkownik chętniej na niej zostanie. Uwaga – za dużo efektów może przytłoczyć! Pokaże 3 lekkie efekty wizualne, które możesz dodać w WordPress przy pomocy Gutenberga i CSS – bez wtyczek.
Będzie to efekt paralaksy, tilt (przechylenie elementu) oraz animowany gradient.
Spis treści
- Paralaksa
- Tilt (przechylenie)
- Animowany gradient
- Podsumowanie
Paralaksa
To efekt, który sprawia, że tło strony porusza się wolniej niż reszta treści.
Zalety:
Sprawia, że strona wygląda nowocześnie i dynamicznie.
Przyciąga uwagę użytkownika i sprawia, że dłużej zostaje na stronie.
Może podkreślić ważne sekcje, np. nagłówki czy CTA.
Wady:
Może spowolnić stronę, zwłaszcza na telefonach.
Czasem nie działa dobrze na smartfonach (dlatego warto go tam wyłączać).
Źle użyty może sprawić, że strona będzie mniej czytelna.
Jak dodać efekt paralaksy na stronie w WordPress
Powyżej widać efekt paralaksy, czyli tło przesuwa się wraz z przewijaniem strony. Teraz pokażę jak wprowadzić go na stronę. Najpierw usunę powyższy efekt paralaksy i dodam nowym.
Dodanie efektu paralaksy rozpoczyna się od skorzystania z elementów, w lewym górnym rogu za pomocą plusa. Wpisujemy w pole wyszukiwania słowo: „Okładka” i dodajemy na stronę bez kontenera.
Po dodaniu okładki na stronę przechodzimy do Biblioteki mediów lub Wyślij na serwer i umieszczamy zdjęcie wysokiej rozdzielczości do okładki.
Zdjęcie dodane oraz Akapit został zmieniony na Heading, czyli nagłówek, celem wprowadzenia tytułu do paralaksy.
Kolejną czynnością do wykonania się zmiana ustawień Okładki. Rozpoczniemy od powiększenia zdjęcia na Pełną szerokość strony, jak widać, powyżej klikamy na zdjęcie i ikonę obok trójkąta, zmieniamy z Brak na Pełną szerokość. Po prawej stronie wybieramy opcję: „Nieruchome tło” oraz powyżej szerokość tekstu ustawiamy na 100%, wówczas będzie bliżej lewej strony tytuł.
Przechodząc na drugą zakładkę w opcjach zakładki, jest możliwość zmiany przezroczystości zdjęcia, wprowadzę 60, standardowo jest 50.
Poniżej przeźroczystości, można ustawić marginesy wewnętrzne i zewnętrzne oraz proporcję zdjęcia.
Wole dopasować samodzielnie do strony, w związku z tym pod proporcjami jest opcja do wprowadzenia minimalnej wysokości zdjęcia. Ustawie na 900 pikseli. Pozostałe dodatki jak zmiana rozmiaru czcionki czy ustawienie obramowania pozostawiam już w waszej gestii. Gotowe! Paralaksa działa już na stronie. Nie zapomnijcie zapisać zmian!
Tilt (przechylenie)
Sprawia, że elementy strony delikatnie przechylają się, gdy ruszasz myszką lub telefonem. To jakby elementy reagowały na Twój ruch.
Zalety:
Dodaje interaktywności – użytkownik „bawi się” stroną.
Może wyróżnić ważne elementy, np. obrazy, karty ofertowe.
Jest lekki – nie obciąża strony tak mocno.
Wady:
Nie działa na urządzeniach dotykowych (telefony, tablety).
Jeśli przesadzisz, może wyglądać dziwnie i chaotycznie.
Może denerwować użytkowników, jeśli efekt jest za mocny.
Dodanie efektu Tilt kodem CSS
Na początek należy przejście na zakładkę Strony, edycja strony następnie, żeby dodać klasę CSS, którą będą dokonane zmiany. Przechodzimy na kontener, w którym jest zdjęcia, następnie po prawej wybieramy ostatnią zakładkę Advanced i na samym końcu w Zaawansowane, znajduje się możliwość wpisania Dodatkowej klasy CSS, tutaj wpisujemy klasę „tilt”.
Powyższą czynność wykonujemy na drugim kontenerze, gdyż chce by oprócz tego dużego zdjęcia, cały kontener również miał efekt przechylenia.
W celu dodania kodu CSS udajemy się na zakładkę w Kokpicie WordPress Wygląd – Dostosuj – ostatnia zakładka Dodatkowy CSS.
Kod CSS, który widać po lewej stronie jest następujący:
.tilt {
transform: rotateX(20deg);
transition: transform 0.5s ease-out;
}
.tilt:hover {
transform: rotateX(0deg);
}
Zaczynamy od klasy, czyli kropka nazwa klasy i nawias klamrowy. Kolejna linijka kodu: transform: rotateX(20deg);
Wyobraź sobie kartkę papieru, którą lekko przechylasz do tyłu. RotateX oznacza obrót w osi poziomej (góra-dół). 20deg to kąt przechylenia – im większa liczba, tym mocniejsze nachylenie.
Następna linijka kodu: transition: transform 0.5s ease-out; To sprawia, że ruch (zmiana położenia) nie dzieje się nagle, tylko płynnie, 0.5s oznacza, że zmiana trwa pół sekundy. Ease-out oznacza, że ruch zaczyna się szybciej i zwalnia pod koniec, co wygląda bardziej naturalnie.
Kolejna linijka kodu, czyli klasa tilt:hover, co oznacza po najechaniu kursorem myszki na zdjęcie, nawias klamrowy a w nim kod transform: rotateX(0deg); Po najechaniu myszką, przechylenie znika (0deg = brak przechylenia), czyli element wraca do normalnej, prostej pozycji.
Podczas wpisania kodu CSS animacja przechylenia zaczyna działać. Po wprowadzeniu już całego powyższego kodu wystarczy kliknąć Opublikuj i gotowe.
Animowany gradient
To efekt, w którym tło lub przycisk na stronie stopniowo zmienia kolory, tworząc płynne przejścia. Dzięki temu strona wygląda nowocześnie i dynamicznie.
Zalety:
Tworzy nowoczesny i estetyczny wygląd strony.
Nie wymaga dużych zasobów – jest lekki, jeśli dobrze zoptymalizowany.
Można go łatwo dostosować do kolorów marki.
Wady:
Zbyt szybka animacja może męczyć oczy użytkowników.
Może wyglądać źle, jeśli kolory są źle dobrane.
Nie działał na starszych przeglądarkach.
Dodanie animowanego gradientu kodem CSS
Gdy wprowadzamy animowany gradient na przykład na przycisku, jak ja to wykonam, ważne jest, by był on umieszczony w kontenerze, celem ograniczenia jego powierzchni. W momencie, gdybyśmy pozostawili go poza kontenerem, wtedy dostosuje się do szerokości strony. Tak jak w poprzednim przypadku przechodzimy w Kokpicie na zakładkę Strony, edycja strony, następnie umieszczamy kontener a w nim kolejny kontener a dopiero potem przycisk, marketing button się sprawdza na animowany gradient. Ostatnią czynnością będzie dodanie klasy, ale tym razie nie przechodzimy na kontener a na przycisk, po prawej wybieramy Advanced, zakładka Zaawansowane – Dodatkowa klasa CSS i nazwa klasy, czyli gradient-button.
Tak jak poprzednio celem wprowadzenia kodu CSS w WordPress Gutenberg, na Kokpicie wybieramy Wygląd – Dostosuj – Dodatkowy CSS. Kod zaczniemy od animacji w CSS, czyli keyframes. Wygląda to następująco:
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Keyframes, czyli animacja, którą dzielimy na klatki, w naszym przypadku będą to momenty zmiany koloru i jej nazwa gradientMove, otwieramy nawias klamrowy a w środku:
0% – na początku widzimy tylko dwa kolory z całego gradientu,
50% – pierwsze dwa kolory pojawiają się w całości, a kolejne dwa tylko w połowie,
100% – pierwsze dwa kolory znikają, a ostatnie dwa stają się w pełni widoczne.
To trochę jak płynne mieszanie farb – najpierw widzimy jedną kombinację, potem stopniowo pojawia się nowa, aż na końcu dominuje inny zestaw kolorów.
Czas na stylizację przycisku, każdą linijkę kodu wytłumaczę, co robi, ale zacznę od całego kodu:
.gradient-button {
background: linear-gradient(45deg, yellow, green, white, black);
background-size: 200% 200%;
animation: gradientMove 6s ease infinite;
padding: 20px 20px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
}
.gradient-button:hover {
transform: scale(1.05);
filter: brightness(1.1);
}
Background: linear-gradient – tło przycisku, linear gradient odznacza gradienty liniowe dzięki animacji, będą one pokazywać się z dołu, z góry, z lewej, z prawej i po przekątnej, składa się z czterech kolorów żółty, zielony, biały i czarny, ustawiony pod kątem 45 stopni.
Background-size – powiększenie tła gradientu do 200%.
Animation: gradientMove 6s ease infinite – nazwa animacji, animacja ma trwać 6 sekund w nieskończoność, z powolnym początkiem, potem szybko, zanim się skończy, zwalnia.
Padding: 20px 20px – margines wewnętrzny ustawiony na 20 pikseli.
Border-radius: 30px – zaokrąglenie przycisku na 30 pikseli.
Cursor: pointer – zmiana wyglądu kursora na „łapkę” po najechaniu myszką na przycisk.
Transition: all 0.3s ease – czyli przekształcenie elementu dotyczy wszystkich po 0.3s oprócz animacji.
Po najechaniu myszką na przycisku, czyli kod gradient-button:hover:
Transform: scale(1.05) – powiększ przycisk,
Filter: brightness(1.1) – zwiększ jasność kolorów na przycisku.
Kod wprowadzony można kliknąć „Opublikuj” i animowany gradient gotowy!
Podsumowanie
Paralaksa → Tło zostaje w miejscu, a reszta strony się przesuwa.
Tilt → Element się przechyla i powiększa po najechaniu myszką.
Animowany Gradient → Gradient zmienia kolory i przesuwa się
płynnie.
Pamiętaj, żeby nie przesadzać z efektami – jeden czy dwa dobrze dobrane elementy mogą sprawić, że strona wygląda nowocześnie, ale nadmiar może ją spowolnić.
Sprawdź również, jak można w bezpłatnej wersji Elementora wprowadzić proste animację!
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…