Jak tworzyć unikalne projekty za pomocą pseudoelementów przed i po w Divi
Opublikowany: 2019-04-14Jako projektanci stron internetowych zawsze szukamy nowych sposobów na nadanie indywidualności tworzonym przez nas stronom internetowym. Divi zapewnia nieskończone możliwości tworzenia unikalnych układów, ale zawsze jest kilka dodatków, które możemy dodać, aby połączyć projekt. Tutaj przydają się pseudoelementy CSS.
Czym są pseudoelementy CSS?
Mówiąc prościej, pseudoelement CSS można wykorzystać do stylizacji określonych części elementu. Istnieje pięć rodzajów pseudoelementów, które robią różne rzeczy. Na potrzeby tego posta przyjrzymy się ::before i ::after.
Te dwa pseudoelementy służą do wstawiania czegoś przed lub po zawartości elementu. Jest to szczególnie przydatne, ponieważ możemy ich użyć do dodania dodatkowych elementów wizualnych do istniejących obrazów, tekstu i czegokolwiek innego!
Dlaczego więc mielibyśmy używać tych pseudoelementów? Przed i po są idealne do odblokowania możliwości projektowania bez konieczności dodawania kolejnych elementów lub modułów. Równie dobrze przydają się do dodawania dodatkowych elementów bez konieczności dotykania szablonów html lub podstawowych plików motywów.
Jak używać elementów przed i po z Divi?
Jeśli do tej pory to wszystko wydaje się nieco mylące, nie martw się! Gdybyśmy używali ::before i ::after podczas pisania kodu CSS od podstaw, wyglądałoby to trochę tak:
Wyobraź sobie, że mamy linię tekstu z klasą „text-example” – CSS do stylizacji i dostosowania tej linii to:
.text-example {*This is where you add the styles*}Teraz, gdybyś chciał dodać i wystylizować element ::before lub ::after, CSS wyglądałby tak:
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}Na szczęście Divi zapewnia łatwy dostęp do pseudoelementów ::before i ::after przy znacznie mniejszym wysiłku. W rzeczywistości, jeśli kiedykolwiek otworzyłeś kartę „Zaawansowane” dla dowolnego modułu, aby dodać niestandardowy kod CSS, zobaczysz obszary, o których mowa.
Te pola zapewniają szybki skrót do dodawania i dostosowywania treści przed i po dowolnym istniejącym module Divi, a my możemy je wykorzystać do stworzenia naprawdę elastycznych i interesujących projektów.
zapowiedź
Oto, co będziemy tworzyć w tym samouczku:
Przykład 1
Przykład 2
Przykład 3
Pierwsze kroki
W tym samouczku potrzebujemy tylko kopii motywu Divi i pustej planszy. Na początek utworzymy nową stronę, a po dodaniu tytułu strony klikamy wizualny kreator.
Teraz jesteśmy gotowi do rozpoczęcia!
Przykład 1: Numerowane moduły notatek z wykorzystaniem pseudoelementów
Notka jest prawdopodobnie jednym z najbardziej elastycznych modułów Divi, jakie masz do dyspozycji. W tym przypadku użyjemy pseudoelementów, aby dodać liczby przed każdą notatką, aby utworzyć sekcję krok po kroku „jak to działa”. Dodamy również kształt strzałki po prawej stronie, aby wskazać proces.
Co będziemy tworzyć:
Chociaż ten projekt będzie działał z każdym projektem notki, zapożyczyliśmy sekcję noty z układu agencji internetowej. Jeśli chcesz ich użyć jako punktu wyjścia, możesz uzyskać dostęp do strony docelowej agencji internetowej, tworząc nową stronę i uzyskując dostęp do narzędzia do tworzenia frontonu.
Po załadowaniu strony będziesz mieć możliwość użycia gotowego układu, jednego z zapisanych układów lub zbudowania od podstaw. Wybierz gotowy układ i użyj paska wyszukiwania, aby znaleźć układy „Agencja internetowa”. Sekcja z notatkami w tym samouczku znajduje się na stronie docelowej.
Po załadowaniu jedyną różnicą między gotowym układem a naszym przykładem jest to, że zmieniliśmy tło każdej notki, kolor czcionki tytułu i tekstu oraz dodaliśmy trochę dopełnienia.
Po zmianie tych ustawień w jednej notatce możesz kliknąć prawym przyciskiem myszy moduł i użyć „Rozszerz style”, aby zastosować je do pozostałych trzech.
Teraz, gdy dostosowaliśmy nasze cztery moduły notatek, aby wyglądały tak, jak chcemy, nadszedł czas, aby dodać trochę kodu, aby utworzyć ponumerowany element. Jednak aby ten projekt działał, najpierw musimy dodać jedną linię CSS do niestandardowego pola CSS głównego elementu.
overflow: visible;
Dzięki temu wszystkie elementy, które utworzymy w kolejnych krokach, będą widoczne wszędzie tam, gdzie nakładają się na krawędzie naszego modułu notatek.
Gdy to zrobisz, otwórz opcje modułu i przejdź do zakładki „Zaawansowane”. W polu „przed” dodaj ten fragment kodu CSS:
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
Po dodaniu tego fragmentu kodu zobaczysz numer w lewym górnym rogu modułu notki. Możesz zmienić położenie numeru, zmieniając wiersze „left:” i „top:” lub zmieniając kolor i rozmiar czcionki numeru we fragmencie kodu CSS.
Po zakończeniu tego dla pierwszego modułu przejdź do trzech nowych modułów notatek i zmień wiersz „treść:” na:
treść: „2.”;
treść: „3.”;
…i tak dalej.
Teraz, gdy mamy już posortowane liczby, musimy dodać trochę CSS, aby utworzyć kształt strzałki.
Otwórz każdy moduł i wpisz go w polu Po w obszarze Niestandardowy CSS:
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Teraz twoje cztery notki powinny wyglądać tak:
Przykład 2. Dodawanie unikalnych kształtów do istniejących modułów
Ten projekt opiera się na prostych, ale skutecznych małych fragmentach kodu, które są dodawane zarówno do niestandardowych pól CSS ::before i ::after w każdym module tekstowym.
Piękno używania tutaj pseudoelementów polega na tym, że możemy zintegrować unikalne kształty i obiekty z naszymi istniejącymi modułami bez konieczności dodawania jakichkolwiek dodatkowych elementów lub modułów do naszej strony. Ponieważ te pseudoelementy są zawarte w naszych istniejących modułach, nie dodają dodatkowej przestrzeni do naszych projektów i świetnie wyglądają na wszystkich urządzeniach.
Co będziemy tworzyć:
Aby stworzyć początkowy układ, musimy dodać zwykłą sekcję z wierszem w trzech kolumnach, ustawioną na domyślną szerokość. Gdy to zrobisz, dodaj moduł tekstowy do jednej z nowych kolumn.
Ponownie możesz nadać temu modułowi tekstowy styl, jednak jeśli będziesz podążać dalej, oto kroki, aby osiągnąć ten projekt:
Otwórz opcje modułu tekstowego i dodaj treść tekstową oraz obraz tła lub kolor tła zgodnie z wymaganiami. Użyliśmy normalnego obrazu tła z przezroczystym gradientem u góry:
Następnie skonfiguruj następujące opcje projektu:
1. Górna wyściółka: 120px i dolna wyściółka: 120px
2. Wyrównanie tekstu: środek i kolor tekstu: #ffffff
3. Wyrównanie nagłówka: środek i kolor nagłówka: #f5ee5d
Teraz, gdy mamy już wszystkie wizualne aspekty Twojego pierwszego modułu tekstowego, nadszedł czas, aby dodać CSS, aby uczynić magię. W zakładce Zaawansowane modułu tekstowego dodaj następujący kod w polu „przed”:
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
A następnie dodaj następujący kod do pola „po”:
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
Po dodaniu tych fragmentów kodu do modułu zobaczysz nasze nowe, fantazyjne kształty.
Jeśli zastanawiasz się, co robi ten CSS, jest to całkiem proste. Wszystko, co robimy, to tworzenie przezroczystego kwadratu, który jest oddalony o 20 pikseli od góry i lewej (oraz dołu i prawej) modułu tekstowego. Następnie dodajemy dwie obramowania do tych kwadratów, aby stworzyć efekt strzałki.
Gdy będziesz zadowolony z wyglądu tego pierwszego modułu tekstowego, po prostu skopiuj go i wklej, aby wypełnić pozostałe kolumny i zmień odpowiednio zawartość tekstu, tło i style.
Zaletą tej metody jest to, że będzie działać z prawie każdym modułem Divi z niewielką personalizacją. Jeśli chcesz być bardziej wymyślny, spróbuj dodać dodatkowe CSS, aby jeszcze bardziej obrócić, pochylić i dostosować elementy ::before i ::after. Baw się dobrze!
Przykład 3. Dodawanie ikon i opisów do tytułów zakładek
W ramach tego projektu wykorzystamy możliwość dodania ikony obrazu przed istniejącą treścią, a także niewielkiego opisu tekstowego poniżej. Jest to idealne rozwiązanie do dostosowywania modułu zakładek Divi nieco dalej niż zwykle.
Uwaga – chociaż dodawanie treści za pomocą css jest świetne do projektowania, nie jest łatwo indeksowane przez wyszukiwarki (chociaż w rzeczywistości Google indeksuje treści CSS i Javascript, trwa to znacznie dłużej i jest obecnie zawodne. Wyszukiwarki takie jak Bing i DuckDuckGo to robią w ogóle nie indeksować tej treści). Z tego powodu Twoje treści powinny być minimalne i nie powinieneś polegać na tym, aby wpłynąć na Twój potencjał rankingowy.
Co będziemy tworzyć:
Przede wszystkim musimy dodać naszą standardową sekcję i 1 wiersz kolumny, a następnie sam moduł zakładek Divi. W module kart musimy tylko dodać nasze tytuły i zawartość do każdej karty, ponieważ będziemy obsługiwać style w kolejnych krokach.
Gdy nasza zawartość jest już na miejscu, musimy zacząć dodawać zawartość do elementu ::before modułu. Ponieważ nie możemy dodać niestandardowego kodu CSS do określonych kart przy użyciu metody, którą zastosowaliśmy powyżej, musimy to zrobić nieco inaczej.
Otwórz opcje modułu kart i na karcie Zaawansowane nadaj modułowi klasę „fancy-tabs”.
Po dodaniu tej klasy CSS musimy trochę się przygotować. Aby dodać kilka ikon lub obrazów do tytułów zakładek, musimy oczywiście dodać je do WordPressa. Przejdź do zakładki Media na pulpicie WordPress i prześlij wybrane ikony w normalny sposób.
Po przesłaniu zdjęć musimy kliknąć każdy z nich i skopiować adres URL wygenerowany dla nas przez WordPress. Przejrzyj każdy ze swoich obrazów i skopiuj i wklej te adresy URL do dokumentu lub wybranej aplikacji do notatek.
Mając pod ręką adresy URL wybranych obrazów, przejdź do opcji motywu Divi w menu Divi na pulpicie nawigacyjnym WordPress.
Na dole tej strony zobaczysz pole, w którym możesz dodać własny niestandardowy kod CSS. W tym polu będziemy wklejać kod CSS.
Poniższy fragment kodu doda obrazy nad tytułem każdej karty. Po prostu skopiuj i wklej ten fragment kodu do niestandardowego pola CSS i zastąp zawartość między gwiazdkami (włącznie z nimi) (np. *Zastąp to adresem URL pierwszego obrazu*) wcześniej podanymi adresami URL.
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
Jeśli wrócisz na stronę z włączonym modułem kart, powinieneś teraz zobaczyć, że obrazy zostały dodane nad każdym tytułem – sukces!
A co z dodawaniem opisów? Na szczęście jest to również dość proste. Tuż pod kodem, który właśnie skopiowałeś do niestandardowego pola CSS, wklej następujące elementy:
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
Tak jak poprzednio w przypadku obrazów, wyrażenie „to jest opis” musisz zastąpić własną treścią. Wracając do strony z włączonym modułem kart, zobaczysz, że mamy teraz również ciekawe opisy!
Na koniec musimy tylko zastosować trochę więcej CSS, aby osiągnąć kompletny projekt pokazany powyżej. Ponownie skopiuj następujący fragment kodu do tego samego niestandardowego pola CSS:
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
Ten kod wyśrodkowuje tekst i obrazy karty oraz zwiększa szerokość kart, aby objąć cały moduł.
Dodaliśmy również kod CSS, aby karty wyglądały dobrze na wszystkich urządzeniach – jeśli wolisz, aby karty nie miały pełnej szerokości i stosu na urządzeniach mobilnych, musimy cofnąć się i otoczyć oryginalny kod CSS w zapytaniu o media. Oznacza to, że na urządzeniach wielkości tabletu i szerszych dodamy opisy i ikony, natomiast na mniejszych urządzeniach powrócimy do domyślnej stylizacji Divi.
Aby to zrobić, skopiuj poprawiony kod CSS poniżej i wklej go w niestandardowym obszarze CSS w panelu opcji motywu Divi:
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
Dodawanie kolejnych kart
W tym przypadku stworzyliśmy moduł zakładek, który zawiera 2 różne zakładki, jednak w praktyce czasami wymagamy więcej. Jeśli jesteś w sytuacji, w której chcesz utworzyć więcej niż 2 karty, będziemy musieli zmienić właśnie dodany kod.
Jak widać z fragmentu kodu, Divi automatycznie przypisuje klasę do tytułu każdej zakładki – pierwsza zaczyna się od 0 (.et_pb_tab_0), zwiększając za każdym razem o 1 (.et_pb_tab_1, .et_pb_tab_2 i tak dalej). Zajęliśmy się już dwoma pierwszymi zakładkami, więc dodając kolejne, możemy po prostu skopiować i wkleić sekcję kodu dla każdej nowej zakładki:
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
i zmień numer w klasie (.et_pb_tab_0) na 2, 3, 4 itd. To samo musisz zrobić dla swoich opisów.
Ostatnią poprawką, jaką musimy wprowadzić, jest dostosowanie jeszcze jednej linii CSS. Weź liczbę swoich kart i podziel ją przez 100. Zanotuj tę liczbę i przejdź do następującej sekcji w niestandardowym arkuszu CSS:
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
i zamień 50% swoją odpowiedzią. Zapewni to równomierne rozmieszczenie zakładek na całej szerokości modułu.
Na przykład, jeśli tworzysz trzecią kartę, dodatkowy kod CSS, którego potrzebujesz, będzie wyglądał następująco:
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
W zamknięciu
I oto mamy to, trzy świetne sposoby na wykorzystanie elementów CSS ::before i ::after do stworzenia nowych możliwości projektowych. Mam nadzieję, że ten przewodnik zainspiruje Cię do zbadania, w jaki sposób możesz wykorzystać pseudo-elementy w swoich przyszłych kreacjach – możliwości naprawdę są nieograniczone!