Możesz łatwo stworzyć opisową i atrakcyjną tabelę cenową, korzystając z różnych opcji stylizacji.
Dowiedz się, jak utworzyć tabelę cen w edytorze Gutenberg na swojej stronie WordPress.
Twoja witryna WordPress musi mieć zainstalowaną wtyczkę GutenKit. Następnie wykonaj poniższe kroki:
Jak korzystać z tabeli cen GutenKit #

Krok 1: Dodaj blok tabeli cen #
Rozpocznij edycję istniejącej strony lub dodaj nową stronę i kliknij „+” ikona > Wyszukaj Tabela cen w bibliotece bloków > Przeciągnij i upuść blok na ekran edytora.
Krok 2: Dodaj zawartość tabeli cen #
Otwórz ustawienia bloku i przejdź do zakładki treści. Najpierw wprowadzimy nazwę tabeli cen i dodatkowe informacje.
Nagłówek: #

- Tytuł tabeli:Wprowadź tekst tytułu nagłówka tabeli.
- Tytułowy znacznik HTML: Wybierz znacznik HTML nagłówka: H1-H6, Div, Span lub Paragraph.
- Podtytuł tabeli: W tym polu wpisz podtytuł tabeli cen.
- Ikona lub obraz nagłówka: Dodaj ikonę lub obraz do nagłówka tabeli. Możesz również wybrać opcję braku wyświetlania.
Krok 3: Wprowadź informacje o cenach #
Cena: #

- Waluta:Dodaj znak lub słowo pokazujące standard pieniężny.
- Cena:Wprowadź wartość ceny.
- Czas trwania: Wprowadź tekst, aby wyświetlić czas trwania pakietu.
Krok 4: Dodaj szczegóły pakietu #
W obszarze ustawień funkcji dodasz szczegóły swojego pakietu.
Cechy: #
- Cechy Styl: Wybierz styl z listy rozwijanej, aby wyświetlić cechę pomiędzy akapitem lub listą.

- Zawartość tabeli: Jeśli wybierzesz styl akapitu, ta opcja się pojawi. Wprowadź szczegóły pakietu w polu.

- Lista:Wybranie opcji Lista spowoduje otwarcie ustawień dodawania listy funkcji. Aby dodać element, naciśnij + Dodaj element przycisk. Możesz również skopiować element, klikając „Przedmiot klonowania” i usuń jedną za pomocą „X” ikona. Teraz kliknij dowolny element, a pojawią się następujące opcje.

- Tekst listy: Wprowadź tekst funkcji lub pakietu.
- Dodaj ikony: Włącz ten przycisk przełączający, aby wyświetlić ikonę tej funkcji.
- Ikona: Wybierz ikonę z biblioteki lub prześlij ją ze swojego urządzenia.
- Kolor: Wybierz kolor swojej ikony.
- Tekst informacyjny: Dodaj wszelkie specjalne informacje o funkcji w tym polu. Włączy to ikonę informacji.
Krok 5: Dodaj przycisk tabeli cen #
Za pomocą tego obszaru ustawień możesz dodać przycisk w tabeli cen
Przycisk: #

- Etykieta: wprowadź tekst przycisku.
- Połączyć:Wprowadź adres linku strony internetowej, na którą chcesz, aby użytkownik został przekierowany.
- Dodaj ikonę:Pokaż ikonę z tekstem przycisku.
- Ikona: Wybierz ikonę z biblioteki lub prześlij własną.
- Pozycja: Umieść ikonę przed lub za tekstem.
- Odstępy między ikonami: Użyj suwaka, aby określić odstęp między tekstem przycisku a ikoną.
- Klasa i identyfikator: Dodaj konkretną klasę i identyfikator w tych polach, aby użyć niestandardowego kodu CSS z arkusza stylów.
Krok 6: Skonfiguruj kolejność elementów #
Zamówienia niestandardowe: #

- Włącz zamawianie: Aktywuj ten przycisk przełączania, aby ustawić kolejność elementów. Przeciągnij element w górę lub w dół, aby umieścić go w preferowanej pozycji.
Krok 7: Styl obszaru zawartości #
Teraz skupimy się na stylizacji treści tekstowej opowieści o cenach. Musisz wprowadzić „Karta Styl”.
Cennik: #

- Wyrównanie: Ustaw położenie tabeli cen w poziomie: po lewej, na środku lub po prawej.
Następnie będą opcje Tytuł tabeli i Podtytuł. Oba ustawienia mają podobne ustawienia.
Tytuł tabeli: #

