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
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu WooCommerce na Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których nie znasz na temat Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika w 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:
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
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.
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:
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:
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:
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:
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.
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.
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:
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:
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
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Dzień dobry ! Czy wiesz, czy można zmodyfikować liczbę kolumn tego obiektu Blog?
Chciałbym, aby każda karta była wyświetlana na całej szerokości. DZIĘKI !
Witam,
Próbowałem wyświetlić posty na blogu w „siatce” z identyfikatorem „gridcard”, ale to nie działa. Możesz mi pomóc ?
Dobry wieczór,
Przepraszamy za opóźnienie w odpowiedzi.
Czy możesz przeformułować swoją prośbę?
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 🙂
Błagam cię Dziękujemy za przeczytanie nas.
Dobry wieczór,
blog DIVI obok nazwiska autora umieszcza przyimek „od” (np. od Stefano). Chciałbym wiedzieć, czy można to zmienić na „de”
Witam,
Tak, można zmienić ten element za pomocą Divi.
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ę
Witam,
Tak, to możliwe.
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ł?
Witam,
Nie niestety.
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
Cześć 🙂 Aby zmienić tekst przycisku „czytaj więcej”, dzieje się to w Ustawieniach bloga > Styl > Czytaj więcej Tekst. Możesz zmodyfikować typografię i tekst "czytaj więcej". Jednak nie wiem jak zrobić z tego guzik. Dobra konfiguracja!
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
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.
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:
Cześć,
70 inne języki.
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
Dobry wieczór,
Przepraszam, ale nasze wsparcie divi jest ograniczone do naszych porad. Proszę skontaktować się z firmą Eleganthemes SVP.
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
Cześć Julian,
Polecam kontakt z zespołem DIVI. W tym przypadku jest to wygodniejsze.
Super tuto! Przetestuję ten weekend w mojej witrynie.
czy masz rozwiązanie pozwalające usunąć ekstrakty w sieci?
Dziękuję wam
Sofhy