6 moduri în care puteți utiliza funcția de încărcare a fișierelor Divi pentru a crește productivitatea

Publicat: 2018-08-22

Funcția Divi's Drag and Drop File Upload poate fi un instrument minunat pentru a spori productivitatea ca designer web. În acest tutorial, vă voi prezenta 6 moduri în care puteți utiliza caracteristica drag and drop pentru a vă îmbunătăți fluxul de lucru de proiectare Divi. Vă voi oferi și câteva sfaturi utile, exemple și fragmente de cod bonus pe parcurs. Dacă este ceva, este întotdeauna distractiv să trageți și să fixați fișiere doar pentru a vedea ce se întâmplă.

Să începem!

O scurtă prezentare generală a funcției de încărcare a fișierelor Divi Drag & Drop

Funcția Drag & Drop File Upload este o modalitate ușoară de a adăuga conținut pe pagina dvs. atunci când utilizați Divi Builder. După cum sugerează și numele, puteți trage și plasa fișiere pe pagina dvs. pentru a adăuga conținut fără procesul normal de configurare a secțiunii, rândului și modulului dvs. în prealabil. Și Divi va plasa conținutul diferit în funcție de tipul de fișier. De exemplu, fișierele txt vor fi adăugate la modulele de text, fișierele html vor fi adăugate la modulele de cod și fișierele css vor fi adăugate ca pagină CSS personalizată.

Tipuri de fișiere acceptate și comportamentul lor de drag & drop

Iată o listă cu toate tipurile de fișiere acceptate în prezent de caracteristica Drag & Drop. Acest lucru poate fi util atunci când vă gândiți la modalități prin care puteți profita de caracteristică în procesul de proiectare. Am adăugat, de asemenea, o scurtă descriere pentru a vă ajuta să înțelegeți ce se va întâmpla atunci când trageți aceste tipuri de fișiere.

Fișiere imagine

  • gif
  • jpeg
  • jpg
  • png

Când introduceți un singur fișier imagine, Divi va crea o nouă secțiune și un rând cu o coloană și apoi va adăuga un modul de imagine cu imaginea dvs. deja încărcată în modul.

Când introduceți mai multe fișiere imagine simultan, Divi va crea aceeași structură (secțiune nouă și rând), dar va adăuga imaginile dvs. într-un modul de galerie.

Fișiere text

  • txt

Introducerea unui fișier txt va adăuga textul la un nou modul de text într-o nouă secțiune și rând.

Fișiere de fonturi

  • otf
  • ttf

Dacă introduceți un fișier de fonturi, va fi inițiată modalitatea de tip pop-up Încărcare font cu numele fontului și fontul deja încărcat. Tot ce trebuie să faceți este să confirmați că doriți să includeți toate greutățile de font acceptate înainte de a face clic pe butonul de încărcare.

Fișiere video

  • m4v
  • mov
  • webm
  • wmv
  • mp4

Introducerea unuia sau mai multor fișiere video va adăuga fiecare videoclip la un nou modul video într-o nouă secțiune și rând.

Fișiere audio

  • mp3
  • wav

Dacă introduceți unul sau mai multe fișiere audio, fiecare fișier audio va fi adăugat la un nou modul audio într-o nouă secțiune și rând.

Fișiere Web

  • json
  • html
  • css

Fișierul json este pentru orice aspect de pagină pe care l-ați exportat. Tragerea în fișierul json va încărca automat aspectul paginii pe pagină.

Tragerea într-un fișier html va adăuga html la un nou modul de cod într-o nouă secțiune și rând.

Tragerea într-un fișier CSS va adăuga automat codul CSS la CSS-ul personalizat pentru pagina dvs., care poate fi găsit în fila avansată din setările paginii dvs.

În general, procesul este intuitiv și are câteva posibilități excelente pentru îmbunătățirea fluxului de lucru. Să trecem la câteva dintre modalitățile prin care puteți utiliza această funcție.

