Cum să stilizați și să poziționați imaginile în locuri abstracte din Divi
Publicat: 2019-03-30Imaginile sunt un aspect cheie al designului web. Iar designul web modern pare să solicite modalități noi și abstracte de a afișa imagini pe site-ul dvs. web. Opțiunile de transformare ale lui Divi facilitează stilizarea și poziționarea imaginilor pe pagina dvs. oriunde doriți. Acest lucru deschide ușa pentru crearea unor machete unice care vă vor duce site-ul la nivelul următor.
În acest tutorial, vă voi arăta câteva moduri în care puteți stiliza și poziționa imaginile în locuri abstracte de pe site-ul dvs. web. Acest lucru vă va permite să creați nenumărate variante de design pentru imagini pe care probabil le-ați crezut posibile doar într-un editor foto precum Photoshop sau Sketch.
Să începem!
Trage cu ochiul
Iată o scurtă privire asupra proiectelor pe care le vom construi în acest tutorial.
Descărcați GRATUIT exemplele de design din acest tutorial
Pentru a pune mâna pe aceste exemple de design, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
Descarcă gratis
Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.
V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!
Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.
Acum să trecem la tutorial, nu-i așa?
A început
Pentru a începe, asigurați-vă că aveți Tema Divi instalată și activă. Apoi creați o pagină nouă și implementați Divi Builder în partea frontală. Alegeți opțiunea „Construiți de la zero”.
Acum sunteți gata să proiectați!
Poziționarea imaginilor parțial în afara ecranului (în dreapta sau în stânga)
În acest prim exemplu, vă voi arăta cum să poziționați imaginile parțial în afara ecranului. Acesta este un mod frumos de a adăuga un afișaj abstract pentru imaginile dvs., care va funcționa la fel ca o imagine de fundal personalizată pentru conținutul dvs. Apoi, puteți stiliza imaginea pentru modele și mai unice.
Iată cum să o faci.
Creați și stilizați modulul text
Mai întâi vom crea un modul de text care va servi drept conținut principal pentru secțiunea noastră.
Dacă nu ați făcut-o deja, creați o secțiune obișnuită cu un rând cu o coloană. Apoi adăugați modulul text la rând.
Actualizați conținutul pentru a include următoarele:
<h2>About Us</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
Apoi actualizați setările de proiectare după cum urmează:
Font text: Raleway
Rubrica 2 Font: Raleway
rubrica 2 Greutate font: îndrăzneț
Titlul 2 Dimensiune text: 44 px (desktop), 24 px (telefon)
Lățime: 680 px (desktop), 60% (tabletă), 80% (telefon)
Căptușeală personalizată: 10% sus, 10% jos, 10% stânga, 5% dreapta
Adăugați imaginea # 1
Acum suntem gata să adăugăm prima imagine. Continuați și adăugați un modul de imagine direct deasupra modulului de text.
Apoi încărcați imaginea în modulul imagine. Asigurați-vă că imaginea este suficient de mare, astfel încât să nu-și piardă calitatea atunci când mărim imaginea folosind proprietatea de transformare. Folosesc o imagine de 400 x 580 pixeli.
Apoi aduceți lățimea modulului de imagine în jos și aliniați-l la stânga după cum urmează:
Lățime: 5%
Alinierea modulului: stânga
Reducerea modulului de imagine astfel ne permite inițial să reducem spațiul negativ al aspectului. În acest fel, nu trebuie să ajustăm spațiul utilizând marje negative.
Acum putem mări imaginea folosind opțiunile de transformare după cum urmează:
Scala de transformare axa X: 416%
Axa Y a scalei de transformare: 416%
Apoi putem poziționa imaginea folosind transformarea transformată după cum urmează:
Transformă axa X tradusă: -36%
Transformă axa Y tradusă: 41%
În cele din urmă, puteți roti imaginea folosind transform rotate:
Transformare Rotire axa Z: 11 grade
Acum suntem gata să adăugăm a doua imagine. Continuați și adăugați un modul de imagine direct sub modulul text.
Apoi încărcați o nouă imagine în modulul imagine.
Apoi aduceți lățimea modulului de imagine în jos și aliniați-l la stânga după cum urmează:
Lățime: 10%
Alinierea modulului: stânga
Lățimea nu trebuie să fie exact 10%. Tot ce doriți să faceți este să micșorați suficient modulul, astfel încât să nu ocupe prea mult spațiu vertical pe aspect.
Apoi actualizați opțiunile de transformare după cum urmează:
Axa X a scalei de transformare: 464%
Axa Y a scalei de transformare: 464%
Transformă axa X tradusă: 7%
Transformă axa Y tradusă: -80%
Transformare Rotire axa Z: -10 grade
Apoi adăugați o umbră de cutie pentru un element de design suplimentar.
Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: -20px
Box Shadow Vertical Position: -7px
Asigurarea că modulul text rămâne deasupra
Vrem să ne asigurăm că modulul text rămâne deasupra imaginilor ori de câte ori acestea încep să se suprapună pe mobil. Acest lucru asigură faptul că imaginile continuă să servească drept imagini de fundal în proiectare.
Pentru aceasta, deschideți modulul text și adăugați următorul CSS personalizat la elementul principal:
Element principal CSS:
position: relative;
Apoi setați indexul Z la 1.
Ascunderea revărsării secțiunii
Deoarece vom avea imagini care se extind în afara secțiunii paginii, lățimea ferestrei de vizualizare a browserului va crește pentru a găzdui spațiul suplimentar. Aceasta va activa bara de defilare orizontală din partea de jos a browserului. Pentru a dezactiva acest lucru, va trebui să adăugați un fragment de CSS la secțiune.
Deschideți setările secțiunii și adăugați următorul CSS personalizat la elementul principal:
overflow: hidden;
Acum verificați rezultatul final.
Crearea unui fundal de colaj de imagini abstracte pentru antetul dvs.
Pentru următorul design, vă voi arăta cum să construiți un colaj abstract de imagini care va servi drept fundal pentru un antet. Pentru a face acest lucru, vom folosi proprietatea display flex pentru a crea un rând de imagini pe care le putem scala și deplasa în moduri creative.
Iată cum să o faci.
Proiectarea modulului Text antet
Mai întâi, creați o nouă secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul text la rând și actualizați următorul conținut:
<h1>Interior Design</h1> <p>This is some content</p>
Apoi actualizați designul după cum urmează:
Culoare fundal: rgba (0,0,0,0.07)
Culoarea textului textului: #ffffff
Orientare text: centru
Font de titlu: Raleway
Greutatea fontului de titlu: Bold
Alinierea textului antet: dreapta
Culoare text antet: #ffffff
Dimensiune text antet: 44 px (desktop), 34 px (tabletă), 24 px (telefon)
Lățime: 500 px (desktop), 60% (tabletă), 80% (telefon)
Alinierea modulului: centru
Căptușeală personalizată: 5vw sus, 5vw jos, 1vw dreapta
Setări secțiune
Înainte de a adăuga imaginile noastre și de a construi fundalul colajului, să ne personalizăm secțiunea. Aceasta va furniza pânza noastră pentru a finaliza restul designului.
Deschideți setările secțiunii și actualizați următoarele:
Culoare fundal: # 4c606d
Împletire personalizată (desktop): 0 px sus, 0 px jos
Căptușeală personalizată (tabletă): 20 px de jos
Căptușeală personalizată (telefon): 40 px jos
Apoi, adăugați o umbră de casetă interioară în partea de jos a secțiunii cu o culoare care se potrivește cu fundalul următoarei secțiuni de pe pagină (în acest caz va fi alb). Acest lucru ne va permite să creăm efectul imaginilor noastre care se suprapun în partea de jos a antetului în secțiunea următoare (veți vedea ce vreau să spun mai târziu).
Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: -80px
Culoare umbră: #ffffff
Și întrucât vom muta imagini în afara ferestrei de secțiune pentru colajul nostru, va trebui să adăugăm următorul CSS la Elementul principal.
overflow: hidden;
Setările rândului 1
Acum trebuie să adăugăm ceva umplutură la rândul care conține modulul nostru text. De asemenea, trebuie să adăugăm un index z pentru a menține secțiunea deasupra imaginilor pe care le vom adăuga la secțiunea noastră. În mod implicit, fiecare secțiune are o valoare a indexului z de 9. Deci, tot ce trebuie să facem este să adăugăm un indice z de 10 la rândul pe care dorim să rămânem în partea de sus.
Deschideți setările rândului și actualizați următoarele:
Căptușeală personalizată: top 10vw
Indicele Z: 10
Crearea colajului de imagini abstracte
În acest moment, secțiunea este gata să înceapă să adauge imaginile noastre.
Pentru a crea colajul de imagini abstracte, vom adăuga 5 imagini pe un rând de o coloană și apoi vom folosi „display: flex” pentru a alinia toate imaginile pe orizontală pe pagină. Acest lucru este necesar pentru a menține imaginile la locul lor (orizontal) pe toate dimensiunile browserului. Dacă ar fi să folosim un aspect tradițional cu 5 coloane, imaginile se împart în structuri de coloane diferite pe diferite dispozitive și rupe designul.
După aceea, vom putea stiliza și poziționa imaginile noastre una câte una cu opțiuni de transformare.
Adăugarea rândului de imagini
Continuați și creați un nou rând cu o coloană direct sub rândul care conține modulul text.
Apoi deschideți setările rândului și actualizați următoarele:
Lățime personalizată: 50%
Lățimea jgheabului: 1
Și pentru a alinia orizontal toate modulele din acest rând, adăugați următorul CSS la Elementul principal al coloanei:
display: flex;
Acum, când adăugați module de imagine pe rând, acestea se vor alinia orizontal.
Uită-te la ce se întâmplă în timp ce copiez un modul de imagine în rândul cu display: flex add în coloană.
Mergeți mai departe și adăugați 5 imagini pe rând, asigurându-vă că au o dimensiune suficient de mare pentru a se potrivi creșterii dimensiunii la redimensionarea imaginii pentru colaj. Folosesc imagini prezentate în pachetul nostru de amenajare a locuințelor, care au o lățime de aproximativ 800 px și variază în înălțime. Imaginile cu dimensiuni diferite tind să facă un colaj abstract cu aspect mai bun.
Poziționarea imaginilor cu Transform Translate
Este timpul să începem să ne poziționăm imaginile pentru a crea colajul nostru.
Imaginea # 1
Deschideți setările pentru primul modul de imagine (în partea stângă) și actualizați opțiunile de transformare după cum urmează:
Axa X a scalei de transformare: 266%
Axa Y a scalei de transformare: 266%
Traduceți prin transformare: axa X: -68%
Traduceți prin transformare: axa Y: -54%
Imaginea # 2
Deschideți setările pentru al doilea modul de imagine și actualizați opțiunile de transformare după cum urmează:
Axa X a scalei de transformare: 184%
Axa Y a scalei de transformare: 184%
Transformă traducere: axa X: -36%
Transformă Traducere: axa Y: -66%
Imaginea # 3
Deschideți setările pentru al treilea modul de imagine și actualizați opțiunile de transformare după cum urmează:
Axa X a scalei de transformare: 206%
Axa Y a scalei de transformare: 206%
Traduceți prin transformare: axa X: -51%
Transformă traducere: axa Y: -27%
Imaginea # 4
Deschideți setările pentru al patrulea modul de imagine și actualizați opțiunile de transformare după cum urmează:
Axa X a scalei de transformare: 180%
Axa Y a scalei de transformare: 180%
Transformă traducere: axa X: 20%
Transformă Traducere: axa Y: 42%
Imaginea # 5
Deschideți setările pentru al cincilea modul de imagine și actualizați opțiunile de transformare după cum urmează:
Axa X a scalei de transformare: 290%
Axa Y a scalei de transformare: 290%
Traduceți prin transformare: axa X: -50%
Transformă traducere: axa Y: 72%
Adăugarea unei umbre de cutie la imagini
Pentru a crea un element de design suplimentar, putem adăuga o umbră de casetă imaginilor noastre. Pentru a face acest lucru, activați modul grilă și utilizați caracteristica multiselectare pentru a selecta toate modulele de imagine. Apoi deschideți setările unuia dintre modulele de imagine pentru a implementa setările modale ale elementului.
Apoi actualizați următoarele:
Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: -40px
Box Shadow Vertical Position: 40 px
Culoare umbră: rgba (255,255,255,0,13)
Rezultat final
Iată rezultatul final al designului.
Desktop
Comprimat
Telefon
Gânduri finale
Aceste exemple de design ar trebui să vă ofere o sursă de inspirație pentru modul de stilizare și poziționare a imaginilor pe site-ul dvs. web în moduri pe care nu le-ați crezut niciodată posibile în afara unui software de editare foto. Odată ce aflați cum să vă personalizați corect aspectul, opțiunile de transformare ale Divi pot poziționa imaginile în locuri unice și abstracte. Sperăm că acest lucru vă va fi util pentru următorul dvs. proiect.
Aștept cu nerăbdare să aud de la dvs. în comentarii.
Noroc!