Jak skonfigurować slajder w ICEberg CMS?

Jak skonfigurować slajder w ICEberg CMS?

Slajder jest, zazwyczaj, nieodzownym elementem każdej strony internetowej. W tym poradniku dowiesz się jakie możliwości w konfiguracji slajdera zapewnia CMS Iceberg... [poradnik dla początkujących web developerów]

Poprzedni artykuł
Foto: Jak skonfigurować slajder?
Jak skonfigurować slajder?

Poradnik stworzony w ramach programu praktyk i staży w Krakweb

Slajder dodajemy na stronę internetową często jako pierwszą sekcję strony zaraz pod menu nawigacyjnym. Slajder składa się z kilku zdjęć oraz nawigacji po tych zdjęciach w postaci kropek na samym dole zdjęcia i strzałek z lewej i prawej strony zdjęcia. Dodatkowo, każdy slajd możemy skonfigurować w taki sposób, aby oprócz zdjęcia pojawiały się inne elementy takie jak - tytuł slajdu, opis, zdjęcie jako odnośnik/link do podstrony, produktu, artykułu, kategorii lub innego elementu w strukturze, przycisk. To elementy dostępne do edycji w module Slajder ICEberg CMS

Wybór zdjęć do slajdera

Zdjęcia możemy wybierać ze stocków zdjęciowych (banków zdjęć), których licencja pozwala na darmowe umieszczanie takich zdjęć na swojej stronie internetowej (w celach komercyjnych). Do takich sprawdzonych stocków należą: https://www.pexels.com/pl-pl/ , https://unsplash.com/images/stock , https://pixabay.com/pl/. Jeśli do slajdera chcemy wstawić zdjęcia produktów (pojedyncze lub połączone w jedno, szersze zdjęcie w programie graficznym) to używajmy zdjęć, które dostarcza producent tego sprzętu. Optymalnie, powinniśmy stworzyć slajder składający się z minimum trzech slajdów. To pozwoli przetestować działanie i wygląd slajdera w warunkach zbliżonych do realnego działania w realizowanym sklepie internetowym po jego publikacji. 

Stworzenie slajdera

Wejdź do panelu administracyjnego swojej strony. Zaloguj się, następnie przejdź do Moduły -> Zdjęcia i galerie -> Slajder. Wpisujemy nazwę slajderu np. Nagłówek i klikamy Zapisz.

Stworzenie slajdera

Następnie, po stworzeniu, będzie widoczna lista Twoich slajderów, znajdź ten nowoutworzony, skopiuj do schowka zmienną slajdera, czyli jeśli jest to Twój pierwszy slajder, prawdopodobnie będzie to

Zdobywamy ruch, leady, klientów

Zdobywamy ruch, leady, klientów

Częste zmiany algorytmu Google utrudniają pozycjonowanie. Konwersja zależy od drobiazgów jak np. koloru przycisków akcji. Znajomość najnowszych rozwiązań jest niezbędna do uzyskania wysokiej pozycji i konwersji.

Tworzymy treści, zmniejszamy koszt leadów

Tworzymy treści, zmniejszamy koszt leadów

Marketing Treści pomoże wyróżnić Twoją markę od konkurentów. Ale, by zwiększyć skalę potrzebujesz też promocji treści w Social Media i ePR. Działania content marketingowe pozwolą na duży zasięg przy niskich kosztach i obniżenie kosztu pozyskania klienta.

Docieramy do klienta precyzyjniej

Docieramy do klienta precyzyjniej

Kampanie oprzemy na algorytmach i wiedzy technicznej. Połączymy personalizację z automatyzacją. Wdrożymy aplikacje marketingowe, które pozwloą dotrzeć precyzyjnie do grupy docelowej. Marketing oparty na liczbach da Ci najlepsze rezultaty.

Zbudujemy Twój nowy wizerunek

Zbudujemy Twój nowy wizerunek

Proste rzeczy są najbardziej użyteczne, lecz najtrudniej je zaprojektować. Stworzenie dobrego doświadczenia użytkownika wymaga lat doświadczenia. Dobry projekt pozwala wyróżnić się na tle konkurencji i przywiązuje klienta na dłużej.

i kliknij na ikonkę “Edycja”.

Stworzenie slajdera

Dodawanie nowych slajdów

Kliknij w zakładce “Dodaj slajd” przycisk “Dodaj”.

  • Checkbox “Aktywny” - zaznacz jeśli chcesz, aby slajd się wyświetlał.
  • Wgrywanie obrazka - można wybrać ścieżkę do obrazka znajdującego się w folderze uploads lub wgrać plik z komputera lokalnego (zdjęcie umiejscowi się w folderze uploads)
  • Tytuł - jest to nagłówek, który będzie się znajdował na środku zdjęcia. Aby był widoczny należy zaznaczyć “Pokaż tytuł”.

