Przejdź do głównej treści

Jak dostosować siatki bloga z Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

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

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ów pozwalają dostosować ogólny wygląd swojej sieci. Możesz łatwo upewnić się, że wszystkie karty mają ten sam kolor tła, czcionkę, marginesy itp. Jednak opcje stylu są ograniczone do projektu siatki jako całości, co utrudnia zastosowanie wielu lub różnych projektów kart w siatce.

Dzisiaj pokażę ci, jak kierować i nakładać więcej niż jeden styl na karty tworzące siatkę twojego bloga za pomocą niestandardowego CSS. Pokażę ci, jak zastosować inny styl do każdej innej mapy, aby stworzyć efekt szachownicy. Pokażę ci również, jak stylizować każdą mapę w różny sposób według linii, a pokażę ci, jak kierować każdą indywidualną mapę.

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 dotyczące motywu Divi

Zacznijmy.

Konfigurowanie układu dla Twojego bloga

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

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

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

  • Układ: siatka
  • Liczba artykułów: 12
  • Pokaż zdjęcie w głowie: TAK
  • Przycisk Czytaj więcej: ON

Pod Custom CSS wpisz "gridcard" w polu tekstowym CSS ID. To będzie sposób, abyśmy dostosowali tylko ten moduł blogu.

Zapisz zmiany

Jak zrozumieć układ "Grid" 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:

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

Karty biletów blogowych są porządkowane od góry do dołu w każdej z kolumn. Tak więc, jeśli chcesz nadać im numer, będziesz musiał policzyć 1 do 4 na każdej długości od góry do dołu:

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

Przykłady siatki

Przykład # 1: Projektowanie siatki kratkę

W tym pierwszym przykładzie wybiorę wszystkie nieparzyste karty modułu blogu (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ące CSS w polu tekstowym Niestandardowe CSS:

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

Oto podziały tego kodu:

#gridcard = identyfikator całego modułu blogu

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

post: nth-child (odd) = wybiera wszystkie nieparzyste przedmioty (lub karty) w kolumnie

Połóż wszystko razem, to wybiera karty o numerach nieparzystych w pierwszej kolumnie modułu blogu 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ł, meta artykułu, meta linki artykułu i treść artykułu) i przypisuje im biały kolor.

Oto wynik:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Kolejnym etapem tworzenia naszego układu kratowego jest kierowanie kart o numerach nieparzystych w trzeciej kolumnie i stosowanie ciemnoszarego tła i białego tekstu, tak jak w pierwszej kolumnie. Dodaj następujący kod CSS w niestandardowym polu tekstowym CSS:

#gridcard .column: artykuł last-child: nth-child (nieparzyste) {background: #333; } #gridcard .column: artykuł last-child: nth-child (nieparzyste) .entry-title, #gridcard .column: artykuł last-child: nth-child (nieparzyste) .post-meta, #gridcard .column: przeszło artykuł dziecko: nth-child (nieparzyste) .post meta-a, #gridcard .column: artykuł last-child: nth-child (nieparzyste) .post-content p {color: #ffffff; }

Ten kod odnosi się do kolumny "last" (w tym przypadku trzecia kolumna jest ostatnią kolumną) z elementem pseudo "ostatniego dziecka".

W drugiej kolumnie (lub medium), celuj w równe karty, aby ukończyć efekt szachownicy. Aby to zrobić, musimy dodać następujące CSS:

#gridcard .column: nth-child (2) Pozycja: nth-child (nawet) {background: #333; } #gridcard .column: nth-child (2) artykuł: nth-child (nawet) .entry-title, #gridcard .column: nth-child (2) artykuł: nth-child (nawet) .post-meta # gridcard .column: nth-child (2) artykuł: nth-child (nawet) .post-meta ma #gridcard .column: nth-child (2) Artykuł: nth-child (parzyste) .post-content p {color : #fff; }

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

Przykład # 2: Dodawanie efektów najeżdżania w układzie kratkę

Kiedy już wiesz, jak kierować kartami modułów blogu, możesz twórczo zmienić jeden z elementów wewnątrz karty.

W tym przykładzie zamierzam użyć układu szachownicy i tym razem zamierzam zmienić obrazy na jedną z czarno-białych ciemnoszarych kart po najechaniu kursorem na mapę. I zrobię obrazy na jednej z jaśniejszych białych kart, gdy unosimy się nad mapą. Aby to zrobić, dodaj następujące CSS w niestandardowym polu CSS (upewnij się, że wyłączasz lub wycinasz drugi kod, aby nie był niekompatybilny z nowym):

