Cum să creați un catalog de modă cu Divi

În această postare, vă vom arăta cum puteți crea un catalog de modă scrolling. Utilizarea acestei metode vă va ajuta să vă conectați cu publicul dvs. așa cum ați face, oferindu-le un catalog pe hârtie. Crearea unui catalog de modă cu defilare online vă poate ajuta să creșteți rezultatele obținute din catalog. De exemplu, prin includerea de legături directe către articole din magazin, procesul de cumpărare va fi îmbunătățit.

Rezultat

Rezultatul vă vom arăta cum să creați, pas cu pas, arată astfel pe desktop:

Și așa pe telefon și tabletă:

Cum să creați un catalog de modă cu Divi

Abonați-vă la canalul nostru Youtube

Adăugați forme transparente la imagini cu Photoshop

Primul lucru pe care vi-l vom arăta este cum să adăugați o parte transparentă la o imagine cu Photoshop. Există o alternativă gratuită pentru Photoshop numită GimpShop, dar în această parte a tutorialului vom folosi numai Photoshop. Vom avea nevoie de două imagini cu fiecare două forme diferite; unul pentru desktop și unul pentru mobil și tabletă. În această parte, vă vom arăta pur și simplu cum să adăugați o formă transparentă imaginii. După aceea, puteți face singuri toate imaginile de care aveți nevoie.

Deschideți Photoshop

Începeți prin a deschide Photoshop pe computer.

Deschideți imaginea

Apoi, deschideți prima imagine pe care doriți să o editați. Metoda rămâne aceeași pentru toate cele trei imagini pe care le veți utiliza pe parcursul acestui tutorial. De aceea o vom explica o singură dată.

Faceți dublu clic pe Image & Create Layer

După ce ați deschis imaginea pe care doriți să o editați, faceți dublu clic pe imagine și creați un nou strat pentru aceasta.

Adăugați încă un strat

Continuați adăugând un strat gol deasupra acestuia.

Selectați Stratul 1 și Instrument poligonal Lasso

Selectați Stratul 1 și începeți să utilizați instrumentul Poligonal Lasso.

Faceți o formă

În timp ce aveți activat instrumentul poligonal Lasso, mergeți mai departe și creați forma transparentă în interiorul imaginii.

Faceți stratul 1 invizibil și apăsați Ștergeți în timp ce selectați stratul 0

După ce ați selectat zona pe care doriți să o faceți transparentă, continuați să faceți stratul 1 invizibil, selectați din nou stratul 0 și apăsați butonul Ștergere de pe tastatură.

Selectați Rectangular Marquee Tool și faceți clic Undeva pe imagine

După ce ați făcut acest lucru, selectați Instrumentul de marcaj dreptunghiular și faceți clic undeva pe imagine.

Salvați imaginea ca PNG

În cele din urmă, va trebui să salvați imaginea ca PNG și să repetați același proces pentru toate cele patru imagini pe care le veți utiliza pe tot aspectul.

Setări principale ale barei de meniu

Setările principale ale barei de meniu de care avem nevoie pentru aspectul pe care îl creăm sunt următoarele:

• Ascundeți imaginea logo-ului: activați
• Înălțimea meniului: 30
• Dimensiune text: 15
• Spațierea literelor: -1
• Font: Lato
• Stilul fontului: Bold și majuscule
• Culoarea textului: #FFFFFF
• Culoare link activ: #FFFFFF
• Culoare fundal: rgba (255,255,255,0)
• Culoarea fundalului meniului drop-down: rgba (255,255,255,0)

Introducere ediție

După ce ați modificat bara de meniu principală, puteți merge mai departe și puteți adăuga o pagină nouă, puteți utiliza Divi Builder și puteți trece la Visual Builder.

Adăugați o secțiune nouă

În acea pagină, începeți prin adăugarea unei secțiuni standard.

Culoarea fundalului secțiunii

Fundalul acelei culori trebuie să fie „# d6d6d6”.

Căptușeală personalizată

Treceți la fila Proiectare a acelei secțiuni. În subcategoria Spacing, adăugați „24px” la umplutura superioară și 0px la cea inferioară.

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

Odată ce ați terminat, puteți continua și adăuga un rând cu o coloană la secțiune.

Dimensionare

Accesați fila Proiectare și modificați subcategoria Dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea canalului personalizat: 1

Căptușeală personalizată

Derulați în jos și adăugați „0px” la umplutura superioară a rândului.

Primul modul de text

Odată ce ați terminat, puteți adăuga un modul de text pe rând. După ce ați introdus textul pe care doriți să-l apăreați, accesați fila Design și asigurați-vă că următoarele modificări se aplică subcategoriei Text:

• Font text: TT standard vechi
• Stilul fontului: majuscule
• Dimensiunea fontului textului: 72 (desktop), 41 (tabletă), 29 (telefon)
• Culoarea textului: # 000000
• Spațiere scrisoare text: 11 px
• Înălțimea liniei de text: 1em
• Orientare text: centru

