Sekcja cenowa

Zaprojektowanie skutecznej sekcji cenowej dla Twojej witryny internetowej jest niezbędne, aby poprowadzić potencjalnych klientów do podejmowania decyzji zakupowych i ogólnej strategii marketingowej.

Możesz użyć tej sekcji na swojej stronie internetowej, aby wyświetlić ceny wszystkich oferowanych usług i przekierować klientów na stronę Płatności za pomocą przycisków wezwania do działania.

W tym artykule


Dodaj sekcję cenową

  • 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 aby dodać nową sekcję.

  • Teraz zobaczysz kategorie sekcji po lewej stronie.
  • Przewiń do Ceny (1) sekcję i kliknij ją. Pojawi się ekran umożliwiający wybór spośród różnych layouty (2) Sekcji Logo.

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

Zarządzaj sekcją cenową

Po dodaniu sekcji:

  • Kliknij na Edytuj ceny (1) przycisk otwierający Sekcja cenowa ustawienia.


Dodawaj i edytuj elementy listy

Dodaj element listy

  • Kliknij na Dodaj Przedmiot (1) przycisk umożliwiający dodanie nowej pozycji do listy.
  • Duplikat or Usunięcia (2) pozycje listy.
  • Edytuj Nagłówek sekcji (3) ust.


Edytuj element listy

Kliknij element listy, który chcesz edytować. Spowoduje to otwarcie opcji edycji tego konkretnego elementu listy.

Stąd możesz:

  • Prześlij/Usuń obraz główny i dodatkowy (1)
    Możesz przesłać plik Obraz wtórny oraz Obraz podstawowy dla każdego elementu listy. Gdy użytkownik najedzie kursorem na element, zostanie wyświetlony obraz drugorzędny, zastępując obraz główny. Dodatkowo możesz ustawić Kolor akcentu obrazu, który będzie wyświetlany po najechaniu kursorem na obrazek.
  • 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.

Note

Przed dodaniem opisu sprawdź to artykuł.

5. Akcja po kliknięciu – tytuł i obraz

Możesz dostosować zachowanie kliknięcia poszczególnych elementów w Ceny sekcja. Poniżej znajdują się dostępne opcje:

  • Przejdź do linku
    Wybranie tej opcji otwiera Kreator linków, co pozwala na dodanie hiperłącza do tego elementu. Link może kierować użytkowników do innej strony w obrębie Twojej witryny lub zewnętrznego adresu URL. Wiedzieć więcej Parę słów o  Kreator linków.
  • Otwórz w Lightboxie
    Ta opcja wyświetla element w powiększeniu Lightbox widok po kliknięciu. W tym trybie, Podtytuł oraz OPIS powiązane z elementem nie będą wyświetlane w widoku siatki, ale będą widoczne w trybie Lightbox.
  • Brak akcji
    Wybierz tę opcję, aby uczynić element nieklikalnym. Po wybraniu tej opcji kliknięcie na element nie wywoła żadnej akcji.

6. Otwórz link w nowym oknie: Ustaw łącze tak, aby otwierało się w a nowej karcie lub w tej samej karcie. Będzie to widoczne tylko wtedy, gdy Przejdź do linku opcja jest wybrana pod Akcja po kliknięciu menu.

7. Przyciski i linki: Dodaj dowolny typ Połączyć do elementu listy. Możesz dodać Przycisk/Link do Obrazu/Ikonę Społecznościową/Link Tekstowy. Zobacz więcej.

8. Zastąpienie stylu karty

Możesz zastąpić globalne ustawienia stylu karty z sekcji Ustawienia stylu i dostosuj kartę każdego elementu indywidualnie w sekcji Cennik. Pozwala to na zastosowanie unikalnych stylów do różnych elementów listy w celu lepszego dostosowania.

Zobacz więcej o opcji Karty w sekcji dynamicznej.

9. Nadpisanie stylu kształtu

Użyj opcji Nadpisz, aby przypisać każdemu obrazowi z osobna w sekcji Cennik inny kształt, co zapewni Ci większą kontrolę nad stylem wizualnym każdego elementu. Zobacz więcej o Shape Mask.

10. Zapisz: Po wprowadzeniu zmian zapisz je.


Elementy listy sekwencjonowania

