Jak tworzyć poziome tabele cen z Divi

Poziome tabele cenowe to świetny sposób na promocję produktów z wieloma funkcjami. A dzięki nowemu pięciokolumnowemu układowi Divi jest to zaskakująco łatwe. Jednak, podobnie jak w przypadku każdego układu, który ma pięć lub więcej kolumn, wyzwaniem jest sprawienie, aby układ był responsywny, aby wyglądał dobrze również na urządzeniach mobilnych. W tym samouczku pokażę, jak tworzyć poziome tabele cenowe, które świetnie prezentują się na wszystkich urządzeniach. Pokażę Ci nawet, jak łatwo jest powielać poziome tabele cenowe i korzystać z nowych funkcji projektowania, takich jak „znajdź i zamień”, aby szybko zmienić schemat kolorów każdej tabeli za pomocą kilku kliknięć.

Zacznijmy.

zapowiedź

Pierwsze kroki

W tym samouczku wszystko, czego potrzebujesz, to Divi. A my będziemy używać Visual Buildera. Ponieważ będziemy budować tabele od podstaw, będziesz musiał utworzyć nową stronę, wdrożyć konstruktor wizualny, a następnie wybrać opcję „Buduj układ od podstaw”.

Następnie możesz zacząć. Zróbmy to!

Konfigurowanie pięciokolumnowego rzędu dla poziomych tabel cen

Na początek dodajmy pięciokolumnowy układ do sekcji, która już na nas czeka w wizualnym konstruktorze.

Zanim zaczniemy dodawać jakiekolwiek moduły, zaktualizujmy ustawienia sekcji tak, aby miały niestandardową szerokość bez górnego lub dolnego wypełnienia.

Szerokość: 1200px
Wyrównanie sekcji: Środek
Niestandardowe dopełnienie: 0px góra, 0px dół

Następnie przejdź do ustawień wiersza, aby szybko nadać kolor tła wierszowi, a także trzem środkowym kolumnom w następujący sposób:

Kolor tła: #00cbc9
Kolor tła kolumny 2: #00cbc9
Kolumna 3 Kolor tła: #eeeeee
Kolumna 4 Kolor tła: #eeeeee

Następnie zaktualizuj rozmiar w następujący sposób:

Ustaw ten wiersz o pełnej szerokości: TAK
Szerokość rynny: 1
Wyrównaj wysokości kolumn: TAK

Za chwilę będziemy musieli wrócić do ustawień wierszy, aby zaktualizować odstępy, ale na razie zacznijmy dodawać notki do każdej z naszych kolumn dla treści.

Wypełnianie kolumn modułami treści

Tytuł produktu

W pierwszej kolumnie dodaj moduł tekstowy z następującym nagłówkiem w polu treści (pod zakładką tekst):

<h2>Starter</h2>

Będzie to miejsce na tytuł Twojego planu lub produktu, który prezentujesz. W tym przykładzie byłby to pewnego rodzaju plan „Starter”.

Następnie zaktualizuj następujące ustawienia projektu:

Styl czcionki nagłówka 2: TT
Kolor tekstu nagłówka 2: #ffffff
Rozmiar tekstu nagłówka 2: 38px
Niestandardowe wypełnienie (komputer): 90% góra, 90% dół, 10% lewo
Niestandardowa wyściółka (tablet): 30% góra, 30% dół

Dodaj slajdy do nagłówków kategorii funkcji

W drugiej kolumnie dodaj moduł notki. Następnie usuń tekst wypełniający w polu treści i pozostaw sam tekst tytułu. Następnie wybierz ikonę zamiast obrazu i zaktualizuj ikonę jedną z wybranych przez siebie.

Przejdź do zakładki projektu i zaktualizuj pozostałe ustawienia w następujący sposób:

Kolor ikony: #00cbc9
Umieszczenie obrazu/ikony: po lewej
Rozmiar tekstu tytułu: 16px
Niestandardowa wyściółka: 2vw na dole
Szerokość obramowania dolnego rzędu: 4px
Kolor dolnej krawędzi: #cccccc

Ponieważ ten projekt noty będzie używany jako tytuł kategorii funkcji w kolumnach 2, 3 i 4, możesz skopiować moduł notki i wkleić go do drugiej i trzeciej kolumny.

Zdaję sobie sprawę, że odstępy nie wyglądają teraz świetnie. Możesz pokusić się o dodanie odstępów na poziomie modułu, ale w przypadku tego projektu łatwiej jest mi dokonać korekty odstępów na poziomie kolumny (w ustawieniach wierszy). Dojdziemy do tego później.

Dodaj moduły tekstowe, aby uzyskać listę opisów funkcji

Dalej Dodaj moduł tekstowy pod notką w drugiej kolumnie. Następnie dodaj następujący kod html tabeli w polu treści:

• opis funkcji znajduje się tutaj.
• opis funkcji znajduje się tutaj.
• opis funkcji znajduje się tutaj.
• opis funkcji znajduje się tutaj.

