• Homepage
  • Articoli
  • Tema
  • 6 modi per utilizzare la funzione di caricamento file drag & drop di Divi per aumentare la produttività

6 modi per utilizzare la funzione di caricamento file drag & drop di Divi per aumentare la produttività

Pubblicato: 2018-08-22

La funzione di caricamento file trascina e rilascia di Divi può essere uno strumento meraviglioso per aumentare la produttività come web designer. In questo tutorial, ti guiderò attraverso 6 modi in cui puoi utilizzare la funzione di trascinamento della selezione per migliorare il flusso di lavoro di progettazione Divi. Ti darò anche alcuni suggerimenti utili, esempi e frammenti di codice bonus lungo la strada. Se non altro, è sempre divertente trascinare e rilasciare i file solo per vedere cosa succede.

Iniziamo!

Una breve panoramica della funzione di caricamento file drag & drop di Divi

La funzione di caricamento file trascina e rilascia è un modo semplice per aggiungere contenuti alla tua pagina quando usi Divi Builder. Come suggerisce il nome, puoi trascinare e rilasciare i file sulla tua pagina per aggiungere contenuto senza il normale processo di impostazione anticipata di sezione, riga e modulo. E Divi posizionerà il contenuto in modo diverso a seconda del tipo di file. Ad esempio, i file txt verranno aggiunti ai moduli di testo, i file html verranno aggiunti ai moduli di codice e i file CSS verranno aggiunti come CSS personalizzati alla tua pagina.

Tipi di file supportati e loro comportamento di trascinamento della selezione

Ecco un elenco di tutti i tipi di file attualmente supportati dalla funzione Drag & Drop. Questo può tornare utile quando si pensa ai modi in cui è possibile sfruttare la funzionalità nel processo di progettazione. Ho anche aggiunto una breve descrizione per aiutarti a capire cosa accadrà quando trascini questi tipi di file.

File di immagine

  • gif
  • jpeg
  • jpg
  • png

Quando si rilascia un singolo file immagine, Divi creerà una nuova sezione e una riga di una colonna e quindi aggiungerà un modulo immagine con l'immagine già caricata nel modulo.

Quando si rilasciano più file di immagine contemporaneamente, Divi creerà la stessa struttura (nuova sezione e riga) ma aggiungerà le immagini a un modulo galleria.

File di testo

  • testo

Il rilascio di un file txt aggiungerà il testo a un nuovo modulo di testo all'interno di una nuova sezione e riga.

File di caratteri

  • off
  • ttf

Il rilascio di un file di font avvierà la modalità popup di caricamento dei font con il nome del font e il font già caricati. Tutto quello che devi fare è confermare che desideri includere tutti i pesi dei caratteri supportati prima di fare clic sul pulsante di caricamento.

File video

  • m4v
  • muoviti
  • webm
  • wmv
  • mp4

Rilasciando uno o più file video, ogni video verrà aggiunto a un nuovo modulo video all'interno di una nuova sezione e riga.

File audio

  • mp3
  • onda

Il rilascio di uno o più file audio aggiungerà ciascun file audio a un nuovo modulo audio all'interno di una nuova sezione e riga.

File Web

  • json
  • html
  • css

Il file json è per tutti i layout di pagina che hai esportato. Il trascinamento nel file json caricherà automaticamente il layout della pagina nella pagina.

Il trascinamento di un file html aggiungerà l'html a un nuovo modulo di codice all'interno di una nuova sezione e riga.

Il trascinamento di un file CSS aggiungerà automaticamente il codice CSS al CSS personalizzato per la tua pagina, che può essere trovato nella scheda Avanzate nelle impostazioni della tua pagina.

Nel complesso, il processo è intuitivo e ha alcune grandi possibilità per migliorare il flusso di lavoro. Entriamo in alcuni dei modi in cui puoi utilizzare la funzione.

#1 Trascina gli snippet CSS personalizzati sulla tua pagina secondo necessità

