Sekcja listy obrazów

Użyj sekcji Lista obrazów, jeśli chcesz wyświetlić zestaw obrazów i odpowiedniego tekstu.

Korzystając z tej sekcji, możesz łatwo łączyć różne strony w witrynie lub dodawać dowolne linki, w których chcesz dodać obraz i opis dla każdego linku.


W tym artykule:

  1. Co to jest lista obrazów?
  2. Dodanie sekcji Lista obrazów do strony
  3. Dodawaj i edytuj elementy listy
  4. Elementy listy sekwencjonowania
  5. Usuwanie elementów listy
  6. Zmiana układu sekcji
  7. Opcje stylu
  8. Styl karuzeli
  9. Przykład na żywo

Lista obrazów

  • Lista obrazów to zbiór obrazów, w którym można dodać opis obrazu oraz dodać łącze lub przycisk, aby połączyć go z dowolną inną stroną w witrynie internetowej lub innym łączem.

Dodaj sekcję listy obrazów

  • Do strony można dodać sekcję. Możesz dodać sekcję do już istniejącej strony lub utwórz nową stronę w Twojej witrynie.
  • Na Twojej stronie, Kliknij na niebieski + ikona dodać Nowa sekcja do Twojej strony.

  • Teraz zobaczysz kategorie sekcji po lewej stronie.
  • Wybierz Lista (1) kategorię i kliknij Lista obrazów zakładka (2), w której możesz wybierać różne układy z listy obrazów (3).

  • Wybierz dowolny układ sekcji i kliknij go, aby dodać go do swojej strony.
Uwaga:

  1. Możesz zarządzać szerokością sekcji z poziomu ustawienia sekcji i szerokość zawartości od styl treści.
  2. Idealny rozmiar obrazu, który musisz przesłać w tej sekcji, będzie zależał od liczby kolumn. Wiedzieć więcej.
  3. Tytuły, napisy i opisy powinny być krótkie i wyraźne.
  4. W polu opisu naciśnij Wchodzę przycisk, aby dać koniec linii i Shift + Enter przycisk, aby rozpocząć od następnej linii.


Dodawaj i edytuj elementy listy

Dodaj element listy

Po dodaniu sekcji:

  • Kliknij na Edytuj listę obrazów (1), aby otworzyć panel pozycji listy.

  • Kliknij na Dodaj przedmiot (2) przycisk, aby dodać nowy element listy.
  • Możesz wybrać Dpowielić lub usunąć (3) elementy listy.


Edytuj element listy

Kliknij element listy, który chcesz edytować. Spowoduje to otwarcie opcji edycji poszczególnych elementów listy.

Stąd możesz:

  • Prześlij/Usuń obraz (1) dla elementu listy. Można także ustawić Kolor akcentu obrazu stąd, który zostanie wyświetlony po najechaniu kursorem na obraz.
  • dodaj Tytuł (2), Podtytuł (3)i Opis (4) pozycji listy.
  • W zależności od wybranego układu opcja napisów i opisu może nie być dostępna w poszczególnych elementach listy.
    Przed dodaniem opisu sprawdź to artykuł.

  • Kliknij ikonę Link Builder w Link do tytułu (5), aby otworzyć narzędzie do tworzenia linków, aby połączyć tytuł elementu listy z dowolną stroną. Wiedzieć więcej O Varso Invest Kreator linków.
  • Ustaw łącze tak, aby otwierało się w a nowej karcie lub w tej samej karcie (6).
  • Dodaj dowolny typ Połączyć (7) do pozycji listy. Możesz dodać przycisk/link do obrazu/ikonę społecznościową/link tekstowy. ZOBACZ WIĘCEJ.
  • Zapisz (8) twoje zmiany.


Zobacz edytowanie elementu listy obrazów w akcji:


Elementy listy sekwencji

  • Możesz łatwo przeciągać i upuszczać elementy listy, aby zmienić kolejność.

Zobacz sekwencjonowanie elementów listy obrazów w akcji: 


Usuń element listy

Po dodaniu elementu listy możesz go edytować i usuwać.

  • Kliknij na Usuń obok elementu listy obrazów.
  • Tne, kliknij na Usuń w wyskakującym okienku potwierdzenia.
  • Wreszcie, zapisać Twoje zmiany.

Zobacz usuwanie elementu listy obrazów w akcji: 

Note

Usuniętego elementu listy nie można odzyskać.


Układ sekcji

  • Kliknij na Zarządzaj listą obrazów (1) przycisk.
  • Wybierz układ (2) zakładka.
  • Wybierz (3) układ sekcji i Zapisz (4) zmiany.

 

Pro Tip

Aby utworzyć sekcję o pełnej szerokości/sekcję listy z zakładkami, wybierz dowolny układ w zakresie od 25 do 29.

Uwagi

  • Możesz łatwo dodać do swojej strony układ listy z zakładkami.
  • Masz możliwość wyboru układu z zakładkami poziomymi lub pionowymi.
  • Pomaga w tworzeniu sekcji opartej na porównaniu.


Stylizuj swoją sekcję

  • Kliknij na Zarządzaj listą obrazów (1) przycisk.
  • Wybierz Styl (2) patka.
  • Zmień styl elementów przekroju i Zapisz (3) Twoje zmiany.


Będziesz mieć wiele opcji stylu dla sekcji: 

