Czy chcesz dowiedzieć się, jak projektować niestandardowe nakładki graficzne za pomocą Divi ?
Nakładki graficzne są obecne w projektowaniu stron internetowych od dawna. Idealnie nadają się do zaangażowania odwiedzający ujawniając treść Elementy dodatkowe i projektowe po najechaniu kursorem na obraz.
W tym samouczku pokażemy, jak zaprojektować niestandardowe nakładki graficzne w Divi. Te nakładki zmienią się i odsłonią elementy po najechaniu na obraz.
Żadne wtyczki nie są potrzebne.
Zacznijmy!
badanie
Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.
Utwórz nową stronę za pomocą Divi Builder
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Zastosowanie Divi Budowniczy
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Tworzenie niestandardowych nakładek obrazów w Divi
Zaprojektuj sekcję, wiersz i kolumny
Aby rozpocząć, utwórz wiersz z trzema kolumnami w sekcji domyślnej.
Otwórz ustawienia sekcji i dodaj następujący kolor tła:
- Tło: #3a0ca3
Następnie otwórz ustawienia kolumny 1 i zaktualizuj następujące elementy:
- Klasa CSS: et-overlay-container
- Przepełnienie poziome: ukryte
- Przepełnienie pionowe: ukryte
Dodaj obraz
Teraz, gdy sekcja, wiersz i kolumna są gotowe, dodaj nowy moduł obrazu do kolumny 1. Będzie to główny obraz za naszymi projektami nakładek.
Prześlij obraz, który bardziej przypomina portret niż krajobraz. Upewnij się, że jest wystarczająco szeroki, aby pokryć pełną szerokość kolumny we wszystkich rozmiarach przeglądarki.
UWAGA: Możesz użyć obrazów poziomych, ale może być konieczne odpowiednie dostosowanie położenia elementów nakładki, aby się nie nakładały.
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Margines (dolny): 0px
Pod zakładką Zaawansowane, dodaj następującą klasę CSS:
- Klasa CSS: et-overlay-image
Dodawanie koloru nakładki obrazu za pomocą modułu „Divider”
Aby utworzyć kolor nakładki obrazu, użyjemy modułu Divider.
Najpierw dodaj moduł rozdzielacza pod obrazem.
Następnie umieść separator w pozycji bezwzględnej, tak aby znajdował się nad obrazem:
- Pozycja: bezwzględna
Pod zakładką Treść, zaktualizuj następujące informacje:
- Pokaż dzielnik: NIE
- Kolor tła: rgba (247,37,133,0.8)
Następnie zaktualizuj wysokość i szerokość separatora:
- Szerokość: 100%
- Wzrost: 100%
Gdy projekt jest już gotowy, dodaj do rozdzielacza następującą klasę CSS:
- i-nakładka-element
UWAGA: Tę klasę należy dodać do wszystkich elementów projektu nakładki, które mają być wyświetlane tylko po najechaniu myszą. Jeśli nie chcesz, aby element był początkowo ukryty, pomiń go.
Aby ułatwić śledzenie elementów/modułów projektu, otwórz modalne warstwy i oznacz moduł Przegroda („Kolor nakładki”).
Dodano tekst nagłówka nakładki
W module Dzielnik dodaj nowy moduł Tekst. Będzie to tekst nagłówka nakładki, który pojawi się nad obrazem po najechaniu myszą.
Zaktualizuj treść z tytułem H2:
<h2>Coaching</h2>Następnie zaktualizuj etykietę modułu tekstowego, aby móc z niej skorzystać w przyszłości.
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu: jasny
- Czcionka: Kormoran Garamond
- Waga czcionki: pogrubiona
- Rozmiar tekstu: 40px
- Szerokość: 100%
- Maksymalna szerokość: 85%
Pod zakładką Zaawansowane, zaktualizuj pozycję w następujący sposób:
- Pozycja: bezwzględna
- Lokalizacja: górne centrum
- Przesunięcie w pionie: 10%
UWAGA: Przesunięcie pionowe może wymagać dostosowania w zależności od rozmiaru proporcji obrazu. Na przykład obraz typu poziomego może wymagać mniejszego przesunięcia
Następnie dodaj następujące klasy CSS do modułu tekstowego:
- Klasa CSS: et-overlay-item move-down
Oprócz klasy „i-nakładka-pozycja”, dodajemy dodatkową klasę "padnij" aby użyć niestandardowego CSS, aby przesunąć nagłówek nieco w dół po najechaniu myszą.
Tworzenie nałożonego tekstu głównego
Aby utworzyć nakładkę tekstu głównego, możemy zduplikować moduł Tekst używany do nakładki nagłówka. Przed aktualizacją zduplikowanych parametrów zmień etykietę na „Overlay Body”.
Otwórz ustawienia tekstu nowego modułu Tekst i zaktualizuj plik treść ciała za pomocą kilku zdań tekstu akapitu.
Pod zakładką Zaawansowane, zmień bezwzględną lokalizację modułu na środek.
Ponieważ nie chcemy, aby to przesuwało się po najechaniu kursorem (tylko pojawia się), zaktualizuj klasę CSS, aby zawierała tylko następujące elementy:
- Klasa CSS: et-overlay-item
Tworzenie przycisku nakładki
Ostatnią nakładką na tym obrazie będzie przycisk. Aby utworzyć przycisk, dodaj nowy moduł Button poniżej drugiego modułu Text.
Przed modyfikacją projektu zaktualizuj położenie przycisku w następujący sposób:
- Pozycja: bezwzględna
- Przesunięcie w pionie: 10%
Teraz przycisk powinien być wyśrodkowany w dolnej części obrazu.
W zakładce Zaawansowane, zaktualizuj klasę CSS i dodaj niestandardowy fragment kodu CSS do głównego elementu w następujący sposób:
- Klasa CSS: et-overlay-item move-up
- Główny element CSS:
min-width: 15em;Zwróć uwagę, że do przycisku została dodana dodatkowa klasa, aby po najechaniu kursorem przesunąć go nieco w górę. Ma to uzupełnić ruch w dół tekstu nagłówka po najechaniu myszą.
Następnie zaktualizuj następujące ustawienia projektu:
- Wyrównanie przycisków: wyśrodkowane
- Użyj niestandardowych stylów dla przycisku: TAK
- Rozmiar tekstu przycisku: 14px
- Kolor tła: #4361ee
- Szerokość obramowania przycisku: 0 pikseli
- Odstępy między literami przycisków: 0,1 em
- Waga czcionki: pogrubiona
- Styl czcionki przycisku: TT
- Padding: 0,8em (góra i dół), 0px (lewy i prawy)
Dodawanie własnego CSS za pomocą modułu Code
Dodaj moduł kodu poniżej przycisku.
Następnie wklej następujący kod CSS do treści kodu. Nie zapomnij opakować kodu w niezbędne znaczniki skryptu.
<style>
@media all and (min-width: 981px) {
.et-fb-root-ancestor .et-overlay-item {
opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
}
.et-overlay-item {
opacity: 0; /*hides overlay items by default*/
margin-bottom: 0px;
}
.et-overlay-item, .et-overlay-image {
transition: all 400ms !important; /*sets transition speed of all overlay items*/
}
.et-overlay-container:hover .et-overlay-item {
opacity: 1; /*reveals hidden overlay items on hover*/
}
.et-overlay-container:hover .et-overlay-image {
/*add new styles here to change image on hover*/
}
.et-overlay-container:hover .et-overlay-image.et-scale {
transform: scale(1.2); /*adjust scale of image here*/
}
.et-overlay-container:hover .et-overlay-image.et-rotate {
transform: scale(1.4)
rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
}
.et-overlay-container:hover .et-overlay-item.move-up {
margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
}
.et-overlay-container:hover .et-overlay-item.move-down {
margin-top: 10%; /*adjust how far you want the overlay item to move down*/
}
}
</style>
Kod jest skomentowany, dzięki czemu możesz zrozumieć, gdzie możesz dostosować CSS do swoich potrzeb.
Powiel kolumnę, aby uzyskać więcej projektów
Otwórz warstwę modalną, najpierw usuń dwie puste kolumny.
Następnie dwukrotnie zduplikuj kolumnę zawierającą projekt nakładki obrazu. Powinieneś mieć w sumie trzy kolumny o identycznych wzorach.
Tworzenie projektu nakładki obrazu #2
W następnym projekcie umieścimy przycisk na środku obrazu (zawsze widoczny). Następnie przeniesiemy nagłówek i treść do widoku z góry i dołu obrazu.
Dostosuj położenie tekstu głównego i klasę CSS
Otwórz ustawienia modułu tekstu nakładki w kolumnie 2 i zaktualizuj pozycję:
- Lokalizacja: dolny środek
- Przesunięcie w pionie: 5%
Następnie zaktualizuj klasę CSS w następujący sposób:
- Klasa CSS: et-overlay-item move-up
Dostosuj położenie przycisku i klasę CSS
Następnie otwórz ustawienia przycisku w kolumnie 2 i zaktualizuj następującą lokalizację pozycji:
- Lokalizacja: Centrum
Następnie usuń klasę CSS, ponieważ chcemy, aby przycisk był zawsze widoczny.
Otwórz ustawienia modułu Przegroda (kolor nakładki) i zmień tło w następujący sposób:
- Tło: rgba (67,97,238,0.8)
Następnie otwórz ustawienia przycisku i zmień kolor tła:
- Kolor tła: #f72585
Dostosuj obraz i klasę CSS
Następnie otwórz ustawienia obrazu i prześlij nowy obraz (w razie potrzeby).
Następnie dodaj następującą klasę CSS do obrazu:
- Klasa CSS: et-overlay-image et-scale
Zwróć uwagę, że oprócz klasy „et-overlay-image” istnieje dodatkowa klasa o nazwie „et-scale”, która zwiększa rozmiar obrazu, tworząc efekt powiększenia po najechaniu myszą.
Tworzenie projektu nakładki obrazu #3
Teraz nadszedł czas, aby utworzyć trzeci projekt nakładki obrazu w kolumnie 3.
Dostosuj zawartość tekstu nakładki i klasę CSS
Zacznij od otwarcia ustawień modułu tekstu nakładki w kolumnie 3. Następnie dodaj nagłówek H2 nad tekstem akapitu. Teraz oba będą w module.
Następnie usuń klasę CSS, aby tekst pozostał widoczny nad obrazem.
Dostosuj przesunięcie przycisku i klasę CSS
Otwórz ustawienia modułu przycisku i zaktualizuj przesunięcie pozycji pionowej:
- Przesunięcie w pionie: 5%
Usuń nagłówek nakładki
Następnie usuń moduł Overlay Header Text.
Dostosuj kolor nakładki i klasę CSS
Otwórz ustawienia modułu Przegroda (kolor nakładki) i zaktualizuj tło do następującego:
- Kolor gradientu lewego tła: rgba (67,97,238,0.8)
- Prawy kolor gradientu tła: rgba (247,37,133,0.8)
- Pozycja wyjściowa: 25%
- Pozycja końcowa: 75%
A ponieważ chcemy, aby nakładka gradientu była widoczna przez cały czas, usuń klasę CSS.
Dostosuj klasę CSS obrazu
Na koniec dodamy dodatkową klasę CSS („et-rotate”) do głównego obrazu, która zmieni rozmiar i obróci obraz po najechaniu myszą.
- Klasa CSS: et-overlay-image i-rotate
Ostatnie poprawki
Zanim sprawdzimy nasze ostateczne wyniki, musimy wprowadzić pewne poprawki.
Usuń domyślny dolny margines dla wszystkich modułów
Ponieważ zaktualizowaliśmy już margines o dolny margines równy 0px, możemy rozszerzyć ten margines na wszystkie moduły.
Kliknij prawym przyciskiem myszy ustawienie marginesu i wybierz „Przedłuż marginesy”.
Następnie wybierz rozszerzenie marginesu do wszystkich modułów na stronie.
Usuń zduplikowane moduły kodu
Pamiętaj, aby usunąć dodatkowe moduły kodu, które zostały przeniesione z duplikacji pierwszej kolumny. Powinieneś mieć tylko jeden. Możesz to łatwo zrobić z warstw modalnych.
Ostateczne wyniki
Teraz, gdy nasze trzy projekty są gotowe, przyjrzyjmy się końcowym wynikom naszych projektów nakładek obrazów.
Pobierz DIVI teraz !!!
A oto projekt na telefon komórkowy. Efekty najazdu na nakładkę działają tylko na komputerze. Dlatego nakładki będą nadal widoczne na urządzeniach mobilnych.
Pobierz DIVI teraz !!!
Wnioski
Tworzenie niestandardowych nakładek graficznych to naprawdę świetna zabawa. Istnieje niezliczona ilość projektów, które możesz przetestować wizualnie za pomocą Divi Builder.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