Dodawanie nowych slajdów

  • Opis slajdu - opis, który będzie się znajdował pod nagłówkiem, zastosowana jest mniejsza czcionka niż do tytułu.
  • Link - czyli odnośnik do zewnętrznej strony, podstrony, produktu, artykułu, kategorii lub innego elementu znajdującego się w strukturze strony. Powierzchnia linku obejmuje cały slajd, więc w którekolwiek miejsce zdjęcia byśmy nie kliknęli, zostaniemy przekierowani. Zaznaczając “Pokaż link”, odnośnik nie będzie ukryty.

Dodawanie slajdów

  • Przycisk - znajduje się pod nagłówkiem i opisem, służy bardziej jako element zdobniczy slajdu, ponieważ, jak wcześniej napisałem, link obejmuje cały slajd. Aby przycisk był widoczny, zaznacz “Pokaż przycisk”.
  • Kolor slajdu - to jest kolor tła slajdu. Zazwyczaj, wstawiając slajdy, to będzie nieistotny element konfiguracji, ponieważ zdjęcie będzie prawdopodobnie zajmować całą powierzchnię slidera.

Dodawanie slajdów

  • Kliknij “Zapisz”. Następnie powtórz czynność - optymalnie, aby slajder składał się z minimum trzech slajdów.

Konfiguracja parametrów slajdera

Przejdź do zakładki “Ustawienia” W tym miejscu możemy ustawić ogólne parametry, które będą dotyczyć każdego element slajdera.

  • Efekt przejścia 
  • Prędkość animacji [ms] - szybkość z jaką następuje przejście slajdu podana w milisekundach.
  • Czas wyświetlania slajdu [ms] - podany w milisekundach.

Zmienne slajdera

  • Wysokość slajdera - są to opcje skalowania - do szerokość ekranu, do wysokości ekranu lub stała wysokość podana niżej w pikselach. Zazwyczaj, efekt jaki chcesz uzyskać tworząc slajder, będzie powiązany ze skalowaniem na szerokość ekranu, więc tą opcję polecam wybrać, ale warto spróbować jak wyglądają wszystkie inne.
  • Aktywny - należy zaznaczyć jeśli chcesz, aby Twój slajder się wyświetlał.
  • Tylko na stronie głównej - slajder będzie wyświetlany tylko na stronie głównej.
  • Użyj miniatur - odznaczenie powoduje niewzięcie pod uwagę ustawień takich jak szerokość miniatury i wysokość miniatury
  • Ładuj leniwie
  • Tryb miniatury - kadrowanie lub pomniejszanie. W przypadku, gdy ustawiłeś wcześniej skalowanie na wysokość lub szerokość, powinieneś ustawić kadrowanie, ponieważ pomniejszanie.
  • Szerokość miniatury, wysokość miniatury - parametry zdjęcia podawane w pikselach. W przypadku ustawienia kadrowania i skalowania na szerokość, powinieneś w głównej mierze skupić się na ustawieniu wysokość, i analogicznie skalowanie na wysokość -> ustawiasz szerokość miniatury. Najlepiej drugi parametr ustawić zgodnie ze zdjęciem - czyli mając zdjęcie o szerokości 1920px, ustaw 1920px przy skalowaniu na szerokość. Natomiast przy skalowaniu na wysokość, ustaw natywną wysokość obrazka jako wysokość miniatury. Dzięki temu unikniesz błędnego wyświetlania się obrazka.
  • Jakość miniatury - jakość z jaką będą się wyświetlały zdjęcia. Najlepiej pozostawić wartości domyślne.

Zmienne slajdera

Dodanie slajdera w konfiguratorze zawartości

Aby slajder prawidłowo się wyświetlał, należy dodać go jeszcze do w module Zawartość - Konfigurator. Trzeba to zrobić, ponieważ samo stworzenie slajdera powoduje, że on faktycznie istnieje, ale dopiero dodanie go jako element strony powoduje, że jest on widoczny.

Przejdź do Moduły -> Podstawowe -> Zawartość - Konfigurator. Kliknij ikonkę “Konfiguracja”.

Konfigurator zawartości

Dodaj nowe pole. Wpisujemy dowolną nazwę (mogą być polskie znaki), typ: Text, zaznaczamy checkbox “Aktywny”, kliknij “Zapisz”.

Konfigurator zawartości