szt 

  1. Wybierz, aby Pokaż przedmioty in wiersze i kolumny or karuzela 
    • Jeśli wybrałeś wiersze i kolumny opcji, elementy listy zostaną ułożone w wiersze i kolumny. W takim przypadku musisz określić liczbę wierszy i kolumn.
    • Jeśli wybrałeś karuzela opcja, elementy listy zostaną przedstawione jako pokaz slajdów. Wiedzieć więcej.
  2. Ustaw Liczba kolumn dla listy obrazów. Możesz wybrać od 1 do 10 kolumn.
  3. Określ Przestrzeń Między Kolumnami z pozycji listy.
  4. Określ Przestrzeń Między Rzędami z pozycji listy.
  5. Wybierz Kolejność treści tj. obrazy elementów listy, które mają być wyświetlane jako pierwsze, lub związany z nimi tekst.
  6. Wyrównać zawartość poziomo na liście obrazów. Możesz ustawić je tak, aby były wyrównane do lewej, prawej lub do środka.
  7. Wyrównać zawartość w pionie na liście obrazów. Można je ustawić tak, aby były wyrównane do góry, do środka i do dołu.

Jeśli w kroku 1 wybrano opcję Karuzela, zobaczysz następujące dodatkowe opcje:

  1. Wybierz, aby Zapętl karuzelę lub nie.
  2. W przypadku karuzeli wybierz Sterowanie nawigacją. Możesz wybrać opcję Brak elementów sterujących, Strzałki — Środkowy dół/Prawy górny/Prawy dolny, Szewron lub Kropki.

Wyświetlacz mobilny

  1. Ustaw liczbę Kolumny siatki dla urządzeń mobilnych. Można ustawić maksymalnie 3 kolumny.
  2. Zdefiniuj Rozstaw pomiędzy siatkami (w pikselach).

Obrazy 

  1. Wybierz Iuprawa maga dla elementów listy. Można ustawić obrazy jako kwadratowe, okrągłe, poziome, pionowe i oryginalne.
  2. Wybierz wspólny promień narożnika lub inny promień narożnika dla każdej strony elementów listy i ustaw liczbę (w pikselach) dla Cpromień ornera obrazów elementów listy. Wiedzieć więcej.

Wskazówka

Korzystanie z promień narożnika możesz tworzyć różne kształty obrazów elementów listy. Jeśli określisz tutaj 500 pikseli, obrazy będą wyświetlane w kształcie koła.

  • Jeśli wybrałeś narożniki dzielone, możesz ustawić inny promień narożnika dla każdego narożnika.

Po najechaniu na obraz 

  1. Wybierz Kolor po najechaniu na obraz być kolor akcentu albo być określony. Jeśli wybrałeś kolor akcentu, a następnie określ nieprzezroczystość.
  2. Jeśli wybrałeś określ kolor opcję, a następnie ustaw Bazowy kolor i krycie po najechaniu kursorem dla pozycji listy.
  3. Ustaw Elementy kolor elementów listy w sekcji.
  4. Wybierz, aby Animuj obrazy elementów listy po najechaniu myszką, klikając Tak. Sprawdź tę funkcję na aktywnej stronie.
  5. Wybierz Styl animacji dla obrazów po najechaniu na nie kursorem.

Rozmiar i przestrzeń 

  1. Określ Szerokość obrazu dla elementów listy.
  2. Określ Szerokość treści dla pozycji listy.
  3. Określ Spacja pod nagłówkiem sekcji w pikselach
  4. Określ Miejsce pod obrazami pozycji na liście (w %).
  5. Określ Spacja pod tytułami pozycji na liście (w %).
  6. Określ Miejsce pod napisami pozycji na liście (w %).

Tekst 

  1. Kliknij na Zmień styl tekstu przycisk, aby odwiedzić Wnętrze sekcji i zarządzaj rozmiarami i stylami czcionek. 
  2. Ustaw Tytuł styl czcionki dla elementów listy w sekcji.
  3. Ustaw Podtytuł styl czcionki dla elementów listy w sekcji.
  4. Ustaw wartość domyślną Opis styl czcionki dla elementów listy w sekcji.

Kartki okolicznosciowe 

  1. Zobacz jak zarządzać kartami.

Shadow

  1. Wyświetlacz – Wybierz wyświetlanie cienia za elementami listy zawsze lub tylko po najechaniu myszką.
  2. Styl – Wybierz spośród istniejących ustawień wstępnych lub utwórz niestandardowy cień.
    Jeśli wybrałeś opcję Niestandardowa, odwiedź tę stronę Generator cieni pudełkowych , aby utworzyć niestandardowy cień. Na koniec skopiuj i wklej plik CSS cienia pudełka.
  3. Jeśli wybrałeś opcję ustawień wstępnych, to Wybierz Style cieni z listy rozwijanej.

  1. Zobacz jak zarządzać stylizacją Przyciski i łącza.
  2. Zapisz wszystkie zmiany stylu.


Styl karuzeli

Styl karuzeli pokazuje elementy listy jako pokaz slajdów, tzn. elementy listy będą wyświetlane jeden po drugim.

Zobacz, jak działa styl karuzeli: 


Oto lista obrazów na żywo: 

Zobacz stronę demonstracyjną na żywo. 


Zobacz, jak działa promień narożnika: 


Nie możesz znaleźć tego, czego szukasz?

Skontaktuj się z Ekspertem Pixpa.