Cum să etichetați o imagine de fundal cu sfaturi utile în Divi

Adăugarea de sfaturi pentru a eticheta o imagine de fundal este un mod creativ de a atrage vizitatorii cu informații valoroase despre produsul sau serviciul dvs. Ideea de bază este de a poziționa pictograme (sau text) locații specifice pe imagine (cum ar fi o hartă Google cu puncte de identificare). Și dacă profitați de efectele de plutire ale lui Divi, puteți dezvălui text suplimentar atunci când treceți cu mouse-ul peste o pictogramă pentru a crea sfaturi utile.

În acest tutorial, vă voi arăta cum să etichetați o imagine de fundal cu blurbs care va servi drept sfaturi informative despre produsul dvs. Pentru a face acest lucru, voi folosi pagina Fitness Gym Landing pentru a eticheta o imagine de fundal cu informații despre fitness de calitate.

Să începem.

O scurtă privire

Iată un vârf al designului pe care îl vom construi în acest tutorial.

De ce ai nevoie

Pentru acest tutorial, veți avea nevoie de următoarele:

• Tema Divi
• Pagina de destinație Fitness Gym din pachetul Layout Fitness Gym (disponibil de la Divi Builder)
• O imagine de utilizat pentru imaginea de fundal, care este exact 320px pe 507px. Simțiți-vă liber să îl trageți pe desktop și să-l utilizați pentru acest tutorial.
  

Pregătirea aspectului premade

Pentru a începe, creați o pagină nouă, adăugați un titlu și apoi implementați Visual Builder. Apoi selectați „Alegeți un aspect premade”. Din fereastra pop-up de încărcare din bibliotecă, selectați aspectul paginii de destinație Fitness Gym și faceți clic pe „Utilizați acest aspect”.

După ce aspectul este încărcat pe pagină, derulați în jos până la a patra secțiune cu rândul cu două coloane care are titlul „Programe recomandate” în coloana din dreapta. Vom adăuga imaginea de fundal cu sfaturi de instrumente în coloana din stânga a acestui rând.

Utilizați editorul inline pentru a schimba textul titlului din coloana din dreapta la „Smart Fitness”.

Adăugarea imaginii de fundal și personalizarea setărilor de rând

Cu acest design, dimensionarea și distanțarea sunt cruciale și vor trebui să fie precise. Și totul începe cu dimensiunea imaginii noastre de fundal. Așa cum am menționat anterior, imaginea pe care o folosim pentru fundal ar trebui să fie de 320 px cu 507 px. Deoarece o lățime de 320 px este un bun punct de plecare pentru mobil, acest lucru ne va permite să facem designul mobil prietenos fără a fi nevoie să schimbăm dimensiunea imaginii noastre.

Deschideți setările rândului și adăugați imaginea de fundal în coloana 1. Apoi actualizați următoarele:

Coloana 1 Dimensiune imagine de fundal: Dimensiune reală
Coloana 1 Poziția imaginii de fundal: Centrul Stânga
Coloana 1 Repetarea imaginii de fundal: Fără repetare

Apoi, trebuie să adăugăm o lățime personalizată la rând și să eliminăm spațiul superior și inferior.

Lățime personalizată: 700 px
Împletire personalizată: 0 px sus, 0 px jos

Setarea lățimii la 700 px va asigura că rândul nu se micșorează pe dimensiuni mai mici ale ecranului înainte de punctul de întrerupere al tabletei.

În acest moment, cred că este o idee bună să mergeți mai departe și să setați o înălțime specifică pentru coloana 1 egală cu înălțimea imaginii de fundal. Astfel știm că imaginea va rămâne vizibilă dacă conținutul coloanei nu expune întreaga imagine. Pentru a face acest lucru, accesați fila avansată și adăugați următorul CSS personalizat în elementul principal al coloanei 1:

height: 507px;

Acum înălțimea coloanei este egală cu înălțimea imaginii dvs. și nu va depinde de conținutul (sau modulele) pe care le adăugăm la rând.

Adăugarea etichetelor Tooltip peste imaginea de fundal folosind Blurbs

Având imaginea de fundal în poziție, putem începe să adăugăm blur-urile noastre, care vor fi poziționate și stilate pentru a funcționa ca sfaturi. Continuați și adăugați un modul de blurb în coloana 1 și actualizați următoarele setări de blurb:

Titlu: „Focus”
Conținut: „Cheia succesului!”
Utilizați pictograma: Da
Pictogramă: vezi captura de ecran

Este important să păstrăm titlul și conținutul la doar câteva cuvinte, deoarece dorim să putem încadra întregul text în interiorul imaginii de fundal.

Apoi, veți actualiza setările de proiectare. Acesta este un design mai avansat al unui blurb, așa că există o mulțime de opțiuni de modificat, împreună cu câteva efecte de hover care vor dezvălui conținutul blurbului pe hover. Actualizați următoarele setări de design pentru blurb:

