Poręczny przewodnik dotyczący stylizacji paginacji w Divi

Paginacja to jeden z tych elementów strony internetowej, który często jest pomijany, zwłaszcza jeśli chodzi o projekt. Istnieje wiele miejsc, w których paginacja może być odpowiednia do wykorzystania w Twojej witrynie. Zasadniczo paginacja (lub menu paginacji) pozwala użytkownikom poruszać się po wielu stronach elementów (na przykład archiwum postów). Jest to szczególnie przydatne przy ograniczaniu początkowej zawartości strony.

Divi ma wiele modułów zawierających paginację (takich jak moduł galerii), które można stylizować za pomocą wbudowanych ustawień. Niektóre z tych modułów (takie jak blog i portfolio) dziedziczą domyślną paginację motywu Divi (lub WordPress), która może być zbyt uproszczona w przypadku niektórych witryn. Ale za pomocą wtyczki możesz zastąpić paginację całego motywu bardziej złożoną. Następnie możesz stylizować go za pomocą CSS tak, jak potrzebujesz.

W tym samouczku pokażę, jak stylizować paginację w Divi. Oto, co będziemy omawiać:

• Rzeczy do rozważenia podczas stylizacji paginacji w Divi
• Moduł stylizacji Divi Gallery i filtrowalna paginacja modułu Portfolio
• Zaawansowane style paginacji dla modułu galerii i modułu portfolio filtrowalnego
• Styling Blog Module i moduł Portfolio Pagination
• Dodawanie złożonej paginacji do Divi za pomocą wtyczki WP-PageNavi
• Stylizacja stronicowania WP-PageNavi za pomocą niestandardowego CSS

Zacznijmy.

zapowiedź

Ten post dotyczy głównie tego, jak stylizować paginację. Oto kilka skomplikowanych stylów paginacji, które pokażę, jak je zbudować.

Pierwsze kroki

Subskrybuj nasz kanał YouTube

Do tego samouczka potrzebne będą:

• zainstalowany i aktywny motyw Divi.
• Aby przetestować projekty stronicowania różnych modułów, będziesz potrzebować pozorowanej zawartości. Na przykład, aby zaprojektować paginację modułu portfolio (lub filtrowalnego portfolio), będziesz potrzebować około 12-16 projektów dodanych do twojego motywu, aby mieć wystarczającą ilość treści, aby umożliwić działanie stronicowania. W przypadku modułu galerii potrzebujesz również około 12-16 obrazów, aby wypełnić galerię.
• Jeśli chcesz korzystać z wtyczki WP-PageNavi, musisz zainstalować i aktywować wtyczkę. Jest to bezpłatna wtyczka, którą można pobrać z katalogu WordPress z poziomu pulpitu nawigacyjnego WordPress w Twojej witrynie. Po prostu przejdź do Wtyczka> Dodaj nowy i wyszukaj WP-PageNavi.
  

Po przygotowaniu pozorowanej zawartości możesz przystąpić do tworzenia nowej strony. Z pulpitu WordPress przejdź do Strony> Dodaj nowy. Nadaj tytuł stronie i wdróż Divi Builder. Wybierz opcję „Buduj od podstaw”. Następnie kliknij Kompiluj w interfejsie.

Teraz możesz rozpocząć testowanie niektórych projektów stronicowania.

Rzeczy do rozważenia podczas stylizacji paginacji w Divi

Ogólnie rzecz biorąc, prawdopodobnie nie chcesz szaleć z projektowaniem paginacji, ponieważ, jak w przypadku każdego menu nawigacyjnego, ważne jest, aby było proste i intuicyjne. Oto kilka rzeczy, które możesz wziąć pod uwagę, projektując paginację w Divi.

Czcionka stronicowania

Paginacja to świetne miejsce na oderwanie się od głównych czcionek, których używasz w swojej witrynie. Chcesz wybrać najlepsze czcionki dostosowane do interfejsów użytkownika i nawigacji. A ponieważ paginacja zawiera głównie liczby, chcesz się upewnić, że czcionka wyświetla wszystkie liczby o równej wysokości i szerokości (co eksperci typografii nazywają podszewką i tabelą). Kilka z moich konserwatywnych faworytów to Oxygen, Nunito Sans i Source Sans Pro. A jeśli masz wiele stron w paginacji, być może będziesz musiał zwolnić trochę miejsca, używając czcionki skondensowanej, takiej jak Fjalla One lub Roboto Condensed.