# 1 Trageți fragmente CSS personalizate pe pagina dvs., după cum este necesar

Cei mai mulți dintre utilizatorii Divi de acolo iubesc Divi mai ales pentru că nu trebuie să utilizați CSS personalizat. Este ceea ce îl face pe Divi atât de grozav. Cu toate acestea, când vine vorba de personalizarea temei WordPress, CSS personalizat (chiar și în cadrul Divi) este încă un atu valoros.

La fel ca orice dezvoltator web bun, ar trebui să vă salvați fragmentele CSS pe parcurs, astfel încât să le puteți accesa cu ușurință pentru proiecte viitoare. Acest lucru nu numai că vă va face mai competenți în construirea site-urilor web, ci vă va permite, de asemenea, să profitați de funcția de drag & drop a Divi.

De exemplu, să presupunem că aveți un fragment CSS pentru a ascunde bara de subsol din partea de jos a paginii dvs. Divi. Dacă salvați fragmentul respectiv ca fișier CSS cu titlul „Ascundeți subsolul subsolului”, puteți apuca acel fișier și trageți-l pe pagina dvs. pentru rezultate instantanee.

Divi vă organizează automat fragmentele cu fiecare picătură

Cu fiecare fișier CSS pe care îl trageți pe pagina dvs., Divi va extrage CSS și îl va adăuga la pagina dvs. Puteți vizualiza oricând acest css personalizat în fila avansată a setărilor paginii.

De asemenea, veți observa că Divi vă va organiza inteligent fragmentul css, împachetându-l cu comentarii. Dacă nu știți, comentariile sunt utilizate în cadrul codului pentru a identifica și / sau descrie cu ușurință anumite blocuri de cod. Înainte de fragmentul dvs. CSS, Divi introduce un comentariu cu textul „Începeți” urmat de titlul fișierului dvs. CSS, „Ascundeți subsolul subsolului”. După fragment, Divi introduce un alt comentariu cu textul „Sfârșit” urmat de titlul fișierului.

Iată un exemplu de cum ar arăta un fragment în setările paginii după ce ați tras în fișierul CSS „Ascundeți subsolul subsolului”. 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

Pentru cei dintre voi care nu știu cum să vă creați propriul CSS, vă puteți baza pe acele tutoriale utile de pe web care vă oferă acest lucru. Asta e tare. O facem cu toții. Dar dacă doriți să profitați de caracteristica drag and drop, poate doriți să începeți să salvați aceste fragmente ca fișiere individuale și să le denumiți în consecință. În acest fel, fiecare fragment nu este decât un drag and drop.

Două exemple de fragmente CSS pe care le puteți utiliza pentru animația cu mouse-ul

Cu CSS, posibilitățile sunt aproape nelimitate. Dar m-am gândit că vă voi oferi câteva exemple de fragmente CSS pe care le puteți salva în biblioteca dvs., care vor adăuga animație pe site-ul dvs.

Salvați următorul fragment CSS ca fișier „.css” (denumiți-l ca „Scale Icons on Hover”). 

.et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Apoi salvați următorul fragment ca alt fișier „.css” cu numele „Blurb Shadow on Hover”.