Culoare pictogramă: # edf000
Pictogramă cerc: DA
Culoarea cercului: rgba (0,0,0,0)
Afișați marginea cercului: DA
Culoare margine cerc (implicit): rgba (0,0,0,0)
Culoarea chenarului cercului (plutitor): # edf000
Plasare imagine / pictogramă: stânga
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 40 px

Continuați să reglați setările de proiectare după cum urmează:

Greutatea fontului titlului: Bold
Culoare text titlu (implicit): rgba (0,0,0,0)
Culoare text titlu (implicit): # edf000
Culoarea textului corpului (implicit): rgba (0,0,0,0)
Culoarea textului corpului (implicit): #ffffff

(Observați că culorile implicite ale textului sunt complet transparente pentru a le ascunde până când treceți peste blurb.)

Marjă personalizată: 15 px sus, 0 px jos, 90 px stânga
Împletire personalizată: 5 px sus, 5 px jos, 5 px dreapta

(Marja personalizată este modul în care poziționați pictograma blurb într-o anumită locație peste imagine.)

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: -154px
Box Shadow Vertical Position: 0px
Culoare umbră (implicit): rgba (0,0,0,0)
Culoare umbră (plimbare): # 1e2441

(Umbra casetei este o modalitate creativă de a adăuga o culoare de fundal în spatele conținutului blurb. În mod implicit, umbra casetei este complet transparentă, dar va afișa o culoare albastră frumoasă la plimbare.)

Acum, du-te și verifică rezultatul final al primei tale semnalizări pentru a te asigura că efectul de hover și designul sunt corecte.

Apoi, putem duplica modulul blurb pentru a crea a doua noastră etichetă de tip tooltip. După ce copiați textul, puteți actualiza conținutul la textul dorit (păstrați-l scurt). Apoi, tot ce trebuie să faceți este să poziționați sfatul de instrument folosind o marjă personalizată diferită, după cum urmează:

Marjă personalizată: 0 px sus, 0 px jos, 15 px stânga

Pentru a crea a treia blurb, puteți duplica a doua blurb.

Pentru acest al treilea blurb, vom rămâne fără spațiu în partea dreaptă a imaginii noastre, astfel încât să nu avem prea mult spațiu pentru conținut. Am putea folosi o marjă negativă pentru a extinde blurb-ul în afara imaginii, dar acest lucru s-ar extinde și dincolo de dimensiunea ecranului de 320 px pe mobil. Deci, vom introduce câteva mici fragmente de cod pentru a ne întoarce conținutul blurb, astfel încât pictograma să fie în dreapta și textul să fie în stânga. Pentru aceasta, deschideți setările de blurb și, în fila Advanced, adăugați următoarele CSS personalizate.

Element principal CSS:

direction: rtl;

Blurb Image CSS:

padding-left: 15px;

Dacă nu ați observat, pictograma este acum în dreapta. Acum tot ce trebuie să faceți este să poziționați blurb-ul folosind următoarea marjă personalizată:

Marjă personalizată: 35 px sus, 0 px jos, 0 px stânga

De asemenea, trebuie să ajustăm umbra casetei astfel încât să vină din stânga în loc de dreapta, după cum urmează:

Poziție orizontală a umbrei cutiei: 150 px

Acum consultați sfatul de lucru inversat pe site-ul live.

Pentru ultima blurb, copiați prima blurb din partea de sus a coloanei și lipiți-o sub a treia blurb.

Apoi actualizați marja după cum urmează:

Marjă personalizată: 0 px în partea de sus, 100 px în stânga

Acum verificați rezultatul final al designului!

Și verificați acele efecte de planare a sfaturilor de instrumente!

Este receptiv?

Acest design a fost construit a fost construit cu gândul la mobil de la început. Imaginea are o lățime de 320 px, care este lățimea majorității smartphone-urilor mici. Și pentru că am dimensionat și poziționat totul folosind unități de lungime a pixelilor, designul (inclusiv sfaturile de instrumente) nu se mișcă atunci când ajustăm dimensiunea browserului.

Cu toate acestea, mai trebuie să faceți un lucru pentru a vă asigura și a maximiza lățimea imaginii pe ecranele mici ale telefonului. În mod implicit, rândul dvs. va avea o lățime de 80% pe mobil, deci, pentru a face acest lucru 100%, îl puteți adăuga ca CSS personalizat la elementul principal al rândului dvs. astfel:

width: 100%;

Lățimea dvs. personalizată de 700 px va servi în continuare ca lățime maximă pe desktop, dar va fi acum 100% pe dispozitivul mobil.

Gânduri finale

Etichetarea unei imagini de fundal cu sfaturi de instrumente și efecte de plutire ca aceasta poate adăuga un element de design profesional care implică publicul dvs. cu informații utile. Și sunt sigur că există mai multe moduri de a utiliza acest concept pentru alte cazuri de utilizare. Dar vine cu provocări dacă intenționați să păstrați și designul pe mobil. Trucul este să gândești mai întâi pe mobil și să planifici în avans. Sper că acest lucru servește ca inspirație pentru viitoarele proiecte de pe drum. Dacă e ceva, măcar știi cum să creezi un blurb cu o pictogramă sau dreapta :).

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!