La maggior parte di voi utenti Divi ama Divi proprio perché non è necessario utilizzare CSS personalizzati. È ciò che rende Divi così eccezionale. Tuttavia, quando si tratta di personalizzazione del tema WordPress, il CSS personalizzato (anche all'interno di Divi) è ancora una risorsa preziosa.

Come ogni buon sviluppatore web, dovresti salvare i tuoi frammenti CSS lungo la strada in modo da potervi accedere facilmente per progetti futuri. Questo non solo ti renderà più abile nella creazione di siti Web, ma ti consentirà anche di sfruttare la funzione di trascinamento della selezione di Divi.

Ad esempio, supponiamo che tu abbia uno snippet CSS per nascondere la barra del piè di pagina in basso nella tua pagina Divi. Se salvi quel frammento come file css con il titolo "Nascondi piè di pagina", puoi quindi prendere quel file e trascinarlo sulla tua pagina per risultati immediati.

Divi organizza automaticamente i tuoi frammenti con ogni goccia

Con ogni file css che trascini sulla tua pagina, Divi estrarrà il CSS e lo aggiungerà alla tua pagina. Puoi visualizzare questo CSS personalizzato in qualsiasi momento nella scheda Avanzate delle impostazioni della tua pagina.

Noterai anche che Divi organizzerà in modo intelligente il tuo frammento CSS avvolgendolo con commenti. Se non lo sai, i commenti vengono utilizzati all'interno del codice per identificare e/o descrivere facilmente determinati blocchi di codice. Prima dello snippet CSS, Divi inserisce un commento con il testo "Begin" seguito dal titolo del file CSS, "Hide Bottom Footer". Dopo lo snippet, Divi inserisce un altro commento con il testo "End" seguito dal titolo del file.

Ecco un esempio di come apparirebbe uno snippet nelle impostazioni della pagina dopo aver trascinato il file CSS "Nascondi piè di pagina in basso". 

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

Per quelli di voi che non sanno come creare il proprio css, potete fare affidamento su quegli utili tutorial sul web che ve lo forniscono. Questo è figo. Lo facciamo tutti. Ma se vuoi sfruttare la funzione di trascinamento della selezione, potresti voler iniziare a salvare quei frammenti come file individuali e nominarli di conseguenza. In questo modo ogni frammento è solo un trascinamento della selezione.

Due esempi di frammenti CSS che puoi utilizzare per l'animazione al passaggio del mouse

Con i CSS, le possibilità sono quasi infinite. Ma ho pensato di darti un paio di esempi di frammenti di CSS che puoi salvare nella tua libreria che aggiungeranno animazioni al tuo sito.

Salva il seguente snippet CSS come file ".css" (chiamalo come "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);
}

Quindi salva questo frammento seguente come un altro file ".css" con il nome "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;
}

Una volta che hai entrambi i file salvati sul tuo computer. Seleziona entrambi i file e trascinali sulla pagina. Ovviamente puoi trascinarne solo uno se vuoi, ma ho pensato di mostrarti che funziona anche con più file. Ciò farà sì che tutti i moduli blurb abbiano un effetto pop-up aggiungendo un'ombra di riquadro al passaggio del mouse. Farà anche in modo che tutte le icone blurb si ridimensionino (diventino più grandi) quando passi il mouse su di esse.

Roba piuttosto interessante.

E puoi immaginare quanto sarà utile una volta che avrai un arsenale di questi file css a tua disposizione.

#2 Trascina e rilascia i caratteri personalizzati sulla tua pagina e sostituisci rapidamente i caratteri correnti

Se crei siti web, hai familiarità con la necessità di avere a disposizione un'ampia selezione di caratteri. Divi ha centinaia di caratteri integrati in Divi Builder, il che rende le cose molto più semplici. E puoi sempre utilizzare l'opzione per caricare nuovi caratteri da Divi Builder. Ma con la nuova funzionalità Drag and Drop di Divi, aggiungere nuovi caratteri al tuo sito è ridicolmente semplice.

Supponiamo che tu stia utilizzando uno dei layout predefiniti ma desideri provare un nuovo font che Divi non ha già a disposizione. Ecco come è facile cambiare il carattere:

Assicurati che il visual builder sia attivato e di aver caricato il layout predefinito. Quindi tutto ciò che devi fare è trascinare il file del tuo font dal tuo computer nella pagina/visual builder all'interno della finestra del browser. Quindi fare clic sul pulsante di caricamento.

Trascina e rilascia con Trova e sostituisci è una potente combinazione