Deschideți subcategoria Spațiere și adăugați „30 px” în căptușeala superioară și inferioară.

Modul divizor

Chiar sub modulul text, adăugați un modul divizor și activați opțiunea „Afișați divizorul”.

Mergeți la fila Design și alegeți „#FFFFFF” ca culoare separatoare.

Apoi, alegeți „Solid” ca stil divizor și „Sus” ca poziție divizor în subcategoria Stiluri.

Apoi, deschideți subcategoria Dimensionare și aplicați următoarele setări:

• Greutatea divizorului: 10 px
• Înălțime: 23 px
• Lățime: 100%
  

Al doilea modul de text

Chiar sub modulul divizor, adăugați un alt modul de text. Alegeți orice pictogramă doriți în Harta caracterelor (Windows) sau în Paleta de caractere (Mac) și plasați-o în fila Conținut. Pentru acest exemplu, am folosit următorul simbol: „↓”. Apoi, accesați fila Proiectare și aplicați următoarele setări:

• Dimensiunea fontului textului: 42 px
• Culoarea textului: # 000000
• Orientare text: centru

Catalog de modă pentru desktop (secțiune nouă)

Acum, adăugați o altă secțiune standard. Această secțiune va conține două rânduri care vor afișa o parte diferită a catalogului pe desktop.

Setări secțiune

Culoare de fundal

Folosiți „#FFFFFF” ca culoare de fundal a acestei secțiuni.

Căptușeală personalizată

Apoi, accesați fila Proiectare și adăugați „15 px” în căptușeala superioară.

Primul rand

Structura coloanei

După ce ați modificat setarea, adăugați un rând cu următoarea structură de coloane:

Culoare de fundal

Deschideți setările rândului și adăugați „rgba (255,255,255,0,14)” ca culoare de fundal.

Imagine de fundal

Adăugați una dintre imaginile pe care le-ați făcut în partea Photoshop a acestei postări și utilizați „Hue” ca amestec de imagine de fundal.

Dimensionare

În cele din urmă, efectuați următoarele modificări la subcategoria Dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Primul modul de text

După ce ați completat setările rândului, adăugați un modul de text la a doua coloană. Utilizați următoarele setări pentru subcategoria Text:

• Font text: amar
• Dimensiunea fontului textului: 63 px
• Culoarea textului: # 000000
• Orientare text: centru

Modul divizor

Chiar sub primul modul text, adăugați un modul divizor și activați opțiunea „Afișați divizorul”.

Treceți la fila Proiectare și utilizați „# 000000” ca culoare separatoare.

În cadrul subcategoriei Stiluri, utilizați „Solid” ca stil divizor și „Sus” ca poziție divizor.

Derulați în jos în aceeași filă și aplicați următoarele setări pentru subcategoria Dimensionare:

• Greutatea divizorului: 3 px
• Înălțime: 23 px
• Lățime: 57%
• Alinierea modulului: stânga

În cele din urmă, adăugați o marjă superioară de „30 px” și o marjă inferioară de „50 px”.

Al doilea modul de text

Odată ce divizorul este la locul său, continuați și adăugați al doilea modul de text care va conține un titlu. În primul rând, utilizați „# 000000” ca culoare de fundal în fila Conținut.

Apoi, treceți la fila Proiectare și efectuați următoarele setări pentru subcategoria Text:

• Font text: amar
• Dimensiunea fontului textului: 92 px
• Culoarea textului: # 000000
• Înălțimea liniei de text: 1em
• Orientare text: stânga

Deschideți subcategoria Border și utilizați următoarea margine:

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

În plus, utilizați o lățime de '77% 'și o aliniere a modulului din stânga.

În cele din urmă, adăugați „15 px” în partea de sus, dreapta, jos și stânga a modulului Text.

Al treilea modul de text

Adăugați un alt modul de text chiar sub cel precedent. Acesta va reprezenta descrierea. Accesați fila Proiectare și utilizați următoarele setări pentru subcategoria text:

• Font text: Lato
• Dimensiunea fontului textului: 16 px
• Culoarea textului: # 000000
• Înălțimea liniei de text: 1em
• Orientare text: stânga

Deschideți subcategoria Dimensionare, utilizați „70%” pentru Lățime și selectați Alinierea modulului din stânga.

În cele din urmă, adăugați o marjă superioară de „20 px”.

Al cincilea modul de text

Al cincilea modul de text servește ca buton minimalist. În fila Conținut, utilizați simbolul „→” + textul și puneți un link în spatele acestuia.

Apoi, accesați fila Proiectare. Utilizați următoarele setări pentru subcategoria Text:

• Font text: amar
• Dimensiunea fontului textului: 23 px
• Culoarea textului: # 000000
• Înălțimea liniei de text: 1em
• Orientare text: stânga

Derulați în jos aceeași filă până când întâlniți subcategoria Dimensionare. În cadrul acestei subcategorii, utilizați o lățime de '49% 'și o aliniere corectă a modulului.

În cele din urmă, adăugați o marjă superioară de „80px”.

Al șaselea modul de text

