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.

Moduł Divi z odbiciami

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:

  1. Utwórz moduł ze swoim obrazem lub tekstem
  2. Powiel moduł i użyj skali transformacji, aby utworzyć lustrzane odbicie lub tekst
  3. 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.

Dodaj sekcję divi

Następnie dodaj moduł obrazu do linii.

Moduł obrazu Divi

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

Modyfikacja stylu CSS

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.

Zrób odbicie divi

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.

Dodaj moduł tekstowy divi

Usuń to treść domyślnie, aby moduł tekstowy był pusty.

Divi Refleksje dla tekstu i obrazów

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.

Moduł tekstowy Divi

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ół

Zmodyfikuj styl linii Divi

Zobaczmy teraz wynik.

Moduł Divi z odbiciami

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.