Moduri simple și creative de a afișa siglele companiei în Divi

Există multe motive pentru a afișa siglele companiei pe site-ul dvs. web. O secțiune „Featured In” din siglele companiei ar putea influența potențialii investitori sau parteneri. Sau o secțiune „Clienții noștri includ” ar putea stabili dovezi sociale valoroase cu vizitatorii. Dar, indiferent de motiv, este important să știți cum să adăugați aceste sigle pe site-ul dvs. web. În acest tutorial, voi trece peste trei metode diferite pentru a adăuga logo-urile companiei pe site-ul dvs. web cu Divi. Vă voi arăta chiar cum să adăugați galerii de sigle la orice modul Divi!

Iată ce va fi acoperit în acest tutorial:

• Pregătirea imaginilor sigle
• Utilizarea modulului Divi Gallery pentru a afișa siglele cu o simplă glisare și fixare
• Utilizarea încorporării galeriei WordPress pentru a afișa sigle
• Folosind Divi Builder pentru a crea un aspect personalizat pentru sigle

Să începem!

Trage cu ochiul

Iată o privire asupra câtorva modele posibile folosind tehnicile din acest tutorial.

Pregătirea imaginilor sigle

Când pregătiți siglele pentru a fi afișate pe site-ul dvs., este important să vă alocați timp pentru a vă dimensiona imaginile folosind un editor foto înainte de a le adăuga pe site-ul dvs. Acest lucru vă va economisi durerea de cap în încercarea de a vă dimensiona și poziționa siglele cu lățimi personalizate, umplutură sau margini. Aveți încredere în mine. Nu vrei să mergi pe acel drum dacă nu trebuie.

Deoarece fiecare siglă are o dimensiune unică, este aproape imposibil să le faci pe toate să aibă dimensiunile exacte. Aici este util un editor foto. De exemplu, utilizând Photoshop, puteți crea un fișier nou și puteți seta dimensiunile documentului la orice dimensiune doriți să fie toate imaginile logo-ului dvs. (în acest caz 226px cu 100px).

Apoi adăugați imaginea logo-ului în document și redimensionați și poziționați imaginea direct în centru. Asigurați-vă că este un fișier imagine PNG cu un fundal transparent.

Apoi exportați imaginea ca fișier png pentru a păstra fundalul transparent.

Apoi repetați procesul pentru restul siglelor.

Puteți păstra culoarea originală a siglei sau puteți utiliza un editor de fotografii pentru a le schimba în orice culoare doriți. Dacă intenționați să adăugați siglele folosind un Divi (adică modulul de imagine sau galeria de imagini), puteți folosi întotdeauna efectele de filtru încorporate ale Divi pentru a regla și culorile.

Abonați-vă la canalul nostru Youtube

# 1 Utilizarea modulului Divi Gallery pentru a afișa siglele companiei (o simplă glisare și fixare)

Această primă metodă de adăugare a logo-urilor companiei pe site-ul dvs. cu Divi este la fel de ușoară pe cât devine. Folosind funcția de tragere și plasare a Divi, puteți trage toate siglele companiei în Divi Builder pentru a crea instantaneu și galeria de imagini pentru a afișa siglele într-o grilă.

Pentru a face acest lucru, creați o pagină nouă și implementați Divi Builder pentru a construi pe front-end. Selectați opțiunea „Build from Scratch”. Odată ce constructorul Divi este în funcțiune, deschideți folderul care conține toate imaginile și selectați-le. Apoi pur și simplu trageți-le în fereastra browserului cu Divi Builder.

Divi va adăuga automat acele imagini într-un nou modul galerie și va deschide setările galeriei pentru a porni procesul de personalizare pentru dvs.

Deoarece adaug 8 imagini cu logo și nu vreau să afișez niciun titlu, subtitrare sau paginare, pot actualiza următoarele:

Număr imagini: 8
Afișați titlul și legenda: NU
Arată paginare: NU

În mod implicit, modulul galerie va adăuga o suprapunere cu mouse-ul cu o pictogramă pentru fiecare imagine. Puteți regla setările de suprapunere pentru culoarea pictogramei zoom, culoarea suprapunerii cu hover-ul sau pictograma hover.

Pentru a menține lucrurile curate și simple, puteți scăpa de suprapunerea cu mouse-ul prin setarea Culoare pictogramă zoom și Culoare suprapunere la transparent.

După aceea, puteți explora toate opțiunile de proiectare pentru a crea modele unice pentru galeria de imagini. De exemplu, puteți adăuga un chenar cu o umbră de casetă subtilă.

