Tworzenie tabel cenowych produktów online jest łatwiejsze niż kiedykolwiek. Twórz tyle tabel, ile chcesz i kontroluj ceny i funkcje każdego z nich za pomocą modułu Tabele cenowe swojego WordPress Divi. Możesz nawet wymyślić konkretny plan zwiększenia konwersji. Nawet jeśli Twój moduł zawiera wiele tabel cenowych, będzie traktowany jako jeden moduł i można go umieścić pod dowolnym rozmiarem kolumny.

Jak dodać moduł Tabele stawek do swojej strony

Zanim będziesz mógł dodać moduł Tabele cenowe do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

Tabele cen modułów

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

divi wordpress price chart.png

Znajdź moduł cenników na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że ​​można również wpisać słowo „cenniki”, a następnie kliknąć „enter”, aby automatycznie wyszukać i dodać moduł tabel cen! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: dodaj tabelę cen dla strony produktu

Kiedy robisz promocja Twoich produktów na stronie docelowej, tabele cen mogą skutecznie prezentować różne opcje cenowe.

W tym przykładzie dodam moduł tabeli cen, aby wyświetlić trzy plany cenowe (lub tabele), przy czym jeden z tych planów wyróżnia się jako polecany plan w celu zwiększenia konwersji.

Tabela cen WordPress divi.jpg

Najpierw dodaj nową zwykłą sekcję do strony, na której mają być wyświetlane tabele cen. Dodaj wiersz o pełnej szerokości (1 kolumna) do sekcji i wstaw moduł Tabele cen do wiersza.

cena linii tabeli divi.png

W ustawieniach cenników na karcie Zawartość kliknij + Dodaj nowy element aby dodać swój pierwszy stół.

nowa kolumna price chart.png

Zaktualizuj parametry tabeli cenowej w następujący sposób:

Opcje zawartości

Tytuł: Waluta osobista: $ Przez: rok Cena: 69 Tekst przycisku: Treść rejestracji:
Dostęp do wszystkich motywów Nieustanne aktualizacje motywów Wsparcie techniczne Premium -Dostęp do wszystkich wtyczek -Pliki nakładek sklepu -Brak opłaty rocznej
Adres URL przycisku: [wprowadź adres URL przycisku] Tło: #ffffff

Opcje projektowania

Cena Kolor tekstu: # 3e51b5 Użyj niestandardowych stylów przycisków: TAK Kolor tekstu przycisku: #ffffff Kolor przycisku: # 3e51b5 Szerokość przycisku: 0px

Zapisz ustawienia

divi wordpress price chart przykład.png

Teraz zduplikuj właśnie utworzoną tabelę cen, aby mieć w sumie trzy tabele cen.

tworzenie kilku przykładów tableau.jpg

W środkowej tabeli cen zaktualizuj następujące opcje:

Karta Zawartość

Tytuł: Developer Cena: 89 Zawartość: Dostęp do wszystkich motywów Nieustanne aktualizacje motywów Pomoc techniczna Premium Dostęp do wszystkich plików warstwowych programu Photoshop - bez opłaty rocznej Adres URL przycisku: [wprowadź adres URL przycisku]

Karta Projekt

Kolor tekstu: # 0091ca Kolor przycisku: # 0091ca

W trzeciej tabeli cenowej zaktualizuj ustawienia w następujący sposób:

Karta Zawartość

Tytuł: Dożywotnia cena: 249 Tekst przycisku: Subskrybuj Treść: Dostęp do wszystkich motywów Nieustanne aktualizacje motywów Pomoc techniczna Premium Dostęp do wszystkich wtyczek Warstwowe pliki programu Photoshop Bez opłaty rocznej Adres URL przycisku: [wprowadź adres URL przycisk]

Zapisz ustawienia

Teraz wróć do ustawień tabeli cenowej i zaktualizuj następujące elementy:

Opcje zawartości

Kolor wyróżnionego tła tabeli: #0091ca

Opcje projektowania

Kolor piłki: # 3e51b5 Wyróżniony kolor stołu: # 0091ca

wynik tabeli cen divi.jpg

Zapisz ustawienia

Teraz wróć i edytuj ustawienia sekcji, aby nadać sekcji kolor tła #3e51b5.

To wszystko. Teraz masz tabelę cen z trzema opcjami ze środkową opcją ustawioną jako wyróżniony przedmiot, który wyróżnia się na tle pozostałych.

opcja tabeli cenowej divi.jpg

Opcje treści dla tabel cenowych

W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

projekt tabeli cenowej option.png

+ Dodaj nowy artykuł

Tutaj dodajesz nowe tabele cenowe do swojego modułu. Kliknięcie „+ dodaj nową pozycję” otworzy zupełnie nową listę opcji projektu specyficznych dla tej tabeli cen. Zobacz poniżej indywidualne ustawienia tabeli cen.