Styl czcionki paginacji

Możesz także wypróbować kilka stylów czcionek, aby wyróżnić paginację. Na przykład możesz użyć stylu czcionki wielkich liter, aby linki „następny” i „poprzedni” były bardziej wyraźne i równe wysokości numerów stron. Jednak dodanie podkreślonego stylu czcionki może być nieco zbędne, biorąc pod uwagę, że łącza znajdują się już w menu nawigacyjnym.

Odstępy między literami stronicowania

Odstępy między literami to świetny sposób na dodanie nieco więcej odstępów w poziomie do paginacji. Może to dodać ładny element projektu i wyróżnić nawigację.

Wyrównanie tekstu stronicowania

W Divi możesz łatwo wyrównać paginację do lewej, środkowej lub prawej strony. Więc nie zapomnij o tym, gdy projektujesz swoją stronę internetową.

Klikalna przestrzeń

Ważne jest, aby mieć wystarczająco dużo klikalnego miejsca na linki do stronicowania. Domyślnie będzie to dość małe. Możesz zwiększyć przestrzeń do klikania, używając większego tekstu lub zwiększając wysokość linii. Ale możesz też dodać dopełnienie wokół tych linków za pomocą kodu CSS.

Rozmiar tekstu stronicowania

Rozmiar tekstu stronicowania zwykle jest dość mały. Prawdopodobnie po to, aby nie odwracał uwagi użytkowników od treści strony. Jednak większy rozmiar tekstu może zwiększyć klikalną przestrzeń linku stronicowania i sprawić, że będzie bardziej zauważalny dla użytkowników. Lubię używać jednostki długości vw dla większego tekstu paginacji, aby ładnie skalował się z przeglądarką i treścią.

Wysokość linii stronicowania

Ponieważ paginacja zwykle pozostaje w jednym wierszu, można dodać nieco większą wysokość wiersza do linków, aby dodać dodatkową przestrzeń, na którą można kliknąć.

Cień tekstu stronicowania

Cień tekstu może rozpraszać, jeśli jest źle używany. Najlepiej to pominąć, chyba że planujesz zachować subtelność. Może być również użyty do dodania kreatywnego blasku wokół tekstu, jeśli chcesz tego rodzaju rzeczy.

Aktywna strona z paginacją

Ten aspekt paginacji jest ważny, aby użytkownicy wiedzieli, na której stronie aktualnie się znajdują podczas nawigacji. Powinien istnieć wyraźny kontrast między stylem aktywnego linku do strony a nieaktywnym linkiem do strony. Domyślnie Divi użyje podstawowego koloru akcentującego ustawionego w konfiguratorze motywów jako koloru aktywnego łącza do strony w Divi. Możesz to jednak zmienić za pomocą wiersza CSS.

W przypadku modułów, które mają paginację, Divi ma wbudowane opcje projektowania stylizacji różnych elementów paginacji. Dodatkowo możesz łatwo dodać kilka fragmentów CSS w zakładce Zaawansowane, aby uzyskać jeszcze większą kontrolę nad projektem w jednym wygodnym miejscu.

Ale w przypadku paginacji na poziomie motywu możesz uzyskać złożone rozwiązanie za pomocą wtyczki WP-PageNavi z niestandardowym CSS (więcej o tym później).

Na razie zacznijmy od tego, jak stylizować paginację w modułach Divi.

Moduł stylizacji Divi Gallery i filtrowalna paginacja modułu Portfolio

Gdy Divi Builder jest aktywny na nowej stronie, utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj do wiersza filtrowalny moduł portfela. Jak wspomniano wcześniej, upewnij się, że masz utworzonych 12-16 projektów, abyś mógł zobaczyć paginację.

W filtrowalnych ustawieniach portfela zaktualizuj następujące elementy:

Liczba postów: 4 (abyś mógł zobaczyć więcej linków do stron w paginacji)

Pokaż tytuł: NIE
Pokaż kategorie: Nie

Domyślnie Divi pokaże paginację, więc pozostaw tę opcję ustawioną na TAK.

Powinieneś zobaczyć podział na strony w prawym dolnym rogu portfolio.

Aby nadać styl paginacji, przejdź do karty projektu i otwórz przełącznik Tekst paginacji, aby zobaczyć wszystkie dostępne opcje. Zaktualizuj następujące elementy:

