Repere produs Divi: Kitul UI pentru modulul Divi suprem
Publicat: 2023-03-27Ultimate Divi Module UI Kit este un produs Divi Marketplace care oferă peste 2000 de layout-uri prefabricate pentru a face proiectarea următorului dvs. site web Divi o ușoară. Produsul oferă secțiuni despre noi, stiluri de tabel de prețuri, forme de formulare de contact, stiluri de butoane și chiar câteva aspecte de site-uri web de o pagină care pot fi complet personalizate. În această evidențiere a produsului, vom arunca o privire mai atentă la Kitul UI Ultimate Divi Module și vă vom ajuta să decideți dacă este produsul potrivit pentru următorul dvs. proiect.
Să începem!
- 1 Instalarea Kitului UI Ultimate Divi Module
- 2 Kitul de interfață pentru modulul Divi Ultimate
- 2.1 Module cu file
- 2.2 Module Blurb
- 2.3 Module Persoane
- 2.4 Module de blog
- 2.5 Despre noi Secțiuni
- 2.6 Module de stabilire a prețurilor
- 2.7 Module de mărturie
- 2.8 Secțiunile formularului de contact
- 2.9 Secțiunile Newsletter
- 2.10 Module de acordeon
- 2.11 Module Slider
- 2.12 Secțiuni cronologice
- 2.13 Aspecte de o pagină
- 2.14 Module de portofoliu
- 2.15 Secțiuni de subsol
- 2.16 Module de contor de bare
- 2.17 Secțiuni cu informații despre casete
- 2.18 Secțiuni de aptitudini
- 2.19 Butoane
- 3 Achiziționați kitul de interfață pentru modulul Divi Ultimate
- 4 Gânduri finale
Instalarea Kitului de interfață pentru modulul Divi Ultimate
Ultimate Divi Module UI Kit vine ca un fișier ZIP care conține fișiere Divi Library .json. Pentru a instala machetele, începeți prin a dezarhiva fișierul. Apoi, deschideți tabloul de bord WordPress și navigați la pagina Biblioteca Divi.
Faceți clic pe Import & Export în partea de sus, apoi selectați fila de import. Alegeți fișierul de aspect, apoi selectați Import Divi Builder Layouts.
Odată ce aspectul a fost importat, deschideți pagina în Divi Builder. Faceți clic pe pictograma albastră plus pentru a adăuga o nouă secțiune, apoi selectați Adăugați din bibliotecă.
Găsiți aspectul, apoi faceți clic pe butonul Utilizați această secțiune pentru a încărca aspectul.
Kitul de interfață pentru modulul Divi suprem
Ultimate Divi Module UI Kit vine cu peste 2000 de aspecte, așa că nu vom putea acoperi totul. Vom arunca o privire la câteva modele din fiecare categorie, astfel încât să vă puteți face o idee mai bună despre ce are de oferit acest produs și dacă este achiziția potrivită pentru dvs.
Module cu file
Există 400 de stiluri diferite de module de file, cu 100 de stiluri de file de jos, 100 de stiluri de file implicite, 100 de stiluri de file orizontale și 100 de stiluri de file verticale. Toate modulele de file oferă animație de trecere pe titlurile filelor și un efect de tranziție a filei. Vă voi arăta câteva exemple din fiecare stil de file.
Iată stilurile de file de jos 1 și 79.
Acesta este stilul 9 și 38 în aspectul implicit al filei.
Urmează aspectul vertical din dreapta, cu stilurile 14 și 52. Acest aspect este etichetat Orizontal în fișierele de produs.
În cele din urmă, acesta este aspectul vertical din stânga, etichetat Vertical în fișierele de produs. Acesta este stilul 71 și stilul 95.
Există o mare varietate de stiluri și machete din care puteți alege, iar filele pot fi personalizate cu ușurință cu propriul conținut și opțiuni de design.
Module Blurb
Există 100 de stiluri de blurb în total. Fiecare stil de prezentare prezintă un anumit tip de efect de hover. Să aruncăm o privire la câteva în detaliu.
Acesta este stilul de prezentare 4. La trecerea cu mouse-ul, cele două bare roz devin verticale, fundalul pictogramei devine roz și există o margine de umbră roz.
Stilul Blurb 9 are două bare de fundal care schimbă culorile și unghiurile la hover. Fundalul pictogramei se schimbă și la trecerea cu mouse-ul.
Blurb 40 are un chenar verde gros și o pictogramă care se răstoarnă la hover.
În cele din urmă, stilul de blurb 50 se schimbă în roșu la trecerea cursorului, iar fila din partea de sus cu pictograma se deplasează la dreapta.
Module persoane
Există 150 de stiluri diferite de module de persoană.
Modulul de persoană stilul 7 are o schemă de culori verde și pictograme pentru rețelele de socializare care se deplasează în sus într-o formațiune de grilă peste o suprapunere verde la hover.
Stilul 34 prezintă numele și poziția cu un chenar portocaliu. La trecerea cursorului, informațiile se deplasează în sus și peste fotografie, iar pictogramele rețelelor sociale sunt dezvăluite.
Acesta este aspectul 46. Prezintă numele și poziția pe o casetă albă sub fotografie. La trecerea cu mouse-ul, caseta se extinde pentru a dezvălui pictogramele rețelelor sociale.
Layout 127 are un aspect simplu al imaginii. La trecerea cu mouse-ul, sunt dezvăluite numele, poziția și pictogramele rețelelor sociale.
Module de blog
Există 100 de module de blog în total, cu 50 de stiluri de vizualizare grilă și 50 de stiluri de vizualizare listă. Să aruncăm o privire la câteva din fiecare stil.
Aspectul de grilă 3 prezintă imaginea postării și detaliile pe un card cu data într-o filă în partea de sus. La trecerea cursorului, este dezvăluit un buton Citiți mai multe, iar deasupra imaginii apare o suprapunere cu o pictogramă.
Aspectul de grilă 40 include un card cu informații despre postare și un buton de citire mai multe care se suprapune pe imaginea prezentată. La trecerea cu mouse-ul, peste imagine apare o suprapunere întunecată.
Aspectul 7 de vizualizare listă conține informații despre postare și un buton de citire mai multe pe un card cu imaginea în stânga. Data este într-o casetă albastră deasupra imaginii.
Aspectul 18 de vizualizare listă prezintă un aspect mai întunecat, cu o imagine în stânga și postați informații în dreapta. La trecerea cu mouse-ul, cardul se mișcă ușor în sus și imaginea se extinde.
Despre noi Secțiuni
Există 100 de modele de secțiune despre noi.
Acesta este stilul de aspect 7. Prezintă ceva text în stânga, împreună cu unele caracteristici marcate cu pictograme. Există un buton de contact sub acesta și o imagine în dreapta.
Această secțiune cu lățime completă conține un text în partea de sus, un buton CTA, trei contoare de numere și o imagine în partea dreaptă.
Acest aspect de călătorie este stilul 17. Are o imagine mare în stânga și ceva text și o pictogramă în dreapta. Mai jos sunt patru imagini care se măresc la trecerea cursorului și se deschid într-o casetă luminosă atunci când sunt selectate.
Stilul 61 prezintă un text în stânga, trei caracteristici evidențiate cu o pictogramă bifă și o imagine în centru. În dreapta, puteți găsi o casetă galbenă cu orele și un buton pentru a rezerva o programare.
Module de prețuri
Există 150 de stiluri de module de prețuri în total.
Modulul de prețuri stilul 3 utilizează o schemă de culori negru și verde. La trecerea cu mouse-ul, caseta de prețuri se extinde, iar antetul devine verde.
Acesta este modulul de prețuri 29. La trecerea mouse-ului, o săgeată roșie apare în dreapta prețului, iar titlul nivelului este evidențiat cu roșu.
Modulul de prețuri stilul 66 are un antet care devine violet la trecerea cu mouse-ul.
Aspectul 72 are un fundal degradat.
Module de mărturie
Există 75 de stiluri diferite de module de mărturie care vin cu kitul UI. Iată câteva.
Acesta este aspectul 5 al mărturiei. Are un chenar portocaliu și o pictogramă citat în partea de sus, urmate de imaginea de profil, mărturie, nume și informații despre job.
Layout 33 are un card care conține mărturia, numele, poziția și o imagine în partea stângă. La trecerea cu mouse-ul, cardul este conturat în verde, fontul numelui devine verde și imaginea se răstoarnă.
Aspectul 71 prezintă o imagine în stânga peste un fundal de imagine mare. În dreapta este un glisor de mărturie într-o casetă de citate.
Secțiuni formular de contact
Există 100 de secțiuni de formular de contact din care puteți alege. Iată doar câteva.
Aspectul 1 este un design simplu cu ceva text în stânga, informații de contact cu câteva pictograme, pictograme de rețele sociale și un formular de contact cu un buton albastru.
Layout 29 are o hartă mare în partea de sus, urmată de adresa, telefonul și informațiile de e-mail din stânga. În dreapta este un formular de contact.
Aspectul 41 al secțiunii de contact prezintă o imagine cu o suprapunere galbenă. Există text în stânga cu un buton CTA care afișează un număr de telefon. Formularul de contact este în partea dreaptă, peste o suprapunere albă.
Layout 75 are trei casete cu informații de contact și pictograme galbene. Mai jos este formularul de contact, cu un buton galben. Aceasta este pe un fundal de imagine care se estompează în alb.
Secțiuni de buletin informativ
Există 25 de secțiuni de înscriere la newsletter.
Stilul 2 include un text de titlu și un formular de înscriere prin e-mail pe un fundal de imagine paralax.
Stilul 5 are o imagine în stânga și un text de titlu în dreapta, urmat de un formular de înscriere.
Acesta este aspectul buletinului informativ 15. Conține un text de titlu în stânga, urmat de un formular de înscriere și câteva link-uri de rețele sociale. Există o imagine rotundă în dreapta.
Layout 20 este un design în stil card, cu două imagini în stil card pe fiecare parte și formularul de înscriere pe un card în mijloc. Există o pictogramă în partea de sus, urmată de un text de titlu și de formular. În partea de jos este un mic text de declinare a răspunderii cu o pictogramă.
Module de acordeon
Există 40 de stiluri de acordeon în total.
Stilul 2 are un titlu verde și conținutul acordeonului într-o casetă gri. Butonul pentru fiecare filă este în dreapta.
Stilul acordeon 8 folosește file portocalii și casete de conținut albe. Există săgeți negre care indică fila deschisă.
Stilul acordeon 14 are o filă de stil rotunjită cu o secțiune de conținut albă.
În cele din urmă, stilul 36 prezintă pictograme violet cu fiecare filă și are un chenar violet subliniind fila activă.
Module glisante
Kitul UI Ultimate Divi Module vine cu 100 de stiluri de module glisante.
Glisorul 2 prezintă un text mare de titlu și un buton CTA peste o imagine mare paralaxă cu o suprapunere întunecată.
Stilul glisor 31 include, de asemenea, textul titlului și un buton CTA pe o imagine cu o suprapunere întunecată. Există un cerc roșu în spatele textului titlului.
Glisorul 72 este mai bogat în conținut, cu un glisor care modifică conținutul textului în partea de sus și un buton CTA dedesubt. Există trei casete de conținut sub aceasta, cu o pictogramă și un text de descriere.
În cele din urmă, aspectul diapozitivului 86 prezintă un conținut text în stânga care schimbă fiecare diapozitiv, precum și două butoane CTA. Există un videoclip în dreapta, urmat de un alt buton CTA.
Secțiuni cronologice
Există 100 de stiluri de cronologie diferite din care puteți alege.
Stilul cronologic 4 include cărți cu o pictogramă și text pentru fiecare pas al cronologiei.
În continuare, cronologia 12 are pictograma cronologiei pe o parte și textul descrierii cronologiei pe cealaltă parte.
Stilul cronologic 32 prezintă o linie punctată cu pictograme pentru fiecare pas. Textul descrierii este conținut într-o casetă care indică pictograma corespunzătoare.
Cronologia 91 este un aspect simplu, cu pictograme în centru și text de descriere a cronologiei pe fiecare parte.
Aspecte de o pagină
Kit-ul UI vine, de asemenea, cu 42 de aspecte diferite de site-uri web de o pagină, care acoperă o mare varietate de industrii și cazuri de utilizare. Vom arunca o privire doar la câteva dintre ele.
Acesta este aspectul de călătorie și turism. Începe cu o bară de meniu secundară care listează sigla, adresa, orele și informațiile de contact. Bara de meniu principală are elemente de meniu și un buton pentru a vă conecta sau a vă înregistra. Titlul este o imagine mare cu ceva text și un buton CTA. Urmează câteva secțiuni numerotate cu imagini și text care descriu destinațiile de călătorie. Există câteva module de contor de numere în secțiunea cu fundal galben, iar secțiunea următoare prezintă câteva module cu pictograme.
Mai jos este un cursor de mărturie, urmat de un tabel de prețuri. Urmează o secțiune de echipă cu link-uri de social media, urmată de o secțiune cu text și logo-uri ale companiei și apoi o altă secțiune cu ceva text și pictograme. Subsolul conține câteva informații despre text, informații de contact și un formular de contact.
Acesta este aspectul agenției de pornire. Are o bară de meniu cu un logo, elemente de meniu și un buton CTA. Antetul conține ceva text, o ilustrație în dreapta și două butoane CTA. Mai jos sunt câteva sigle ale companiei și trei caracteristici evidențiate cu câteva pictograme. O secțiune CTA urmează cu două butoane, apoi o secțiune de echipă cu fotografii și pictograme de rețele sociale. După aceasta sunt două secțiuni cu ceva text, ilustrații și unele caracteristici distinse cu bifă.
Urmează câteva recenzii ale clienților, apoi o altă secțiune de caracteristici cu pictograme și text de descriere. Există un tabel de prețuri, o secțiune Întrebări frecvente, o altă secțiune CTA cu o ilustrație și câteva postări recente.
În cele din urmă, există un formular de contact și o altă casetă cu informații de contact și link-uri de rețele sociale pe o hartă mare, urmate de subsolul cu un logo, link-uri de rețele sociale, elemente de meniu și informații de contact.
Module de portofoliu
Există un total de 120 de stiluri de portofoliu – 40 de stiluri implicite de module de portofoliu, 40 de stiluri de portofoliu filtrabile și 40 de stiluri de portofoliu carusel. Să aruncăm o privire la câteva din fiecare stil.
Primul modul de portofoliu implicit are un aspect simplu al grilei și o suprapunere care apare peste imaginile care prezintă două bare verzi, titlul și anul.
Aspectul portofoliului 29 folosește un aspect similar al grilei și prezintă o suprapunere care apare la trecerea cursorului cu o săgeată roz și titlul proiectului și anul.
Aspectul de portofoliu filtrabil 2 are o bară de filtru portocalie în partea de sus, precum și o bară de navigare neagră în partea de jos. La trecerea cu mouse-ul, apare o suprapunere întunecată cu titlul și anul proiectului.
Aspectul de portofoliu filtrabil 14 are o bară de filtrare cu butoane albastre și o bară de navigare neagră în partea de jos. La trecerea cursorului, este dezvăluită o suprapunere albastră, iar titlul și data sunt cuprinse într-un chenar alb.
Aspectul portofoliului carusel 7 are două săgeți albastre pe fiecare parte pentru a naviga. La trecerea cursorului, există o suprapunere în formă de albastru și informațiile despre proiect.
Aspectul carusel 11 are săgeți portocalii pentru navigare și un diapozitiv portocaliu care conține informațiile despre proiect care sunt dezvăluite la trecerea cursorului.
Secțiuni de subsol
Există 100 de secțiuni de subsol care vin cu kitul UI.
Aspectul de subsol 3 prezintă informațiile de contact în partea de sus, cu câteva pictograme mari. Puteți găsi câteva despre text, pictograme de rețele sociale, link-uri de meniu și ore. Există o bară secundară de subsol în partea de jos, care conține informații despre drepturile de autor și un link către termenii și condițiile.
Acesta este aspectul subsolului 26. Are două module în partea de sus cu pictograme mari, urmate de un formular de contact și informații de contact. În partea de jos sunt câteva link-uri, urmate de informații despre drepturile de autor.
Subsolul 43 are un formular de înscriere prin e-mail în partea de sus. Există mai multe coloane pentru elementele de meniu, unele informații de contact, sigle de plată și informații despre drepturile de autor.
Stilul de subsol 84 are o imagine de fundal cu o suprapunere întunecată. Sigla este în stânga, împreună cu pictogramele rețelelor sociale. Există mai multe elemente de meniu, apoi un formular de înscriere la newsletter. Informațiile de contact sunt afișate în partea dreaptă și, în cele din urmă, informațiile despre drepturile de autor sunt în partea de jos.
Module de contor de bar
Există 50 de stiluri diferite de contor de bar din care să alegeți.
Stilul 3 prezintă linii de bare albastre cu un indicator procentual negru.
Stilul 13 are un titlu în partea stângă, iar procentul este evidențiat cu un fundal roșu mai închis la sfârșitul barei.
Contorul de bar stil 32 are un design rotunjit cu un titlu în stânga și procentul în bară.
În cele din urmă, aspectul 37 are un titlu deasupra barei, capete rotunjite și o secțiune rotunjită la capătul fiecărei bare care conține procentul.
Secțiuni cu informații despre casete
Există 50 de stiluri de informații pentru casete.
Aspectul 2 al secțiunii cu informații despre casetă conține o imagine cu un chenar alb, text de titlu albastru, text de descriere și un buton CTA. Umbra din jurul cutiei se întărește la hover.
Stilul 6 include o imagine cu colțuri rotunjite, o pictogramă, două stiluri de text de titlu și un buton Citiți mai multe. La hover, caseta se mișcă în sus.
Stilul de casetă 11 prezintă o pictogramă în partea de sus peste o imagine mare și un card cu titlul și textul corpului. La trecerea cursorului, peste fotografie apare o suprapunere întunecată, culoarea marginii de jos se schimbă în negru și apare un buton plus.
Layout 47 include o imagine, o pictogramă și text. La trecerea cu mouse-ul, o suprapunere neagră și un chenar alb sunt dezvăluite deasupra imaginii, iar imaginea mărește sub un unghi ușor. Containerul cu pictograme se întoarce în jos și fundalul se schimbă în negru. În cele din urmă, fundalul textului devine portocaliu.
Secțiuni de aptitudini
Există un total de 50 de secțiuni de abilități.
Aspectul 7 al secțiunii de abilități prezintă o imagine mare în dreapta și ceva text, o bară de abilități și contoare de numere în stânga.
Secțiunea de abilități 17 conține text, o bară de abilități și două secțiuni de prezentare cu pictograme în stânga. În dreapta sunt două imagini.
Aspectul de aptitudini 21 include o imagine, ceva text și un buton în partea stângă. În dreapta sunt încă două secțiuni de text, urmate de bara de abilități.
Acesta este aspectul 38. Are o imagine cu o casetă de text suprapusă în partea stângă. În dreapta, puteți găsi un text de titlu, text de corp și bare de abilități cu săgeți.
Butoane
În cele din urmă, există un total de 150 de stiluri de butoane, cu 100 de stiluri de butoane obișnuite și 25 de stiluri de butoane duble.
Acesta este stilul obișnuit al butonului 30. La trecerea cu mouse-ul, apare un fundal roz și culoarea textului se schimbă în alb.
Stilul de buton obișnuit 116 are o cutie mică roz care se extinde la trecerea cursorului pentru a umple fundalul butonului. Textul se schimbă, de asemenea, în roz la trecerea cu mouse-ul.
Butonul dublu stil 3 are o bară care se deplasează în sus sau în jos la trecerea cu mouse-ul.
Stilul 7 cu două butoane prezintă un fundal întunecat care se mișcă în jos la trecerea cu mouse-ul și devine un chenar de jos. O pictogramă este, de asemenea, dezvăluită la trecerea cursorului.
Achiziționați Kitul de interfață pentru modulul Divi Ultimate
Kitul UI Ultimate Divi Module este disponibil pe Divi Marketplace. Costă 49,59 USD pentru utilizare nelimitată a site-ului și actualizări pe viață. Prețul include și o garanție de rambursare a banilor de 30 de zile.
Gânduri finale
Ultimate Divi Module UI Kit vine cu un număr impresionant de layout-uri cu o mare varietate de stiluri și cazuri de utilizare. Totul este personalizabil cu opțiunile Divi, iar orice aspect poate fi modificat pentru a se potrivi cu designul următorului tău proiect. Dacă sunteți în căutarea unui pachet extins de aspect care vă poate ajuta să economisiți timp cu următorul dvs. design, acest produs ar putea fi potrivit pentru dvs. Ne-ar plăcea să auzim de la tine! Ați încercat The Ultimate Divi Module UI Kit? Spune-ne în comentarii ce părere ai despre asta!