Następnie przejdź do zakładki “Wartości domyślne pól” i dla Twojej unikalnej nazwy, która przed chwilą stworzyłeś wprowadź wartość skopiowaną do schowka (jeśli nie zrobiłeś tego, wróć do momentu, gdzie będziesz mógł tą zmienną skopiować, prawdopodobnie będzie to

Zdobywamy ruch, leady, klientów

Zdobywamy ruch, leady, klientów

Częste zmiany algorytmu Google utrudniają pozycjonowanie. Konwersja zależy od drobiazgów jak np. koloru przycisków akcji. Znajomość najnowszych rozwiązań jest niezbędna do uzyskania wysokiej pozycji i konwersji.

Tworzymy treści, zmniejszamy koszt leadów

Tworzymy treści, zmniejszamy koszt leadów

Marketing Treści pomoże wyróżnić Twoją markę od konkurentów. Ale, by zwiększyć skalę potrzebujesz też promocji treści w Social Media i ePR. Działania content marketingowe pozwolą na duży zasięg przy niskich kosztach i obniżenie kosztu pozyskania klienta.

Docieramy do klienta precyzyjniej

Docieramy do klienta precyzyjniej

Kampanie oprzemy na algorytmach i wiedzy technicznej. Połączymy personalizację z automatyzacją. Wdrożymy aplikacje marketingowe, które pozwloą dotrzeć precyzyjnie do grupy docelowej. Marketing oparty na liczbach da Ci najlepsze rezultaty.

Zbudujemy Twój nowy wizerunek

Zbudujemy Twój nowy wizerunek

Proste rzeczy są najbardziej użyteczne, lecz najtrudniej je zaprojektować. Stworzenie dobrego doświadczenia użytkownika wymaga lat doświadczenia. Dobry projekt pozwala wyróżnić się na tle konkurencji i przywiązuje klienta na dłużej.

, może być tylko inne ID w zależności czy to był pierwszy slajder jaki utworzyłeś.

Zawartość konfigurator

Zmodyfikuj plik default.tmpl, który znajduje się w folderze PROJEKT/frontend/templates/nazwa_twojego_szablonu/modules/contentDesigner. 

Musisz, w dowolnym miejscu tego pliku, wpisać unikalną nazwę, którą stworzyłeś w module Zawartość konfigurator. W zależności w którym miejscu wpiszesz zmienną, w takiej kolejności będą się wyświetlać elementy. Następnie ten plik podmienić w repozytorium, czyli git push i oczekujesz na git pull.

Dodanie slajdera jako zawartość strony

Ostylowanie slajdera

Aby ostylować slajder, należy zmodyfikować plik _slider-lite.scss. Plik znajduje się w folderze PROJEKT/frontend/templates/nazwa_twojego_szablonu/scss/modules. Po modyfikacji, tak samo, używając git push, musisz wysłać go do repozytorium i oczekiwać na git pull. Z najważniejszych parametrów jakie możesz dodać/zmienić to:

  • Dla znacznika img dodajesz linijkę opacity: wartość od 0 do 1. Zmienia przezroczystość zdjęcia

Opacity

  • Wszystkie parametry tytułu i opisu, takie jak wielkość, grubość, kolor czcionki możesz zmienić w tym miejscu

Tytuł

  • Ustawienia kropek nawigacyjnych

Kropki nawigacyjne

  • Ustawienia strzałek nawigacyjnych (wygląd jak i szybkość animacji pojawienia się strzałek)

Strzałki

  • Ustawienia przycisku i tekstu znajdującego się w nim

Przycisk

Co zrobić, gdy kropki nawigacyjne nie wyświetlają się prawidłowo?

Rozwiązanie jest bardzo proste i tłumaczy “nagłe” pojawienie się błędu. Błąd w wyświetlaniu slajdera najczęściej dotyczy kropek nawigujących pomiędzy zdjęciami. Są one zdecydowanie za daleko od zdjęcia. Wygląda to mniej więcej tak:

Błąd slajdera

Aby to naprawić wystarczy wylogować się z admina strony internetowej. Powód dlaczego ten sposób działa jest bardzo prosty - będąc zalogowanym na samej górze strony pojawia się panel administracyjny, który powoduje błędne odczytanie parametrów slajdera i jego deformacje do stanu domyślnego, czyli kropki wyświetlające się na wysokości niewykadrowanego obrazka.

Błąd slajdera

Wylogowanie z admina powoduje zniknięcie tego panelu i rzeczywiste rozwiązanie problemu.

Rozwiązanie

Autor:

Przeczytaj również

Dyskusja

Zamknij

Chcesz, żebyśmy zadzwonili do Ciebie za darmo w 3 minuty?

 

Krakweb Twój nr telefonu będzie wykorzystany tylko jednorazowo, jeżeli nie wyrazisz zgody to nie zadzwonimy więcej do Ciebie.

Odebranych telefonów dzisiaj: 1

03:00Powered by KRAKWEB
and ICEBERG
We will call you