Po dodaniu pierwszej zakładki pojawi się szary pasek z tytułem tabeli cen w formie etykiety. Na szarym pasku znajdują się również trzy przyciski umożliwiające edycję, kopiowanie lub usuwanie tabeli.

Pokaż Bullet

Domyślnie pozycje tabeli cen są wyświetlane jako listy punktowane. Jeśli chcesz usunąć punktory z listy funkcji, możesz wyłączyć tę opcję.

Kolor tła polecanego stołu

Każdy cennik można „przedstawić”. Wyróżnione tabele są wyróżnione w wierszu, co odróżnia je od innych opcji. Korzystając z tego ustawienia, możesz zmienić kolor tła tylko dla wyróżnionych tabel.

Kolor tła nagłówka tabeli

Nad każdą tabelą cenową znajduje się obszar nagłówka, który zawiera tytuł i podtytuł tabeli. Możesz kontrolować kolor tła tego obszaru niezależnie od koloru tła tabeli głównej, wybierając żądany kolor z próbnika kolorów.

Polecany nagłówek tabeli

Każdy cennik można „polecić”. Wyróżnione tabele są wyróżnione w wierszu, co odróżnia je od innych opcji. Korzystając z tego ustawienia, możesz zmienić kolor tła nagłówka tylko dla wybranych tabel.

Kolor tła

Tabele cen mają domyślnie biały kolor tła. Jeśli chcesz użyć innego koloru tła tabeli cen, możesz ustawić tutaj swój niestandardowy kolor za pomocą próbnika kolorów.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania tabel cenowych

Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.

array design option.png

wyrównanie

Domyślnie listy funkcji są wyrównane do lewej w tabeli cen. Jeśli chcesz je wyrównać, możesz aktywować tę opcję.

Usuń cień z wyróżnionej tabeli

Domyślnie tabele cenowe mają subtelny cień za każdą tabelą. Jeśli chcesz usunąć ten cień, możesz włączyć tę opcję.

Artykuły z listy w centrum

Tutaj możesz wybrać wyśrodkowanie przedmiotów wymienionych w tabeli.

Kolor piłki

Domyślnie punktory na liście tabeli cen odziedziczą kolor akcentu motywu. Jeśli chcesz użyć innego koloru, możesz ustawić go tutaj za pomocą próbnika kolorów.

Kolor polecanego stołu

Jeśli chcesz użyć innego koloru dla punktorów w tabelach cen, możesz ustawić ten kolor tutaj za pomocą próbnika kolorów.

Kolor tekstu nagłówka polecanej tabeli

Ta opcja kontroluje kolor tekstu w nagłówku tabeli. Jeśli zmienisz kolor tła nagłówka tabeli, możesz również zmienić tę opcję, aby zapewnić czytelność.

Czcionka głowy

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki nagłówka

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu nagłówka, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami w nagłówku

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście nagłówka, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość wiersza nagłówka

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu nagłówka.Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w pole wprowadzania po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu polecanego stołu

Spowoduje to zmianę koloru tekstu podstawowego dla wyróżnionej tabeli. Jeśli zmienisz kolor tła tabeli, może być konieczna zmiana tej opcji, aby zapewnić czytelność.

Czcionka ciała

Możesz zmienić swoją czcionkę główną, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu w kolorze

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter ciała

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii ciała

Wysokość linii wpływa na odstęp pomiędzy każdym wierszem tekstu w Twoim ciele Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu podtytułu tabeli

Spowoduje to zmianę koloru tekstu podpisu dla wyróżnionej tabeli. Jeśli zmienisz kolor tła tabeli, może być konieczna zmiana tej opcji, aby zapewnić czytelność.

Czcionka napisów

Możesz zmienić czcionkę tekstu napisów, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki napisów lub napisów

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka podrzędnego

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu podpisu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między podtytułami

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście podpisu, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii pod nagłówkiem

Wysokość linii wpływa na odstęp między każdym wierszem tekstu podpisu. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp, lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Waluta Waluta i częstotliwość

Możesz zmienić czcionkę i częstotliwość wyświetlania waluty, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Waluta Rozmiar i częstotliwość waluty

Tutaj możesz dostosować rozmiar waluty i tekst częstotliwości. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor i częstotliwość tekstu waluty

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu waluty i częstotliwości, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter i walut

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście waluty i częstotliwości, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Linia waluty częstotliwości

Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu waluty i częstotliwości. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wyróżniona cena koloru

Spowoduje to zmianę koloru cen w polecanym stole. Jeśli zmienisz kolor tła tabeli, może być konieczna zmiana tej opcji, aby zapewnić czytelność.