#gridcard .column: first-child artykuł: nth-child (nieparzyste) #gridcard .column: artykuł last-child: nth-child (nieparzyste) #gridcard .column: nth-child (2) Pozycja: nth-child (even) {background: #333; } #gridcard .column: pierwszego dziecka artykuł: n-ty-dziecka (nieparzyste) .entry-tytuł #gridcard .column: pierwszego dziecka artykuł: n-ty-dziecka (nieparzyste) .post-meta #gridcard .column: Najważniejsze jest artykuł dziecko: nth-child (nieparzyste) .post-meta został #gridcard .column: artykuł first-child: nth-child (nieparzyste) .post-content p #gridcard .column article last-child: nth-child (nieparzyste) .entry-title, #gridcard .column: artykuł last-child: nth-child (nieparzyste) .post-meta, #gridcard .column: artykuł last-child: nth-child (nieparzyste) posiada .post-meta , #gridcard .column: artykuł last-child: nth-child (nieparzyste) .post-content p #gridcard .column: nth-child (2) artykuł: nth-child (nawet) .entry-title, #gridcard. kolumna: nth-child (2) pozycja: nth-child (nawet) .post-meta, #gridcard .column: nth-child (2) pozycja: nth-child (nawet) .post meta-a, #gridcard .column : n-ty-dziecka (2) artykuł: n-ty-dziecka (jeszcze) .post, zawartość P {kolor #fff; } #gridcard .column: nth-child (2) Pozycja: nth-child (jeszcze): hover img, #gridcard .column: first-child artykuł: nth-child (odd): hover img, #gridcard .column: ostatnia -child artykuł: n-ty-dziecka (nieparzyste) unoszą {-webkit IMG-filtra skali szarości (1); filter: grayscale (1); } #gridcard .column: nth-child (2) Pozycja: nth-child (odd): hover img, #gridcard .column: first-child artykuł: nth-child (jeszcze): hover img, #gridcard .column: ostatnia -child article: nth-child (even): hover img {-webkit-filter: brightness (1.5); filtr: jasność (1.5); }

Możesz również dodać efekt odwrócenia do kart, aby po najechaniu kursorem na białe karty stały się ciemnoszare, a po najechaniu na ciemniejsze karty stają się białe.

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

#gridcard .column article, #gridcard .column article img {-webkit-transition: all 0.8s; -moz-transition: wszystkie 0.8; przejście: wszystkie 0.8; } #gridcard .column: first-child artykuł: nth-child (odd): hover, #gridcard .column: artykuł last-child: nth-child (odd): hover, #gridcard .column: nth-child (2) artykuł: nth-child (even): hover {background: #fff; } #gridcard .column: pierwszego dziecka artykuł: n-ty-dziecka (nieparzyste) unoszą .entry-tytuł #gridcard .column: pierwszego dziecka artykuł: n-ty-dziecka (nieparzyste) unoszą .post-meta #gridcard. kolumna: artykuł first-child: nth-child (odd): hover .post-meta ma #gridcard .column: first-child artykuł: nth-child (odd): hover .post-content p #gridcard .column: artykuł last-child: nth-child (odd): hover .entry-tytuł, #gridcard .column: last-child artykuł: nth-child (odd): hover .post-meta, #gridcard .column: pozycja last-child : nth-child (odd): hover .post-meta ma #gridcard .column: last-child artykuł: nth-child (odd): hover .post-content p #gridcard .column: nth-child (2) Artykuł: nth-child (jeszcze): hover .entry-tytuł, #gridcard .column: nth-child (2) pozycja: nth-child (jeszcze): hover .post-meta, #gridcard .column: nth-child ( 2) artykuł: n-ty-dziecka (jeszcze) unoszą .post-meta ma #gridcard .column: n-ty-dziecka (2) artykuł: n-ty-dziecka (jeszcze) unoszą .post, zawartość P {kolor #333; } #gridcard .column: first-child artykuł: nth-child (jeszcze): hover, #gridcard .column: artykuł last-child: nth-child (jeszcze): hover, #gridcard .column: nth-child (2) artykuł: nth-child (nieparzyste): hover {background: #333; } #gridcard .column: pierwszego dziecka artykuł: n-ty-dziecka (jeszcze) unoszą .entry-tytuł #gridcard .column: pierwszego dziecka artykułu nta podrzędny (jeszcze) unoszą .post-meta #gridcard. kolumna: pierwszego dziecka artykuł: n-ty-dziecka (jeszcze) unoszą .post-meta ma #gridcard .column: artykuł pierwszej dzieci: n-ty-dziecka (jeszcze) unoszą .post-zawartości fosforu #gridcard .column: artykuł last-child: nth-child (jeszcze): hover .entry-tytuł, #gridcard .column: artykuł last-child: nth-child (jeszcze): hover .post-meta, #gridcard .column: pozycja last-child : nth-child (jeszcze): hover .post-meta ma #gridcard .column: last-child artykuł: nth-child (parzyste): hover .post-content p #gridcard .column: nth-child (2) Artykuł: nth-child (odd): hover .entry-tytuł, #gridcard .column: nth-child (2) pozycja: nth-child (odd): hover .post-meta, #gridcard .column: nth-child ( 2) artykuł: nth-child (odd): hover .post-meta ma #gridcard .column: nth-child (2) Artykuł: nth-child (odd): hover .post-content p {color: #FFF; }

