Cum se combină opțiunile de imagine de fundal și umbră de casetă cu Divi

În acest post Divi, vă vom arăta cum puteți combina opțiunile de fundal și umbră ale unui modul de imagine. Această postare este menită să vă stimuleze imaginația și să vă arate cum funcțiile noi Divi pot funcționa cu cele existente - ducând la rezultate creative. Pentru a vă ajuta cu procesul de creație, am creat 4 combinații care vă vor arăta cum să recreați pas cu pas. Să aruncăm o privire la exemple.

Primul exemplu

Desktop

Mobil

Al doilea exemplu

Desktop

Mobil

Al treilea exemplu

Desktop

Mobil

Al patrulea exemplu

Desktop

Mobil

Cum se combină opțiunile de imagine de fundal și umbră de casetă cu Divi

Abonați-vă la canalul nostru Youtube

Primul exemplu

Acum, că v-am arătat la ce vă puteți aștepta de la această postare, să aruncăm o privire la modul în care puteți recrea exemplul următor cu doar câțiva pași în cadrul Divi și fără cod CSS suplimentar:

Adăugați rândul din două coloane

Coloana 1 Culoare fundal

Adăugați un rând cu două coloane într-o secțiune standard și alegeți „rgba (12,113,195,0.11)” ca Culoare 1 Culoare de fundal.

Spațiere

Apoi, treceți la fila Proiectare. Adăugați „200px” la marginea de sus și „150px” la umplerea de jos a primei coloane.

Adăugați modulul de imagine la prima coloană (desktop și tabletă)

Dimensionare

Apoi, adăugați un modul de imagine la prima coloană a rândului pe care l-ați creat. Acest modul de imagine se va aplica numai desktopurilor și tabletelor. Primul lucru pe care trebuie să-l faceți este să schimbați lățimea la '94% '.

Spațiere

Apoi, deschideți subcategoria Spacing, activați opțiunea „Afișați spațiul sub imagine”, adăugați „-150px” la marginea de sus și „-110px” la marginea din stânga a imaginii.

Box Shadow

Derulați mai jos în tab și aplicați următoarea umbră a casetei pentru imagine:

• Poziție orizontală a umbrei cutiei: 80 px
• Box Shadow Vertical Position: 80px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 6 px
• Culoare umbră: rgba (173,173,173,0,79)
• Box Shadow Position: Outer Shadow

Vizibilitate

În cele din urmă, accesați fila Advanced și dezactivați modulul de imagine pe mobil.

Clonează modulul de imagine (telefon)

Majoritatea setărilor pe care le-am folosit pentru versiunea desktop și tabletă a modulului de imagine sunt aceleași și pentru versiunea mobilă. De aceea, vom clona modulul de imagine și vom face câteva modificări suplimentare care se vor potrivi cu ecranul mobilului.

Change Box Shadow

Primul lucru pe care va trebui să îl schimbăm este umbra cutiei. În loc să utilizați setările pentru desktop, utilizați în schimb următoarele setări:

• Poziție orizontală a umbrei cutiei: 33 px
• Box Shadow Vertical Position: 78 px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 6 px
• Culoare umbră: rgba (173,173,173,0,79)
• Box Shadow Position: Outer Shadow
  

Vizibilitate

Următorul și ultimul lucru pe care trebuie să îl facem este să schimbăm vizibilitatea acestui al doilea modul de imagine. În loc să îl dezactivați pe telefon, continuați și dezactivați-l atât pe tabletă, cât și pe desktop.

Al doilea exemplu

În continuare, avem al doilea exemplu care arată astfel pe desktop:

Adăugați rândul din două coloane

Fundal gradient de rând

Adăugați un nou rând cu două coloane la secțiunea la care lucrați și utilizați următorul fundal de gradient pentru aceasta:

• Prima culoare: rgba (237,240,0,0,55)
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 50,8%
• Poziție finală: 50,8%

Dimensionare

Treceți la fila Design și activați opțiunea „Faceți acest rând lățime completă”.

Spațiere

În cele din urmă, adăugați o umplutură de sus de „200px” la a doua coloană.

Adăugați modulul de imagine la prima coloană

Spațiere

După ce ați terminat cu setările rândului, continuați și adăugați un modul de imagine în prima coloană. Deschideți subcategoria Spațiere în fila Proiectare și adăugați „30 px” în partea de sus, dreapta, jos și stânga.

Box Shadow