Price Police

Możesz zmienić czcionkę tekstu ceny, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Cena Rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu ceny. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu ceny

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu ceny, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie listów cenowych

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście ceny, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii cenowej

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu ceny Jeśli chcesz zwiększyć odstęp między każdym wierszem, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie ramki wokół modułu. To obramowanie można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy z próbnika kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie krawędzie mają szerokość 1 piksela. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając niestandardową wartość w polu wprowadzania po prawej stronie suwaka. Obsługiwane są niestandardowe jednostki miary, co oznacza, że ​​możesz zmienić domyślną jednostkę z „px” na inną, np. Em, vh, vw itp.

Styl graniczny

Krawędzie obsługują osiem różnych stylów: jednolity, kropkowany, podwójny, rowek, grzebień, nakładka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

Użyj niestandardowych stylów dla przycisku

Włączenie tej opcji ujawnia różne ustawienia dostosowywania przycisków, których możesz użyć do zmiany wyglądu przycisku modułu.

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk dostosowuje się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentów motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku tego modułu. Wybierz kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor przycisku.

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła z próbnika kolorów.

Szerokość granicy przycisków

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz swój kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

Promień obramowania wpływa na zaokrąglenie rogów przycisków. Domyślnie przyciski w Divi mają mały promień obramowania, który zaokrągla rogi o 3 piksele. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk, lub znacznie ją zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisku

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście przycisku, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Policja Boutton

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Dodaj ikonę przycisku

Wyłączone, to ustawienie usunie ikony z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę, która ma być używana na przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Umieszczenie ikony przycisku

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż ikonę tylko po najechaniu na przycisk

Domyślnie ikony przycisków są wyświetlane tylko po najechaniu kursorem. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Kolor tekstu przy przelocie na przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Najedź na kolor tła przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przycisk Obramowania Koloru

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Przesuń kursor na obramowanie

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Przycisk odstępu między nutami

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Zaawansowane opcje kart stawek

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

opcje zaawansowane divi price chart.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.

Opcje zawartości poszczególnych tabel cenowych

indywidualna sekcja price table.png

Tytuł

Wstawiony tutaj tytuł zostanie wykorzystany w tej opcji wyceny (Premium).

podtytuł

Podpis, który tu wstawisz pojawi się pod Twoim tytułem.

Waluta

Wpisz tutaj symbol wybranej waluty.

Par

Jeśli ceny są oparte na subskrypcji, wprowadź tutaj cykl subskrypcji (na przykład rok).

Cena

Tutaj wprowadź wartość produktu.

Tekst przycisku

Podaj tutaj tekst przycisku.

Treść

W tym polu możesz wprowadzić listę funkcji, które są lub nie są dostarczane z produktem. Oddziel każdy element listy w nowym wierszu i rozpocznij każdy wiersz symbolem + lub -. A + określa włączoną funkcję, a A - określa wykluczoną funkcję.

Adres URL przycisku

U dołu każdej tabeli możesz wstawić przycisk wezwania do działania, wstawiając prawidłowy adres URL w tym polu. Zostaw to i
puste pole tekstowe przycisku, jeśli nie chcesz mieć przycisku w tabeli cen.

Kolor tła

Zdefiniuj niestandardowy kolor tła dla swojego modułu lub pozostaw puste, aby użyć koloru domyślnego.

Opcje projektowania dla indywidualnych tabel cenowych

cena kolumna kolumna styl divi.png

Udostępnij ten stół

Wybierz, czy chcesz przesunąć ten cennik do przodu, czy nie, za pomocą tego menu rozwijanego. Pozwoli to desce wyróżnić się od reszty.

Kolor przedmiotu wykluczony

W przypadku pozycji z listy, które zostały ustawione jako wykluczone za pomocą symbolu -, możesz dostosować ich kolor za pomocą tego ustawienia. Na przykład możesz chcieć zmienić kolor na czerwony lub zmniejszyć ich krycie, aby wizualnie zaznaczyć, że elementy są wykluczone z bieżącego opakowania.

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki nagłówka

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu nagłówka

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu nagłówka, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami w nagłówku

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście nagłówka, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość wiersza nagłówka

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu nagłówka.Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w pole wprowadzania po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Czcionka ciała

Możesz zmienić swoją czcionkę główną, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki ciała

Tutaj możesz dostosować rozmiar tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu w kolorze

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter ciała

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii ciała

Wysokość linii wpływa na odstęp pomiędzy każdym wierszem tekstu w Twoim ciele Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Czcionka napisów

Możesz zmienić czcionkę tekstu napisów, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki napisów

Tutaj możesz dostosować rozmiar tekstu nagłówka. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu napisów

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu podpisu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter napisów

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście podpisu, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii napisów