Możesz łatwo zmienić kolejność elementów listy według Przeciąganie i upuszczanie Im.

Zobacz sekwencjonowanie listy pozycji cenowych w akcji: 


Zarządzaj elementami sekcji cenowej

Sekcja cenowa zawiera: Karta Elementy co pozwala na łatwe zarządzanie widocznością różnych elementów w sekcji. Za pomocą prostych przełączników możesz włączać lub wyłączać określone elementy bez konieczności usuwania lub modyfikowania samych elementów.

  • Kliknij na Edytuj ceny (1) przycisk.

  • Wybierz Elementy (2) zakładka.
  • Po wprowadzeniu zmian naciśnij Zapisz (3) przycisk.

Opcje sekcji

  1. Pokaż nagłówek: Włącz lub wyłącz widoczność nagłówka sekcji Cennik.
  2. Pokaż przyciski: Steruj wyświetlaniem przycisków na poziomie sekcji.

Opcje elementów

  1. Pokaż obraz:Przełącz widoczność obrazów.
  2. Pokaż tytuł: Kontroluje, czy tytuł jest wyświetlany.
  3. Pokaż napisy: Włącz lub wyłącz napisy.
  4. Pokaż opis: Zarządzaj widocznością opisów przedmiotów.
  5. Pokaż przyciski:Zdecyduj, czy mają być wyświetlane przyciski dla poszczególnych elementów.


Zarządzaj układem

  • Kliknij na Edytuj ceny przycisk otwierający panel edycji sekcji.
  • Wybierz układ patka.
  • Stąd możesz łatwo zmienić układ sekcji nawet po dodaniu jej do strony.

Zmieniając układ, na górze zobaczysz układy powiązane z sekcjami.

Oprócz tego masz także możliwość wyboru układu z innych sekcji w sekcji Więcej układów nagłówek.


Sekcja cen stylu

Możesz dostosować różne aspekty sekcji Cennik, używając różnych opcji stylizacji. Aby przejść do opcji Styl, kliknij Edytuj ceny (1) przycisk.

  • Na pasku bocznym kliknij Styl (2) zakładka.

Będziesz mieć wiele opcji stylu dla sekcji: 

  1. Opcje wyświetlania
  2. Wyświetlacz mobilny
  3. Spójność
  4. Rozmiar tekstu
  5. Rozstaw zębów
  6. Nagłówek sekcji
  7. Opcje obrazów
  8. Maska kształtu
  9. Opcje przesuwania obrazu
  10. Ramka obrazu
  11. Opcje kart
  12. Opcje cienia
  13. Przyciski i linki

Opcje wyświetlania

  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 sekcji. 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.

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

  1. Włącz płynne przewijanie:Umożliwia ciągłe przewijanie elementów w karuzeli, zapewniając płynne i atrakcyjne wizualnie wrażenia.
  2. Automatyczne przesuwanie:Automatyczne przełączanie slajdów bez interakcji użytkownika.
  3. Pokaż postęp automatycznego odtwarzania: Wyświetla wskaźnik postępu, gdy aktywne jest automatyczne odtwarzanie, zapewniając lepszą widoczność.
  4. Opóźnienie automatycznego odtwarzania: Ustawia odstęp czasu między przejściami slajdów, gdy włączone jest automatyczne odtwarzanie.
  5. Pętla karuzeli:Umożliwia ciągłe powtarzanie slajdów, dzięki czemu karuzela płynnie uruchamia się ponownie po ostatnim slajdzie.
  6. Sterowanie karuzelą: Wybierz Sterowanie nawigacjąMożesz wybierać pomiędzy opcjami Brak sterowania, Strzałki – Dolny środek/Górny prawy/Dolny prawy, Szewron, Kropki i Przewijanie poziome.
  7. Wyblakłe krawędzie: Zastosuj subtelny efekt zanikania na krawędziach karuzeli. Ulepsza to doświadczenie użytkownika poprzez delikatne łączenie obrazów, gdy wchodzą lub wychodzą z widoku.


Wyświetlacz mobilny

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


