Descărcați GRATUIT un design multifuncțional de vânzări pentru Divi

A avea un banner multifuncțional de vânzări va fi cu siguranță la îndemână (și vă va economisi timp) în acele perioade cruciale ale anului, când promoțiile sunt la moda. De aceea, oferim acest banner de vânzări multifuncțional pentru Divi ca descărcare GRATUITĂ! Acest banner de vânzări poate fi personalizat cu ușurință pentru a se potrivi nevoilor dvs., doar cu câteva modificări ale unui anumit text și o imagine de fundal. Proiectarea bannerului de vânzări în Divi este suficient de ușoară încât nu va trebui să vă mulțumiți cu bannere de imagini care de multe ori arată puțin granuloase pe web. Deci, pe lângă descărcarea gratuită, vă voi arăta cum să proiectați bannerul de vânzări în Divi de la zero.

Să începem!

ce este inclus

Iată o privire asupra designului bannerului de vânzări inclus în descărcare.

Descărcați gratuit designul Bannerului de vânzări

Pentru a pune mâna pe designul bannerului de vânzare gratuit, va trebui mai întâi să le 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 de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

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.

DESCARCA

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!

Încărcarea aspectului în biblioteca Divi

După ce descărcați fișierul, dezarhivați-l. Veți găsi că conține un fișier numit „sales-banner-design.json”. Aceasta este ceea ce veți încărca în biblioteca Divi. Acum, accesați tabloul de bord wordpress și navigați la Divi> Biblioteca Divi. Apoi faceți clic pe butonul de import din partea de sus a paginii. Din fereastra pop-up de portabilitate, selectați fila Import și alegeți fișierul sales-banner-design.json. Apoi faceți clic pe butonul Importați machetele Divi Builder.

Acum, pentru a importa aspectul în pagina dvs., pur și simplu creați o pagină nouă și implementați constructorul vizual. Apoi selectați „Alegeți un aspect premade”. Din fereastra pop-up de încărcare din bibliotecă, selectați fila „Aspectele dvs. salvate” și apoi faceți clic pe aspectul de proiectare a bannerelor de vânzări din listă. Asta e!

Cum să creați bannerul de vânzări de la zero în Divi

Adăugarea fundalului secțiunii

Pentru a începe lucrurile, creați o pagină nouă. După ce ați dat paginii un titlu, implementați constructorul vizual și selectați opțiunea „Build From Scratch”. Apoi adăugați o nouă secțiune cu un rând de o coloană.

Înainte de a începe să adăugați module la rând, dați secțiunii dvs. o culoare de gradient de fundal (culoarea nu contează în acest moment. Avem nevoie doar de o culoare de fundal pentru a vedea toate elementele de design albe pe care le vom folosi pentru vânzările noastre banner.)

Personalizarea rândurilor pentru bannerul de vânzări

Înainte de a adăuga modulele noastre pe rând, haideți mai întâi să acordăm rândului nostru o lățime personalizată de 700 px și să eliminăm orice spațiu de sus sau de jos, astfel încât rândul nostru să stea frumos deasupra celuilalt rând pe care îl vom adăuga dedesubt. Accesați setările rândului și actualizați următoarele:

Lățime personalizată: 700 px
Lățimea jgheabului: 1
Marjă personalizată: 0 px sus, 0 px, jos
Umplutură personalizată: 0 px de sus, 0 px de jos

Acum dublează rândul de două ori, astfel încât să ai în total trei rânduri identice. Acestea vor fi folosite pentru a construi bannerul nostru de vânzări.

Adăugarea cadrului de margine de sus cu text adiacent

Pentru a construi bannerul nostru de vânzări, începem cu un chenar superior cu un text în stânga. Pentru a face acest lucru vom folosi un modul divizor și un modul text. Mai întâi, creați un nou modul de text și adăugați câteva cuvinte de conținut în caseta de conținut.

Conținut: „Numai online”

Continuați cu fila de proiectare și actualizați următoarele:

Greutatea fontului textului: Bold
Stil de text text: TT
Culoarea textului textului: rgba (255,255,255,0,9)
Dimensiune text text: 15 px
Spațiere scrisoare text: 2 px
Înălțimea liniei de text: 1em
Lățime: 22% (desktop), 25% (tabletă), 40% (smartphone)
Alinierea modulului: stânga
Marjă personalizată: 0 px în partea de sus, -15 px în partea de jos
Împletire personalizată: 0 px sus, 0 px jos

Această marjă personalizată este puțin prematură, deoarece divizorul nostru nu a fost încă adăugat, dar este necesar să aliniați textul astfel încât să fie perfect adiacent divizorului pentru a fi adăugat în curând.

Acum adăugați un modul divizor sub modulul text din același rând. Apoi actualizați setările divizorului după cum urmează:

Culoare: rgba (255.255.255,0.9)
Poziția separatorului: de jos
Greutatea divizorului: 15 px
Înălțime: 15 px
Lățime: 78% (desktop), 75% (tabletă), 60% (smartphone)
Alinierea modulului: dreapta
Marjă personalizată: 0 px de sus, 0 px de jos
Împletire personalizată: 0 px sus, 0 px jos

Desigur, va trebui să ajustați lățimea chenarului în funcție de lățimea modulului de text atunci când personalizați designul pentru propriile nevoi.