Derulați în jos aceeași filă și utilizați următoarele setări pentru subcategoria Box Shadow:

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 2 px
• Puterea neclarității umbrei cutiei: 56 px
• Puterea răspândirii umbrei cutiei: 12 px
• Culoare umbră: rgba (0,0,0,0,3)
• Box Shadow Position: Outer Shadow

Clonați modulul de imagine și plasați în a doua coloană

Setările pentru modulul de imagine din a doua coloană sunt aceleași. Continuați, clonați modulul de imagine și plasați-l în a doua coloană.

Al treilea exemplu

Mai departe, vă vom arăta cum să obțineți următorul rezultat:

Adăugați rândul cu o coloană

Coloana 1 Culoare fundal

Adăugați un rând cu o coloană și alegeți „rgba (193,145,163,0,6)” ca culoare de fundal a primei coloane.

Adăugați un modul de imagine

Imagine de fundal gradient

Apoi, adăugați un modul de imagine în coloană și utilizați următorul fundal de gradient pentru aceasta:

• Prima culoare: # e2e2e2
• A doua culoare: rgba (255,255,255,0)
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Frontieră

Treceți la fila Proiectare și efectuați următoarele setări pentru subcategoria Border:

• Utilizați chenarul: Da
• Culoare margine: # 000000
• Lățimea chenarului: 3 px
• Stilul chenarului: solid

Dimensionare

Apoi, adăugați următoarea lățime la modulul de imagine:

• Desktop: 85%
• Tabletă și telefon: 100%

Spațiere

Apoi, deschideți subcategoria Spațiere și faceți următoarele umpluturi și marcaje aplicabile modulului de imagine:

• Marja stângă: 80 px (desktop), 0 px (tabletă și telefon)
• Căptușeală sus, dreapta, jos și stânga: 30 px

Box Shadow

În cele din urmă, adăugați o umbră de casetă cu următoarele setări:

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 39 px
• Culoare umbră: rgba (0,0,0,0.22)
• Box Shadow Position: Outer Shadow

Al patrulea exemplu

Și, în sfârșit; ultimul exemplu pe care vă vom arăta cum să îl recreați arată astfel:

Adăugați rândul din două coloane

Începeți prin adăugarea unui rând cu două coloane. Acest rând, spre deosebire de exemplele anterioare pe care le-am tratat în această postare, nu va avea nevoie de setări suplimentare.

Adăugați modulul de imagine la prima coloană

Fundal de gradient

Adăugați un modul de imagine la prima coloană a rândului pe care tocmai l-ați creat și utilizați următorul fundal de gradient pentru acesta:

• Prima culoare: rgba (255,255,255,0)
• A doua culoare: rgba (92,0,158,0,46)
• Tipul gradientului: liniar
• Direcția gradientului: 138 grade
• Poziția inițială: 55%
• Poziție finală: 55%

Spațiere

Apoi, treceți la fila Proiectare și utilizați următoarele setări pentru subcategoria Spațiu:

• Afișați spațiul sub imagine: Da
• Căptușeală dreaptă: 30 px
• Căptușeală inferioară: 30 px

Adăugați al doilea modul de imagine la prima coloană

Culoare de fundal

Continuați adăugând un alt modul de imagine chiar sub cel anterior și utilizați „rgba (96,96,96,0.42)” ca culoare de fundal.

Spațiere

Apoi, accesați fila Proiectare și utilizați următoarele setări pentru subcategoria Spațiu:

• Afișați spațiul sub imagine: Da
• Marja superioară: -250 px (desktop), -150 (tabletă), -100 (telefon)
• Marja dreaptă: -150 px (desktop), 0 px (tabletă și telefon)
• Marja stângă: 150 px
• Căptușeală superioară: 30 px
• Căptușeală stângă: 30 px

Box Shadow

În cele din urmă, deschideți subcategoria Box Shadow și utilizați următoarele setări:

• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 2 px
• Puterea neclarității umbrei cutiei: 0 px
• Puterea răspândirii umbrei cutiei: 24 px
• Culoare umbră: # e2e2e2
• Box Shadow Position: Outer Shadow

Gânduri finale

Exemplele pe care le-am împărtășit în această postare sunt doar o fracțiune din cât de departe puteți merge cu opțiunile de umbră și fundal ale casetei lui Divi. Puteți crea modele unice folosind modulul de imagine care va îmbunătăți aspectul general al site-ului dvs. web. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!

Imagine prezentată de Creative Stall / shutterstock.com