Lățimea marginii imaginii: 1 px
Culoare margine imagine: #dddddd
Image Box Shadow: vezi captura de ecran

Iată cum ar arăta designul final pentru diferite dimensiuni ale browserului.

Și deoarece această galerie poate fi adăugată la orice structură de coloane, puteți crea cu ușurință machete unice pentru siglele companiei dvs. Iată un exemplu de aspect cu două coloane cu un modul text în stânga și modulul galerie de imagini (cu siglele) în dreapta. Am adăugat un gradient de fundal doar pentru a vă arăta un aspect diferit.

# 2 Utilizarea încorporării galeriei WordPress pentru a afișa siglele companiei (cu orice modul Divi)

De asemenea, puteți adăuga sigle ale companiei pe site-ul dvs. web utilizând codul scurt WordPress Image Gallery. Acest lucru este surprinzător de ușor de făcut și este perfect pentru sigle, deoarece în majoritatea cazurilor, nu va trebui să adăugați stiluri personalizate imaginilor. Ceea ce este minunat la această metodă este că puteți implementa până la 9 coloane pentru siglele dvs. care se amplifică cu fereastra browserului, permițându-vă să păstrați și structura coloanelor pe mobil.

Iată cum să o faceți.

În Divi Builder, creați o nouă secțiune cu o structură de coloană de un sfert de trei sferturi.

Să presupunem că doriți să aveți un text în stânga siglelor companiei dvs. într-o galerie cu șase coloane. Mai întâi adăugați un modul text în coloana din stânga și actualizați următoarele:

Conținut: „Așa cum este prezentat în”
Font text: Montserrat
Greutatea fontului textului: Bold
Dimensiune text text: 26 px
Orientare text: centru

Acum adăugați un alt modul de text în coloana din dreapta. Sub fila conținut, ștergeți conținutul simulat aflat în prezent și faceți clic pe butonul „Adăugați conținut media” din partea de sus a casetei editorului de conținut.

Aceasta va afișa fereastra pop-up Galerie media. Apoi faceți clic pe linkul Creați galerie din stânga ferestrei pop-up. Apoi selectați imaginile logo pe care doriți să le includeți în galerie (folosesc opt imagini pentru acest exemplu). Faceți clic pe butonul Creați galerie.

Aceasta va afișa pagina Editare galerie în fereastra pop-up. Actualizați setările Galeriei din bara laterală dreaptă după cum urmează:

Link către: Nici unul
Coloane: 8 (acesta ar trebui să fie egal cu numărul de imagini din galerie, astfel încât să rămână pe o singură linie)
Dimensiune: Full Size

Apoi faceți clic pe butonul Creați o galerie nouă.

Aceasta va încorpora codul scurt necesar pentru galerie încorporat în WordPress și va afișa galeria în interiorul modulului de text.

Acum deschideți setările rândului și actualizați următoarele:

Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA

Cu această configurare, aveți mai mult spațiu pentru logourile pe care să le respirați. Acum nu mai rămâne decât să reglați textul din stânga pentru a fi aliniat vertical cu siglele din dreapta. Puteți adăuga umplutura personalizată necesară în coloana din stânga pentru a realiza acest lucru, dar pentru a garanta că ambele module rămân centrate vertical, puteți adăuga următorul CSS personalizat la Elementul principal din fila Setări avansate pentru rânduri.

align-items: center;

Acest CSS funcționează deoarece setăm Egalizați înălțimile coloanei la YES, permițând astfel proprietatea „display: flex” pentru rând. Pentru mai multe informații despre acest lucru, verificați cum să aliniați vertical conținutul în Divi.

Și pentru a elimina marginea gri din jurul imaginilor noastre, trebuie să adăugăm următorul fragment CSS la setările paginii noastre:

.gallery img {
border: none !important;
}

Iată designul final.

Iată-l cu un fundal negru adăugat la rând.

Pe mobil, coloanele nu se rup pe nicio dimensiune a ecranului. Imaginile se micșorează pur și simplu la o dimensiune mai mică. Recunosc. Opt coloane sunt probabil prea multe pe smartphone, deoarece imaginile devin foarte mici.

Încorporați galerii de sigle în orice modul Divi

Deoarece acesta este un cod încorporat, puteți adăuga această galerie la aproape orice modul Divi care deschide o mulțime de posibilități diferite.

De exemplu, puteți adăuga imagini logo în interiorul unui comutator, al unui acordeon sau chiar al unui modul de file.

