Moduł Divi Blog ma opcję układu w postaci przydatnej siatki dla postów na blogu. Szablon siatki porządkuje posty na blogach w pudełka lub mapy, które upraszczają widoczność elementów na ekranie w porównaniu do widoku standardowego.

Ustawienia modułu Blog umożliwiają dostosowanie ogólnego projektu sieci. Możesz łatwo ustawić wszystkie swoje karty w tym samym kolorze tła, czcionce, marginesach itp. Jednak opcje stylu są ograniczone do projektu siatki jako całości, co utrudnia stosowanie wielu lub różnych projektów do map w siatce.

Dzisiaj pokażę Ci, jak celować i stosować więcej niż jeden styl do kart tworzących siatkę. Twój blog przy użyciu niestandardowego CSS. Pokażę Ci jak nałożyć na siebie różne style kart, aby uzyskać efekt szachownicy. Pokażę ci także, jak nadać styl każdej karcie w każdym rzędzie, a także pokażę, jak celować w dowolną pojedynczą kartę.

Oto 4 przykłady dostosowywania Twój blog, w tym niektóre efekty najechania, których możesz użyć. Pod koniec tego samouczka będziesz mógł tworzyć niesamowite projekty Twój blog.

Inne samouczki na temat Divi

Zacznijmy.

Konfigurowanie układu dla Twojego bloga

Przed rozpoczęciem projektowania kart modułu blogu upewnij się, że masz już co najmniej artykuły 12 z obrazem w pudełku.

Po utworzeniu wiadomości utwórz nową stronę. Na nowej stronie wdróż moduł blogu w kolumnie o pełnej szerokości w części standardowej:

Konfigurowanie układu bloga Divi

Kliknij, aby edytować ustawienia modułu Blog. W Ustawieniach ogólnych zmień następujące ustawienia:

  • Układ: siatka
  • Liczba artykułów: 12
  • Pokaż wyróżniony obraz: TAK
  • Przycisk Czytaj więcej: ON

Konfiguracja sieci Divi

W sekcji Custom CSS wpisz „gridcard” w polu tekstowym CSS ID. Będzie to dla nas sposób na personalizację tylko tego modułu bloga.

Gridcard CSS Divi

Zapisz zmiany

Jak rozumieć układ „Siatka” na blogu

Teraz, gdy masz sieć blogów, ważne jest, aby zrozumieć strukturę układu sieci, aby można było zlokalizować mapy modułu blogu, które chcesz dostosować.

Siatka blogów jest skonfigurowana z układem trzech kolumn. Poniżej znajduje się ilustracja siatki blogów z artykułami blogowymi 12 podzielonymi na trzy kolumny:

Prezentacja układu elementów grid divi

Karty biletów blogu są uporządkowane od góry do dołu w każdej kolumnie. Tak więc, jeśli chcesz nadać im liczbę, musisz policzyć 1 do 4 na każdej długości od góry do dołu:

Policz artykuły divi

Ponieważ znasz kolejność numeryczną każdej karty bloga pod każdą kolumną, możesz również zidentyfikować każdą kartę jako liczbę nieparzystą lub parzystą w następujący sposób:

Dzielenie liczby parzystej i nieparzystej

Przykłady siatki

Przykład nr 1: Projekt kratki w kratkę

W pierwszym przykładzie zamierzam wskazać wszystkie nieparzyste karty w module blogu (karty 1 i 3) w pierwszej kolumnie, nadając im ciemnoszary kolor tła. Aby to zrobić, przejdź do „Divi → Opcje motywu” i dodaj następujący CSS w niestandardowym polu tekstowym CSS:

#gridcard.column: artykuł pierwszego dziecka: nth-child (nieparzyste) {background: #333; }

Oto podziały tego kodu:

#gridcard = identyfikator całego modułu bloga

.column: first-child = wybierz pierwszą kolumnę w module blogu

post: nth-child (odd) = zaznacza wszystkie nieparzyste elementy (lub karty) w kolumnie

Podsumowując, powoduje to wybranie nieparzystych kart w pierwszej kolumnie modułu bloga z identyfikatorem „gridcard”.

Następnie dodaj swój biały tekst, który przejdzie przez ciemne tło, dodając następujący CSS:

#gridcard .column: element pierwszego elementu: nth-child (nieparzyste) .entry-title, #gridcard .column: first-child artykuł: nth-child (nieparzyste) .post-meta a, #gridcard .column: first-child }

Ten kod dotyczy wszystkich elementów tekstowych na kartach modułów bloga (w tym tytułu, meta postów, meta linków postów i treść artykułu) i nadaje im kolor biały.