În continuare trebuie să adăugăm încă un modul divizor pentru a ne conecta divizorul la marginea dreaptă a rândului pe care îl vom proiecta în continuare.

Pentru aceasta, copiați modulul divizor și actualizați următoarele:

Lățime: 15 px
Marjă personalizată: -1 px de jos

Adăugarea cadrului de margine de jos cu Text adiacent

Pentru a crea cadrul de margine de jos, putem folosi același element pe care l-am creat în cadrul de margine de sus al rândului nostru de sus. Numai de data aceasta vom începe cu modulul divizor larg de 15 px. Continuați și copiați modulul divizor de 15 px și lipiți-l în al treilea rând (de jos). Apoi actualizați alinierea modulului la stânga în loc de dreapta.

Apoi, copiați modulul divizor mai lung din rândul de sus și lipiți-l sub divizorul de 15 px din rândul de jos. Apoi reglați următoarele:

Lățime: 75% (desktop), 70% (tabletă), 50% (smartphone)
Alinierea modulului: stânga

În cele din urmă, copiați peste modulul de text din rândul de sus și lipiți sub cele două module divizoare din rândul de jos. Apoi actualizați următoarele:

Conținut: „Începe 1 noiembrie”
Lățime: 25% (desktop), 30% (tabletă), 50% (smartphone)
Alinierea modulului: dreapta
Marjă personalizată: -15 px în partea de sus, 0 px în partea de jos
Împletire personalizată: 15 px stânga

Adăugarea modulelor de text la rândul de mijloc

Acum suntem gata să începem să adăugăm module de text la rândul nostru din mijloc, care va conține textul principal al bannerului de vânzări. Vom stiva trei module de text unul peste celălalt. Continuați și adăugați primul modul de text pe rândul din mijloc.

Apoi actualizați următoarele:

Conținut: „Reducere de 20%”
Culoare fundal: rgba (255.255.255,0.9)

Greutatea fontului textului: Semi Bold
Stil de text text: TT
Culoarea textului textului: # 000000
Dimensiune text text: 34 px (desktop), 20 px (smartphone)
Spațiere scrisoare text: 2 px
Înălțimea liniei de text: 1em
Orientare text: centru
Căptușeală personalizată: 2vw sus, 2vw jos, 5vw stânga, 5vw dreapta

Acordarea textului de o culoare neagră peste un fundal alb este esențială pentru maximizarea efectului modului de amestecare a ecranului, care va permite textului să se amestece cu fundalul secțiunii. Vom adăuga modul de amestecare a ecranului pe rând puțin mai târziu.

Acum copiați modulul de text pentru a porni proiectul următorului modul de text. Apoi actualizați conținutul cu următorul html:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

Stilul în linie adaugă pur și simplu o margine neagră în jurul textului antet. Din nou, culoarea neagră va funcționa cu modul de amestecare a ecranului pentru a expune fundalul secțiunii cu textul.

Apoi actualizați următoarele:

Titlul 2 Greutate font: îndrăzneț
Rubrica 2 Stil font: TT
Rubrica 2 Culoarea textului: # 000000
Titlul 2 Dimensiune text: 100 px (desktop), 80 px (tabletă), 60 px (smartphone)
Rubrica 2 Spațierea literelor: 2 px
Marjă personalizată: 0 px de sus
Împletire personalizată: 0 px sus, 0 px jos

Pentru ultimul modul de text, copiați primul modul de text din acest rând din mijloc și lipiți-l sub al doilea modul de text.

Apoi actualizați următoarele:

Conținut: „Cumpărați acum”
Stil de text text: TT, U (subliniat)
Marjă personalizată: 0 px de sus
Căptușeală personalizată: 1vw sus, 2vw jos

Stilul rândului mediu

Faza finală a acestui design este de a adăuga o margine la rândul din mijloc și un efect de mod de amestecare a ecranului. Pentru aceasta, deschideți setările rândului din mijloc și actualizați următoarele:

Împletire personalizată: 15 px la stânga, 15 px la dreapta
Lățimea marginii drepte: 15 px
Culoare margine dreaptă: rgba (255,255,255,0,9)
Lățimea marginii stângi: 15 px
Culoare margine stângă: rgba (255,255,255,0,9)
Blend Mode: ecran

Modul de amestecare a ecranului permite textului să amestece imaginea de fundal pentru a se afișa prin text pentru un efect rece!

Verificați rezultatul final.

Adăugarea unui link la bannerul dvs. de vânzări

Deoarece acesta este un banner de vânzări, veți dori să maximizați spațiul pe care se poate face clic pe banner pentru a crește conversiile. Pentru a face acest lucru, puteți adăuga un link către întregul rând din mijloc. Pur și simplu deschideți setările rândului din mijloc și introduceți o adresă URL de link de rând pentru a redirecționa către pagina dorită.

Adăugarea diferitelor fundaluri de secțiuni pentru modele unice

Cu acest nou design de banner de vânzări, puteți actualiza cu ușurință imaginea de fundal pentru a crea modele unice.

Iată câteva exemple.

Gânduri finale

Sper că acest design de banner de vânzări este util pentru toate acele promoții web necesare pe tot parcursul anului. Designul este conceput pentru a servi ca un banner multifuncțional de vânzări care poate fi ușor actualizat cu text și imagini de fundal noi pentru secțiuni pentru un aspect complet nou. Puteți adăuga chiar și un fundal video!

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

Noroc!