Per fare un ulteriore passo avanti, puoi utilizzare la funzione Trova e sostituisci di Divi per sostituire il carattere utilizzato nelle intestazioni del layout predefinite con il nuovo carattere appena inserito.

Utilizzando il layout della pagina di destinazione dell'agenzia creativa, apri il modulo di testo contenente il testo dell'intestazione nella sezione superiore. Quindi fare clic con il pulsante destro del mouse sull'opzione del carattere dell'intestazione. Nel menu di scelta rapida, seleziona Trova e sostituisci.

Nel popup Trova e sostituisci, seleziona il nuovo carattere sotto l'opzione "Sostituisci con" e fai clic sul pulsante blu Sostituisci.

Ora tutte le tue intestazioni hanno il nuovo carattere a posto!

#3 Trascina e rilascia più immagini per creare gallerie fotografiche istantanee con titoli

La funzionalità Drag and Drop di Divi ti consente di trascinare facilmente le immagini sul tuo sito. Questo è davvero utile quando si creano siti Web con molte immagini. E poiché la maggior parte delle persone conserva le immagini salvate in una cartella sul proprio computer, è estremamente comodo poter selezionare quelle immagini e trascinarle nella pagina.

Ecco come funziona trascinando e rilasciando una singola immagine.

Quando trascini una singola immagine sul visual builder, farà automaticamente quanto segue:
1. Crea una nuova sezione regolare con una riga di una colonna
2. Aggiungi un modulo immagine alla riga
3. Inserisci l'immagine in quel modulo immagine
4. Aprire le impostazioni dell'immagine per comodità per avviare il processo di modifica.

Ecco come funziona quando si trascinano più immagini.

Quando trascini più immagini nella pagina del generatore visivo, Divi eseguirà automaticamente quanto segue:

1. Crea una nuova sezione regolare con una riga di una colonna
2. Aggiungi un modulo Galleria alla riga
3. Inserisci le nuove immagini nel modulo Galleria
4. Aprire le impostazioni del modulo Galleria per avviare il processo di modifica.

Prepara le tue immagini prima di trascinarle sulla tua pagina

Per assicurarti che la tua galleria di immagini abbia un bell'aspetto, è utile eseguire alcune ottimizzazioni in anticipo.

Dimensione dell'immagine
Prima di tutto, assicurati che le tue immagini siano tutte della stessa dimensione. Suggerirei di utilizzare immagini di circa 1500 px per 800 px. Ciò fornisce una buona dimensione per le immagini quando vengono distribuite in un lightbox. Inoltre, Divi utilizzerà una versione più piccola dell'immagine per la miniatura nella galleria. Mentre siamo in argomento, potrebbe essere utile rivedere alcune dimensioni delle immagini consigliate per i moduli Divi. Successivamente, puoi ridurre ulteriormente le dimensioni del file trascinandolo in TinyPNG o utilizzare il tuo editor di foto per salvarlo per le specifiche web.

Titoli delle immagini
Per impostazione predefinita, Divi visualizzerà il titolo della tua immagine sotto ogni miniatura nella tua galleria. Quindi, fa da allora (se vuoi che questo titolo venga visualizzato), per dare alle tue immagini il titolo corretto prima di trascinarle sopra.

#4 Trascina i file MP3 sulla tua pagina con un file CSS per avviare il design

Per voi podcaster là fuori, questo potrebbe sicuramente aumentare la produttività. Poiché la funzione Drag & Drop di Divi supporta i formati di file mp3 e wav, puoi facilmente rilasciarli nel builder per avviare il processo di costruzione.

Quando trascini un singolo file mp3 o wav nella pagina, Divi eseguirà automaticamente quanto segue:

1. Crea una nuova sezione regolare con una riga di una colonna
2. Aggiungi un nuovo modulo audio con il tuo file audio allegato
3. Aprire il modale delle impostazioni dell'auto per iniziare il processo di modifica.

Quando trascini più file mp3 o wav sulla pagina, Divi farà la stessa cosa che fa quando trascini un singolo file audio, tranne che lo farà più volte. Quindi, se trascini 4 file audio, Divi creerà 4 sezioni diverse con una riga di una colonna contenente il modulo audio con il file audio allegato. Apparirà anche la modalità di impostazione audio per iniziare a modificare l'ultimo modulo audio aggiunto alla pagina.

