Repere produs Divi: Divi Block

Divi Block este un instrument online pentru a amesteca și potrivi blocuri prefabricate. Simplifică designul aspectului și oferă un fișier pentru a încărca și a personaliza și mai mult. În această postare, ne vom uita la Divi Block pentru a vedea ce poate face pentru a vă ajuta să decideți dacă este instrumentul de construire Divi potrivit pentru nevoile dvs.

Ce este Divi Block

Divi Block este un instrument online de tip drag-and-drop care vă permite să construiți machete cu aproape 480 de blocuri pre-proiectate. După ce ați creat aspectul, îl puteți descărca ca fișier JSON și îl puteți încărca pe orice site web Divi.

Blocul Divi include:

• Generator de antet
• Creator de aspect
• Creator de subsol
• Titluri de secțiuni
• Modele speciale de module
• Versiuni deschise și întunecate
• Scheme de culori

Vă puteți previzualiza machetele pe un site web Divi real.

Instrumentul online Divi Block

Aspectul blocului Divi include 4 zone. Le-am numit după funcția lor:

1. Meniul Pagină – primul meniu vă permite să adăugați și să editați blocuri, să gestionați pagini, să exportați în Divi, să vedeți documentația, să vedeți forumul de asistență, să măriți și să micșorați, să anulați și să refaceți și să previzualizați pagina pe un site web Divi live.
2. Blocare meniu – al doilea meniu se deschide când treci cu mouse-ul peste el. Include toate blocurile pe care le puteți adăuga la pagina dvs. Făcând clic pe unul dintre blocuri, se deschide un submeniu cu toate desenele pentru acel bloc.
3. Zona de editare – aceasta este pânza în care veți trage blocurile și le veți aranja în orice ordine doriți.
4. Schema de culori – acesta este selectorul de culori pentru a schimba schema de culori pentru aspect.

Meniul paginii

Primul meniu controlează paginile. Aici, puteți edita și exporta pagina, puteți crea pagini noi, puteți salva munca, încărcați o pagină etc. Când vă salvați lucrarea, acesta va descărca un fișier pe computer. Puteți încărca acest fișier pentru a relua de unde ați rămas. De asemenea, puteți previzualiza și exporta aspectul de aici.

În exemplul de mai jos, am făcut clic pe pictograma Gestionare pagini și export în Divi și am selectat să editez setările paginii. S-a deschis un mod în care pot introduce un titlu și îl pot aplica pe pagina nouă.

Blocare meniul

Meniul bloc include toate blocurile și elementele pe care le puteți adăuga în pagină. Plasați cursorul peste orice element pentru a vedea toate modelele pentru acel element. Include anteturi, machete de pagină, subsoluri și module personalizate. Multe dintre ele includ caracteristici care sunt adăugate fără pluginuri. Faceți clic pe element pentru a-l adăuga pe pagină. În exemplul de mai jos, am selectat să văd antetele eroilor. Am dat clic pe al treilea antet al erou și l-am adăugat pe pagină.

Zona de editare

Când faceți clic pe oricare dintre blocuri, acestea sunt adăugate în zona de editare. Apoi puteți edita mai departe aspectul. Trecând cu mouse-ul peste un bloc, se afișează o fereastră mică cu câteva instrumente de editare. Puteți muta blocul în sus sau în jos, îl puteți schimba într-o versiune deschisă sau întunecată a blocului și puteți șterge blocul din aspect. Nu puteți face modificări ale aspectelor, cum ar fi culorile, textul etc. Aceste modificări vor fi afișate în previzualizare și în aspectul de pe site-ul dvs. web.

Pentru acest exemplu, am adăugat trei blocuri: un carusel de carduri, un antet de pagină și un CTA. Au fost plasate pe pagină în ordinea în care le-am selectat.

Exemple de generator de antet

În acest exemplu, am mutat blocurile în diferite locații din layout. Am schimbat și două dintre blocuri. CTA este acum ușor, iar caruselul de carduri este acum întunecat. Blocurile s-au mișcat și s-au schimbat extrem de repede. Nu a trebuit să aștept să văd noul aspect.

Generatorul de antet are 6 opțiuni care includ anteturi prefabricate, efecte, submeniuri, meniuri mobile, mega meniuri și preîncărcare. Efectele apar în previzualizări atunci când treceți cu mouse-ul peste ele. În acest exemplu, trec cu mouse-ul peste opțiunile Antet și Navigare, care includ anteturile prefabricate. Am adăugat un preîncărcare și un mega meniu la aspect.

Exemple de aspect

Aspectele includ secțiuni eroi, anteturi, pagini despre noi, servicii, CTA, întrebări frecvente, tabele de prețuri, mărturii, membri ai echipei, bloguri, clienți, galerii, numere, procese, portofolii, formulare de e-mail, formulare de contact și subsol. Exemplul de mai jos arată un titlu de secțiune, un antet erou și un antet de pagină.

Acest exemplu arată secțiuni pentru Despre noi și Servicii.

Acest exemplu arată un CTA, o Întrebări frecvente și un tabel de prețuri.

Iată exemple de mărturie și aspectul unei echipe.

Acesta arată un aspect al blogului și siglele clientului.

Acest exemplu arată o galerie, o secțiune numerică și o secțiune de proces, care arată pașii unui proces.

Iată exemple de portofoliu și formular de înscriere prin e-mail.

