Merch Styling

Zawartość strony głównej

Treść strony głównej zbudowana jest przy użyciu edytora bloków WordPress 5 a.k.a Gutenberg. Używa tylko Core Blocks i Woocmmerce Shortcodes. I jak można było się spodziewać wrzucono trochę CSS.

Poza elementem Header cała zawartość strony głównej budowana jest za pomocą Edytora Blokowego ( a.k.a. Gutenberg). W połączeniu ze stylami edytora GeneratePress mamy teraz znacznie lepszą reprezentację frontu podczas edycji. Umożliwienie nadania każdemu elementowi określonych stylów i Dodatkowych klas CSS sprawia, że nie musimy zbyt często błądzić w HTML. W rzeczywistości na tej stronie nigdy tego nie robimy.

Struktura strony

Zacznijmy od przyjrzenia się hierarchii.

  • Element Header – jest to omówione w tym artykule
  • H2 Nagłówki
  • Kategorie sklepów
  • Najnowsze produkty
  • Call to Action Wiersz – podział czterdzieści / sześćdziesiąt
  • Call to Action Row – sześćdziesiąt / czterdzieści split
  • Produkty wyprzedażowe
  • Zarejestruj się
  • GP Footer – Domyślne widżety motywu

H2 Nagłówki

Dla naszego landing page’a chciałem mieć kilka dużych, pogrubionych nagłówków H2. Większy niż ten, który określiliśmy w naszym Customizerze. Ale też sprawić, by były super responsywne. Aby to zrobić, stworzyłem kilka niestandardowych CSS używając dodatkowej klasy CSS z:

duży nagłówek

Po prostu wybierz swój blok nagłówka, upewnij się, że jest to H2, otwórz Zaawansowane rozwijanie w pasku bocznym ustawień i dodaj klasę do pola Dodatkowa klasa CSS. Uwaga: Nie zobaczysz zmiany stylu w edytorze. Jak każdy CSS znajdziesz go w Customizerze > Additional CSS. Wygląda to tak.

h2.large-heading {
    font-size: calc(28px + (86 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Więc to wygląda skomplikowanie, ale jest tym, co zapewnia responsywne kontrole. Jeśli chcesz uzyskać więcej informacji na temat tego, co to wszystko oznacza, sprawdź Responsive And Fluid Typography With vh And vw Units.

Kategorie sklepów

Zbudowany przy użyciu bloku Columns ustawionego na dwie kolumny. Każda kolumna zawiera blok Obraz, Nagłówek, Tekst i link. Nic wymyślnego i naprawdę proste do edycji. Dodanie dodatkowych kolumn można wykonać z poziomu Ustawienia kolumn. Tworzenie dodatkowych wierszy to po prostu przypadek powielenia istniejącego.

Tworzenie linków do zdjęć w kategorii

Ustawienia obrazów posiadają opcję Link do. Wystarczy ustawić Link na: Własny adres URL i dodaj link do swojej kategorii

Custom Link Styling

Mam nadzieję, że zauważyłeś link do stylu niestandardowego. Osiąga się to za pomocą niestandardowego CSS. Aby dodać ten styl do dowolnego linku w treści, wystarczy nadać blokowi dodatkową klasę CSS o wartości: loud-link.

Najnowsze produkty

Po naszym bloku tytułowym po prostu dodajemy Woocommerce: Recent Products Shortcode.

Rzędy wezwań do działania (CTA)

Po raz kolejny do gry wchodzi blok Kolumny. Po wyjęciu z pudełka nie ma możliwości dostosowania szerokości kolumn. Tak więc w edytorze utknąłeś z kolumnami o jednakowej wielkości. Aby obejść ten problem i wyświetlić kolumny o nierównym rozmiarze, dodaliśmy kilka prostych klas CSS.

Dodatkowa klasa CSSStyl wynikowy
czterdzieści sześćdziesiąt kolumn wiersz dwukolumnowy 40% / 60%
sześćdziesiąt-czterdzieści kolumn rząd dwukolumnowy 60% / 40%
mobile-column-reverse Odwróć kolejność dwóch kolumn na mobile.
Dodaj tę klasę wraz z jedną z powyższych.

Uwaga: te klasy nie stosują stylów w edytorze

Zarejestruj się

Formularz Sign Up jest dostarczany przez wtyczkę Happy Forms. Formularz jest dodawany do drugiej kolumny za pomocą widgetu Short Code. Krótki kod dla Twojego formularza znajduje się w Dashboard > Happy Forms. Częstym projektem jest użycie tego typu CTA do rozbicia strony. W tym celu nadaliśmy jej własną, specjalną stylizację.

Po pierwsze musimy sprawić, aby ten wiersz rozciągał się do krawędzi kontenera (poza paddingiem treści). Robi się to po prostu wybierając opcję Wyrównaj szeroko z paska narzędziowego Bloku. Reszta wymaga trochę znajomego CSS z naszych CTA Rows i trochę dodatkowego. oto klasy, których używa:

  • sześćdziesiąt-czterdzieści kolumn
    rząd dwukolumnowy 60% / 40%
  • kolumna-baner
    w ten sposób dokonuje się niezbędnej korekty paddingu
  • środkowo-pionowy
    wyśrodkowanie w pionie treści umieszczonej w jednej z kolumn CTA
  • bg-grey
    Stosuje szary kolor tła

Edycja formularza

Formularz można edytować z poziomu Dashboardu > Happy Forms. Jeśli utworzysz nowy formularz, będziesz musiał zaktualizować krótki kod używany na stronie głównej.

Zmiana koloru tła wierszy

Przejdź do Customizera > Additional CSS ( lub do swojego arkusza stylów motywu dziecięcego, jeśli go przeniosłeś). I edytuj ten CSS:

.bg-grey {
    background-color: #f2f3f4;
}

Możesz oczywiście po prostu stworzyć własne klasy z bardziej odpowiednimi nazwami dla wybranych kolorów.

Czy mogę użyć innego formularza?

Oczywiście. Jeśli chcesz użyć innej wtyczki formularza, po prostu przejdź do ustawienia tego i zastąpienia krótkiego kodu swoim nowym.

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00