Przejdź do głównej treści

Jak spersonalizować siatki bloga za pomocą Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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żę, jak kierować reklamy i stosować więcej niż jeden styl do kart tworzących siatkę bloga przy użyciu niestandardowego CSS. Pokażę ci, jak zastosować różne style do innych kart, aby stworzyć efekt szachownicy. Pokażę Ci również, jak stylizować każdą kartę w innym wierszu i pokażę, jak kierować reklamy na poszczególne karty.

Oto przykłady 4 dotyczące dostosowywania bloga, w tym niektóre efekty aktywowania, których możesz użyć. Pod koniec tego samouczka będziesz mógł tworzyć niesamowite projekty swojego bloga.

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

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

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 kieruje wszystkie elementy tekstowe na kartach modułu bloga (w tym tytuł, meta artykułów, meta linki artykułów i treść artykułu) i przypisuje im biały kolor.

Oto wynik:

Dostosowywanie siatki nieparzystych divi

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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.

Inne samouczki Divi

Ten artykuł zawiera komentarze 20

  1. Witam,
    Jestem naprawdę początkującym, ale dzięki samouczkom online udaje mi się zbudować fajny blog.
    Naprawdę dziękuję za ten, bo musiałem tylko skopiować kody i wszystko poszło bez zarzutu, jestem zachwycony efektem.
    Jeszcze raz dziękuję, miłego dnia 🙂

  2. Dobry wieczór,
    blog DIVI obok nazwiska autora umieszcza przyimek „od” (np. od Stefano). Chciałbym wiedzieć, czy można to zmienić na „de”

  3. Witam Thierry
    Super tutorial
    Chciałbym wiedzieć, czy możliwe jest zwiększenie rozmiaru prezentowanego obrazu
    Chciałbym zastosować ten styl do mojego bloga
    dziękuję

  4. Witam,
    Jak mogę zoptymalizować ten układ dla telefonu komórkowego (tabletu)? Nie mam Schabrettmuster, ale różne kolory dla każdego wpisu na blogu, w określonej kolejności. Oczywiście to się zmienia, gdy przechodzimy na urządzenia mobilne, a kolory nie są już kojarzone z odpowiednimi postami ...
    Czy ktoś ma tu pomysł?

  5. Witam,

    Dzięki za ten artykuł! Chciałbym również zmodyfikować „czytaj więcej” na dole artykułów.
    Czy możesz podać nam przykłady kodu CSS, aby zmienić tekst i umieścić go na przykład w miłym środku przycisku?

    Dziękuję.
    Sophie

  6. Cuándo lo pones w personalizado CSS, por ejemplo:
    #gridcard .Column: first-child art: nth-child (impar) {background: #333; }

    da error como el seigue: Oczekiwano funkcji lub IDENT po dwukropku w linii 1, col 18

    pozdrowienia

    1. Dobry wieczór,

      Nasz blog jest tłumaczony automatycznie z języka francuskiego. Dlatego zapraszam do wybrania języka francuskiego w widżecie języka znajdującym się na górnym pasku naszego bloga, a wyświetli się poprawny kod CSS.

    2. usted escribió i artículo evil escrito, debería ser: artículo del primer hijo: brak arte del primer hijo:

      Popełniłeś błędny artykuł, powinien to być: artykuł pierwszego dziecka: nie sztuka pierwszego dziecka:

  7. Halo
    Dzięki za artykuł. Mam prezentację w siatce (Motyw Divi) Mam miniatury (zdjęcia) do prezentacji artykułów, z drugiej strony, gdy kliknę, aby uzyskać dostęp do artykułu, obraz jest wyświetlany w dużym rozmiarze na początku 'artykuł. Czy istnieje sposób, aby uzyskać ten sam rozmiar co miniatura lub usunąć ją z widoku posta?
    dziękuję
    Patrick

  8. Bonjourn, świetny artykuł
    Próbuję tutaj szczęścia, czasami chodziliśmy po temacie tygodniami bez odpowiedzi, kiedy ten sam temat ma sens dla innych.

    Dlatego szukam rozwiązania, aby ustawić siatkę postów, składającą się tylko z wizualizacji, ale o różnych wysokościach, aby być bardziej precyzyjnym, że jedna na dwie wizualizacje ma podwójną wysokość grafiki obok niej.

    Pomysł?

    Juliański

  9. Super tuto! Przetestuję ten weekend w mojej witrynie.
    czy masz rozwiązanie pozwalające usunąć ekstrakty w sieci?
    Dziękuję wam
    Sofhy

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
20 akcji
udział7
ćwierkanie2
Enregistrer11