Jak zaprojektować odbicia obrazów i tekstu w Divi
Opublikowany: 2019-05-19Projektowanie odbić dla obrazów i tekstu to klasyczna technika projektowania, której można użyć do urozmaicenia zawartości strony internetowej. A Divi ułatwia tworzenie tych odbić bezpośrednio z Divi Builder bez konieczności korzystania z edytora zdjęć.
W tym samouczku pokażę, jak projektować odbicia obrazów i tekstu w Divi. Kluczem do tworzenia odbić jest użycie opcji skali transformacji Divi, aby stworzyć lustrzaną wersję elementu. Następnie możesz dodać niestandardową nakładkę, którą pokażę ci, jak to zrobić z modułem tekstowym.
Zacznijmy!
zapowiedź
Oto zapowiedź projektów, które zbudujemy w tym samouczku.
Pobierz układ odbić tekstu i obrazu ZA DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Subskrybuj nasz kanał YouTube
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ż kilku próbnych 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 nawigacyjnego WordPress i przejdź do Strony> Dodaj nowy. Nadaj swojej nowej stronie tytuł i zainstaluj Divi Builder na interfejsie. Wybierz opcję „Buduj od podstaw”. Teraz jesteś gotowy do drogi!
Podstawowa idea tworzenia odbicia obrazu i tekstu w Divi
Podstawowa idea tworzenia projektów odbić w Divi obejmuje trzy kroki:
- Utwórz moduł ze swoim obrazem lub tekstem
- Powiel moduł i użyj skali transformacji, aby utworzyć lustrzany obraz lub tekst
- Dodaj nakładkę gradientową do lustrzanego elementu, używając dzielnika pozycjonowanego bezwzględnie lub modułu tekstowego.
Ta technika projektowania nie ogranicza się do pojedynczych modułów. W rzeczywistości możesz dodać odbicia do całych wierszy w Divi, korzystając z tej metody, która jest pomocna przy tworzeniu unikalnych projektów nagłówków. W dalszej części tego samouczka dodamy odbicie do wiersza w naszym projekcie odbicia tekstu. Ale na razie zacznijmy od tego, jak stworzyć odbicie obrazu.
Jak stworzyć odbicie obrazu
Aby utworzyć odbicie obrazu, zacznijmy od utworzenia nowej zwykłej sekcji z jednym wierszem kolumny.
Następnie dodaj moduł obrazu do wiersza.
Prześlij żądany obraz z galerii multimediów do modułu obrazu. Następnie zaktualizuj następujące ustawienia obrazu:
Maksymalna szerokość: 600px
Wyrównanie modułu: środek
Margines niestandardowy: 0px dół
Utwórz lustrzany obraz
Aby stworzyć efekt odbicia, najpierw musimy stworzyć lustrzaną kopię obrazu bezpośrednio pod obrazem.
Aby to zrobić, zduplikuj moduł obrazu. Następnie zaktualizuj ustawienia duplikatu obrazu w następujący sposób:
Krycie: 40%
Przekształć oś X skali: -100%
Właściwość transform scale w magiczny sposób odwraca obraz w pionie i poziomie, tworząc lustrzaną wersję obrazu.
Dba to o podstawowy projekt odbicia. Możemy jednak dodać dodatkową nakładkę gradientową do naszego dolnego obrazu, aby uzyskać bardziej realistyczny projekt odbicia.
Dodaj nakładkę gradientową 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 dzielnika) da ci dodatkową opcję dodania treści na górze obrazu odbicia później, jeśli chcesz.
Śmiało i utwórz moduł tekstowy pod dolnym obrazem.
Usuń zawartość domyślną, aby moduł tekstowy był pusty.
Następnie zaktualizuj ustawienia modułu tekstowego w następujący sposób:
Kolor lewego gradientu tła: rgba (255,255,255,0)
Prawy kolor gradientu tła: #ffffff
Szerokość: 100%
Wzrost: 50%
Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:
position: absolute !important; top: 50%;
To bezwzględne pozycjonowanie modułu tekstowego nakłada się na moduł tekstowy w dolnej połowie wiersza.
Sprawdźmy, jak do tej pory wygląda projekt.
Dodawanie koloru tła
Jeśli nie chcesz białego tła, możesz poeksperymentować z innymi kolorami tła, co stworzy unikalny wzór odbicia na całej szerokości.
Aby to zrobić, otwórz ustawienia wiersza i zaktualizuj następujące elementy:
Kolor tła: #000000
Szerokość: 100%:
Maksymalna szerokość: 100%;
Niestandardowe wypełnienie: 0px na górze, 0px na dole
Sprawdźmy teraz wynik.
Dodawanie tekstu do nakładki modułu tekstowego
Pamiętaj, ponieważ używamy modułu tekstowego jako nakładki na dolny obraz, możemy dodać trochę treści, jeśli chcemy.
Aby to zrobić, otwórz ustawienia modułu tekstowego i zaktualizuj następujące elementy:
Treść: „Odbicie obrazu”
Kolor tekstu: #ffffff
Rozmiar tekstu: 30px
Orientacja tekstu: środek
Ostateczny projekt
Oto ostateczny projekt odbicia obrazu.
Tworzenie odbicia tekstu w Divi
W następnym przykładzie stworzymy projekt odbicia tekstu. Proces jest bardzo podobny do tworzenia odbicia obrazu. Jednak w tym przykładzie stworzę odbicie dla całego wiersza. Umożliwi to odzwierciedlenie zarówno tekstu, jak i obrazu tła w celu uzyskania ładnego projektu nagłówka.
Oto jak to zrobić.
Najpierw utwórz nową zwykłą sekcję z jednym wierszem kolumny. Następnie dodaj moduł tekstowy do wiersza.
Zaktualizuj treść słowem „Odbicie”.
Następnie zaktualizuj ustawienia projektu w następujący sposób:
Czcionka tekstu: Oswald
Styl czcionki tekstu: TT
Kolor tekstu tekstu: #333333
Rozmiar tekstu: 10vw
Wysokość linii tekstu: 0,9 em
Orientacja tekstu: środek
Margines niestandardowy: 0px dół
Niestandardowa wyściółka: góra 4vw
Zaktualizuj ustawienia wiersza
Teraz, gdy nasz moduł tekstowy jest dostosowany, nadszedł czas, aby zaktualizować ustawienia wiersza.
Otwórz ustawienia wiersza i zaktualizuj następujące elementy:
Obraz tła: wstaw obraz tła
Szerokość rynny: 1
Szerokość: 100%
Maksymalna szerokość: 100%
Niestandardowe wypełnienie: 0px na górze, 0px na dole
Oto jak wygląda projekt do tej pory.
Tworzenie wiersza tekstu odbicia
Aby utworzyć tekst odbicia dla tego projektu, odzwierciedlimy cały wiersz, aby w odbiciu uwzględnić obraz tła.
Powiel wiersz i zaktualizuj następujące elementy:
Przekształć oś Y skali: -100%
Teraz wiersz poniżej jest lustrzanym odbiciem wiersza powyżej. Teraz wystarczy dodać nakładkę.
Dodaj nakładkę gradientową za pomocą modułu tekstowego
Aby dodać nakładkę gradientową do naszego odbicia tekstu w dolnym wierszu, możemy użyć modułu tekstowego, tak jak zrobiliśmy to w pierwszym projekcie odbicia obrazu powyżej. Tak jak poprzednio, możemy nadać modułowi tekstowemu pozycję bezwzględną, aby wypełnił cały wiersz i znalazł się nad innym modułem tekstowym naszym tekstem odbicia. Następnie możemy dodać gradientowe tło do nakładki modułu tekstowego.
Śmiało i utwórz nowy moduł tekstowy pod modułem tekstowym w dolnym rzędzie.
Otwórz nowe ustawienia modułu tekstowego i usuń zawartość, aby moduł tekstowy był pusty.
Następnie zaktualizuj ustawienia w następujący sposób:
Kolor lewego gradientu tła: #ffffff
Prawy gradient tła: rgba (255,255,255,0.13)
Pozycja startowa: 38%
Szerokość: 100%
Wzrost: 100%
Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:
position: absolute !important; top: 0;
Otóż to!
Ostateczny wynik
Sprawdź efekt końcowy.
Oto ten sam projekt bez żadnych obrazów tła.
Końcowe przemyślenia
Refleksje mogą wyglądać naprawdę fajnie, jeśli poświęcisz czas na zaprojektowanie ich we właściwy sposób. Na szczęście Divi ma narzędzia, aby to się stało. Istnieją inne metody tworzenia odbić CSS, ale niestety brakuje im obsługi wielu przeglądarek. Projekty w tym samouczku będą dobrze wyglądać we wszystkich przeglądarkach.
Odkryłem, że odbicia świetnie wyglądają w nagłówkach stron i na prezentacjach obrazów dla fragmentu portfolio. I jestem pewien, że jest też wiele innych wdrożeń.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!