Oto wynik:

Dostosowywanie siatki nieparzystych divi

Następnym krokiem w tworzeniu naszego układu szachownicy jest wycelowanie w nieparzyste karty w trzeciej kolumnie i zastosowanie ciemnoszarego tła i białego tekstu, tak jak w pierwszej kolumnie. Dodaj następujący kod CSS w polu tekstowym Niestandardowy CSS:

#gridcard .column: ostatni artykuł podrzędny: n-te dziecko (nieparzyste) {tło: # 333; } #gridcard .column: last-child article: nth-child (nieparzyste) .entry-title, #gridcard .column: last-child article: nth-child (nieparzyste) .post-meta, #gridcard .column: last- artykuł podrzędny: nth-child (nieparzyste) .post-meta a, #gridcard .column: last-child article: nth-child (nieparzyste) .post-content p {color: #ffffff; }

Ten kod jest przeznaczony dla „ostatniej” kolumny (w tym przypadku trzecia kolumna jest ostatnią kolumną) z elementem pseudonimu „last-child”.

Dla drugiej kolumny (lub medium), celuj w równe karty, aby zakończyć efekt szachownicy. Aby to zrobić, musimy dodać następujący CSS:

#gridcard .column: nth-child (2) article: nth-child (even) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta, # gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even) .post-content p {color : #fff; }

Teraz sprawdź stronę bloga, aby zobaczyć układ szachownicowy w mapach modułów bloga.

Układ divi siatki szachownicy

Przykład 2: dodawanie efektów najechania na układ w kratkę

Gdy już wiesz, jak kierować reklamy na karty modułów blogów, możesz kreatywnie zmienić dowolny element na karcie.

W tym przykładzie użyję układu szachownicy i tym razem zmienię wyróżnione obrazy z ciemnoszarych map na czarno-białe po najechaniu kursorem na mapę. I zamierzam rozjaśnić obrazy pierwszych stron białych kart po najechaniu kursorem na kartę. Aby to zrobić, dodaj następujący CSS w obszarze Niestandardowy CSS (upewnij się, że wyłączyłeś lub wycinasz inny kod, aby nie był niekompatybilny z nowym):

#gridcard .column: first-child article: nth-child (nieparzyste), #gridcard .column: last-child article: nth-child (odd), #gridcard .column: nth-child (2) article: nth-child (parzysty) {tło: # 333; } #gridcard .column: first-child article: nth-child (nieparzyste) .entry-title, #gridcard .column: first-child article: nth-child (nieparzyste) .post-meta, #gridcard .column: first- artykuł podrzędny: nth-child (nieparzyste) .post-meta a, #gridcard .column: first-child article: nth-child (odd) .post-content p, #gridcard .column: last-child article: nth-child (odd) .entry-title, #gridcard .column: last-child article: nth-child (odd) .post-meta, #gridcard .column: last-child article: nth-child (nieparzyste) .post-meta a , #gridcard .column: last-child article: nth-child (nieparzyste) .post-content p, #gridcard .column: nth-child (2) article: nth-child (even) .entry-title, #gridcard. kolumna: nth-child (2) article: nth-child (even) .post-meta, #gridcard .column: nth-child (2) article: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) article: nth-child (parzyste) .post-content p {color: #fff; } #gridcard .column: nth-child (2) article: nth-child (even): hover img, #gridcard .column: first-child article: nth-child (odd): hover img, #gridcard .column: last -artykuł dla dziecka: n-te-dziecko (nieparzyste): najedź img {-webkit-filter: skala szarości (1); filtr: skala szarości (1); } #gridcard .column: nth-child (2) article: nth-child (odd): hover img, #gridcard .column: first-child article: nth-child (even): hover img, #gridcard .column: last -artykuł dla dzieci: n-te-dziecko (parzyste): najedź img {-webkit-filter: jasność (1.5); filtr: jasność (1.5); }

Możesz również dodać efekt inwersji na kartach, aby po najechaniu kursorem na białe karty stały się ciemnoszare, a po najechaniu kursorem na ciemnoszare karty zmieniły kolor na biały.

Oprócz powyższego CSS dodaj następujący CSS:

