Il modulo Social Media di Divi ti consente di creare collegamenti basati su icone che puntano ai tuoi profili social online, come Facebook, Twitter e Google+. Queste icone sono integrate nel tema, nello stile di Divi utilizzando le sue icone alla moda, che le rende preferibili all'utilizzo di plugin di terze parti. Puoi aggiungere collegamenti a più profili social in ogni modulo e puoi aggiungere il modulo in qualsiasi punto della pagina.
Come aggiungere un modulo di social media alla tua pagina
Prima di poter aggiungere un modulo di social media alla tua pagina, devi prima passare a Divi Builder. Una volta che il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.
Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.
Individua il modulo social media nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco delle mod è ricercabile, il che significa che puoi anche digitare la parola "Seguici sui social media" e quindi fare clic su "Invio" per trovare e aggiungere automaticamente la mod per i social media! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .
Esempio di caso d'uso: aggiunta delle icone dei social media corrispondenti a una pagina di contatto
La pagina dei contatti di un sito Web è il luogo perfetto per mostrare i tuoi profili social online. Ciò offre maggiori opportunità agli utenti di rimanere in contatto e promuovere il tuo blog o la tua attività. Per questo esempio, ti mostrerò come aggiungere le icone dei social media in modo che corrispondano al design attuale di una pagina di contatto.
Utilizzando il visual builder, aggiungi una nuova sezione regolare con una riga a tutta larghezza di una colonna. Inserisci un modulo social media nella tua colonna.
Nella scheda Contenuto delle impostazioni del modulo, fai clic sul pulsante "Aggiungi un nuovo elemento" per aggiungere un nuovo social network al tuo modulo. In impostazioni di social network specifiche, aggiorna quanto segue:
Opzioni di contenuto
Rete sociale:
URL account Facebook: [inserisci l'URL del tuo account Facebook]
Opzioni di design
Colore icona: # d94b6a (colori assortiti)
Quindi duplica questo social network per aggiungere altre quattro reti (Twitter, Google+, LinkedIn e Instagram). Poiché hai duplicato la rete, il colore dell'icona personalizzata è stato trasferito. Quindi devi solo aggiornare ogni URL e account di rete.
Ora hai le icone dei social media che corrispondono al design della pagina dei contatti.
Opzioni di contenuto dei social media
Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.
Aggiungi un nuovo oggetto
Qui è dove aggiungi nuove reti al tuo modulo. Cliccando su "aggiungi un nuovo elemento", aprirai una nuova finestra di opzioni specifiche per la tua nuova rete (sotto le schede "Contenuto", "Design" e "Avanzate"). Vedi sotto per le singole impostazioni di rete dei social media.
Dopo aver aggiunto la tua prima rete, vedrai apparire una barra grigia con il titolo della tua rete visualizzato come un'etichetta. La barra grigia ha anche tre pulsanti che consentono di modificare, duplicare o eliminare la rete.
Modulo di collegamento
Qui puoi scegliere la forma delle icone dei tuoi social network in rettangolo arrotondato o in cerchio.
Si apre l'URL
Scegli di aprire l'URL di rete in una nuova scheda o nella stessa finestra.
Pulsante Segui
Qui puoi scegliere se includere o meno il pulsante successivo accanto all'icona.
Etichetta amministrativa
Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.
Opzioni di progettazione dei social media
Nella scheda Design troverai tutte le opzioni di stile dei moduli, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare l'aspetto.
Per questo modulo, le opzioni di progettazione sono costituite da un singolo elemento: Colore testo.
Colore del testo
Qui puoi scegliere se il tuo testo deve essere chiaro o scuro. Se stai lavorando su uno sfondo scuro, il tuo testo dovrebbe essere chiaro. Se lo sfondo è chiaro, il testo dovrebbe essere scuro.
Opzioni avanzate di social media
Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.
ID CSS
Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.
Classe CSS
Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito web utilizzando il opzioni del tema Divi o parametri della pagina Divi Builder.
CSS personalizzato
Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.
visibilità
Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.
Opzioni di contenuto dei singoli social media
Rete sociale
Qui puoi scegliere il social network che desideri visualizzare.
URL dell'account
Qui è dove inserisci l'URL per questo collegamento al social network. Se scegli Facebook come rete, qui è dove inseriresti l'URL della tua pagina Facebook.
Opzioni di progettazione dei singoli social media
Colore dell'icona
Divi offre colori standard per ogni social network definito per impostazione predefinita. Qui puoi facilmente cambiare il colore di questa icona in quello che vuoi.
Opzioni avanzate di social media
CSS personalizzato
Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" vuoto "layout =" espanso "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "piatto" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] SCARICA IL TEMA DIVI [/ vcex_button] [/ width_column] [» [vc_column] » 1/2″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "vuoto" layout = "espanso" align = "centro" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] SCARICA MODELLI DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin