Używanie ikon prezentacji jako elementów estetycznych może nadać układowi niepowtarzalny wygląd, o którym wcześniej nie pomyślałeś. Oprócz umieszczenia ikony modułu prezentacji w celu zakrycia modułu tekstowego, możesz użyć tła i obramowania modułu tekstowego do stylizacji ikony. Tworzy to ładny akcent projektowy, który oprawia zawartość, jednocześnie nadając ikonom całkowicie unikalny wygląd.
W tym samouczku pokażę, jak stylizować ikony prezentacji jako akcenty projektowe dla treści w Divi.
badanie
Oto kilka przykładów projektu, który zbudujemy w tym samouczku.
Pobierz przykładowe układy tego samouczka
Aby zapoznać się z układem wzorów akcentów modułu notki wolny, musisz go najpierw pobrać za pomocą poniższego przycisku. Aby uzyskać dostęp do plików do pobrania, musisz zapisać się na naszą listę mailingową Divi Daily za pomocą forma poniżej. Jako nowy subskrybent będziesz otrzymywać w każdy poniedziałek jeszcze więcej dobroci Divi i pakiet Divi Layout wolny ! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij Pobierz. Nie zostaniesz „ponownie zarejestrowany” ani nie będziesz otrzymywać dodatkowych e-maili.
Pobierz
Zacznij od projektu od zera
Aby rozpocząć, utwórz nową stronę i nadaj swojej stronie tytuł. Następnie zainstaluj kreatora Divi w systemie części publicznych. Dodaj zwykłą sekcję z wierszem jednej kolumny. Przed dodaniem pierwszego modułu zaktualizuj ustawienia wiersza, wprowadzając następujące elementy:
Użyj niestandardowej szerokości rynny: TAK
Niestandardowa szerokość rynny: 1
Wyeliminuje to wszelkie niestandardowe marginesy między modułami.
Tworzenie modułu tekstowego
Następnie dodaj moduł tekstowy wewnątrz linii.
Zaktualizuj moduł tekstowy o następujący tekst wypełnienia:
Nasze Usługi ta sekcja wyświetla listę różnych usług, które oferujemy naszym klientom.
Stylizuj moduł tekstowy
Teraz zaktualizuj resztę parametru modułu Tekst w następujący sposób:
- Kolor tła: #ffffff
- Nagłówek 2 Czcionka: Nunito
- Tytuł 2 Waga czcionki: Bold
- Tytuł 2 Styl czcionki: TT
- Tytuł 2 Kolor tekstu: #f24a5b
- Tytuł Rozmiar tekstu 2: 42 pikseli (komputer stacjonarny), 32 pikseli (tablet), 22 pikseli (telefon)
- Tytuł 2 Letter Spacing: 16px
- Tytuł 2 Line Height: 1.3em
- Szerokość: 500px (desktop), 490px (tablet)
- Wyrównanie modułu: centrum
- Niestandardowe wypełnienie (pulpit): 40px u góry, 40px u dołu, 50px po lewej stronie, 50px po prawej
- Niestandardowe wypełnienie (telefon): 20px po lewej stronie, 20px po prawej stronie
- Szerokość obramowania: 10px
- Kolor obramowania: #ffffff
Ponieważ mamy zamiar nałożyć moduł tekstowy na ikony prezentacji, musimy upewnić się, że moduł tekstowy znajduje się nad ikonami w kolejności z odstępem. Aby to zrobić, musimy najpierw dodać następujący fragment kodu CSS w obszarze CSS głównego elementu modułu Text:
pozycja: względna;
Następnie ustaw wartość indeksu Z na 1.
Teraz ten moduł tekstowy zostanie umieszczony na wierzchu innych modułów, które się nakładają, co jest ważne dla projektu.
Utwórz ikonę Blurb
Teraz jesteśmy gotowi stworzyć pierwszą ikonę notki. Aby to zrobić, musimy najpierw dodać moduł Blurb i przeciągnąć go na górę modułu tekstowego. Następnie usuń treść symbol zastępczy (tekst tytułu i treść) i kliknij, aby użyć ikony zamiast obrazu w tekście notki.
Następnie zaktualizuj następujące parametry projektu:
- Kolor ikony: # 2ea3f2
- Użyj rozmiaru czcionki ikony: TAK
- Rozmiar czcionki ikony: 100px
- Niestandardowy margines: 0px na dole (usuwa domyślny dolny margines między modułami, niepotrzebny, jeśli używasz szerokości rynny 1)
Następnie, ponieważ nie używamy żadnego tekstu z modułem (tylko ikona), możemy usunąć domyślny dolny margines pod ikoną układu. Aby to zrobić, dodaj następujący niestandardowy kod CSS do obszaru Blurb Image CSS:
Blurb Image CSS:
margin-bottom: 0px
Powiel ikonę napisu
Zanim zaczniemy pozycjonować notkę, przejdźmy dalej, zduplikuj moduł blurb i przeciągnij go pod moduł tekstowy. Powinieneś teraz mieć ikonę prezentacji powyżej i poniżej modułu tekstowego.
Pozycjonowanie ikon prezentacji za pomocą funkcji Przekształć Tłumacz
Do pozycjonowania ikon prezentacji wykorzystamy opcje transformacji Divi, które pozwalają nam umieścić moduł prezentacji z ikoną w dowolnym miejscu na stronie.
Pozycjonowanie ikony blurb #1
Aby ustawić ikonę górnej etykiety, otwórz ustawienia modułu etykiety i zaktualizuj następujące elementy:
- Przekształć oś X (pulpit): -242px
- Przekształć translację osi Y (komputer): 50px
- Przekształć translate oś X (telefon): -170px
Możesz jednak dodać to zgodnie z dokonanymi ustawieniami.
Pozycjonowanie ikony blurb # 2
Przed umieszczeniem tej ikony prezentacji powiększmy ją. Aby to zrobić, otwórz ustawienia modułu Blurb i zmień rozmiar czcionki ikony na 150px.
Następnie umieść ikonę prezentacji, aktualizując następujące opcje transformacji:
- Przekształć oś X (pulpit): 242px
- Przekształć translację osi Y (komputer): -100px
- Przekształć translate oś X (telefon): 190px
Utworzenie kolejnej sekcji
Od teraz możemy inspirować się tym, co zrobiliśmy, aby stworzyć kolejną strefę z inną aranżacją. Wszystko, co musisz zrobić, to utworzyć nową kolumnę i skopiować poprzednie moduły. Aby wykonać wiele kopii, najedź kursorem na każdy moduł, przytrzymując klawisz CTRL na klawiaturze.
Ostateczny wynik
Zobaczmy teraz końcowy wynik.
końcowe przemyślenia
Dodawanie ikon prezentacji jako akcentów projektowych do Twojego treść to przykład, jak można połączyć dwa moduły, aby stworzyć całkowicie unikalny projekt. W tym przypadku tło i obramowanie modułu tekstowego stanowią częściową nakładkę na otaczające go ikony. Rezultat jest wyjątkowy i otwiera drzwi do odkrywania kilku wariantów projektowych. Zachęcamy do odkrywania różnych ikon i kombinacji kolorów, aby stworzyć coś dla własnych potrzeb.
Mam nadzieję, że usłyszę od Ciebie w komentarzach.