Nieuporządkowany typ stylu listy: Kwadrat
Wcięcie nieuporządkowanego elementu listy: 4px
Niestandardowe dopełnienie: 20px góra, 20px dół, 5% lewo, 5% prawo

Teraz, tak jak w przypadku notek, skopiuj moduł tekstowy i wklej go pod każdym z modułów notatek w kolumnach 3 i 4.

Dodawanie ceny i przycisku do ostatniej kolumny

W ostatniej kolumnie (kolumna piąta) użyję modułu tabeli cen, aby uzyskać projekt tekstu cennika ze znakiem dolara. To wszystko, czego naprawdę potrzebujemy od modułu tabel cenowych, więc pozbędę się reszty treści i elementów projektu, pozostawiając tekst wyceny i znak dolara. Mógłbym użyć przycisku, który jest dołączony do modułu tabel cenowych, ale trochę trudniej było zrobić responsywną magię na tablecie (zobaczysz, co mam na myśli później). Więc będę używał również modułu przycisków.

Śmiało i dodaj moduł Tabele cenowe do piątej kolumny. Usuń jedną z dwóch domyślnie dołączonych tabel, klikając ikonę kosza po prawej stronie jednej z nich.

Następnie pozbądź się koloru tła, dodając całkowicie przezroczysty kod koloru.

Kolor tła: rgba (255,255,255,0)

Następnie zaktualizuj następujące elementy:

Kolor tła nagłówka tabeli: rgba (255,255,255,0)
Kolor tekstu waluty i częstotliwości: #ffffff
Rozmiar tekstu waluty i częstotliwości: 30px
Kolor tekstu ceny: #ffffff
Szerokość obramowania: 0px
Margines niestandardowy (tablet): -100% prawy
Margines niestandardowy (smartfon): 0% Prawo
Niestandardowe dopełnienie: 0px na górze, 10px na dole, 0px w lewo, 0px w prawo

Teraz przejdź do ustawień poszczególnych stołów, klikając ikonę koła zębatego po lewej stronie menu wyświetlania poszczególnych stołów.

Teraz usuń domyślną zawartość tytułu, podtytułu i treści. To pozostawi tylko tekst waluty i ceny.

Teraz wiem, o czym myślisz w tym momencie. Co zrobić z tą linią graniczną pod tekstem ceny? Cóż, jest do tego mały fragment niestandardowego css. Przejdź do zakładki Zaawansowane i dodaj następujący kod CSS do pola wejściowego Cennik Top:

Cennik Top:

border: none;

W ten sposób udaje Ci się wypatroszyć tabelę cen tylko dla tekstu cenowego i symbolu waluty!

Dla przycisku dodaj moduł przycisku pod modułem tabel cenowych i zaktualizuj następujące elementy:

Wyrównanie przycisków: środek
Kolor tekstu: jasny
Margines niestandardowy (tablet): -100% prawy
Margines niestandardowy (smartfon): 0% Prawo

Marża niestandardowa będzie odpowiadać marży, którą dodaliśmy do modułu tabel cenowych, aby uzyskać moduł o pełnej szerokości na tablecie. Ponieważ układ pięciokolumnowy na tablecie umieści piątą kolumnę po lewej stronie układu dwukolumnowego, przeciągnięcie modułu o -100% w prawo spowoduje, że moduł osiągnie pełną szerokość wiersza.

Dodawanie projektu strzałki i responsywnych odstępów między kolumnami

Dodawanie strzałki przez nakładanie gradientów

Aby stworzyć efekt strzałki w pierwszej kolumnie, ułożymy dwa tła gradientowe. Pierwsze tło gradientowe zostanie dodane na poziomie kolumny. Kolejny dodamy później na poziomie modułu.

Aby dodać tło gradientowe, przejdź do ustawień wiersza i dodaj:

Kolor tła gradientu kolumny 1 Lewy kolor: rgba (255,255,255,0)
Gradient tła kolumny 1 Prawy kolor: #eeeeee (powinien pasować do koloru tła kolumny 2)
Kierunek gradientu: -245 stopni
Pozycja początkowa: 75%
Pozycja końcowa: 0%

Zapisz ustawienia i przejdź do ustawień modułu tekstowego w pierwszej kolumnie. W tym miejscu dodamy drugą warstwę gradientu tła, aby uzupełnić strzałkę. Zaktualizuj następujące elementy:

Kolumna 1 Gradient Tło Lewy kolor: #eeeeee
Kolumna 1 Gradient Background Right color: rgba(255,255,255,0)
Kierunek gradientu: 245 stopni
Pozycja startowa: 25%
Pozycja końcowa: 0%

Zauważ, że wartości są jednakowo przeciwne. Na przykład zmieniła się kolejność kolorów, 245 stopni zmieniło się z ujemnego na dodatnie, a 75% wynosi teraz 25% (różnica). W ten sposób boki punktu strzałki są idealnie symetryczne.

Odstępy między rzędami i kolumnami

Wróć do ustawień wierszy i dostosujmy odstępy między wierszami i kolumnami, aktualizując następujące elementy:

Niestandardowe dopełnienie: 0px na górze, 0px na dole, 0px w lewo, 0px w prawo
Niestandardowe dopełnienie 2: 5% góra, 5% dół, 2% lewo, 2% prawo
Niestandardowe 3 dopełnienie: 5% góra, 5% dół, 2% lewo, 2% prawo
Niestandardowe 4 dopełnienie: 5% góra, 5% dół, 2% lewo, 2% prawo
Niestandardowa wyściółka 5: 10% góra, 10% dół

Możesz się zastanawiać, dlaczego po prostu nie użyłem 2 szerokości rynny i nie skończyłem z tym. Cóż, to dlatego, że chciałem maksymalnie zwiększyć przestrzeń w kolumnach zawierających tekst, aby poprawić czytelność na wszystkich urządzeniach. Każda mała przestrzeń, którą możemy zaoszczędzić, ma znaczenie. Dlatego marginesy między kolumnami są tworzone z wartościami procentowymi dopełnienia lewego i prawego.

Powielanie tabeli dla nowych tabel i schematów kolorów

Oczywiście będziesz chciał mieć wiele poziomych tabel cenowych, aby użytkownicy mogli je porównać. Aby utworzyć drugą tabelę cenową, zduplikuj całą sekcję zawierającą pierwszą utworzoną tabelę.

Następnie otwórz Ustawienia wiersza i najedź kursorem na kolor tła i kliknij Znajdź i zamień.

W sekcji „W obrębie” wybierz „Ta sekcja”.
W sekcji „Zamień szerokość” dodaj kolor: #f84f51
Następnie zaznacz pole Zamień wszystkie wartości znalezione w sekcji (nie tylko kolor tła).

Następnie kliknij Zamień i obserwuj, jak dzieje się magia. Jest to szybki i łatwy sposób na zmianę wszystkich wystąpień poprzedniego koloru na nowy kolor.

Nie zapomnij zapisać ustawień wiersza przed wyjściem, aby zapisać zmiany.

Teraz masz nowy stół z nowym schematem kolorów.

Powtórz ten proces ponownie, aby dodać kolejną tabelę z kolorem: #bdc958

Tworzenie polecanego stołu

Aby jeden ze stołów wyglądał na wyróżniony i wyróżniał się nieco, możesz dodać cień pola do sekcji, w której znajduje się stół, a także zmienić szary kolor używany do tła kolumn i gradientów na ładny biały kolor.

Aby to zrobić, przejdź do ustawień sekcji dla drugiej sekcji (środkowej) i zaktualizuj następujące elementy:

Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 0px
Siła rozmycia cieni w pudełku: 80px

Aby zastąpić szary kolor tła, przejdź do ustawień wiersza i znajdź kolor tła kolumny 2 (#eeeeee). Kliknij go prawym przyciskiem myszy i kliknij „znajdź i zamień”. Aktualizacja następujących elementów:

W sekcji „W” wybierz „Ta sekcja”.
W sekcji „Zamień szerokość” dodaj kolor: #ffffff
Następnie zaznacz pole Zamień wszystkie wartości znalezione w sekcji (nie tylko kolor tła).
Następnie kliknij „Zamień”.

Używanie funkcji Znajdź i zamień do testowania czcionek

Jeśli chcesz użyć innej czcionki w całej tabeli, możesz łatwo przetestować różne, korzystając z funkcji „Znajdź i zamień”. Celowo pozostawiłem domyślną czcionkę dla wszystkich modułów, aby proces ten przebiegał płynnie. Aby zmienić czcionkę dla całej strony tabel, wystarczy otworzyć ustawienia modułu tekstowego w pierwszej kolumnie dowolnej sekcji tabeli (w rzeczywistości może to być dowolny moduł używający domyślnej czcionki na Twojej stronie). Następnie kliknij prawym przyciskiem myszy używaną czcionkę nagłówka 2 i wybierz „Znajdź i zamień”. Następnie zaktualizuj następujące elementy:

W sekcji „W obrębie” zachowaj „Ta strona”.
W sekcji „Zamień szerokość” wybierz czcionkę (używam Roboto Condensed).
Następnie zaznacz pole Zamień wszystkie wartości znalezione w sekcji (lub nie możesz go zaznaczyć, aby zastąpić wszystkie czcionki h2).
Następnie kliknij „Zamień”.

Teraz wszystkie czcionki zostały zmienione na całej stronie.

Otóż ​​to! Teraz poziome tabele cenowe są gotowe.

Sprawdźmy wynik.

Pięciokolumnowa regulacja na tablecie i smartfonie również działa pięknie.

Końcowe przemyślenia

Pięciokolumnowy układ Divi wraz z zaawansowanymi funkcjami projektowania dostępnymi w programie Visual Builder umożliwiają tworzenie pięknych poziomych tabel cenowych. Dopasowywanie kolorów i czcionek za pomocą funkcji Znajdź i zamień to świetna oszczędność czasu, co jeszcze bardziej usprawnia proces projektowania. Mam nadzieję, że samouczek okaże się zarówno informacyjny, jak i inspirujący.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!