Układ: Siatka
Czcionka stronicowania: Source Sans Pro
Styl czcionki paginacji: TT
Wyrównanie tekstu stronicowania: do środka
Kolor tekstu paginacji: #cccccc
Rozmiar tekstu paginacji: 4vw (komputer), 38px (tablet i telefon)
Odstępy między literami stronicowania: 1vw
Wysokość linii stronicowania: 2em

Następnie kliknij kartę Zaawansowane i dodaj następujący fragment kodu CSS w sekcji Aktywna strona paginacji :

color: #0096eb !important;

Powiększając tekst o większej wysokości linii, użytkownicy mają więcej miejsca na klikanie. Zmiana wyrównania na środek i dodanie niewielkich odstępów między literami pomaga uczynić paginację bardziej zauważalną. Niestandardowy kolor tekstu stronicowania z kontrastującym kolorem aktywnej strony pomaga użytkownikowi zorientować się, na jakiej stronie się znajduje.

Inne szybkie fragmenty CSS

Oto kilka szybkich i łatwych fragmentów kodu CSS, które pozwalają zmienić projekt paginacji.

Aby usunąć domyślną linię obramowania, która znajduje się bezpośrednio nad paginacją, możesz wprowadzić następujący kod CSS w sekcji Portfolio Pagination:

border: none;

Aby nadać swojej paginacji pełne obramowanie, możesz wprowadzić następujący kod CSS w sekcji Portfolio Pagination:

border: 2px solid #dddddd;

Aby nadać paginacji kolor tła, możesz wprowadzić następujący kod CSS w sekcji Podział na strony portfolio:

background: #333333;

Działa również dla modułu galerii

Te same ustawienia projektowe będą działać również dla modułu galerii. W rzeczywistości możesz skopiować style tekstu paginacji z modułu portfolio filtrowalnego i wkleić je do modułu galerii! Tylko upewnij się, że przesyłasz również wszelkie fragmenty kodu CSS.

Zaawansowane style paginacji dla modułu galerii i modułu portfolio filtrowalnego

Jeśli chcesz uzyskać bardziej zaawansowany projekt paginacji modułów Filtrowalne portfolio i Galeria, możesz użyć bardziej zaawansowanego niestandardowego CSS. W tym konkretnym przykładzie podoba mi się to, że niestandardowy CSS działa w parze z wbudowanymi ustawieniami modułu.

Aby to zademonstrować, ponownie użyjmy portfolio filtrowalnego. Tym razem zaktualizuj warianty projektu o następujące elementy:

Układ: Siatka
Rozmiar tekstu paginacji: 16px
Wysokość linii paginacji: 2,5 em

W zakładce Zaawansowane dodaj następującą klasę CSS:

Klasa CSS: pagi-space

Umożliwi to zastosowanie naszego CSS tylko do tego modułu.