A teraz zobacz efekty na Twoim blogu.

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

W trzecim przykładzie zastosuję to samo ciemne tło i biały tekst dla kart w każdym innym wierszu (a nie w kolumnie). Aby to zrobić, musisz wycelować we wszystkie równe karty w każdej z kolumn. Przejdź do tematu "Divi → Opcje" i upewnij się, że wyłączyłeś lub usunąłeś poprzedni kod CSS dodany od początku tego samouczka. Następnie dodaj następujący kod CSS:

#gridcard artykuł: nth-child (nawet) {background-color: #333; } #gridcard artykuł: n-ty-dziecka (jeszcze) .entry-tytuł #gridcard artykuł: n-ty-dziecka (jeszcze) .post-meta #gridcard artykuł: n-ty-dziecka (jeszcze) .post-meta A #gridcard odcinek : n-ty-dziecka (jeszcze) .post, zawartość P {kolor #fff; }

Oto, co wynik:

Przykład # 4: Projektowanie konkretnej mapy siatki

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

Przejdź do strony wyświetlającej moduł blogu i kliknij prawym przyciskiem myszy na jedną z kart. W okienku opcji, które się pojawią, wybierz "Sprawdź" (niektóre przeglądarki mogą mieć "Sprawdź element" lub coś podobnego). To spowoduje wdrożenie okna Narzędzi dla programistów, które wyświetla zarówno html i css twojego Strona internetowa: znajdź znacznik artykułu, który otacza twój artykuł i zanotuj identyfikator artykułu, który został do niego przypisany. To jest selektor, którego musisz użyć do kierowania na swoją indywidualną kartę. kliknij prawym przyciskiem myszy i kliknij inspekcję, aby znaleźć identyfikator po 3466.

Jak poniżej:

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

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

# Post-3466 {background: #333333; } # Post-title .entry 3466, 3466 # postu .post-meta, # post-3466 .post meta-a, # post-3466 .post-content p {color: #fff; }

Teraz mapa ma ten specyficzny styl.

To wszystko!

Ostatnie myśli

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

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

Inne samouczki Divi

Ten artykuł zawiera komentarze 18
  1. Witam,
    Jestem naprawdę początkującym, ale dzięki samouczkom online udało mi się stworzyć fajny blog.
    Naprawdę, dziękuję za ten, ponieważ musiałem tylko skopiować kody i wszystko poszło nienagannie, jestem zachwycony wynikiem.
    Jeszcze raz dziękuję, miłego dnia 🙂

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

  3. Witam Thierry
    Super tutorial
    Chciałbym wiedzieć, czy można zwiększyć rozmiar prezentowanego obrazu
    Chciałbym zastosować ten styl na moim blogu
    dziękuję

  4. Witam,
    Jak mogę zoptymalizować ten układ na urządzenia mobilne (tablety)? Nie mam Schabrettmuster, ale różne kolory dla każdego postu na blogu, w określonej kolejności. Oczywiście zmienia się to po przejściu na telefon komórkowy, a kolory nie są już powiązane z odpowiednimi wpisami…
    Czy ktoś tu ma pomysł?

  5. Witam,

    Dziękuję za ten artykuł! Chciałbym również zmodyfikować „czytaj więcej” na dole artykułów.
    Czy możesz podać nam przykłady kodu CSS do zmiany tekstu i umieszczenia go na przykład w ładnym środkowym przycisku?

    Dziękuję.
    Sophie

  6. Dowiedz się więcej na temat personalizacji CSS:
    #gridcard .Column: first-child artículo: 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 automatycznie tłumaczony z francuskiego. Zapraszam do wybrania języka francuskiego w widżecie językowym znajdującym się na górnym pasku naszego bloga, a wyświetlony zostanie prawidłowy kod CSS.

    2. usted escribió un artículo mal escrito, debería ser: artículo del primer hijo: no 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, kiedy klikam, aby uzyskać dostęp do artykułu, obraz jest wyświetlany w dużej części na początku 'artykuł. Czy istnieje sposób, aby nadać mu taki sam rozmiar jak miniatura lub usunąć go w widoku artykułu.
    dziękuję
    Patrick

  8. Bonjourn, świetny artykuł
    Próbuję tutaj szczęścia, czasem kręciliśmy się wokół tematu przez wiele tygodni, nie znajdując odpowiedzi, gdy ten sam temat ma sens dla innych.

    Dlatego szukam rozwiązania, aby ustawić siatkę słupków, złożoną tylko z elementów wizualnych, ale o różnych wysokościach, aby być bardziej precyzyjnym, że jeden z dwóch elementów wizualnych jest dwa razy wyższy niż element wizualny obok niego.

    Pomysł?

    Juliański

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
16 akcji
udział7
ćwierkanie2
Enregistrer7