Trascina un file CSS per applicare uno stile istantaneo a tutti i moduli audio contemporaneamente

Se sei abituato a utilizzare CSS personalizzati per aggiungere uno stile aggiuntivo alle tue pagine Divi, ti suggerisco di salvare quei frammenti in un file css da utilizzare per build future (anche se sono sicuro che lo sapevi già). Quindi, se hai uno snippet css per modellare i moduli audio in un certo modo, salva quel css in un file css separato. Quindi puoi semplicemente trascinare quel file css nella pagina per modellare istantaneamente tutti i tuoi moduli audio.

Il CSS che ho usato nell'illustrazione sopra è un rapido esempio, ma se vuoi provarlo, copia il seguente CSS personalizzato: 

.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;
}

Quindi incollalo in un editor di testo e salvalo con un formato di file css (deve avere l'estensione ".css"). Una volta salvato sul tuo computer. Trascinalo nel visual builder contenente i tuoi blurb audio.

#5 Crea blocchi di codice riutilizzabili che possono essere trascinati nella tua pagina per un'implementazione istantanea

La funzione Drag & Drop di Divi supporta i file CSS e HTML (scusate non sono ammessi file javascript). Sebbene per coloro che sanno cosa stanno facendo, potresti essere in grado di aggiungere script nel file HTML che aggiungeranno quella funzionalità javascript per te. Ma questo lascia l'opportunità di combinare questi file per creare utili blocchi di codice che puoi trascinare in una pagina per risultati immediati.

Esempio 1: trascina e rilascia i file della penna con codice esportati sulla tua pagina

Se sei un fan dei codepen, potresti già essere pronto per qualche utile magia di trascinamento della selezione. Prima che diventi troppo eccitato, devo avvertirti che per creare file che influenzeranno immediatamente il tuo sito quando li trascini, sarai limitato a codepen che usano solo una combinazione di html e css.

Ecco come questo processo potrebbe funzionare per te.

Vai alla pagina che presenta il Codepen che desideri esportare e fai clic sul pulsante di esportazione in basso a destra della pagina.

Estrai i file sul tuo computer e individua il file html e il file css. Usa un editor di testo per visualizzare il tuo file html ed elimina tutti i tag che non ti servono (doctype, html, header, body) in modo che tutto ciò che rimane sia l'html che vedi nella casella html del codepen . Quindi salvare il file.

In effetti, per il file HTML potresti stare meglio semplicemente copiando l'HTML direttamente dalla penna e creando il tuo file html.

Ora trova il file CSS (dovrebbe trovarsi all'interno della cartella CSS). Assicurati di utilizzare il file CSS e non il file SCSS (questo tipo di file non è supportato dalla funzione di trascinamento della selezione).

Ora trascina entrambi i file nella pagina con il tuo visual builder attivo.

Questo è ciò che accade automaticamente:

1. Divi crea una nuova sezione con una riga a una colonna.
2. Divi aggiunge un modulo di codice alla riga con il tuo html come contenuto.
3. Divi aggiunge il CSS personalizzato al blocco CSS personalizzato delle impostazioni della pagina.

Se ricevi un errore, significa che non hai il tipo di file corretto o che il contenuto del file ha un codice non supportato. Ad esempio, se il file html ha i tag doctype e html, il file non funzionerà. Inoltre, se il tuo file css ha un codice SCSS, potrebbe anche generare un errore.

Certo, questo non è il processo più agevole inizialmente. Dovrai organizzare un po 'il tuo codice e i tuoi file. Quindi, se non hai familiarità con html e CSS, questa potrebbe essere una lotta. Ma il risultato finale potrebbe rivelarsi molto prezioso in quanto sarai in grado di fare scorta di alcuni blocchi di codice riutilizzabili che sono solo un trascinamento della selezione.

Dovrei anche notare che dovresti avere familiarità con la licenza di Codepen prima di copiare il codice che non è il tuo.

Esempio 2: trascina e rilascia istanze isolate di Font Awesome sulla tua pagina

Se sei abituato a utilizzare Font Awesome sul tuo sito Divi, potresti trarre vantaggio dalla disponibilità di alcuni file "drag-ready" che ti permetteranno di inserire istanze di Font Awesome nella tua pagina. Questo può essere effettivamente fatto con un singolo file HTML.

Ecco come questo processo potrebbe funzionare per te.

Prendi lo script Font Awesome dal loro sito web. Assicurati che sia la versione SVG + JS. Quindi copia lo script negli appunti.

Quindi crea un nuovo file di testo e incolla il codice. Sotto lo script, aggiungi l'html e il codice del carattere che desideri distribuire alla tua pagina.

Ecco un esempio di codice html "pronto per il trascinamento" con un elenco che utilizza icone fantastiche per i caratteri: 

<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>

Assicurati di salvare il file come file html. Quindi trascinalo nella tua pagina con il visual builder.

Divi aggiungerà automaticamente l'html a un modulo di codice per te e ora hai un fantastico elenco di caratteri pronto da modificare per la tua pagina.

Probabilmente desideri che l'elenco sia stato inserito in un modulo di testo in modo da poter utilizzare le impostazioni di testo del contenuto. Ma poiché ciò non avviene automaticamente, potresti voler limitare il tuo file html per includere lo script. E poi incolla il tuo html in un modulo di testo. Ma per quelli di voi che hanno un file css a portata di mano per gestire il design, è bello poterlo trascinare con il file html.

#6 Crea una libreria di layout di pagina Divi (file json) sul tuo disco rigido da trascinare nelle tue pagine per uno sviluppo più veloce

Con Divi, puoi facilmente salvare ed esportare interi layout di pagina che hai progettato. Ci sono due vantaggi davvero grandi per questa funzionalità. Il primo vantaggio è la possibilità di salvare i layout di pagina all'interno della libreria Divi per accelerare il processo di progettazione durante la creazione di un sito Web. Il secondo vantaggio è la possibilità di esportare i layout di pagina sul proprio computer. Ciò ti consente di accumulare una preziosa raccolta di layout di pagina (file json) per avviare il tuo prossimo progetto.

E la nuova funzione Drag and Drop ti consente di trascinare rapidamente quei layout salvati nel visual builder per uno sviluppo ancora più rapido.

Ecco come questo processo potrebbe funzionare per te.

Supponiamo che tu voglia salvare solo la sezione dell'intestazione del layout della pagina di destinazione dell'agenzia di design (questo potrebbe essere qualsiasi design che ti piace, ma per questo esempio sto usando un layout predefinito). Una volta caricato il layout sulla tua pagina, elimina tutte le sezioni del layout ad eccezione della sezione dell'intestazione superiore. Quindi esporterai il layout sul tuo disco rigido.

Per esportare un layout di pagina utilizzando il visual builder, apri il menu delle impostazioni e fai clic sull'icona della portabilità. Quindi, nel popup di portabilità, inserisci un nome ("Layout dell'intestazione dell'agenzia di design") e fai clic sul pulsante Esporta layout Divi Builder.

Questo salverà il layout sul tuo computer come file json.

Ora, se elimino la sezione dell'intestazione sulla mia pagina in modo che la mia pagina sia ora vuota di tutte le sezioni, posso facilmente aggiungere quell'intestazione alla mia pagina trascinando il file json nella pagina.

Quando trascino il file json, la modalità di portabilità si apre automaticamente per consentirmi di scegliere l'opzione per sostituire il contenuto esistente o creare un backup in anticipo. Dal momento che non ho bisogno di sostituire alcun contenuto, tutto ciò che devo fare è fare clic sul pulsante di importazione e viene immediatamente caricato nella pagina.

Questo potrebbe non sembrare così impressionante, ma ha la possibilità di accelerare davvero il processo di progettazione. Se avessi una vasta raccolta di file json con layout di pagina diversi (ognuno con elementi specifici mi piaceva). Posso quindi utilizzare quei file come blocchi predefiniti e trascinarli sulla pagina uno per uno. Assicurati solo di essere descrittivo nei titoli che dai loro quando li esporti.

Pensieri finali

La funzione Drag & Drop di Divi può sicuramente essere uno strumento utile per potenziare il flusso di lavoro del tuo web design. Ci sono alcune limitazioni che all'inizio possono causare un po' di frustrazione, ma si spera che questo articolo ti aiuti a capire come sfruttare questa funzionalità per creare una libreria personale di file trascinabili che aumenterà la tua produttività nel web design.

Mi piacerebbe sentire le tue idee nei commenti qui sotto.

Saluti!