- Wyrównanie: Wyrównaj tytuł tabeli do lewej, środka lub prawej.
- Typografia: Otwórz ten obszar ustawień, aby uzyskać dostęp do wszystkich dostosowań typograficznych tytułu tabeli.
Poniższe opcje dotyczą zarówno opcji normalnych, jak i opcji aktywowanych za pomocą najechania kursorem.
- Kolor: Użyj selektora kolorów, aby wybrać kolor tytułu.
- Granica:Uzyskaj wszystkie możliwości dostosowania obramowania, takie jak kolor, styl i grubość.
- Promień granicy:Określ okrągłość obramowania.

- Wyściółka: Dodaj spacje wokół tytułu.
- Margines: Określ odległość tytułu od innych elementów.
Krok 8: Dostosuj informacje o cenach #
Cena: #

- Pozycja prawa:Dostosuj lewą/prawą pozycję tła metki z ceną.
- Szerokość: Użyj suwaka, aby wydłużyć lub zmniejszyć szerokość tła.
- Wyściółka:Dodaj wewnętrzną przestrzeń do metki z ceną.
- Margines:Dostosuj odległość między ceną a innymi elementami.
- Typografia: Otwórz to ustawienie, aby dostosować typografię ceny.
Czas trwania:

- Kolor tekstu: Wybierz kolor tekstu czasu trwania dla stanu normalnego.
- Tekst najechany kursorem: Ustaw kolor tekstu po najechaniu kursorem, tak jak w poprzedniej opcji.
- Typografy: Pobierz wszystkie opcje typograficzne dla tekstu czasu trwania.
- Pozycja pionowa: Określ pozycję pionową tekstu czasu trwania w tagu cenowym. (Góra, środek, dół)
Symbol waluty:

- Typografia: Styl tekstu waluty.
- Pozycja: Umieść symbol waluty przed lub po numerze ceny.
- Pozycja pionowa:Ustaw pionowe pozycjonowanie symbolu waluty.

- Kolor: Wybierz kolor wyświetlania swojej waluty.
- Typ tła: Dodaj typ tła pomiędzy kolorem jednolitym a gradientowym.
- Granica: Ustaw grubość, kolor i styl obramowania.
- Promień granicy: Wprowadź wartość, aby zmierzyć okrągłość obramowania.
- Pudełko Cień:Upiększ tę część za pomocą efektu animacji cienia pudełka.
Krok 9: Dostosuj szczegóły pakietu #
Cechy #

- Wyrównanie: Wyrównaj tekst akapitu lub listę do lewej, środka lub prawej.
- Typografia: Zmień styl tekstu obiektu, rodzinę czcionek, grubość, przekształcenie, odstępy itp.
Poniższe funkcje stylizacji można stosować zarówno w przypadku opcji normalnych, jak i opcji najechania kursorem.
- Kolor: Wybierz kolor tekstu wyróżnionego.
- Granica: Dostosuj styl, kolor i grubość obramowania.
- Promień granicy: Dostosuj okrągłość obramowania.
- Lista luk: Ta opcja pojawia się tylko, gdy wybierzesz opcję listy w ustawieniach funkcji na karcie zawartości. Użyj tego suwaka, aby zdefiniować odstęp między wszystkimi elementami listy.

- Margines: Dodaj spacje wokół obszaru tekstu wyróżnionego.
- Wyściółka:Rozszerz przestrzeń wokół obszaru tekstu funkcji, wpisując wartość w tym polu.
Ikona:
- Rozmiar ikony: Użyj tego suwaka, aby zmierzyć rozmiar ikony listy.
- Odstęp: Określ odstęp między ikoną a tekstem listy.
Krok 10: Przycisk Dostosuj tabelę cen #
Przycisk: #

- Wyrównanie: Umieść przycisk po lewej, na środku lub po prawej stronie.
- Typografia:Uzyskaj różne opcje stylizacji tekstu przycisku.
- Kolor:Nadaj kolor tekstowi przycisku.
- Typ tła: Wybierz tło klasyczne lub gradientowe.
- Pudełko Cień:Nadaj obramowaniu efekt cienia.
- Granica: Określ grubość, styl i kolor obramowania.
- Promień granicy: Dostosuj zaokrąglenie obramowania.
- Wyściółka: Zwiększ przestrzeń wewnątrz obramowania przycisku.
Krok 11: Skonfiguruj ustawienia zaawansowane #
Na karcie Ustawienia zaawansowane możesz skonfigurować układ bloku harmonijkowego, tło, style obramowania i kontrolować jego widoczność.
Układ: #

