Jak oznaczyć obraz tła z angażującymi podpowiedziami w Divi

Dodanie etykietek do etykietowania obrazu tła to kreatywny sposób na zaangażowanie odwiedzających cennymi informacjami o Twoim produkcie lub usłudze. Podstawową ideą jest umieszczenie ikon (lub tekstu) w określonych lokalizacjach na obrazie (takich jak mapa google z punktami). A jeśli skorzystasz z efektów najechania Divi, możesz wyświetlić dodatkowy tekst po najechaniu kursorem na ikonę, aby utworzyć ciekawe podpowiedzi.

W tym samouczku pokażę, jak oznaczyć obraz tła notkami, które będą służyć jako podpowiedzi informacyjne o Twoim produkcie. W tym celu użyję strony docelowej siłowni fitness, aby oznaczyć obraz tła informacją o dobrej kondycji.

Zacznijmy.

Zajawka

Oto zajawka projektu, który zbudujemy w tym samouczku.

Czego potrzebujesz

Do tego samouczka potrzebne będą:

• Motyw Divi
• Strona docelowa siłowni fitness z pakietu układu siłowni fitness (dostępna w Divi Builder)
• Obraz do wykorzystania jako obraz tła o wymiarach dokładnie 320 na 507 pikseli. Przeciągnij go na pulpit i użyj go w tym samouczku.
  

Przygotowanie gotowego układu

Aby rozpocząć, utwórz nową stronę, dodaj tytuł, a następnie wdróż program Visual Builder. Następnie wybierz „Wybierz gotowy układ”. Z wyskakującego okna ładowania z biblioteki wybierz układ strony docelowej Fitness Gym i kliknij „Użyj tego układu”.

Po załadowaniu układu na stronę przewiń w dół do czwartej sekcji z wierszem w dwóch kolumnach, który ma tytuł „Polecane programy” w prawej kolumnie. Dodamy nasz obraz tła z podpowiedziami w lewej kolumnie tego wiersza.

Użyj wbudowanego edytora, aby zmienić tekst tytułu w prawej kolumnie na „Smart Fitness”.

Dodawanie obrazu tła i dostosowywanie ustawień wierszy

W przypadku tego projektu rozmiary i odstępy są kluczowe i będą musiały być precyzyjne. A wszystko zaczyna się od rozmiaru naszego obrazu tła. Jak wspomnieliśmy wcześniej, obraz, którego używamy jako tło, powinien mieć rozmiar 320 na 507 pikseli. Ponieważ szerokość 320 pikseli jest dobrym punktem wyjścia dla urządzeń mobilnych, pozwoli nam to uczynić projekt przyjaznym dla urządzeń mobilnych bez konieczności zmiany rozmiaru naszego obrazu.

Otwórz ustawienia wiersza i dodaj obraz tła do kolumny 1. Następnie zaktualizuj następujące elementy:

Rozmiar obrazu tła w kolumnie 1: Rozmiar rzeczywisty
Pozycja obrazu tła w kolumnie 1: Środek po lewej
Kolumna 1 Powtórzenie obrazu tła: Bez powtórzeń

Następnie musimy dodać niestandardową szerokość do rzędu i usunąć odstępy od góry i od dołu.

Szerokość niestandardowa: 700px
Niestandardowe wypełnienie: 0px na górze, 0px na dole

Ustawienie szerokości na 700px sprawi, że wiersz nie będzie mniejszy na mniejszych ekranach przed punktem przerwania tabletu.

Myślę, że w tym momencie dobrym pomysłem jest ustawienie określonej wysokości kolumny 1 równej wysokości obrazu tła. Dzięki temu wiemy, że obraz pozostanie widoczny, jeśli zawartość kolumny nie odsłoni całego obrazu. Aby to zrobić, przejdź do zakładki zaawansowane i dodaj następujący niestandardowy kod CSS w głównym elemencie kolumny 1:

height: 507px;

Teraz wysokość kolumny jest równa wysokości Twojego obrazu i nie będzie zależeć od zawartości (lub modułów), które dodamy do wiersza.

Dodawanie etykiet podpowiedzi na obrazie tła za pomocą Blurbs

Mając nasz obraz tła, możemy zacząć dodawać nasze notki, które zostaną ustawione i stylizowane tak, aby działały jako podpowiedzi. Śmiało i dodaj moduł notatek do kolumny 1 i zaktualizuj następujące ustawienia notatek:

Tytuł: „Skupienie”
Treść: „Klucz do sukcesu!”
Użyj ikony: Tak
Ikona: zobacz zrzut ekranu

Ważne jest, aby tytuł i treść składały się tylko z kilku słów, ponieważ chcemy, aby cała notka była zmieszczona w obrazie tła.

Następnie zaktualizujesz ustawienia projektu. Jest to bardziej zaawansowany projekt notki, więc istnieje wiele opcji do zmiany wraz z kilkoma efektami najechania kursorem, które ujawnią zawartość notki po najechaniu myszą. Zaktualizuj następujące ustawienia projektu notki:

Kolor ikony: #edf000
Ikona koła: TAK
Kolor koła: rgba(0,0,0,0)
Pokaż obramowanie koła: TAK
Kolor obramowania okręgu (domyślnie): rgba(0,0,0,0)
Kolor obramowania okręgu (najechanie): #edf000
Umieszczenie obrazu/ikony: po lewej
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 40px