Spójność

  1. Wyrównać Obraz poziomo w sekcji. Możesz ustawić je tak, aby były wyrównane do lewej, prawej lub do środka.
  2. Wyrównać Tekst poziomo w sekcji. Możesz ustawić je tak, aby były wyrównane do lewej, prawej lub do środka.
  3. Wyrównać zawartość w pionie w sekcji. Możesz ustawić je tak, aby były wyrównane do góry, środka i dołu.
  4. Wybierz Kolejność treści tj. obrazy elementów listy, które mają być wyświetlane jako pierwsze, lub związany z nimi tekst.


Rozmiar tekstu

  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.
  5. Włącz tę opcję, aby animować dowolne liczby obecny w Tytuł oraz Podtytuł Pola. Po włączeniu tej opcji wartości liczbowe będą wyświetlane z dynamiczną animacją liczenia, co sprawi, że będą bardziej atrakcyjne wizualnie.


Rozstaw zębów

  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 %).


Nagłówek sekcji

  1. Wyrównaj poziomo tekst nagłówka sekcji. Można ustawić go na Lewo, Środek i Prawo.
  2. Włącz/wyłącz dzielnik między nagłówkiem sekcji i jej zawartością.
  3. Ustaw grubość przegrody (w pikselach).
  4. Określ Kolor rozdzielacza z próbnika kolorów.
  5. Wybierz Styl dzielnika z listy rozwijanej.
  6. Ustaw Szerokość nagłówka aby określić szerokość tytułu sekcji, zaczynając od minimum 50%.


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.


Maska kształtu

  1. Maska kształtu: Włącz ten przełącznik, aby zastosować maskę kształtu do obrazów w sekcji Cennik. Po włączeniu wybrany kształt wizualnie przytnie obraz do tego formularza.
  2. Wybierz kształt: Wybierz spośród różnych predefiniowanych kształtów, które chcesz zastosować do swoich obrazów. Pozwala to na kreatywne stylizowanie treści poprzez wyświetlanie obrazów w unikalnych formach, takich jak zaokrąglone, diamentowe, kroplone itp.
  3. Rozciągać: Włącz tę opcję, aby rozciągnąć wybrany kształt, aby lepiej pasował do kontenera obrazu. Dzięki temu kształt wypełni dostępną przestrzeń proporcjonalnie, zwiększając wizualne wyrównanie na różnych rozmiarach ekranu.

Komentarz

  • Opcja rozciągania jest zależna od układu – Może nie pojawiać się w niektórych układach. W układach, w których tekst, taki jak tytuł lub podtytuł, jest wyświetlany nad obrazem, opcja całej maski kształtu może być niedostępna.
  • Ustawienie rozciągania zależy od wielu czynników - włącznie z rozmiar obrazu, wyrównanie, ustawienia przycinania zdefiniowano na karcie Styl.
  • Jeśli opcja Przycinanie obrazu jest ustawiona na Oryginał, rzeczywiste wymiary obrazu decydują o tym, czy zostanie on rozciągnięty w pionie czy w poziomie.


Obraz po najechaniu na

  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śćMożesz określić kolor akcentu dla każdego elementu z Edytuj element płyta.
  2. Jeśli wybrałeś określ kolor opcję, a następnie ustaw Nałóż kolor i krycie.
  3. Ustaw Nałóż kolor tekstu który pojawia się po najechaniu kursorem.
  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.
  6. Wybierz, czy chcesz zezwolić na Przejście obrazów niezależnie od tego, czy najedziesz kursorem, czy nie.
  7. Wybierz Styl przejściowy dla przejścia hover. Dostępne opcje to Fade i Flip.


Ramka obrazu

  1. Włącz / wyłącz granicę wokół obrazów, przełączając przełącznik.
  2. Wybierz opcję posiadania wspólna granica po wszystkich stronach obrazów lub możesz określić granice osobno dla każdej strony.
  3. Określ szerokość granicy. Jeśli jest ustawiona na 0, ramka nie będzie widoczna. Możesz także ustawić szerokość obramowania indywidualnie dla każdej strony obrazu.
  4. Wybierz Kolor ramki z próbnika kolorów.
  5. Wybierz preferowany Styl graniczny z listy rozwijanej.
  6. Określ szerokość obramowania dla urządzeń mobilnych urządzeń, dopasowując ją do szerokości wybranej dla komputera stacjonarnego.


Kartki okolicznosciowe


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.


Przyciski i linki

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


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

Skontaktuj się z Ekspertem Pixpa.