Jak dodać slider banerów na stronę internetową

Łatwo i szybko umieść na stronie SLIDER banerów ze zdjęciami w tle, tekstami i przyciskami. Nie musisz instalować wtyczek ani znać się na kodowaniu.

Slider to rodzaj karuzeli, która w danym momencie wyświetla tylko jeden baner. Baner przedstawia zdjęcie w tle oraz teksty np. tytuł, paragraf, link. Aby przejść do drugiego baneru użytkownik może wcisnąć strzałkę lub kropkę. Możliwe jest też ustawienie autoodtwarzania slidera.

Slider banerów czy karuzela zdjęć?

Slider banerów to bardziej zaawansowany komponent – oprócz tła w postaci zdjęcia możesz dodać na nim nagłówki, teksty, przyciski CTA (ang. call to action) czy linki. Doskonale sprawdza się jako wizualna wizytówka strony głównej, sekcja otwierająca stronę lub baner promocyjny na całą szerokość strony.

Karuzela zdjęć to prostszy wizualnie element – wyświetla jedynie grafiki, bez dodatkowych elementów. Możesz pokazywać kilka zdjęć naraz i automatycznie je przewijać. Zobacz: Jak dodać karuzelę na stronę

Wskazówki dotyczące tworzenia slidera banerów:

• pierwszy baner zawsze skupia największą uwagę. Tam umieść najważniejsze informacje.
• drugi i kolejne banery rzadko są wywoływane przez użytkowników i jeszcze rzadziej klikane jeśli masz na nim linki. Umieść tam mniej ważne treści.
• przy projektowaniu stron poleca się maksymalnie 3 banery w sliderze gdyż liczba i ciężar zdjęć mogą spowolnić stronę. A w Najszybszej dbamy o szybkość stron :)
  

Autoodtwarzanie slidera banerów

Autoodtwarzanie slidera bywa irytujące dla użytkowników i może utrudniać czytanie tekstów jeśli jest ich dużo. Nie polecamy autoodtwarzania ponieważ lepiej gdy użytkownik sam decyduje co ogląda na stronie. Jeśli jednak chcesz zastosować autoodtwarzanie to w ustawieniach slidera wydłuż czas między zmianą slajdów oraz zmniejsz długość tekstów na slajdach aby użytkownik miał szansę je przeczytać i spokojnie obejrzeć zdjęcia.

Przykłady slidera:

slider na stronie internetowej<br>

silder na stronie<br>

Dostępne funkcje w sliderze banerów:

• Edycja zawartości każdego baneru indywidualnie
• Zmiana koloru tła każdego baneru
• Zmiana zdjęcia w tle w każdym banerze
• Dodanie lub usuwanie elementów w każdym banerze np. tekstu, nagłówka, linku, przycisku
• Zmiana kolejności, dodawanie i usuwanie banerów
• Autoodtwarzanie slidera
• Ustawienie szybkości autoodtwarzania slidera

Jak dodać slider banerów na stronę?

1. Dodaj nową sekcję do strony - kliknij przycisk "Dodaj sekcję".

2. W bibliotece sekcji znajdź kategorię "Slider". Każdy wzór możesz po dodaniu na stronę dostosować do swoich potrzeb zmieniając jego treści i ustawienia.

3. Po dodaniu sekcji ze sliderem kliknij w niego tuż przy jego krawędzi bocznej. W ustawieniach wybierz:

• wysokość slidera
• opcję autoodtwarzania

Aby obejrzeć następny baner kliknij strzałkę w lewym górnym rogu.

ustawienia slidera<br>

4. Aby zmienić zawartość pojedynczego baneru kliknij w baner przy jego krawędzi (w zdjęcie) i przejdź do ustawień w inspektorze. Możesz ustawić:

• tło dla widocznych elementów tekstowych np. pasek na środku, na dole lub nakładka pokrywająca cały baner
• marginesy boczne dla elementów tekstowych
• wymienić zdjęcie w tle

Pasek tła pod elementami tekstowymi przydaje się do podkreślenia czytelności tekstów na kolorowym zdjęciu. Pasek możesz ustawić w dowolnym kolorze i stopniu przejrzystości. Pasek formatujesz osobno w każdym banerze.

ustawienia slajdu<br>

5. Aby dodać elementy tekstowe do baneru kliknij ikonę plusa na dole baneru.

dodanie elementu do slajdu

Elementy tekstowe możesz normalnie formatować - wybrać kolor tekstu, czcionkę, rozmiar tekstu, styl linku itp. Nagłówkom możesz nadać priorytety H1-H6.  Elementy tekstowe formatujesz osobno na każdym banerze.

6. Aby rozszerzyć slider na całą szerokość ekranu wejdź w ustawienia sekcji i w opcji "Marginesy boczne sekcji" ustaw "0".

Jak dodać nowy baner do slidera?

Aby dodać nowy baner masz dwie opcje:

1. Opcja: Duplikacja istniejącego (najprostsze)

Kliknij ikonę duplikacji aby skopiować cały istniejący baner. Dzięki temu możesz szybko edytować zawartość nowego zachowując formatowanie poprzedniego. Wymień zdjęcie i teksty.

duplikacja slajdu

2. Opcja: Nowy czysty baner

Kliknij ikonę plusa na dole slidera aby dodać czysty baner i móc go zaprojektować od początku.

dodanie nowego slajdu

Pamiętaj aby zachować i opublikować witrynę aby zmiany były widoczne na stronie.