artykuł #gridcard .column, artykuł #gridcard .column img {-webkit-przejście: wszystko 0.8s; -moz-przejście: wszystkie 0.8 s; przejście: wszystkie 0.8 s; } #gridcard .column: first-child article: nth-child (nieparzyste): hover, #gridcard .column: last-child article: nth-child (nieparzyste): hover, #gridcard .column: nth-child (2) artykuł: nth-child (parzyste): hover {background: #fff; } #gridcard .column: first-child article: nth-child (nieparzyste): hover .entry-title, #gridcard .column: first-child article: nth-child (nieparzyste): hover .post-meta, #gridcard. kolumna: artykuł pierwszego dziecka: nth-child (nieparzyste): hover .post-meta a, #gridcard .column: first-child article: nth-child (nieparzyste): hover .post-content p, #gridcard .column: last-child article: nth-child (nieparzyste): hover .entry-title, #gridcard .column: last-child article: nth-child (nieparzyste): hover .post-meta, #gridcard .column: last-child article : nth-child (nieparzyste): hover .post-meta a, #gridcard .column: last-child article: nth-child (odd): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) artykuł: nth-child (parzyste): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (even): hover .post-content p {color: # 333; } #gridcard .column: first-child article: nth-child (even): hover, #gridcard .column: last-child article: nth-child (even): hover, #gridcard .column: nth-child (2) artykuł: nth-child (nieparzyste): hover {background: # 333; } #gridcard .column: first-child article: nth-child (even): hover .entry-title, #gridcard .column: first-child article: nth-child (even): hover .post-meta, #gridcard. kolumna: artykuł pierwszego dziecka: nth-child (parzyste): hover .post-meta a, #gridcard .column: first-child article: nth-child (even): hover .post-content p, #gridcard .column: last-child article: nth-child (even): hover .entry-title, #gridcard .column: last-child article: nth-child (even): hover .post-meta, #gridcard .column: last-child article : nth-child (parzyste): hover .post-meta a, #gridcard .column: last-child article: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) article: nth-child (nieparzyste): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) artykuł: nth-child (nieparzyste): hover .post-meta a, #gridcard .column: nth-child (2) article: nth-child (nieparzyste): hover .post-content p {color: #fff; }

Teraz przejdź do efektu na swoim blogu.

Dostosowywanie siatek po najechaniu na divi

Przykład # 3: Dostosowywanie kart według wierszy

W trzecim przykładzie zastosuję to samo ciemne tło i biały tekst na kartach w co drugim rzędzie (nie w kolumnie). Aby to zrobić, musisz skierować wszystkie parzyste karty w każdej z kolumn. Przejdź do „Divi → Options” motywu i upewnij się, że wyłączasz lub usuwasz poprzedni kod CSS, który dodałeś od początku tego samouczka. Następnie dodaj następujący CSS:

# artykuł na karcie: nth-child (parzyste) {background-color: # 333; } #gridcard article: nth-child (even) .entry-title, #gridcard article: nth-child (even) .post-meta, #gridcard article: nth-child (even) .post-meta a, #gridcard article : nth-child (parzyste) .post-content p {color: #fff; }

Oto wynik:

Wynik konfiguracji według linii divi

Przykład # 4: Projektowanie konkretnej mapy siatki

Niektórzy z Was mogą chcieć wybrać konkretną kartę. Aby to zrobić, musisz znaleźć unikalny identyfikator przedmiotu, który jest automatycznie przypisywany do każdej z twoich kart. W tym przykładzie używam przeglądarki Chrome.

Przejdź do strony wyświetlającej Twój moduł blogu i kliknij prawym przyciskiem myszy jedną ze swoich kart. W wyświetlonym oknie opcji wybierz „Sprawdź” (niektóre przeglądarki mogą mieć „Sprawdź element” lub coś podobnego. Spowoduje to wdrożenie okna Narzędzi programistycznych, które wyświetla zarówno kod HTML, jak i CSS na stronie internetowej. Znajdź tag artykułu, który otacza Twój artykuł, i zapisz przypisany do niego identyfikator artykułu. To jest selektor, którego powinieneś użyć do kierowania swojej indywidualnej karty. Na przykład mam kliknięto prawym przyciskiem myszy i kliknięto sprawdzono, aby znaleźć identyfikator „post-3466”.

Jak poniżej:

Modyfikacja pojedynczego artykułu

Aby kierować tę kartę tylko do CSS na szarym tle z białą czcionką, musisz użyć następującego CSS:

# post-3466 {tło: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Teraz mapa ma określony styl.

To wszystko!

końcowe przemyślenia

To tylko kilka przykładów wielu różnych stylów, które można osiągnąć za pomocą tego typu kierowania CSS na karty modułu Blog. Nie musisz już zachowywać tego samego stylu dla każdej karty. Możesz je zaprojektować, jak chcesz.

Jeśli masz jakiekolwiek pytania lub sugestie, możesz im ofiarować je.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” 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 MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” 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