Come creare un interruttore personalizzato per le trascrizioni video in Divi

L'aggiunta di un interruttore personalizzato per le trascrizioni dei video può portare molti vantaggi al tuo sito web. In effetti, includere semplicemente una trascrizione video per ogni video sul tuo sito web può migliorare l'esperienza dell'utente, l'accessibilità e la SEO. Gli utenti avranno la possibilità di leggere il contenuto che è una grande funzionalità di accessibilità per coloro che sono sordi, con problemi di udito o in un bar rumoroso. E puoi leggere le trascrizioni più velocemente rispetto alla visione del video (o dei sottotitoli del video). Inoltre, il contenuto aggiunto includerà probabilmente una quantità significativa di parole chiave che migliorerebbero la SEO. Anche la creazione di un interruttore personalizzato per una trascrizione video è utile perché può mantenere nascosto quel contenuto di lunga durata fino a quando non è necessario.

In questo tutorial, creeremo un interruttore personalizzato (e compatto) per le trascrizioni video in Divi. Per fare ciò, personalizzeremo il modulo di commutazione di Divi con un restyling conciso in modo che si adatti perfettamente a qualsiasi video. Quindi ti mostreremo come utilizzare la trascrizione generata automaticamente da Youtube come contenuto per l'interruttore. Tutto questo senza dover utilizzare un plugin.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione di un interruttore personalizzato per le trascrizioni video in Divi

Parte 1: aggiunta di un video di Youtube alla pagina utilizzando un modulo video Divi

Per la prima parte del nostro tutorial, aggiungeremo/incorporeremo un video di YouTube in una pagina utilizzando un modulo video nel Divi builder. Questo processo è davvero molto semplice.

Ma prima di aggiungere il video, aggiungiamo una riga di una colonna alla sezione.

Quindi, aggiungi un modulo video alla riga.

Fai clic sull'icona Aggiungi video più sotto l'opzione "File video MP4 o URL Youtube.

Quindi seleziona l'azione Inserisci da URL nella barra laterale sinistra del popup.

Incolla l'URL del video di YouTube nella casella di input.

Quindi fare clic sul pulsante Inserisci nel post .

Una volta aggiunto il video, puoi aggiungere un'immagine di sovrapposizione personalizzata al video.

Parte 1: creazione dell'interruttore personalizzato per la trascrizione

Ora che il nostro video è a posto, possiamo creare l'interruttore personalizzato che conterrà il contenuto della nostra trascrizione. Per fare ciò, personalizzeremo un modulo di attivazione/disattivazione.

Innanzitutto, aggiungi un modulo di attivazione direttamente sotto il video.

Nelle impostazioni di commutazione, aggiungi la parola "Trascrizione" per il testo del titolo. (Torneremo al contenuto del corpo in seguito per incollare il contenuto della nostra trascrizione video di YouTube in seguito)

Nella scheda Progettazione, aggiorna quanto segue:

• Colore icona: #42b3a9
• Apri Toggle Colore di sfondo: trasparente
• Chiuso Toggle Colore di sfondo: trasparente
• Allineamento del testo: Centro
• Carattere del titolo: Roboto
• Stile carattere titolo: TT

• Larghezza massima: 800 px
• Allineamento del modulo: Centro
• Imbottitura: 0px in alto, 20px in basso, 0px a sinistra, 0px a destra
• Larghezza bordo: 0px

Nella scheda Avanzate, dobbiamo aggiungere alcuni frammenti CSS per finalizzare il design dell'interruttore.

Aggiungi il seguente CSS al Toggle Title :

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

Aggiungi il seguente CSS all'icona Toggle :

right: 0.75em !important;

Aggiungi il seguente CSS al Toggle Content :

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

Parte 3: ottenere la trascrizione da Youtube e aggiungerla al contenuto di Toggle

La creazione di trascrizioni per i video può essere un po' una seccatura da fare manualmente. E ci sono servizi e plugin là fuori che possono farlo in modo più professionale (alcuni a un costo premium). Ma per questo tutorial, useremo un metodo rapido, facile e gratuito. Estrarremo la trascrizione generata automaticamente da Youtube per un video e la useremo sul nostro sito web.

Per fare ciò, vai al tuo video su Youtube e segui questi passaggi:

1. Apri il menu a discesa Altre azioni (3 punti orizzontali) accanto al pulsante Salva sotto il video.
2. Fare clic su Apri trascrizione dall'elenco.
3. Nella parte superiore della casella Trascrizione, apri il menu a discesa Altre azioni (3 punti verticali).
4. Fare clic su Attiva/disattiva timestamp. Questo nasconderà i timestamp dalla visualizzazione a sinistra di ogni blocco di testo.

Copia l'intero contenuto della trascrizione all'interno della casella negli appunti.

In questo momento il testo è pieno di interruzioni di riga. Per eliminarli, puoi andare su textfixer.com e utilizzare il loro strumento gratuito di rimozione delle interruzioni di riga per rimuovere le interruzioni di riga dal testo.

Nella sezione Rimuovi interruzioni di riga, seleziona "Rimuovi solo interruzioni di riga".

Quindi incolla il testo della trascrizione all'interno della casella.

E fai clic sul pulsante Rimuovi interruzioni di riga.

Una volta che il testo è stato generato nella sezione intitolata Nuovo testo senza interruzioni di riga, copia il testo negli appunti.

Torna al tuo sito, apri le impostazioni di commutazione e incolla il contenuto della trascrizione nel modulo.

Certo, al testo della trascrizione mancano un mucchio di lettere maiuscole, punteggiatura, paragrafi, ecc. Ma il contenuto è lì e leggibile. Tuttavia, potresti voler dedicare qualche minuto a ripulire il testo per i tuoi lettori.

Questo è tutto!

Risultato finale

Ecco il risultato finale del nostro interruttore personalizzato per una trascrizione video in Divi.

Sul desktop...

Sul tablet...

E al telefono...

Pensieri finali

In questo tutorial, ti abbiamo mostrato come trasformare un modulo interruttore Divi in ​​un interruttore personalizzato per le trascrizioni video in Divi. Il design unico e conciso del solo interruttore ha applicazioni che si estendono oltre quello delle trascrizioni video. Voglio dire, puoi letteralmente inserire qualsiasi testo tu voglia lì dentro. Ma penso che si adatti bene a un video. Inoltre, l'utilizzo di quelle trascrizioni generate automaticamente per un video di YouTube può sicuramente tornare utile se hai bisogno di una soluzione semplice. Tuttavia, sentiti libero di esplorare altre opzioni per trascrivere i tuoi contenuti video e/o condividerne alcuni con noi.

Non vedo l'ora di sentirti nei commenti.

Saluti!