Jak dodać zawartość modułu suwak/slider?


Informacje oraz dyskusje na temat sklepów internetowych. Kopalnia wiedzy o usługach: eSklep oraz eSklep Premium

Jak dodać moduł suwak/slider?

Aby dodać moduł suwak/slider:

  1. Zaloguj się do Twojego Panelu eSklep.
  2. Przejdź do opcji menu KONFIGURACJA –> WYGLĄD –> AKTYWNY STYL GRAFICZNY.
  3. Kliknij zakładkę Moduły, która znajduje się po lewej stronie ekranu.eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Wybierz opcję Moduły
  4. Kliknij zakładkę strony, do której chcesz dodać moduł, np. strona główna.
  5. W górnej części ekranu, kliknij przycisk dodaj slider (suwak).
  6. W kolejnym kroku zostaniesz poproszony o wskazanie podstawowej konfiguracji slidera. Po zapisaniu zmian, możesz powrócić do jego edycji i zmienić te ustawienia.
    • Automatyczne przewijanie – ustaw TAK (zalecane), jeśli chcesz aby zdjęcia dodane do slidera, przewijały się automatycznie. Ustaw NIE, jeśli chcesz, aby użytkownik musiał ręcznie zmieniać kolejne zdjęcia dodane do slidera (np. klikając na odpowiedni przycisk).
    • Losowa kolejność – ustaw TAK, jeśli chcesz aby slider wyświetlał zdjęcia w przypadkowej kolejności, ustaw NIE, jeśli chcesz aby zdjęcia były przewijane jedno po drugim, zgodnie z ustaloną kolejnością.
    • Animacja przewijania – ustaw efekt jaki ma towarzyszyć zmianie zdjęcia (przewijanie lub przenikanie). Po zapisaniu ustawień i dodaniu zdjęć, możesz przetestować oba efekty i zmienić je w zależności od tego, który najbardziej spełnia Twoje oczekiwania. Brak animacji spowoduje standardową zmianę zdjęcia – bez dodatkowych efektów.
    • Stronicowanie – jeśli dodajesz do modułu kilka zdjęć, stronicowanie umożliwia szybki podgląd każdego z nich.
    • Czas trwania animacji, czas wyświetlania – określ czas w jakim animacja wykona zmianę zdjęcia oraz czas wyświetlania poszczególnych zdjęć. Wartości czasu podaj w jednostce ms (1000ms = 1 sekunda).
    • Stała wysokość – określ wysokość modułu.
      W przypadku jeśli do galerii zdjęć dodałeś obraz tła dla zdjęcia, wysokość slajdera zostanie automatycznie ustalona względem najwyższego obrazka tła slajdu. Jeśli do galerii dodawałeś tylko zdjęcia bez obrazów tła, to wysokość slajdera możesz ustalić ręcznie (podając wartość wyrażoną w pikselach (px)).

      eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Strona Główna - Dodaj slider - Wskaż podstawową konfigurację slidera

  7. Po lewej stronie ekranu wybierz Lista zdjęć, a następnie Dodaj slajd, aby przejść do dodawania obrazów do slajdu. Obrazy możesz dodawać jako tło slajdu lub zdjęcie główne. Slajd możesz uzupełnić także o dodanie tekstu.
    eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Strona Główna - Dodaj slider - Lista zdjęć - Kliknij przycisk Dodaj slajd
W dalszej części artykułu dowiesz się jaka jest różnica pomiędzy zdjęciem, a tłem slajdu oraz jak rozmiar obrazków ma wpływ na rozmiar modułu wyświetlanego na stronie sklepu.

Czym różni się obraz tła od zdjęcia

Tworząc własny slider masz możliwość dodawania do niego grafiki. Standardowo każdy slider wyświetla pewną ilość obrazów reklamowych, które są kolejno przewijane. Każdy slajd może dodatkowo być linkiem do innej podstrony sklepu lub lokalizacji zewnętrznej.
eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Strona Główna - Dodaj slider - Lista zdjęć - Dodaj slajd - Dodaj własną grafikę

