Projektowanie wyróżnień obrazów i tekstu to klasyczna technika projektowania, którą można wykorzystać do urozmaicenia treść strony internetowej. Ponadto Divi ułatwia tworzenie tych odbić bezpośrednio z Divi Builder, bez konieczności korzystania z edytora zdjęć.
W tym samouczku pokażę, jak zaprojektować odbicia dla obrazów w Divi. Kluczem do wykonywania odbić jest użycie opcji transformacji Divi w celu stworzenia lustrzanej wersji przedmiotu. Następnie możesz dodać niestandardową nakładkę, której pokażę Ci, jak używać z modułem tekstowym.
Zacznijmy!
badanie
Oto przegląd projektów, które zbudujemy w tym samouczku.
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, potrzebujesz tylko Divi. Upewnij się, że Motyw Divi jest zainstalowany i aktywny. Będziemy tworzyć nasze projekty od podstaw za pomocą Divi Builder na froncie (konstruktor wizualny). Do tego samouczka będziesz potrzebować również fikcyjnych obrazów (obraz tła o wymiarach około 1920 x 600 pikseli i inny obraz o wymiarach około 500 x 350 pikseli).
Kiedy będziesz gotowy, przejdź do pulpitu WordPress i przejdź do Strony> Dodaj. Nadaj swojej nowej stronie tytuł i wdróż Divi Builder w interfejsie użytkownika. Wybierz opcję „Buduj od podstaw”. Teraz jesteś gotowy do pracy!
Podstawowa idea tworzenia obrazu i odbicia tekstu w Divi
Podstawowa idea tworzenia wzorców odbić w Divi obejmuje trzy kroki:
- Utwórz moduł ze swoim obrazem lub tekstem
- Powiel moduł i użyj skali transformacji, aby utworzyć lustrzane odbicie lub tekst
- Dodaj gradientową nakładkę do lustrzanego elementu za pomocą separatora lub absolutnie pozycjonowanego modułu tekstowego.
Ta technika projektowania nie ogranicza się do pojedynczych modułów. W rzeczywistości możesz dodawać odbicia do całych wierszy w Divi za pomocą tej metody, co jest przydatne do tworzenia unikalnych projektów nagłówków. W dalszej części tego samouczka dodamy odbicie do wiersza naszego projektu odbicia tekstu. Ale na razie zacznijmy od stworzenia odbicia obrazu.
Jak stworzyć odbicie obrazu
Aby utworzyć odbicie obrazu, zacznijmy od utworzenia nowej zwykłej sekcji z wierszem jednej kolumny.
Następnie dodaj moduł obrazu do linii.
Pobierz żądany obraz z biblioteki multimediów do modułu obrazu. Następnie zaktualizuj następujące ustawienia obrazu:
Maksymalna szerokość: 600px
Wyrównanie modułu: centrum
Margines niestandardowy: 0px na dole
Utwórz odbicie lustrzane
Aby stworzyć efekt odbicia, musimy najpierw utworzyć zduplikowaną kopię obrazu bezpośrednio pod obrazem.
Aby to zrobić, zduplikuj moduł obrazu. Następnie zaktualizuj ustawienia zduplikowanego obrazu w następujący sposób:
Krycie: 40%
Oś X skali transformacji: -100%
Właściwość Skala transformacji jest tym, co magicznie odwraca obraz w pionie i poziomie, tworząc lustrzaną wersję obrazu.
Obsługuje to podstawowy projekt odbicia. Możemy jednak dodać dodatkową nakładkę gradientu do naszego dolnego obrazu, aby uzyskać bardziej realistyczny projekt odbicia.
Dodaj gradientową nakładkę za pomocą modułu tekstowego
Aby dodać nakładkę gradientową do naszego dolnego obrazu, możemy użyć modułu tekstowego. Możemy nadać modułowi tekstowemu pozycję bezwzględną, tak aby znajdował się nad dolnym obrazem. Następnie możemy dodać gradientowe tło do modułu tekstowego. Użycie modułu tekstowego (zamiast separatora) daje dodatkową możliwość dodawania treść w razie potrzeby nad obrazem odbicia później.
Śmiało i utwórz moduł tekstowy pod dolnym obrazem.
Usuń to treść domyślnie, aby moduł tekstowy był pusty.
Następnie zaktualizuj ustawienia modułu tekstowego w następujący sposób:
Gradient po lewej stronie Kolor: rgba (255,255,255,0)
Gradient tła z prawej Kolor: #ffffff
Szerokość: 100%
Wysokość: 50%
Następnie dodaj następujący niestandardowy kod CSS do głównego elementu:
pozycja: absolutna! ważna; góra: 50%;
To bezwzględne ustawienie modułu tekstowego nakłada moduł tekstowy na dolną połowę wiersza.
Dodanie koloru tła
Jeśli nie chcesz białego tła, możesz użyć innych kolorów tła, aby utworzyć wzór odbicia na całej szerokości.
Aby to zrobić, otwórz ustawienia linii i zaktualizuj następujące elementy:
Kolor tła: #000000
Szerokość: 100%:
Maksymalna szerokość: 100%;
Niestandardowe dopełnienie: 0px wysoki, 0px w dół
Zobaczmy teraz wynik.
Odbicia mogą wyglądać naprawdę fajnie, jeśli poświęcisz czas na ich odpowiednie zaprojektowanie. Na szczęście Divi ma narzędzia odnieść sukces. Istnieją inne metody wykonywania odbić CSS, ale niestety brakuje im wsparcia ze strony przeglądarek. Projekty przedstawione w tym samouczku będą wyglądać świetnie we wszystkich przeglądarkach.
Zauważyłem, że odbicia świetnie wyglądają w nagłówkach stron i podczas prezentowania obrazów pozycji portfolio. Jestem pewien, że istnieje wiele innych implementacji.
To wszystko w tym samouczku, mam nadzieję, że pozwoli ci to dodać refleksje na twojej stronie WordPress przy użyciu wewnętrznych funkcji Divi.