.et_pb_blurb:hover {
    -moz-box-shadow: 0px 0px 20px #ccc;
    -webkit-box-shadow: 0px 0px 20px #ccc;
    box-shadow: 0px 0px 20px #ccc;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

Odată ce aveți ambele fișiere salvate pe computer. Selectați ambele fișiere și trageți-le pe pagină. Desigur, puteți trage doar unul dacă doriți, dar m-am gândit să vă arăt că funcționează și cu mai multe fișiere. Acest lucru va face imediat ca toate modulele de blurb să aibă un efect pop-up prin adăugarea unei umbre de casetă pe hover. De asemenea, va face ca toate pictogramele blurb să se redimensioneze (să devină mai mari) atunci când treceți peste ele.

Lucruri destul de mișto.

Și vă puteți imagina cât de util va fi odată ce veți avea la dispoziție un arsenal de fișiere CSS.

# 2 Trageți și fixați fonturi personalizate pe pagina dvs. și înlocuiți rapid fonturile curente

Dacă creați site-uri web, sunteți familiarizat cu necesitatea de a avea la dispoziție o gamă largă de fonturi. Divi are sute de fonturi încorporate în Divi Builder, ceea ce face lucrurile mult mai ușoare. Și puteți folosi oricând opțiunea de a încărca fonturi noi din Divi Builder. Dar cu noua funcționalitate Drag and Drop a Divi, adăugarea de noi fonturi pe site-ul dvs. este ridicol de simplă.

Să presupunem că utilizați unul dintre aspectele premade, dar doriți să încercați un nou font pe care Divi nu îl are deja disponibil. Iată cât de ușor este să schimbi fontul:

Asigurați-vă că constructorul vizual este activat și că aspectul dvs. premade este încărcat. Apoi, tot ce trebuie să faceți este să trageți fișierul de font de pe computer pe pagina / constructorul vizual din fereastra browserului. Apoi faceți clic pe butonul de încărcare.

Glisați și fixați cu Găsiți și înlocuiți este o combinație puternică

Pentru a face un pas mai departe, puteți utiliza funcția Găsiți și înlocuiți de Divi pentru a înlocui fontul utilizat în titlurile de aspect premade cu noul font pe care tocmai l-ați introdus.

Folosind aspectul paginii de destinație Creative Agency, deschideți modulul text care conține textul antetului în secțiunea de sus. Apoi faceți clic dreapta pe opțiunea fontului de titlu. În meniul cu clic dreapta, selectați Găsiți și înlocuiți.

În fereastra pop-up Găsește și înlocuiește, selectează noul tău font sub opțiunea „Înlocuiește cu” și dă clic pe butonul albastru Înlocuiește.

Acum, toate antetele dvs. au noul font instalat!

# 3 Trageți și fixați mai multe imagini pentru a crea galerii foto instantanee cu titluri

Funcționalitatea Divi's Drag and Drop vă permite să trageți cu ușurință imaginile pe site-ul dvs. Acest lucru este foarte util atunci când construiți site-uri web cu multe imagini. Și din moment ce majoritatea oamenilor păstrează imaginile salvate într-un dosar de pe computer, este extrem de convenabil să puteți selecta acele imagini și să le trageți în pagina dvs.

Iată cum funcționează atunci când trageți și fixați o singură imagine.

Când trageți o singură imagine pe constructorul vizual, acesta va face automat următoarele:
1. Creați o nouă secțiune obișnuită cu un rând de o coloană
2. Adăugați un modul de imagine pe rând
3. Introduceți imaginea în acel modul de imagine
4. Deschideți setările de imagine pentru a începe procesul de editare.

Iată cum funcționează atunci când trageți mai multe imagini.

Când trageți mai multe imagini în pagina dvs. constructor vizual, Divi va face automat următoarele:

1. Creați o nouă secțiune obișnuită cu un rând de o coloană
2. Adăugați un modul Galerie la rând
3. Introduceți noile imagini în modulul Galerie
4. Deschideți setările modulului galerie pentru a vă ajuta să reporniți procesul de editare.

Pregătiți-vă imaginile înainte de a le trage pe pagina dvs.

Pentru a vă asigura că galeria de imagini arată excelent, vă ajută să efectuați câteva optimizări în prealabil.

Marimea imaginii
În primul rând, asigurați-vă că imaginile dvs. au toate aceeași dimensiune. Aș sugera să folosiți imagini care au aproximativ 1500 px cu 800 px. Aceasta oferă o dimensiune frumoasă pentru imagini atunci când sunt implementate într-o casetă lightbox. De asemenea, Divi va utiliza o versiune mai mică a imaginii pentru miniatura din galerie. În timp ce ne referim la acest subiect, ar putea fi util să examinăm câteva dimensiuni de imagini recomandate pentru modulele Divi. După aceea, puteți micșora dimensiunea fișierului un pic mai mult trăgându-l în TinyPNG sau utilizați editorul foto pentru a-l salva pentru specificațiile web.

Titluri de imagine
În mod implicit, Divi va afișa titlul imaginii dvs. sub fiecare miniatură din galeria dvs. Deci, este posibil ca, dacă doriți afișarea acestui titlu, să dați imaginilor un titlu corect înainte de a le trage.

# 4 Trageți în fișiere MP3 pe pagina dvs. cu un fișier CSS pentru a porni proiectul

Pentru dvs., podcasterii de acolo, acest lucru ar putea crește cu siguranță productivitatea. Deoarece caracteristica Drag & Drop a lui Divi acceptă formate de fișiere mp3 și wav, le puteți lăsa cu ușurință în constructor pentru a porni procesul de construire.

Când trageți un singur fișier mp3 sau wav în pagină, Divi va face automat următoarele:

1. Creați o nouă secțiune obișnuită cu un rând de o coloană
2. Adăugați un nou modul audio cu fișierul audio atașat
3. Deschideți modul de setări automate pentru a începe procesul de editare.

Când trageți mai multe fișiere mp3 sau wav pe pagină, Divi va face același lucru pe care îl face când trageți un singur fișier audio peste, cu excepția faptului că ar face acest lucru de mai multe ori. Deci, dacă trageți 4 fișiere audio, Divi va crea 4 secțiuni diferite cu un rând de o coloană care conține modulul audio cu fișierul audio atașat. Modul de setare audio va apărea și pentru a începe editarea ultimului modul audio adăugat la pagină.

Trageți într-un fișier CSS pentru a stiliza instantaneu toate modulele audio simultan

Dacă sunteți obișnuiți să utilizați CSS personalizat pentru a adăuga un stil suplimentar paginilor dvs. Divi, vă sugerez să salvați acele fragmente într-un fișier CSS pentru a fi utilizate pentru viitoarele versiuni (deși sunt sigur că știați deja asta). Deci, dacă aveți un fragment CSS pentru a stiliza modulele audio într-un anumit mod, salvați acel CSS într-un fișier CSS separat. Apoi, puteți trage simplu fișierul CSS în pagină pentru a stiliza instantaneu toate modulele dvs. audio.

CSS pe care l-am folosit în ilustrația de mai sus este un exemplu rapid, dar dacă doriți să îl încercați, copiați următorul CSS personalizat: 

.et_pb_audio_module_content h2 {position: absolute;
    top: -40px;
    background: #c5310d;
    padding: 0.6em;
    left: 50px;}
.et_audio_module_meta {
    position: absolute;
    bottom: -45px;
    right: 30px;
    background: #c5310d;
    padding: 1em !important;
}
.et_pb_audio_module {
background: #888 !important;
}

.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before {
    color: #c5310d;
}

.mejs-time-handle-content {
    border: 4px solid #c5310d;
    height: 14px;
    left: -7px;
    top: -6px;
    width: 14px;
    background: #c5310d;
}
.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total
{
background: #222;
}

Apoi lipiți-l într-un editor de text și salvați-l cu un format de fișier css (trebuie să aibă extensia „.css”). Odată ce îl salvați pe computer. Trageți-l în constructorul vizual care conține sunetele audio.

# 5 Creați blocuri de cod reutilizabile care pot fi trase în pagina dvs. pentru implementare instantanee

Funcția Divi Drag & Drop acceptă fișiere CSS și HTML (îmi pare rău, nu sunt permise fișiere javascript). Deși pentru cei care știu ce fac, este posibil să puteți adăuga scripturi în fișierul HTML care va adăuga funcționalitatea javascript pentru dvs. Dar acest lucru lasă ocazia de a combina aceste fișiere pentru a crea blocuri utile de cod pe care le puteți trage într-o pagină pentru rezultate instantanee.

Exemplul 1: glisați și fixați fișierele Pen Code exportate pe pagina dvs.

Dacă sunteți un fan al codepens, este posibil să fiți deja configurat pentru o magie utilă de drag and drop. Înainte de a vă excita prea mult, trebuie să vă avertizez că, pentru a crea fișiere care vă vor afecta instantaneu site-ul atunci când îl trageți, veți fi limitați la coduri care utilizează doar o combinație de html și css.

Iată cum poate funcționa acest proces pentru dvs.

Accesați pagina care prezintă codepen pe care doriți să o exportați și faceți clic pe butonul de export din partea dreaptă jos a paginii.

Extrageți fișierele de pe computer și localizați fișierul html și fișierul css. Utilizați un editor de text pentru a vizualiza fișierul dvs. html și a scoate toate etichetele de care nu aveți nevoie (doctype, html, antet, corp), astfel încât să rămână doar html-ul pe care îl vedeți în caseta html din codepen . Apoi salvați fișierul.

De fapt, pentru fișierul HTML este mai bine să copiați codul HTML direct din stilou și să creați propriul fișier html.

Acum găsiți fișierul CSS (ar trebui să fie situat în folderul CSS). Asigurați-vă că utilizați fișierul CSS și nu fișierul SCSS (acest tip de fișier nu este acceptat de caracteristica Drag and Drop).

Acum, trageți ambele fișiere în pagină cu dvs., creatorul vizual activ.

Iată ce se întâmplă automat:

1. Divi creează o nouă secțiune cu un rând cu o coloană.
2. Divi adaugă un modul de cod pe rând cu html-ul tău ca conținut.
3. Divi adaugă CSS personalizat la setările paginii dvs. bloc personalizat CSS.

Dacă apare o eroare, înseamnă că fie nu aveți tipul corect de fișier, fie conținutul fișierului are un cod care nu este acceptat. De exemplu, dacă fișierul html are etichetele doctype și html, fișierul nu va funcționa. De asemenea, dacă fișierul dvs. CSS are cod SCSS, poate declanșa și o eroare.

Desigur, acesta nu este cel mai bun proces inițial. Va trebui să vă organizați puțin codul și fișierele. Deci, dacă nu sunteți familiarizați cu html și CSS, aceasta poate fi o luptă. Dar rezultatul final s-ar putea dovedi foarte valoros prin faptul că veți putea să vă aprovizionați cu câteva blocuri de cod reutilizabile care sunt doar la distanță.

De asemenea, ar trebui să rețin că ar trebui să fiți familiarizați cu licențierea Codepen înainte de a copia un cod care nu este al dvs.

Exemplul 2: glisați și fixați instanțe izolate ale fontului minunat pe pagina dvs.

Dacă sunteți obișnuiți să utilizați Font Awesome pe site-ul dvs. Divi, puteți beneficia de câteva fișiere „drag-ready” la îndemână care vă vor permite să inserați instanțe Font Awesome pe pagina dvs. Acest lucru se poate face de fapt cu un singur fișier HTML.

Iată cum poate funcționa acest proces pentru dvs.

Prindeți scriptul Font Awesome de pe site-ul lor web. Asigurați-vă că este versiunea SVG + JS. Apoi copiați scriptul în clipboard.

Apoi creați un fișier text nou și lipiți-l în cod. Sub script, adăugați html și codul de font pe care doriți să le implementați pe pagina dvs.

Iată un exemplu de cod HTML „drag-ready” cu o listă care utilizează pictograme minunate pentru font: 

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>

<h2>Header</h2>
<ul class="fa-ul" style="list-style:none; font-size: 18px">
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
<li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li>
</ul>

Asigurați-vă că salvați fișierul ca fișier html. Apoi trageți-l în pagina dvs. cu ajutorul constructorului vizual.

Divi va adăuga automat html-ul la un modul de cod pentru dvs. și acum aveți o listă minunată de fonturi gata de editat pentru pagina dvs.

Probabil că doriți ca lista să fie introdusă într-un modul de text, astfel încât să puteți utiliza setările de text, conținutul. Dar, deoarece acest lucru nu se întâmplă automat, vă recomandăm să limitați fișierul html pentru a include scriptul. Și apoi lipiți html-ul dvs. într-un modul text. Dar pentru aceia dintre voi care au la îndemână un fișier CSS pentru a gestiona designul, este bine să puteți trage acest lucru cu fișierul dvs. html.

# 6 Creați o bibliotecă de aspecte de pagini Divi (fișiere json) pe hard disk pentru a le trage în paginile dvs. pentru o dezvoltare mai rapidă

Cu Divi, puteți salva și exporta cu ușurință machete întregi de pagini pe care le-ați proiectat. Există două avantaje cu adevărat mari pentru această funcționalitate. Primul avantaj este capacitatea de a salva aspectele paginilor în biblioteca Divi pentru a ajuta la accelerarea procesului de proiectare atunci când construiți un site web. Al doilea avantaj este posibilitatea de a exporta aspectele paginii pe propriul computer. Acest lucru vă permite să acumulați o colecție valoroasă de aspecte de pagină (fișiere JSON) pentru a porni următorul proiect.

Iar noua caracteristică Drag and Drop vă permite să trageți rapid acele machete salvate în constructorul vizual pentru o dezvoltare și mai rapidă.

Iată cum ar putea funcționa acest proces pentru dvs.

Să presupunem că doriți să salvați doar secțiunea de antet a aspectului paginii de destinație pentru agenția de design (acesta ar putea fi orice design doriți, dar pentru acest exemplu, folosesc un aspect premade). După ce încărcați aspectul pe pagina dvs., ștergeți fiecare secțiune din aspect, cu excepția secțiunii de antet de sus. Apoi, ați exporta aspectul pe hard disk.

Pentru a exporta un aspect de pagină folosind generatorul vizual, deschideți meniul de setări și faceți clic pe pictograma portabilitate. Apoi, în fereastra popup de portabilitate, introduceți un nume („Design Agency Header Layout”) și faceți clic pe butonul Export Divi Builder Layout.

Aceasta va salva aspectul pe computerul dvs. ca fișier json.

Acum, dacă șterg secțiunea de antet de pe pagina mea, astfel încât pagina mea să fie acum goală de orice secțiuni, pot adăuga cu ușurință acel antet înapoi la pagina mea, trăgând fișierul json în pagină.

Când trag fișierul json, modalitatea de portabilitate apare automat pentru a-mi permite să aleg opțiunea de a înlocui conținutul existent sau de a crea o copie de rezervă în prealabil. Deoarece nu trebuie să înlocuiesc niciun conținut, tot ce trebuie să fac este să fac clic pe butonul de importare și acesta este încărcat instantaneu pe pagină.

Poate că acest lucru nu pare atât de impresionant, dar are posibilitatea de a accelera cu adevărat procesul de proiectare. Dacă aș avea o colecție mare de fișiere json cu aspecte de pagină diferite (fiecare cu elemente specifice care mi-au plăcut). Pot apoi să folosesc acele fișiere precum blocul de construcție și să le trag pe pagină unul câte unul. Doar asigurați-vă că sunteți descriptiv în titlurile pe care le dați atunci când le exportați.

Gânduri finale

Funcția Drag & Drop a lui Divi poate fi cu siguranță un instrument util pentru creșterea fluxului de lucru de design web. Există câteva limitări care pot provoca o anumită frustrare la început, dar sperăm că acest articol vă va ajuta să înțelegeți cum să valorificați această caracteristică pentru a crea o bibliotecă personală de fișiere care pot fi glisate, care vă va crește productivitatea în proiectarea web.

Mi-ar plăcea să vă aud propriile idei în comentariile de mai jos.

Noroc!