- Margines: Określ przestrzeń wokół układu blokowego. Pomaga ustawić odstęp między innym blokiem.
- Wyściółka: Wprowadź wartość, aby ustawić przestrzeń wokół bloku w jego układzie.
- Szerokość: Oprócz zachowania domyślnej szerokości układu.
- Pełna szerokość: wybranie tej opcji spowoduje, że układ będzie obejmował całą szerokość ekranu.
- W linii (automatycznie): Po zastosowaniu będzie miał taką samą szerokość jak element blokowy.
- Zwyczaj: Wybranie tej opcji spowoduje wyświetlenie suwaka umożliwiającego zdefiniowanie poziomej przestrzeni układu bloku.
- Indeks Z: Użyj suwaka, aby określić kolejność stosu bloku z innymi blokami.
Pozycja: #

W menu rozwijanym zobaczysz trzy opcje: Domyślny, Absolutny, I Naprawił.
- Absolutny: Wybranie tej opcji zapewni Ci absolutną pozycję bloku, co oznacza, że elementy będą pasować do ich pojemnika.
- Naprawił: Opcja Stała pozycja pozwoli elementowi zmieścić się w całej rzutni lub ekranie.
Obie opcje, Absolutna i Stała, mają podobne ustawienia, jak poniżej:
- Orientacja pozioma: Wybierz kierunek pozycjonowania pomiędzy lewą i prawą stroną.
- Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować poziome położenie bloku.
- Orientacja pionowa: Wybierz kierunek pozycjonowania w górę lub w dół.
- Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować pionowe położenie bloku.
Tło: #

- Tło: wybierz opcję tła pomiędzy jednolitym kolorem, gradientem lub obrazem.
W opcji Najedź:
- Obraz: Jeśli wybierzesz opcję obrazu, pojawią się następujące opcje:
- Obraz: wybierz obraz z biblioteki multimediów lub prześlij własny.
- Rozmiar obrazue: Wybierz rozmiar obrazu pomiędzy Miniaturą, Średnim, Dużym lub Pełnym.

- Pozycja: Wybierz położenie 10 różnych opcji.
- Załącznik: Określ relację stałego lub przewijanego obrazu tła z resztą ekranu przeglądarki.
- Powtarzać: wybierz opcję, aby ustawić sposób powtarzania obrazów tła.
- Rozmiar wyświetlacza: Wybierz rozmiar wyświetlacza spośród czterech różnych opcji.
- Czas trwania przejścia: Użyj suwaka, aby dostosować przejście tła ze stanu normalnego do stanu najechania.
Granica: #

- Granica: w ramach tej opcji ustawień dostępne są opcje ustawień obramowania, takie jak szerokość, styl i kolor.
- Promień granicy: Ustaw okrągłość obramowania, wprowadzając wartość.
- Pudełko Cień: Uzyskaj wszystkie ustawienia, takie jak kolor, poziomo/pionowo, rozmycie, rozproszenie i inne, aby nadać obramowaniu efekty cienia.
W opcji najechania:
- Czas trwania przejścia: Możesz dodać wartość ręcznie lub użyć suwaka, aby ustawić czas zmiany projektu obramowania w stanie najechania.
Widoczność: #

Moduł widoczności pozwala kontrolować wyświetlanie projektów bloków w zależności od typu urządzenia. Dostępne będą trzy opcje urządzeń (komputer stacjonarny, tablet, telefon komórkowy) z przyciskiem przełączania. Włącz przycisk przełączania, aby ukryć projekt blokowy tego urządzenia.
Jednak nadal możesz to zobaczyć w widoku edytora.
Zaawansowany: #

- Nazwa bloku: Nadaj nazwę, która będzie jednoznacznie identyfikowała ten blok podczas łączenia lub tworzenia skryptów stylizujących blok.
- Kotwica HTML: Dodaj adres URL, aby połączyć stronę internetową.
- Dodatkowe klasy CSS: Przypisz dodatkowe klasy CSS do bloku, co pozwoli Ci stylizować blok według własnego uznania za pomocą niestandardowego CSS.
Uwaga: Możesz dodać wiele klas oddzielnie ze spacjami.
To wszystko! Teraz Twoja kolej. Utwórz niesamowitą tabelę cenową z edytora bloków na swojej stronie WordPress.