Iată un exemplu de cum ar arăta atunci când adăugați codul scurt al galeriei wordpress a siglelor dvs. în două file diferite.
Pentru acest exemplu, am selectat 6 sigle cu 3 coloane pentru fiecare galerie.

Acest lucru ar putea fi util pentru site-urile care necesită o mulțime de sigle.

# 3 Utilizarea Divi Builder pentru a crea un aspect personalizat pentru siglele companiei

Dacă doriți să obțineți ceva mai creativ cu aspectele logo-ului companiei dvs., puteți utiliza Divi Builder pentru a proiecta aproape orice vă puteți imagina. Elementul rând Divi acceptă aspectul coloanelor până la 6 coloane, ceea ce este mai mult decât suficient pentru majoritatea aspectelor logo-ului companiei. Îmi plac aspectele cu 6 coloane și 4 coloane cel mai bine pentru logo-uri, în mare parte, pentru modul în care acestea răspund pe mobil.

În proiectarea următoare, îți voi arăta câteva sfaturi despre cum să duci aspectele logo-ului companiei la nivelul următor.

În primul rând, să începem cu crearea unei noi secțiuni cu un rând cu șase coloane.

Înainte de a începe să adăugăm ceva la coloanele noastre, accesați setările de rând și actualizați următoarele:

Lățime personalizată: 90%
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA

Căptușeală personalizată: 4vw sus, 4vw jos

Salvează setările.

Apoi adăugați un modul de imagine în prima dvs. coloană și apoi selectați una dintre imaginile siglei.

Apoi continuați să adăugați imagini cu logo în fiecare coloană, după cum urmează:

Sigla coloanei 1: 1
Coloana 2: 2 sigle
Coloana 3: 3 sigle
Coloana 4: 3 sigle
Coloana 5: 2 sigle
Coloana 6: 1 sigla

Acum, cu această configurare, puteți regla alinierea verticală utilizând un fragment de CSS personalizat. Dacă ați dorit să centrați vertical conținutul, puteți adăuga același fragment CSS pe care îl adăugăm pentru a centra vertical textul nostru lângă galeria de sigle din # 2 de mai sus. Deschideți setările de rând și adăugați următorul CSS la Elementul principal.

align-items: center;

După cum puteți vedea, acest lucru creează un aspect rotunjit pentru sigle.

Dar pentru acest aspect, voi alinia modulele la partea de jos a rândului. Deci, înlocuiți fragmentul „align-items: center” cu următorul:

align-items: flex-end;

Aceasta aliniază toate modulele la partea de jos a rândului, care va funcționa bine cu secțiunea Divizoare pe care o vom adăuga.

Acum suntem gata să ne personalizăm secțiunea. Deschideți setările secțiunii și actualizați următoarele:

Fundal: # 2a3443

Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: rgba (255,255,255,0,03)
Înălțimea separatorului superior: 13vw
Flip divizor superior: vertical

Umplutură personalizată: 0 px de sus, 0 px de jos

Pentru rubrica noastră, vom crea o nouă secțiune și o vom plasa deasupra secțiunii pe care tocmai am creat-o. Creați o nouă secțiune obișnuită cu o structură de rând cu o coloană.

Actualizați setările secțiunii după cum urmează:

Culoare fundal: # 2a3443

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor inferior: rgba (238.238.238,0.09)
Înălțimea divizorului inferior: 13vw

Căptușeală personalizată: 0 px de jos

Acum salvați setările și adăugați un modul de text pe rând și actualizați următoarele:

Pentru conținut adăugați următoarele:

<h2>As Featured In</h2>

Rubrica 2 Font: Montserrat
Titlul 2 Greutate font: îndrăzneț
Titlul 2 Aliniere text: centru
Rubrica 2 Culoarea textului: #ffffff
Rubrica 2 Dimensiune text: 32 px

Marjă personalizată: 0 px de jos

În cele din urmă, adăugați un modul de imagine sub modulul text cu o siglă a companiei pe care doriți să o evidențiați deasupra celorlalte. Apoi actualizați următoarele:

Aliniere imagine: centru
Marja personalizată: -75 px

Verificați rezultatul final.

Gânduri finale

Crearea unei secțiuni pe site-ul dvs. pentru siglele companiei este de fapt destul de simplă. Odată ce aveți imaginile logo dimensionate corespunzător folosind un editor foto, Divi se poate ocupa de restul. Metodele acoperite în acest tutorial ar trebui să ofere tot ce aveți nevoie pentru a crea aspectul pe care doriți să îl realizați cu un efort minim. Și cu puterea lui Divi în colțul tău, ar trebui să te distrezi creând câteva machete unice.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!