Slajd wyświetlany w module może składać się z 3 elementów:

  • Tło – obraz lub grafika wyświetlana jako druga warstwa dla zdjęcia i tekstu (elementów opisanych w dalszej części artykułu). Tłem może być obraz przygotowany przez użytkownika, gradient – płynne przejście tonalne między co najmniej dwoma kolorami, lub jednolite tło – grafika charakteryzująca się jednolitym kolorem na całej powierzchni,
  • Zdjęcie – obraz umieszczany w wyświetlanym slajdzie. Zdjęcie może zostać dodane na wcześniej utworzonym tle (patrz punkt wyżej) lub jako uzupełnienie dodanego tekstu (element opisany w dalszej części artykułu). Zdjęcie podobnie jak tło może zawierać obraz przygotowany przez użytkownika, będący kompletnym slajdem (np. reklamą),
  • Tekst – może być dodany jako uzupełnienie slajdu. Może być wyświetlany wraz z dodanym tłem oraz zdjęciem (patrz punkty wyżej). Tekst może występować także jako samodzielny obiekt na slajdzie, bez tła i zdjęcia.
Każdy ze wskazanych elementów slajdu, może być dodany jako samodzielny obiekt lub połączony z innymi jego elementami.
Elementem wyróżniającym dodanie tła jest przyjęcie przez mechanizm stałej wysokości slidera, która zostanie automatycznie ustalona względem najwyższego obrazka tła slajdu. Użytkownik nie ma wpływu na wysokość slidera, chyba że zmieni wysokość obrazka tła, np. w programie do edycji grafiki i załaduje obraz ponownie do slidera. Dodane do tła zdjęcia, przyjmą oryginalny rozmiar obrazu lub zostaną pomniejszone względem wysokości obrazka tła.
Elementem wyróżniającym dodanie zdjęcia bez tła jest możliwość ręcznego ustalenia wysokości modułu slajdera. Slider przyjmie wysokość zadeklarowaną przez użytkownika – niezależnie od rozmiaru załadowanej grafiki. Grafika zostanie wyświetlona w rozmiarze oryginalnym lub pomniejszona proporcjonalnie do zadeklarowanej przez użytkownika stałej wysokości.

Jeśli dodawane do modułu slidera obrazy mają stały rozmiar, dodanie ich jako tło slajdu spowoduje wyświetlanie grafiki ze stałą wysokością (zadeklarowaną w rozmiarze zdjęcia). Grafika będzie wyświetlana w oryginalnym rozmiarze (dot. wysokości), niezależnie od umiejscowienia modułu na stronie sklepu.

Jeśli dodawane do slidera obrazy mają stały rozmiar, dodanie ich jako zdjęcia spowoduje wyświetlanie grafiki ze stałą wysokością (zadeklarowaną przez użytkownika na etapie dodawania modułu). Grafika będzie wyświetlana poprawnie w zadeklarowanym rozmiarze, niezależnie od umiejscowienia modułu na stronie sklepu. Taka konfiguracja pozwala na swobodne przemieszanie modułu po stronie (przy jednoczesnej szybkiej edycji wysokości modułu).

Jeśli dodawane do modułu slidera obrazy mają zróżnicowany rozmiar, dodanie ich jako tła spowoduje, że slider przyjmie na wysokość wymiar najwyższego obrazka tła. Jeśli inne obrazy będą odbiegały od tej wysokości, slider będzie wyświetlał fragmenty pustego obszaru. Analogicznie, dodanie obrazów o różnych rozmiarach jako zdjęcia, spowoduje ich skalowanie, względem zadeklarowanej wysokości, co w przypadku dużej różnicy w rozmiarze, może również powodować wyświetlanie pustego obszaru.

Dodawanie obrazów o zróżnicowanym rozmiarze, ma zastosowanie w przypadku, gdy nie deklarujemy stałej wysokości slidera, a dodawane obrazy stanowią element slajdu, który nie musi  wypełniać modułu w całości.