Al șaselea și ultimul modul de care vom avea nevoie este aproape același cu cel anterior. Folosiți textul „→” + și puneți un link în spatele acestuia.

Setările pentru subcategoria text sunt următoarele:

• Font text: amar
• Dimensiunea fontului textului: 23 px
• Culoarea textului: # e02b20
• Înălțimea liniei de text: 1em
• Orientare text: stânga

Schimbați lățimea la „39%” și utilizați și alinierea corectă a modulului.

Al doilea rând

Culoare de fundal

Deschideți setările rândului și adăugați „rgba (255,255,255,0,14)” ca culoare de fundal.

Imagine de fundal

Adăugați una dintre imaginile pe care le-ați făcut în partea Photoshop a acestei postări și utilizați „Hue” ca amestec de imagine de fundal.

Structura coloanei

Al doilea rând pe care trebuie să îl adăugați la secțiunea standard este exact opusul celui precedent.

Module de clonare

Modulele pe care le-am folosit în rândul anterior sunt aceleași de care avem nevoie pentru acest rând, așa că mergeți mai departe, clonați-le și plasați-le în prima coloană în loc de a doua. Va trebui să facem câteva modificări de aliniere în următoarea parte a acestei postări.

Primele modificări ale modulului de text

Deschideți primul modul de text și adăugați o marjă superioară de „20 px”.

Modificări ale modulului divizor

Apoi, deschideți modulul divizor și schimbați alinierea modulului din subcategoria de dimensionare la dreapta.

A doua modificare a modulului de text

Setați Orientarea textului celui de-al doilea modul de text la dreapta.

Și alegeți o aliniere corectă a modulului și în subcategoria Dimensionare.

A treia modificare a modulului de text

Al treilea modul de text va avea nevoie și de o orientare corectă a textului.

Și o aliniere corectă a modulului, de asemenea.

A cincea modificare a modulului de text

Singurul lucru pe care va trebui să-l faceți pentru al cincilea modul de text este să schimbați lățimea în '82% '.

A șasea modificare a modulului de text

Același număr este valabil pentru al șaselea modul de text, dar folosiți în schimb „87%”.

Ascunde secțiunea pentru tabletă și telefon

După ce ați terminat cele două rânduri, puteți continua și dezactiva întreaga secțiune de pe telefon și tabletă.

Catalog de tablete și telefoane (secțiune nouă)

Pentru ca totul să arate excelent și pe tabletă și telefon, vom crea o nouă secțiune standard.

Setări secțiune

Culoare de fundal

Adăugați „#FFFFFF” ca culoare de fundal a secțiunii respective.

Căptușeală personalizată

Treceți la fila Proiectare și adăugați o căptușeală superioară de „15 px”.

Primul rand

Structura coloanei

Apoi, adăugați un rând cu două coloane la secțiune.

Dimensionare

Accesați subcategoria Dimensionare a acelui rând și efectuați următoarele modificări:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Modulul de imagine

În loc să folosim o imagine de fundal, vom folosi în schimb un modul de imagine. În acest fel, vom fi siguri că textul și imaginea nu se vor suprapune. Continuați și adăugați un modul de imagine în prima coloană a rândului și încărcați o imagine.

Clonați module din primul rând în versiunea desktop

Apoi, clonați toate modulele pe care le-ați utilizat în primul rând al versiunii desktop și plasați-le în a doua coloană.

Schimbați dimensiunea fontului modulului al doilea text

Există un singur lucru care trebuie schimbat; dimensiunea fontului celui de-al doilea modul de text. Schimbați-l în 65 px.

Al doilea rând

Structura coloanei

Apoi, continuați și adăugați un alt rând cu două coloane la secțiune.

Dimensionare

Acest rând va avea nevoie și de o subcategorie de dimensionare modificată:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Modulul de imagine

Adăugați și modulul de imagine la prima coloană și încărcați o imagine.

Clonați module din al doilea rând în versiunea desktop

Apoi, continuați și clonați modulele care sunt plasate în al doilea rând al versiunii desktop. După ce le-ați clonat, plasați-le în a doua coloană a acestui rând.

Schimbați dimensiunea fontului modulului al doilea text

Dimensiunea textului celui de-al doilea modul de text trebuie schimbată, de asemenea. Mergeți mai departe și dați-i dimensiunea fontului „65px”.

Ascunde secțiunea pentru desktop

După ce ați terminat ambele rânduri, puteți continua și dezactiva întreaga secțiune de pe desktop.

Rezultat

Și voila, după ce ați urmat toți pașii din această postare, ar trebui să obțineți următorul rezultat pe desktop:

Și următoarele pe telefon și tabletă:

Gânduri finale

În această postare, v-am arătat cum puteți crea un catalog de modă derulant. Pentru ca designul nostru să funcționeze, v-am arătat mai întâi cum să creați o formă transparentă în imaginea dvs. cu Photoshop. Ulterior, am folosit aceste imagini în cadrul tutorialului nostru Divi pentru a crea designul. 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 Rvector / shutterstock.com