Teraz zapisz ustawienia i otwórz okno wyskakujące Ustawienia strony. Na karcie Zaawansowane dodaj następujący kod CSS w polu Niestandardowy CSS.

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination, .et_pb_gallery.pagi-space .et_pb_gallery_pagination {
  border: none; 
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a {
  padding: 1em 1.5em;
  background: #eeeeee;
  border: 1px solid #eeeeee;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a:hover, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.hover {
  border-color: #333333;
}

.et_pb_filterable_portfolio.pagi-space .et_pb_portofolio_pagination ul li a.active, .et_pb_gallery.pagi-space .et_pb_gallery_pagination ul li a.active {
  background: #333333;
  color: #ffffff;
  border-color: #333333;
}

Po wpisaniu kodu widać, że paginacja ma teraz więcej klikalnego miejsca na każdy link do strony. Linki mają również dodane kolory tła, dzięki czemu wyglądają bardziej jak przyciski, które można kliknąć. Do każdego łącza po najechaniu myszą dodawana jest również subtelna ramka. Aktywny link do strony wyróżnia się kontrastującym ciemnym tłem z jaśniejszym kolorem tekstu.

Ten kod stylizuje podział na strony zarówno dla modułu portfolio z możliwością filtrowania, jak i modułu galerii. Upewnij się tylko, że dodałeś do modułu klasę CSS „pagi-space”, aby zaczęła ona obowiązywać.

Oto wynik modułu portfolio z możliwością filtrowania.

Styling Blog Module i moduł Portfolio Pagination

Moduł bloga i moduł portfolio dziedziczą domyślną paginację WordPressa, która umożliwia nawigację po archiwum postów za pomocą łącza do „Starszych wpisów” i łącza do „Następnych wpisów”.

Oto jak wygląda domyślna paginacja na stronie archiwum blogów w motywie Divi:

Ta sama paginacja jest używana przez moduł bloga i moduł portfolio.

Jeśli używasz modułu Blog (lub modułu portfolio), możesz stylizować tekst paginacji za pomocą wbudowanych ustawień.

W większości przypadków jest to proste i eleganckie rozwiązanie. Jeśli jednak szukasz bardziej złożonej paginacji, która zastąpi domyślną paginację Divi/WordPress, istnieje rozwiązanie tak proste, że może Cię zaskoczyć.

Dodawanie złożonej paginacji do Divi za pomocą wtyczki WP-PageNavi

Jeśli potrzebujesz bardziej zaawansowanej paginacji dla całego motywu Divi, w tym modułu bloga i modułu portfolio, możesz zastąpić domyślną paginację WordPress inną, korzystając z popularnej wtyczki o nazwie WP-PageNavi. Ta wtyczka działa dobrze z Divi. Projekt jest prosty, ale można go łatwo dostosować za pomocą CSS.

Dodawanie wtyczki do Divi

Jeśli jeszcze tego nie zrobiłeś, zainstaluj wtyczkę zgodnie z opisem w sekcji „Pierwsze kroki” na górze postu. Gdy wtyczka zostanie zainstalowana i aktywna, nowa forma paginacji pojawi się automatycznie w całym motywie.

Wpłynie to również na moduł bloga i moduł portfolio.

Ustawienia wtyczek

Możesz zlokalizować ustawienia wtyczki z pulpitu WordPress, przechodząc do Ustawienia> WP-PageNavi.

Ustawienia służą głównie do dostosowywania wyświetlanej funkcjonalności i zawartości tekstowej. Jeśli jednak chcesz nadać styl paginacji, będziesz musiał użyć niestandardowego CSS.

Stylizacja stronicowania WP-PageNavi za pomocą niestandardowego CSS

Ponieważ prawdopodobnie będziesz chciał nadać styl paginacji dla całego motywu, najbardziej sensowne jest dodanie CSS do Theme Customizer lub pliku style.css motywu podrzędnego. Śmiało i umieść następujący kod CSS w polu Theme Customizer Dodatkowy CSS:

/*styles the wp-pagenavi pagination links*/
.wp-pagenavi a, .wp-pagenavi span {
  padding: 0.3em 0.8em !important;
  font-size: 2em !important;
  color: #333333;
  line-height: 2em;
  background: #eeeeee;
  transition: all .5s;
}

/*styles the wp-pagenavi current page number*/
.wp-pagenavi span.current {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pagination links on hover*/
.wp-pagenavi a:hover {
  color: #ffffff !important;
  background: #333333 !important;
}

/*styles the wp-pagenavi pages text*/
.wp-pagenavi .pages {
  background: none;
}

Oto ostateczny wynik.

Stylizacja WP-PageNavi w module Blog i module Portfolio

Jak wspomniano wcześniej, moduł Blog i moduł Portfolio dziedziczą domyślną nawigację po stronie WordPress. Ponieważ zostało to zastąpione nową złożoną paginacją WP-PageNavi, moduły również będą wyświetlać tę nową paginację.

Możesz użyć wbudowanych opcji projektowania tekstu paginacji, aby dodać dalsze style do paginacji.

Pamiętaj tylko, że niektóre opcje mogą nie działać zgodnie z oczekiwaniami z zewnętrznym niestandardowym CSS.

Końcowe przemyślenia

Paginacja nie musi być dalszym namysłem podczas tworzenia strony internetowej w Divi. Istnieje kilka pomocnych wbudowanych opcji, które pomagają w przypadku modułów korzystających z paginacji. A dzięki niestandardowemu CSS możesz stworzyć dowolny styl. Wtyczka WP-PageNavi to eleganckie rozwiązanie do dodawania złożonej paginacji w całym motywie Divi. Nie tylko działa bezproblemowo z Divi, ale daje dodatkowe opcje, które możesz łatwo dostosować. Stylizacja paginacji WP-PageNavi wymaga trochę CSS, ale miejmy nadzieję, że szablon użyty w tym artykule wprowadzi Cię na właściwą ścieżkę.

Przykładowe projekty w tym poście były celowo proste.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!