Aby zapewnić optymalny wygląd modułu, sugerujemy dodawanie obrazów do slajdów o jednakowym rozmiarze, dopasowanym do potrzeb strony. Niezależnie od tego czy umieszczone obrazy zostaną dodane jako tło lub zdjęcie, grafika wyświetlana będzie poprawnie, bez zbędnych niewykorzystanych obszarów. Wybór najlepszego rozwiązania sugerujemy podeprzeć własnymi testami, aby określić przydatność danego wariantu.

Jak dodawać kolejne slajdy do modułu suwak/slider?

Po lewej stronie ekranu wybierz Lista zdjęć, a następnie Dodaj slajd, aby przejść do dodawania obrazów do slajdu. Obrazy możesz dodawać jako tło slajdu lub zdjęcie główne. Slajd możesz uzupełnić także o dodanie tekstu.

  • Nazwa – nazwa wyświetlanego slajdu,
  • Link – podaj adres url, zaczynający się od http:// do strony lub podstrony, na którą ma kierować slajd. Link przekieruje użytkownika strony w chwili kliknięcia wybranego slajdu,
    eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Strona Główna - Dodaj slider - Lista zdjęć - Dodaj slajd - Formularz - Podaj nazwę i link
  • Tło – wybierz tło slajdu. Może być nim zdjęcie/obraz, kolor – czyli jednolite tło wypełnione jednym kolorem lub gradient – płynne przejście tonalne,
  • Dodaj zdjęcie – dodaj dodatkowy obraz, który będzie wyświetlany na slajdzie,
  • Dodaj tekst – dodaj dodatkowy tekst, który zostanie umieszczony na slajdzie.
    eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Strona Główna - Dodaj slider - Lista zdjęć - Dodaj slajd - Przeciągnij zdjęcie

Zdjęcia oraz tekst możesz dodatkowo skonfigurować, ustawiając:

  • Położenie obrazu i tekstu – skorzystaj z jednego z dziewięciu lokalizacji obrazu i tekstu w obszarze slajdu,
  • Animacja – ustal kierunek animacji, z którą załadowane zdjęcia lub tekst pojawią się na slajdzie (niezależnie od ustawień samej animacji modułu),
  • Czas w ms – ustal czas w jakim animacja będzie wyświetlana na stronie zanim dojdzie do właściwego umiejscowienia zdjęcia lub tekstu na slajdzie.
    eSklep - Konfiguracja - Wygląd - Aktywny styl graficzny - Moduły - Strona Główna - Dodaj slider - Lista zdjęć - Dodaj slajd - Ustaw położenie zdjęcia
Aby zapewnić optymalny wygląd modułu sugerujemy dodawanie obrazów do slajdów o jednakowym rozmiarze, który został dopasowany do potrzeb strony. Niezależnie od tego czy umieszczone obrazy zostaną dodane jako tło lub zdjęcie, grafika wyświetlana będzie poprawnie, bez zbędnych niewykorzystanych obszarów. Dodanie obrazów jako tło spowoduje ustalenie stałej wysokości modułu – zależnej od wysokości dodanego obrazu. Dodanie obrazów jako zdjęcia – pozwoli kontrolować wysokość modułu, ale wymaga korekty szerokości obrazu, np. w programie do edycji grafiki.

Załóż własny sklep internetowy

Nieważne co i jak chcesz sprzedawać. eSklep od home.pl to idealne narzędzie do prowadzenia sprzedaży w Internecie.


  • Czy artykuł był pomocny ?
  • Tak   Nie