Kontynuuj dostosowywanie ustawień projektu w następujący sposób:

Grubość czcionki tytułu: pogrubiona
Kolor tekstu tytułu (domyślny): rgba(0,0,0,0)
Kolor tekstu tytułu (domyślny): #edf000
Kolor tekstu podstawowego (domyślny): rgba(0,0,0,0)
Kolor tekstu podstawowego (domyślny): #ffffff

(Zwróć uwagę, że domyślne kolory tekstu są całkowicie przezroczyste, aby ukryć je, dopóki nie najedziesz kursorem na notatkę.)

Margines niestandardowy: 15px góra, 0px dół, 90px lewo
Niestandardowe dopełnienie: 5px góra, 5px dół, 5px prawo

(Margines niestandardowy to sposób umieszczania ikony rozmycia w określonym miejscu nad obrazem).

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: -154px
Pozycja pionowa cienia pudełka: 0px
Kolor cienia (domyślnie): rgba(0,0,0,0)
Kolor cienia (najechanie): #1e2441

(Cień pudełka to kreatywny sposób na dodanie koloru tła za treścią notki. Domyślnie cień pudełka jest całkowicie przezroczysty, ale po najechaniu kursorem będzie miał ładny niebieski kolor.)

Teraz przejdź i sprawdź końcowy wynik swojej pierwszej notki, aby upewnić się, że efekt najechania i projekt są prawidłowe.

Następnie możemy powielić moduł notki, aby utworzyć drugą etykietę podpowiedzi. Po zduplikowaniu notki możesz zaktualizować treść do dowolnego tekstu (niech będzie krótka). Następnie wszystko, co musisz zrobić, to ustawić etykietkę przy użyciu innego niestandardowego marginesu w następujący sposób:

Margines niestandardowy: 0px góra, 0px dół, 15px lewo

Aby utworzyć trzecią notatkę, możesz zduplikować drugą notkę.

W przypadku tej trzeciej notki zabraknie nam miejsca po prawej stronie naszego obrazu, więc naprawdę nie będziemy mieli zbyt wiele miejsca na treść. Moglibyśmy użyć ujemnego marginesu, aby rozszerzyć rozmycie poza obraz, ale wykroczyłoby to również poza rozmiar ekranu 320 pikseli na telefonie komórkowym. Wprowadzimy więc kilka małych fragmentów kodu, aby odwrócić naszą treść notatek tak, aby ikona znajdowała się po prawej stronie, a tekst po lewej. Aby to zrobić, otwórz ustawienia notki i na karcie Zaawansowane dodaj następujący niestandardowy kod CSS.

Główny element CSS:

direction: rtl;

Rozmycie obrazu CSS:

padding-left: 15px;

Jeśli nie zauważyłeś, ikona jest teraz po prawej stronie. Teraz wszystko, co musisz zrobić, to umieścić notkę, używając następującego niestandardowego marginesu:

Margines niestandardowy: 35px góra, 0px dół, 0px lewo

Musimy również dostosować cień pudełka, aby pochodził z lewej, a nie z prawej, w następujący sposób:

Pozycja pozioma cienia pudełka: 150px

Teraz sprawdź odwróconą podpowiedź na aktywnej stronie.

W przypadku ostatniej notki skopiuj pierwszą notkę u góry kolumny i wklej ją pod trzecią notatką.

Następnie zaktualizuj margines w następujący sposób:

Margines niestandardowy: 0px u góry, 100px w lewo

Teraz sprawdź efekt końcowy projektu!

I sprawdź te efekty najechania podpowiedzi!

Czy to jest responsywne?

Ten projekt został zbudowany od początku z myślą o urządzeniach mobilnych. Obraz ma szerokość 320px, czyli szerokość większości małych smartfonów. A ponieważ ustaliliśmy i ustawiliśmy wszystko za pomocą jednostek długości w pikselach, projekt (w tym podpowiedzi) nie porusza się, gdy dostosowujemy rozmiar przeglądarki.

Jest jednak jeszcze jedna rzecz, którą możesz zrobić, aby upewnić się i zmaksymalizować szerokość obrazu na małych ekranach telefonów. Domyślnie Twój wiersz będzie miał 80% szerokości na urządzeniach mobilnych, więc aby uzyskać 100%, możesz dodać go jako niestandardowy CSS do głównego elementu wiersza, tak jak na przykład:

width: 100%;

Twoja niestandardowa szerokość 700 pikseli nadal będzie służyć jako maksymalna szerokość na komputerach, ale będzie teraz wynosić 100% na urządzeniach mobilnych.

Końcowe przemyślenia

Oznaczanie obrazu tła etykietami narzędzi i efektami najechania, takimi jak ten, może dodać element profesjonalnego projektu, który zainteresuje odbiorców przydatnymi informacjami. Jestem pewien, że istnieje wiele sposobów wykorzystania tej koncepcji w innych przypadkach użycia. Ale wiąże się z wyzwaniami, jeśli planujesz zachować projekt również na urządzeniach mobilnych. Cała sztuka polega na tym, aby najpierw myśleć mobilnie i planować z wyprzedzeniem. Mam nadzieję, że posłuży to jako inspiracja dla przyszłych projektów. Jeśli już, to przynajmniej wiesz, jak stworzyć notkę z ikoną lub po prawej :).

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!