Jak stworzyć pionową karuzelę obrazów na WordPress za pomocą Elementora

Muneeb Poradniki WordPress Jan 21, 2022

Pokaz slajdów ze zdjęć lub informacji, które widzowie mogą wybrać, naciskając przycisk, który przesuwa je do przodu lub do tyłu w pokazie slajdów, nazywany jest karuzelą obrazów. Rozjaśnia ogólny wygląd Twojej witryny i pomaga w promowaniu podstawowych usług.

Atrakcyjne zdjęcia mogą przyciągnąć nowych użytkowników do Twojej witryny, od razu przyciągając ich uwagę. Ten samouczek pokaże Ci, jak wykorzystać Elementora do stworzenia pionowej karuzeli obrazów na WordPress.

Jak stworzyć pionową karuzelę obrazów Elementor

Najpierw utwórz odpowiedni obraz dla swojej pionowej gładkiej karuzeli Elementor . Będziesz potrzebować obrazu, który zawiera już wszystkie Twoje zdjęcia. Korzystając z Crello , programu podobnego do Canva, możesz go stworzyć, ale wystarczy dowolne oprogramowanie do edycji obrazu.

Oczywiście ma to tę wadę, że nie jest dynamiczne i może być niewygodne, gdy trzeba zmienić tylko kilka zdjęć. Zapewnia jednak kilka korzyści. Tworzy karuzelę tylko CSS bez wymagań JS. Animacja jest bardzo płynna, przy bardzo małym wykorzystaniu procesora. Krótko mówiąc, jest niesamowicie skuteczny, choć trochę niewygodny.

Twórz niesamowite strony internetowe

Z najlepszym darmowym kreatorem stron Elementor

Zacząć teraz

Następnie nadaj swojej kolumnie pionową kolumnę nazwy jako klasę.
Ustaw Przestrzeń widżetów dla tej kolumny na 0 w ustawieniach Kolumna i Układ .

Add an image element to that column and choose the picture you made. Dodaj element obrazu do tej kolumny i wybierz wykonane zdjęcie. Assign the class carousel vertical to the picture element . Przypisz karuzelę klas pionowo do elementu obrazu .

Zrób wszystko dokładnie tak, jak chcesz, a następnie zreplikuj. W tej kolumnie będziesz potrzebować dwóch z nich, każdy z identycznymi parametrami. A potem możesz przejść do korzystania z kodu CSS podanego poniżej. Możesz użyć tego kodu w dowolnym miejscu, aby wprowadzić zmiany.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

W kodzie znajduje się spory komentarz, który pozwala wystarczająco zrozumieć i wprowadzić zmiany, gdziekolwiek jest to potrzebne. Używając tego kodu, możesz z powodzeniem stworzyć pionową karuzelę Elementor .

5 najlepszych wtyczek do karuzeli obrazów

1. Karuzela postów dla Elementora

Post Carousel For Elementor od iThemelandCo to dodatek do Elementora, który umożliwia tworzenie niezwykle kreatywnych karuzeli multimedialnych z gotowymi układami karuzeli. Wtyczka doskonale integruje się z Elementorem i oferuje 19 gotowych układów. Te układy są w pełni konfigurowalne i można je łatwo dostosować do własnych potrzeb za pomocą mechanizmu przeciągania i upuszczania w Elementorze.

Karuzela produktów dla Elementora

Product Carousel For Elementor to kolejna wtyczka do Elementora zaprojektowana specjalnie dla sklepów e-commerce w celu zaprezentowania swoich produktów w karuzeli. Wtyczka oferuje 12+ kontroli karuzeli, takie jak Autoodtwarzanie, Przesuń, aby przewinąć, Wstrzymaj po najechaniu kursorem itp. Wtyczka jest bardzo responsywna na wszystkich typach urządzeń i możesz tworzyć tyle karuzeli, ile chcesz. Co więcej, jest to wtyczka w 100% wielojęzyczna, co oznacza, że będzie działać nawet wtedy, gdy Twoja witryna zostanie przetłumaczona na inny język.

3. Szybka karuzela dla Elementora

Szybka karuzela dla Elementora to dodatek do Elementora, który twierdzi, że jest wystarczająco szybki, aby zbudować dla Ciebie karuzelę w ciągu minuty. Choć brzmi to imponująco, oferuje również różnego rodzaju galerie oraz ponad dziesięć unikalnych stylów. Wtyczka jest wyposażona w ponad pięć elementów sterujących karuzeli, oprócz oferowania niestandardowych opcji kolorów dla każdej karuzeli. Aby uzyskać szybkie rozwiązanie, może to być najlepszy wybór na karuzelę obrazów.

Mamy nadzieję, że ten samouczek okazał się pomocny w ulepszaniu Twojej witryny. Dołącz do nas na Facebooku i Twitterze , aby otrzymywać samouczki, które sprawią, że Twoja przygoda z WordPressem będzie przyjemna i łatwa.

Divi WordPress Theme