Acest exemplu arată un formular de contact.

Acest exemplu arată un subsol.

Exemple speciale de proiectare a modulelor

Ultima parte a machetelor include module speciale care adaugă funcții fără a utiliza pluginuri. Unele dintre acestea sunt văzute în celelalte aspecte, dar voi arăta câteva dintre ele. Acesta arată opțiunile sliderului înainte și după.

Iată galeria de zidărie.

Acest exemplu arată o bară promoțională, un fundal dinamic și o comutare de conținut.

Pentru acest exemplu, am selectat un buton plutitor și o bară slide-in.

Acest exemplu arată o cronologie orizontală și un text gradient.

Schema de culori

Făcând clic pe pătratul de culoare din colțul din dreapta jos, se deschide selectorul de culori. Aceasta controlează schema de culori pentru elementele de pe pagină. Valoarea implicită este roșu, codul hexadecimal 229, 27, 35. Puteți să-l modificați mutând cercul din zona de culoare, mutând cercul în glisorul de culoare sau adăugând valorile RGB dorite. Când îl schimbați, nu veți vedea modificările culorilor din machetele prefabricate, dar le veți vedea în fișierele dvs. JSON când le încărcați și în previzualizare dacă alegeți să le vizualizați.

Iată aspectul care arată culoarea originală. L-am schimbat în albastru în instrumentul pentru schema de culori.

Iată aspectul pe site-ul meu. Arată albastrul pe care l-am ales. În continuare, vom vedea cum să obțineți aspectul de la Divi Block pe site-ul dvs. și ce puteți face cu el odată ce îl obțineți acolo.

Proiectarea unui aspect cu Divi Block

Voi folosi Divi Block pentru a crea un antet, o pagină de pornire și un subsol. Apoi le voi încărca ca șabloane în Divi Theme Builder.

Antet

Pentru antet, am folosit un antet cu efecte, stil de submeniu și un meniu mobil. Am folosit o culoare maro pentru schema de culori. Exportez fișierul JSON. Se descarcă ca fișier arhivat, pe care îl voi dezarhiva pe computer.

În continuare, voi construi un antet global de la zero în Divi Theme Builder.

În continuare, voi importa aspectul.

În sfârșit, acum pot face toate ajustările pe care le doresc la aspect. Voi adăuga meniul meu principal, informațiile de contact, linkurile sociale și sigla. Odată ce îl salvez, antetul apare pe site-ul meu.

Toate CSS-urile sunt adăugate blocurilor de cod. Meniul mobil este decolorat, ca de obicei.

Iată antetul din partea din față. Meniul este lipicios, așa că rămâne în partea de sus a paginii atunci când utilizatorul derulează.

Pagina principala

Pentru aspectul paginii de pornire, am adăugat o secțiune ero și un CTA. Am folosit un portocaliu deschis pentru schema de culori. Exportez fișierul JSON, pe care îl voi dezarhiva pe computer.

Apoi, voi construi un șablon de pagină de pornire de la zero în Divi Theme Builder și voi adăuga un corp personalizat.

În continuare, voi importa aspectul.

În sfârșit, acum pot face toate ajustările pe care le doresc la aspect. Îmi voi adăuga textul și imaginile. După ce îl salvez, aspectul apare pe pagina mea de pornire. Aceasta este secțiunea eroilor.

Iată o parte din CTA.

Iată secțiunea eroilor din față. Am derulat în jos pentru a afișa meniul care se lipește în partea de sus a ecranului.

Subsol

Pentru subsol, am folosit un aspect cu informații de contact. Am folosit o culoare maro pentru schema de culori. Acum, export fișierul JSON. O voi dezarhiva pe computerul meu.

În continuare, voi construi un subsol global de la zero în Divi Theme Builder.

În continuare, voi importa aspectul.

În sfârșit, acum pot face toate ajustările pe care le doresc la aspect. Voi adăuga informațiile mele de contact. Odată ce îl salvez, subsolul apare pe site-ul meu.

Iată subsolul din partea din față.

De unde să obțineți Divi Block

Divi Block este disponibil pe site-ul editorului. Versiunea gratuită este disponibilă pentru utilizare de oricine. Versiunea Pro a Divi Block este disponibilă numai ca parte a abonamentului Divi.Help Pro. Abonații obțin acces la toate produsele lor legate de Divi, inclusiv versiunea Divi Block Pro, pluginuri premium, teme pentru copii și pachete de layout. Abonamentul Pro este de 49 USD pe an.

Gânduri de sfârșit

Acesta este aspectul nostru asupra Divi Block. Acesta este un constructor de drag-and-drop interesant. În loc să mutăm module și alte elemente, lucrăm cu elemente complete ca blocuri pre-rendate. Acest lucru facilitează crearea de machete fără a fi blocat cu locul în care ar trebui să meargă totul pe pagină. De asemenea, simplifică designul complet al aspectului, deoarece putem amesteca și maximiza secțiunile prefabricate. Nu veți vedea culorile personalizate în timp ce lucrați în Divi Block, dar din moment ce blocurile sunt pre-rendate, are sens. Îl putem previzualiza și ajusta totul odată ce fișierele sunt importate în Divi Builder. Am găsit Divi Block ușor de utilizat și face layout-urile Divi rapid și ușor.

Vrem sa auzim de la tine. Ai încercat Divi Block? Spune-ne în comentarii ce părere ai despre asta.