Wysokość linii wpływa na odstęp między każdym wierszem tekstu podpisu. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp, lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Waluta Waluta i częstotliwość

Możesz zmienić czcionkę i częstotliwość wyświetlania waluty, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki dla waluty i częstotliwości

Tutaj możesz dostosować rozmiar waluty i tekst częstotliwości. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu dla waluty i częstotliwości

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu waluty i częstotliwości, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter i walut

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście waluty i częstotliwości, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Linia waluty i częstotliwości

Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu waluty i częstotliwości. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Polityka cenowa

Możesz zmienić czcionkę tekstu ceny, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Rozmiar czcionki ceny

Tutaj możesz dostosować rozmiar tekstu ceny. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Kolor tekstu ceny

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu ceny, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie listów cenowych

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście ceny, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Wysokość linii cenowej

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu ceny Jeśli chcesz zwiększyć odstęp między każdym wierszem, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Użyj niestandardowych stylów dla przycisku

Włączenie tej opcji ujawnia różne ustawienia dostosowywania przycisków, których możesz użyć do zmiany wyglądu przycisku modułu.

Rozmiar tekstu przycisku

To ustawienie może służyć do zwiększania lub zmniejszania rozmiaru tekstu na przycisku. Przycisk dostosowuje się wraz ze wzrostem i zmniejszeniem rozmiaru tekstu.

Kolor tekstu przycisku

Domyślnie przyciski przyjmują kolor akcentów motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru tekstu do przycisku tego modułu. Wybierz kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor przycisku.

Kolor tła przycisku

Domyślnie przyciski mają przezroczysty kolor tła. Można to zmienić, wybierając żądany kolor tła z próbnika kolorów.

Szerokość granicy przycisków

Wszystkie przyciski Divi mają domyślnie obramowanie 2px. Za pomocą tego ustawienia można zwiększyć lub zmniejszyć tę granicę. Obramowania można usunąć, wprowadzając wartość 0.

Kolor obramowania przycisku

Domyślnie obramowania przycisków przyjmują kolor akcentu motywu, zgodnie z definicją w narzędziu Dostosowywanie motywu. Ta opcja umożliwia przypisanie niestandardowego koloru obramowania do przycisku tego modułu. Wybierz swój kolor niestandardowy za pomocą próbnika kolorów, aby zmienić kolor obramowania przycisku.

Promień obramowania przycisku

Promień obramowania wpływa na zaokrąglenie rogów przycisków. Domyślnie przyciski w Divi mają mały promień obramowania, który zaokrągla rogi o 3 piksele. Możesz zmniejszyć tę wartość do 0, aby utworzyć kwadratowy przycisk, lub znacznie ją zwiększyć, aby utworzyć przyciski z okrągłymi krawędziami.

Rozstawianie liter przycisków

Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście przycisku, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.

Dodaj ikonę do przycisku

Wyłączone, to ustawienie usunie ikony z przycisku. Domyślnie wszystkie przyciski Divi wyświetlają ikonę strzałki w dymku.

Ikona przycisku

Jeśli ikony są włączone, możesz użyć tego ustawienia, aby wybrać ikonę, która ma być używana na przycisku. Divi ma różne ikony do wyboru.

Kolor ikony przycisku

Dostosowanie tego ustawienia spowoduje zmianę koloru ikony wyświetlanej na przycisku. Domyślnie kolor ikony jest taki sam, jak kolor tekstu przycisku, ale to ustawienie umożliwia niezależną regulację koloru.

Umieszczenie przycisku ikony

Możesz wybrać wyświetlanie ikony przycisku po lewej lub prawej stronie przycisku.

Pokaż ikonę tylko po najechaniu na przycisk

Domyślnie ikony przycisków są wyświetlane tylko po najechaniu kursorem. Jeśli chcesz, aby ikona była zawsze wyświetlana, wyłącz to ustawienie.

Kolor tekstu przy przelocie na przycisku

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Kolor tła przycisku na wiadukt

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Kolor obramowania przy estakadzie

Ten kolor zostanie użyty po najechaniu kursorem myszy na przycisk gościa. Kolor zmieni się z koloru podstawowego zdefiniowanego w poprzednich ustawieniach.

Promień obramowania przycisku w widoku ogólnym

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Rozstawianie liter guzika na estakadzie

Wartość ta zostanie użyta, gdy przycisk zostanie umieszczony nad przyciskiem myszy gościa. Wartość zmieni się od wartości bazowej zdefiniowanej w poprzednich ustawieniach.

Indywidualne opcje tabeli cen Opcje zaawansowane

opcja zaawansowana divi.png

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

[vc_row center_row = "tak"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_column] =» vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expand" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Inne samouczki Divi