Szukaj
Generic filters
Tylko dokładne dopasowania
Szukaj w tytułach
Szukaj w treści
Filter by Article Categories
Najczęściej zadawane pytania
Dodatkowe narzędzia hostingu
Statystyki serwera (nowe)
Połączenie SSH
Statystyki serwera (stare)
WebFTP
Autoinstalator
Kontrola wersji (SVN)
Listy mailingowe
Poczta home.pl
Obsługa poczty webmail
Programy pocztowe
Nowa platforma home.pl
Częste pytania
Bezpieczeństwo
Instalacje
Panel klienta
Domeny
Hosting
Serwer Apache
Bazy danych
Certyfikaty SSL
Zamawianie SSL
Instalacja i konfiguracja SSL
Poczta e-mail
WordPress Hosting SSD
Dodatki od partnerów
Poprzednia platforma home.pl
Certyfikaty SSL
Zamawianie certyfikatów SSL
Konfiguracja i instalacja SSL
Panel home.pl
Informacje podstawowe
Pulpit
Usługi
Płatności
Profil
Centrum Pomocy
Operacje w Panelu home.pl
Serwery
WebFTP
Informacje podstawowe
Konfiguracja serwerów
Serwery Unix
Serwery Windows
Obsługa baz danych
phpMyAdmin (MySQL)
phpPgAdmin (PgSQL)
myLittleAdmin (MSSQL)
Sklep internetowy eSklep
Panel usługi eSklep
RODO w sklepie internetowym
Panel sklepu internetowego
Pierwsze kroki
Promocja sklepu
Sprzedaż
Pierwsze uruchomienie
Dodatki od partnerów
Asortyment
Klienci
Integracje
Inne integracje
Systemy aukcyjne
Baza produktów
Aplikacje
App store
Aplikacja mobilna
Marketing
Modyfikacja wyglądu
Dokumentacja
Dla deweloperów
Style graficzne
Inne zagadnienia
Raporty i statystyki
Zawartość
Filmy instruktażowe
Konfiguracja sklepu
Rozliczenia i dokumenty
Faktury
Zmiana danych (cesja)
Rozliczenia i płatności
Dokumenty do pobrania
Produkty i usługi
Kreator Stron WWW
eCommerce
Moduły
Ustawienia
Szablony
Nawigacja
Publikacja i dodatki
Szybki start
Prestahosting
Profesjonalne usługi IT
Certyfikaty SSL
Przywracanie danych
Udostępnienie logów
Operacje na plikach i bazach danych
WordPress
Terminal płatniczy SumUp
Wordpress hosting SSD
Domeny
Informacje podstawowe
Rejestracja / opłacanie
Konfiguracja domen
Transfer domen
Giełda domen
Dodatki do domen
Serwery VPS
Skrzynki e-mail
Microsoft Exchange
Cloud Email Xchange
Obsługa skrzynek w Panelu home.pl
Jak zarejestrować Personal email lub Business email?
Bezpieczeństwo
eKsięgowość
Reklama internetowa
Reklama Allegro Ads
Tworzenie stron WWW
Contact LEADer
Reklama banerowa Google
Zakupy Google
Google Ads (AdWords)
eKampanie Google
SEMSTORM
Pozycjonowanie
rankingCoach
Baza wiedzy
Facebook
Systemy CMS
Internet w praktyce
Przydatne programy
Konfiguracja programów FTP
Zagadnienia techniczne
.htaccess
mod_rewrite
Kursy i specyfikacje
Kurs HTML
Kurs PHP
Kurs SQL
Rejestracja usług
RODO w home.pl
English
Website Builder
Marketplace
Control Panel
Webmail
FTP
Office 365
WordPress
SSL certificate
Aplikacje w marketplace
SimplySign
Antywirus ESET
SiteLock - ochrona WWW
Dropsuite Email Backup
CCleaner
Antywirus Kaspersky
Dropbox - dysk w chmurze
Płatności PayU
Programy antywirusowe AVAST
Office 365
AVG PC TuneUp
Reklama na start
Google AdWords
Zareklamuj stronę WWW na Facebook
Cloud Email Xchange
Brand24
Microsoft OneDrive
FreshMail.pl
Tłumaczenia online
G Suite - poczta Gmail
Program prowizyjny
Acronis Backup
Informacje podstawowe
Ustawienia dodatkowe
Panel użytkownika
Panel administratora
lub