Seleziona una pagina
Recensione del plugin WordPress: Divi Mega Pro

Recensione del plugin WordPress: Divi Mega Pro

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

I mega menu sono un elemento di design popolare che può dare al tuo sito web una spinta elegante fornendo ai visitatori un ulteriore livello di navigazione. Esistono diversi modi per aggiungere mega-menu a Divi. Uno dei metodi più semplici che ho usato è quello diun plug-in di terze parti chiamato Divi Mega Pro .

Divi Mega Pro semplifica la creazione di mega menu utilizzando Divi Builder. Ogni menu può essere aggiunto a qualsiasi elemento utilizzando una classe CSS. Ciò significa che puoi aggiungere un layout Divi a qualsiasi collegamento nel menu, ma puoi andare anche oltre e aggiungerli a qualsiasi elemento di un layout Divi semplicemente aggiungendo una classe CSS.

È ideale per creare menu e popup con moduli negozio, immagini, cursori, portfolio, icone, blurb, video, blog, ecc. Funziona anche con Extra.

Crea un Mega Pro Mega Menu

crea un mega menu divi con divi mega.png

Il menu Divi Mega Pro viene aggiunto al menu del dashboard. Qui puoi inserire la tua chiave di licenza, vedere i menu che hai creato e creare un nuovo menu. Quando fai clic per aggiungere un nuovo menu, vedrai un editor per il tipo di post del menu. Lo schermo è semplice, ma c'è molto da fare qui.

progettazione di un menu Mega Pro.png

editore - puoi creare il mega-menu o un suggerimento utilizzando Divi Builder.

cambia lo sfondo di mega menu.png

Sfondo Mega Pro - puoi selezionare lo sfondo ei colori dei caratteri.

scegli la posizione del menu.png

Visualizza posizioni - scegli tutte le pagine o assegna un nome a pagine specifiche, quindi inserisci le eccezioni.

scegli l'animazione del menu.png

Mega Pro Animation - seleziona un'animazione. Scegli tra offset, offset, prospettiva, dissolvenza o scala.

scegli trigger css.png

Mega Pro Trigger - aggiungi un trigger come selettore CSS. Una volta salvato, vedrai la classe CSS che incollerai nel campo della classe CSS di una voce di menu, modulo, riga o sezione. Questo è ciò su cui si fa clic o si passa con il mouse per visualizzare il menu. Tutto può essere utilizzato come trigger e non solo come voce di menu. Ciò significa che puoi anche utilizzare Divi Mega Pro per creare popup o suggerimenti.

menu di configurazione style divi.png

Impostazioni di visualizzazione Mega Pro : scegli la direzione di visualizzazione (superiore o inferiore), inserisci i margini superiore e inferiore in pixel, scegli una percentuale di larghezza e attiva una freccia. L'attivazione della freccia rivela ulteriori personalizzazioni in cui è possibile scegliere il tipo di freccia (triangolo o tondo), scegliere il colore, impostare la larghezza e l'altezza e visualizzare in anteprima la freccia.

personalizzazione dei pulsanti divi.png

personalizzazioni il pulsante di chiusura: attiva il pulsante di chiusura sul desktop o sul cellulare e personalizza il pulsante di chiusura. Se lo abiliti, vengono visualizzate in anteprima le personalizzazioni per il colore del testo, il colore di sfondo, la dimensione del carattere, il raggio del bordo, il riempimento e la visualizzazione.

configurazione aggiuntiva divi mega pro.png

Parametri aggiuntivi Mega Pro - scegli il tipo di trigger (hovered o cliccato), il tipo di output (hovered o cliccato) e inserisci il ritardo di uscita.

Modelli Divi Mega Pro

diversi modelli disponibili divi mega pro.png

Lo sviluppatore ha fornito diversi modelli per Divi Mega Pro. Quando acquisti il ​​plug-in, questi modelli sono disponibili nel tuo account, nella scheda Modelli di layout plug-in. Sono ottimi per aiutarti a iniziare a progettare i tuoi mega menu. Ne userò alcuni nei miei esempi.

Divi Mega Pro Menu

divi mega pro.png menu

Una volta creato un mega menu, apparirà nell'elenco. Qui puoi modificare, modificare o eliminare rapidamente i menu. Puoi anche cercare, filtrare per data, visualizzare per stato, ecc. Fornisce inoltre l'esclusiva classe Mega Pro in modo da poterli copiare da qui invece di aprirli per ottenere la classe.

Quando copi la classe, assicurati di incollarla senza spazi aggiuntivi. Altrimenti, tutti i mega-menu sulla pagina non funzioneranno più.

Sono sicuro che non sarebbe facile da aggiungere, ma una funzione di copia e modifica sarebbe utile. Puoi salvare i layout Divi nella tua libreria per riutilizzarli, ma ciò non include le impostazioni circostanti.

Aggiunta di un trigger

scegli il selettore divi.png

Nel campo Mega Pro Triggers, vedrai una singola classe Mega Pro. Copialo e incollalo nel campo Classe CSS dell'elemento che desideri utilizzare come trigger.

classi css.jpg

Per aggiungere il campo Classe CSS a una voce di menu, è necessario abilitare le classi CSS. Nella schermata del menu selezionare Opzioni schermo e abilitare le classi CSS.

aggiungi un menu css di classe divi.png

Incolla la classe CSS nel campo del menu. Ora questa voce di menu mostrerà il mega menu al passaggio del mouse e ti porterà alla pagina al clic.

divi mega menu design pro.png

Noterai che Divi Mega Pro è anche un'opzione nelle opzioni di collegamento del menu. Sono ottimi per aggiungere una voce di menu al menu che in realtà non va da nessuna parte. Aggiungi la classe CSS come qualsiasi altra voce di menu.

Sezione contatti sul mega menu

sezione contatti mega menu pro.png

Il menu si apre al passaggio del mouse. Posso sempre fare clic sul collegamento Contatto per aprire la pagina dei contatti, se lo desidero. Se volessi solo visualizzare il mega menu, potrei semplicemente utilizzare il collegamento del menu principale di contatto e rinominarlo (come nell'esempio sopra).

In questo, ho modificato leggermente i colori utilizzando lo sfondo e le impostazioni di visualizzazione anziché utilizzare Divi Builder. Aggiunge una barra nella parte inferiore del menu.

Semplice invito all'azione con colonne di menu

design contact section divi mega pro.png

Questo è uno dei modelli che aggiungono più colonne. Apporto modifiche allo sfondo e ai colori dei caratteri. Ho anche aggiunto una freccia e ho reso la larghezza del 75%.

cambia colore di sfondo divi mega pro.png

Il colore di sfondo e le opzioni del carattere aggiungono un po 'di più per farlo risaltare. Ho lasciato l'allineamento predefinito, che posiziona il menu a destra dello schermo. È possibile regolare il posizionamento nelle impostazioni.

schede

menu design con schede mega menu divi.png

Il modello di scheda include un modulo di codice con jQuery per creare l'effetto hover.

menu demo con tab divi mega pro.png

Ho aggiunto contenuti alle schede e li ho adattati al sito. Ciascuno dei collegamenti a sinistra mostra una scheda diversa nella maggior parte del menu.

Info Bubbles configurazioni

demo infobulles divi.png

Per questo, ho aggiunto la classe CSS a qualche blurb in modo che apra un piccolo pop-up hover. Il popup è solo un'immagine con un'ombra sotto.

Nell'immagine sopra il mio mouse passa sopra le parole LIVE WEBSITE. Non ho ancora regolato il posizionamento, ma è facile farlo apparire ovunque tu voglia.

informazioni sulla progettazione bull divi mega pro.png

Per questo, ho creato un popup per mostrare un'immagine con del testo. Ho impostato la direzione del display su Bassa e, per farla apparire accanto all'immagine a cui voglio aggiungere, ho aggiunto un margine di -300.

risultato info bubble divi.png

Il pop-up ora appare a sinistra e nella parte superiore dell'immagine quando ci passo sopra con il mouse. Ho aggiunto il colore di sfondo trasparente, il colore del bordo, il riempimento e il contorno arrotondato.

Licenza e documentazione

licenza e dimostration.png

Hai la possibilità di scegliere tra quattro licenze:

  • Sito singolo - $ 15 all'anno
  • Tre siti - $ 29 all'anno
  • Siti illimitati - $ 59 all'anno
  • Vita illimitata - $ 129 una volta

Documentazione viene fornito da una dimostrazione video e un articolo sul sito spiega le funzionalità e spiega, passo dopo passo, come utilizzare il plugin.

[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

Come creare un video dimostrativo contestuale su Divi

Come creare un video dimostrativo contestuale su Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Una delle pagine di destinazione esclusive che molti forniscono ai propri abbonati durante il periodo del Cyber ​​Monday è la fantastica pagina di destinazione del rilascio del software. Questo layout presenta grandi opere d'arte e un uso unico di divisori di sezione che stupiranno i visitatori.

cyber monday.jpg

Come ottenere la pagina di destinazione della versione software esclusiva per Cyber ​​Monday

Prima di iniziare questo utilizzo, dovresti familiarizzare con l'esclusiva pagina di destinazione del Cyber ​​Monday che puoi ottenere diventando un nuovo membro di Elegant Themes, aggiornando il tuo account esistente o essendo già un membro a vita. con noi. Se sei già un membro a vita, puoi accedere alla nostra area membri e scaricare tutte le nostre pagine esclusive qui. Tutti gli altri utenti dovranno utilizzare il pulsante in basso per acquistare o aggiornare prima di poter completare il resto del nostro tutorial.

Già un membro a vita? Puoi scaricare il pacchetto ora, non è necessario partecipare all'affare del Cyber ​​Monday!

Come creare un video dimostrativo contestuale su Divi

Dopo aver scaricato la nuova pagina di destinazione della versione del software dalla nostra area membri, puoi continuare a leggere quanto segue.

Nel caso d'uso di questo tutorial, ti mostreremo come creare una demo video con il clic di un pulsante. Il video che appare al clic avrà un bell'aspetto su desktop e schermi piccoli. Questo è un ottimo approccio se non desideri includere video direttamente sulla tua pagina ma preferisci creare interazione con i visitatori.

Panoramica

Prima di immergerci nel tutorial, diamo un'occhiata al risultato finale in diverse dimensioni dello schermo.

ufficio

risultato finale divi video popup.gif

Mobile

risultato video mobile popup divi.gif

Cominciamo!

Utilizza il plug-in Video gratuito

Installa e attiva il plugin

La prima cosa da fare è scaricare il plug-in gratis popup video . Puoi trovare questo plugin andando al tuo Sito Web WordPress> Plugin> Aggiungi nuovo> Cerca "Video PopUp". Una volta trovato questo plugin, installalo. Al termine, assicurati di attivare il plug-in.

video popup.jpg

Impostazioni del plugin

Continua andando alle impostazioni generali di questo plugin e attivando le due opzioni in alto.

configurazione video popup.jpg

Aggiungi una nuova pagina utilizzando la pagina di destinazione della versione del software

Aggiungi una nuova pagina e abilita l'uso del Visual Builder

È ora di iniziare a mettere le cose in pratica! Aggiungi una nuova pagina, dai un titolo alla tua pagina e attiva immediatamente Visual Builder.

crea una nuova pagina divi.jpg

Scarica un layout di versione del software dai layout salvati

Vai a "I tuoi layout salvati" e scarica la pagina di destinazione che hai caricato.

layout caricato divi.jpg

Aggiungi un modulo di testo sotto il modulo Blurb del pulsante di riproduzione

Come puoi vedere, la pagina ha già un pulsante di riproduzione che ci aiuterà a ottenere il risultato desiderato. Ma affinché funzioni, dobbiamo ricreare il design nel modulo Blurb utilizzando un modulo di testo. Aggiungi un nuovo modulo di testo appena sotto il modulo Blurb.

aggiungi del testo sopra il modulo blurb.jpg

Aggiungi un'immagine all'area del contenuto

Dopo aver aggiunto il modulo di testo, vai avanti e aggiungi l'immagine del pulsante di riproduzione all'area dei contenuti del modulo di testo facendo clic su " Aggiungi un media E selezionando il pulsante di riproduzione nella libreria multimediale.

Aggiungi un media a blurb divi.jpg

scegli una foto divi.jpg

Aggiungi una copia all'area del contenuto

Continua aggiungendo una copia appena sotto l'immagine.

duplicare il modulo blurb.jpg

Impostazioni del testo

Per fare in modo che il modulo corrisponda al layout, abiliteremo l'orientamento del testo centrale nelle impostazioni del testo del modulo.

attivare l'orientamento centrale.jpg

Impostazioni di testo del collegamento predefinito

E modificheremo di conseguenza anche i parametri del testo del link:

  • Link Font: Cabin
  • Collega il peso del font: grassetto
  • Colore testo link: rgba (162,176,193,0.7)
  • Dimensione del testo del collegamento: 17px
  • Altezza della linea di collegamento: 1.6em

menu design link divi.jpg

Passa il mouse sopra le impostazioni del testo

Cambia il colore del testo hover.

  • Collega colore testo: # a2b0c1

cambia il colore del collegamento divi.jpg

spaziatura

Infine, aggiungi anche un margine superiore negativo al modulo di testo.

  • Top Marign: -20vw

imposta un margine superiore divi.jpg

Aggiungi una lettura contestuale ai contenuti del modulo di testo

Passa all'editor di testo

Per creare il pop-up al clic, dovremo aggiungere un collegamento personalizzato al contenuto del modulo di testo. Tornare all'area del contenuto del modulo di testo e selezionare la modalità Editor di testo.

modifica il modulo di testo in modalità editor di testo divi.jpg

Aggiungi un collegamento a tutto il contenuto

Collega la tua posizione di contenuto al pop-up aggiungendo un link all'immagine e alla copia. Assicurati di sostituire l'URL del collegamento con il tuo.

<a class="vp-s vp-yt-type" href="https://www.youtube.com/watch?v=zesTKCnvyAU" data-dwrap="1"></a>

aggiungi un link un'immagine con un video divi.jpg

Rimuovi il modulo Blurb dal pulsante di riproduzione

Ora che abbiamo creato un mod di testo che sembra esattamente lo stesso del mod Blurb, possiamo rimuovere il mod Blurb che esisteva prima e basta! Puoi applicare questo metodo a qualsiasi tipo di layout che utilizzi, ma è davvero un grande valore aggiunto per la pagina di destinazione della versione del software.

elimina il modulo blurb inutilizzato divi.jpg

Considerazioni finali

Come puoi vedere, l'aggiunta di un popup su Divi utilizzando il plug-in Video Popup è abbastanza semplice. Ciò ti consentirà di presentare video sul tuo blog senza bisogno di incorporarli automaticamente nel contenuto.

Come creare pulsanti con icone su Divi

Come creare pulsanti con icone su Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

I pulsanti con caratteri iconici hanno molti usi nel mondo del web design. Poiché i caratteri iconici rimangono nitidi nei colori e nel design mentre si adattano a dimensioni diverse, è una buona idea utilizzarli nei pulsanti. Inoltre, creare un pulsante con caratteri iconici su Divi è in realtà abbastanza facile utilizzando i caratteri della libreria " ElegantIcons". In questo tutorial, ti mostrerò come utilizzare i caratteri icona con il modulo pulsante Divi per creare un singolo pulsante icona.

Alcuni dei punti salienti di questo tutorial includono:

  • Come utilizzare ElegantIcons per aggiungere un'icona come testo pulsante
  • Come aggiungere imbottitura e raggio del bordo per far sembrare il pulsante un quadrato o un cerchio perfetto
  • Come sostituire l'icona del pulsante con un'icona diversa durante il passaggio del mouse
  • Come posizionare l'icona di un pulsante per sovrapporre un'immagine
  • e altro ancora ...

Panoramica

Ecco un'anteprima di ciò che sta arrivando ...

pulsanti di carattere icona

cambia la dimensione di un pulsante divi image.gif

pulsante dimostrativo divi lista delements.png

Di che cosa hai bisogno?

Per questo tutorial userò quanto segue:

  • Tema Divi (ovviamente)
  • Icone di carattere alla moda, un tutorial su Tema elegante è molto più preciso. Dopo aver scaricato il file zip dal post del blog, lo trascineremo nel file del carattere eleganticons.ttf da utilizzare come carattere personalizzato per il nostro modulo dei pulsanti.
  • La home page del Bed & Breakfast (disponibile gratuitamente da Divi Builder)

Cominciamo!

Aggiungi il carattere Elegante icone al tuo modulo pulsanti

Aggiungi un modulo pulsante

Per iniziare, crea una nuova pagina e distribuisci il visual builder. Scegli "Crea da zero", quindi dopo aver distribuito il visual builder, aggiungi una riga di colonna alla sezione, quindi aggiungi un modulo pulsante alla riga.

aggiungi un pulsante divi builder.jpg

Trascina il carattere icona elegante

Per ottenere il gioco dei colori ElegantFontspuoi scaricare questo pacchetto di font tramite questo link. Estrai il contenuto del file zip e trova i file dei caratteri dell'icona elegante navigando nella classe elegant_font> HTML CSS>. Quindi trascina il file "ElegantIcons.ttf" sul tuo computer e rilascialo nel visual builder.

estrai il file zip divi.jpg

Questo farà apparire il modale Scarica automaticamente font. Basta fare clic sul pulsante di download per scaricare il carattere su Divi Builder.

metti online divi.jpg

Ora avrai accesso all'elegante font dell'icona quando personalizzi un font mod nel visual builder.

Vai alle impostazioni del modulo dei pulsanti e aggiorna il carattere del pulsante con il nuovo carattere Elegant Icon appena scaricato. Apparirà nell'elenco delle icone sotto "Caratteri personalizzati".

pulsante font divi.jpg

Potresti notare che il testo del tuo pulsante si è trasformato in un mucchio di icone. Infatti, ogni carattere inserito nell'area di immissione del testo del pulsante ora ha un'icona corrispondente alla lettera / carattere attualmente utilizzato.

uso dell'icona button.jpg

Poiché abbiamo solo bisogno di un'icona per il nostro pulsante, puoi selezionare qualsiasi carattere sulla tastiera per generare l'icona associata a quel carattere. Ad esempio, inserisci il numero 5 per il testo del pulsante per ottenere una freccia chevron destra.

icona pulsante divi 5.jpg

Scambia le icone dei pulsanti al passaggio del mouse

Come sai, il modulo dei pulsanti include l'opzione per aggiungere icone al passaggio del mouse. Possiamo usare questa funzione per sostituire il carattere dell'icona con l'icona al passaggio del mouse per un piacevole effetto al passaggio del mouse. Tutto quello che dobbiamo fare è modificare le impostazioni dei pulsanti come segue:

Dimensione del testo del pulsante: 30px Icona del pulsante: vedi screenshot (questa sarà l'icona che sostituirà l'icona del carattere usato per il pulsante) Icona Colore pulsante: # 0c71c3 (che dovrebbe corrispondere al colore usato per il testo del pulsante ) Posizionamento dell'icona del pulsante: Colore del testo al passaggio del mouse del pulsante sinistro: rgba (255,255,255,0) (questo è completamente trasparente per nascondere il carattere dell'icona del pulsante al passaggio del mouse). Riempimento personalizzato: 1 ° a sinistra, 1 ° a destra (questo riempimento sostituirà l'espansione durante il passaggio del mouse)

pulsante di personalizzazione divi.jpg

Ora tutto ciò che dobbiamo fare è sostituire il margine per l'elemento anteriore nel css personalizzato. Vai alla scheda Avanzate e inserisci il seguente codice CSS nella casella anteriore:

margin-left0 !important;

aggiungi un pulsante margin diiv.png

Ora l'icona del tuo pulsante verrà sostituita dall'icona al passaggio del mouse.

pulsante dimostrativo sostituito su hover.gif

Pulsanti icona creativi con cerchio in scala con la dimensione del testo del pulsante

I pulsanti a forma di cerchio funzionano alla grande per i pulsanti a icona singola. E, se comprendi il funzionamento interno della spaziatura dei moduli dei pulsanti, puoi creare pulsanti perfettamente circolari che si adattano alle dimensioni del testo del pulsante.

Il trucco è distanziare il pulsante usando l'unità di lunghezza "em". Questa unità di lunghezza è relativa alla dimensione del testo sul pulsante. Quindi, se la dimensione del testo del pulsante è 30px, 1em sarà anche 30px (2em sarà 60px e così via ...). Sapendo questo, dobbiamo solo assicurarci che la nostra imbottitura attorno al nostro pulsante sia la stessa su tutti e 4 i lati. Ma quello che potresti non aver considerato è che l'altezza della riga di testo del pulsante è 1.7em per impostazione predefinita. Ciò significa che dobbiamo tenerne conto quando aggiungiamo i nostri valori di riempimento superiore e inferiore.

Per quelli di voi che vogliono conoscere la matematica dietro i valori di riempimento necessari per creare pulsanti circolari, ecco:

Per il riempimento sinistro e destro, impostare entrambi su 1em. Ciò significa che la larghezza totale del tuo pulsante sarà 90px (o 3em) perché ...

Imbottitura 30px sinistra + 30px per icona-carattere + imbottitura 30px destra = 90px totale

L'altezza della riga di testo del pulsante è 1.7em, che equivale al 170% della dimensione del testo del pulsante (30px) che è 51px.

Per il riempimento superiore e inferiore, impostare entrambi su 0,65 em. 0.65em è l'equivalente del 65% della dimensione del testo del pulsante (30px), che equivale a 19.5px.

Pertanto…

Imbottitura superiore 19.5px + altezza della linea 51px + imbottitura inferiore 19.5px = totale 90px

Ciò significa che quando il testo del pulsante è impostato su 30px, la dimensione totale del pulsante sarà 90px per 90px (un quadrato perfetto). In effetti, puoi pensarla in questo modo. Indipendentemente dalla dimensione del testo del pulsante, la dimensione totale del pulsante è 3 volte il valore. Quindi, il testo del pulsante 40px creerà un pulsante 120px per 120px, ecc.

Al momento, il pulsante ha le dimensioni corrette, ma è ancora quadrato. Tutto quello che dobbiamo fare è aggiungere un raggio del bordo del 50% per cambiare il pulsante quadrato in un pulsante circolare perfetto.

Ecco cosa è necessario per modificare il pulsante in un pulsante circolare:

Pulsante Raggio bordo: 50%
Tappezzeria personalizzata: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left

modificare un button.png

Ricorda, puoi regolare la dimensione del testo del pulsante e il pulsante rimarrà in un cerchio perfettamente come il riempimento delle dimensioni del testo.

personalizzare la dimensione del button.gif

Aggiunta di pulsanti su Divi

Divi semplifica l'aggiunta e la personalizzazione di pulsanti icona unici per adattarli al design di qualsiasi layout predefinito.

Per questo esempio, ti mostrerò come aggiungere un singolo pulsante icona al layout della home page del Bed & Breakfast.

Per aggiungere il layout alla tua pagina, apri il menu delle impostazioni facendo clic sull'icona viola nella parte inferiore della pagina (assicurati che il generatore di immagini sia abilitato). Quindi fare clic sull'icona Carica dalla libreria. Selezionare il layout della home page del Bed & Breakfast e fare clic sul pulsante "Usa questo layout" per distribuire il layout nella pagina.

seleziona un layout divi.png

Aggiunta di un pulsante icona a un'immagine

Supponiamo di voler aggiungere un piccolo pulsante icona per sovrapporre l'angolo di un'immagine con un CTA aggiuntivo relativo a un particolare prodotto o servizio. Tutto quello che devi fare è aggiungere un modulo pulsante sotto l'immagine e personalizzarlo per includere il carattere dell'icona e fare in modo che l'icona si sovrapponga all'immagine con una spaziatura personalizzata.

Cerca la sezione "Chi siamo" nella home page. Quindi aggiungere un modulo pulsante direttamente sotto una delle immagini utilizzate per presentare la "Camera doppia" (il primo nella prima colonna della riga di tre colonne).

pulsante divi.png

Quindi apri le impostazioni del pulsante e inserisci una "P" maiuscola nella casella di testo del pulsante. Questo cambierà nella nostra icona una volta selezionati i fantastici set di sfondi come il carattere del pulsante.

divi.png testo del pulsante

Per iniziare rapidamente ad abbinare il design del pulsante al layout, salva le impostazioni del pulsante e trova il pulsante "Prenota ora" nella parte superiore del layout. Apri Impostazioni pulsante e copia gli stili dei pulsanti facendo clic con il pulsante destro del mouse sull'interruttore Opzioni pulsante e selezionando l'opzione "Copia stili pulsante" dall'elenco.

Ora, fai clic con il pulsante destro del mouse sul modulo che hai aggiunto sotto l'immagine e seleziona "Incolla stile pulsante".

incolla il modulo style.jpg

Quindi aggiornare le impostazioni del pulsante come segue:

Font Button: Awesome Font
pulsante font Larghezza bordo: 0 px
Mostra l'icona del pulsante: NO

Quindi aggiungi la nostra intelligente imbottitura personalizzata in modo che il pulsante sia un quadrato perfetto:

Imbottitura personalizzata: 0.65em Top, 0.65em Bottom, 1em Left, 1em Right

pulsanti di carattere icona

Per posizionare il pulsante in modo che copra l'angolo inferiore destro dell'immagine, è necessario prima rimuovere il margine inferiore dal modulo immagine sopra. Apri le impostazioni di Image Image Module direttamente sopra il pulsante e imposta il margine inferiore su 0px.

personalizzazione di button.png

Ora dobbiamo trascinare il pulsante sull'immagine utilizzando un valore di margine negativo personalizzato uguale all'altezza del pulsante. Per fare ciò, dobbiamo determinare l'altezza del nostro pulsante.

Come accennato in precedenza in questo articolo, con il riempimento personalizzato in atto, possiamo conoscere la dimensione esatta del nostro pulsante in base alla dimensione corrente del testo del pulsante. Poiché la dimensione del testo del pulsante è 20px, sappiamo che l'altezza del nostro pulsante è 3em (3 volte la dimensione del testo del pulsante), che è 60px. Pertanto, dobbiamo impostare un margine personalizzato per il nostro pulsante come segue:

Margine personalizzato: -60px Top

E quindi possiamo posizionare il nostro pulsante sulla destra regolando l'allineamento del pulsante sulla destra.

cambia l'allineamento di un pulsante divi.png

Ora che abbiamo un design funzionante per la nostra immagine e il nostro pulsante. Tutto quello che dobbiamo fare è aggiungere lo stesso pulsante a tutte le immagini nella sezione.

Poiché abbiamo rimosso il margine inferiore dell'immagine, possiamo facilmente applicare questa modifica a tutte le immagini nella sezione utilizzando l'opzione Estendi stili. Fare clic con il tasto destro sull'immagine e selezionare "Estendi stili immagine".

estendere l'immagine style.jpg

Nella finestra di dialogo Estendi stili, seleziona "Questa sezione" per l'opzione Across e fai clic sul pulsante Espandi. Ora tutte le immagini hanno un margine inferiore di 0px.

L'ultimo passo è semplicemente quello di copiare e incollare i moduli Button sotto ogni immagine.

Ecco il design finale.

pulsante di progettazione finale divi.png

E poiché abbiamo utilizzato tecniche di spaziatura adeguate, il pulsante rimarrà anche in posizione sul cellulare ...

pulsante di anteprima su mobile.png

Icone disponibili utilizzando il modulo pulsanti

Poiché il testo del pulsante del modulo pulsante è limitato ai caratteri disponibili sulla tastiera, sarà necessario esplorare questi tasti per trovare le icone disponibili associate a ciascun tasto. Un modo semplice per farlo è creare un modulo pulsante con il carattere del pulsante impostato su un carattere elegante e digitare i caratteri nella casella di testo del pulsante.

Ecco uno screenshot dei personaggi con la loro icona del carattere corrispondente:

elenco delle icone disponibili divi.png

Se trovi questo elenco in qualche modo esaustivo, puoi sempre utilizzare un modulo di testo per creare collegamenti a icone utilizzando i codici Unic elencati. qui .

Considerazioni finali

L'utilizzo di icone eleganti con il modulo dei pulsanti di Divi è un modo conveniente per creare pulsanti unici per il tuo sito web. Questo apre la porta alla creatività con le impostazioni del modulo per personalizzare il tuo pulsante con stili di testo unici, effetti al passaggio del mouse e altro ancora. Mi piacciono particolarmente i valori di spaziatura dei pulsanti personalizzati che assicurano che i pulsanti assumano la forma di un quadrato o un cerchio perfetto.

Ci sono un sacco di usi per i pulsanti icona. Si spera che l'esempio di utilizzo trattato in questo tutorial aggiunga ispirazione ai propri progetti.

Come utilizzare il modulo di codice su Divi Builder

Come utilizzare il modulo di codice su Divi Builder

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Il modulo del codice è una tela bianca che ti consente di aggiungere codice alla tua pagina, come codici brevi di plug-in o codice HTML statico. Se desideri utilizzare un plug-in di terze parti, ad esempio un plug-in di scorrimento di terze parti, puoi semplicemente posizionare lo shortcode del plug-in in un modulo di codice standard o a larghezza intera per visualizzare l'elemento senza restrizioni.

Come aggiungere un modulo di codice alla tua pagina

Prima di poter aggiungere un modulo di codice alla tua pagina, devi prima accedere a Divi Builder. Una volta installato il tema Divi sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editore ogni volta che crei una nuova pagina.

Facendo clic su questo pulsante, attivi Divi Builder, che ti dà accesso a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visiva.

Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi nel tuo sito Web a monte se hai effettuato l'accesso alla dashboard di WordPress.

pulsante divi costruttore modulo blog divi

Una volta entrati 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.

Inserisci il modulo codice divi

 

Individua il modulo del codice nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "codice" e poi premere invio per trovare e aggiungere automaticamente il modulo codice! Una volta aggiunto il modulo, sarai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Usa il caso aggiungendo un foglio di stile opaco per animare il contenuto su una singola pagina

In questo esempio, aggiungerò uno script di collegamento per importare Animate.css per aggiungere effetti di animazione agli elementi della pagina. Poiché il file Animate.css contiene molto codice, ha senso caricarlo solo sulla pagina di cui ho bisogno.

Basta aggiungere una sezione regolare e una linea a larghezza intera (colonna 1) e aggiungere il modulo di codice.

Codice costruttore Divi

Nella casella di testo del contenuto, aggiungi lo snippet di codice.

Aggiungi lo snippet animate.css

Tutto quello che devi fare è aggiungere alcune classi CSS per animare qualsiasi elemento della tua pagina di classe CSS sulla tua pagina. In questo esempio, farò rimbalzare il pulsante quando la pagina viene caricata.

Nelle impostazioni del modulo Pulsante, nella scheda Avanzate, inserisci le due classi "animato" e "rimbalzo" nella casella di testo della classe CSS.

Aggiungi una classe animata CSS

Ora il pulsante rimbalza quando viene caricata la pagina.

Animazione del pulsante costruttore divi

Suggerimento: a volte l'aggiunta di codice con interruzioni di riga farà sì che il codice smetta di funzionare. È meglio creare il codice in un editor di testo e incollarlo nel modulo del codice.

Opzioni di contenuto del codice

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 sarà sempre in questa scheda.

Parametri del codice Divi BuilderContenuto

Puoi inserire qualsiasi codice HTML, CSS o JavaScript che desideri visualizzare nella pagina nella posizione corrente. Solo gli editor e gli amministratori possono pubblicare HTML non filtrato, il che significa che il codice può essere rimosso dal modulo se viene utilizzato da un autore o collaboratore. Puoi anche inserire codici brevi nel modulo. Questi codici corso (shortcode) verranno visualizzati nella colonna genitore senza alcun wrapper del modulo Divi aggiuntivo.

Etichetta di amministrazione

Questo cambierà l'etichetta del modulo nel generatore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette verranno visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di progettazione del codice

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa scheda ti consente di modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare praticamente qualsiasi cosa.

Opzione design modulo codice divi builderLarghezza massima

Qualsiasi valore immesso qui limita la larghezza di qualsiasi contenuto visualizzato nel modulo del codice al valore impostato. Ad esempio, l'immissione del 50% nel campo di immissione ridurrà il contenuto del modulo del codice al 50% della colonna che lo contiene.

Codice Opzioni avanzate Codice

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.

Sezione anticipo modulo codice divi builder

ID CSS

Inserisci un ID CSS facile da usare 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 Divi Child o in CSS personalizzati che aggiungi alla tua pagina o al tuo sito web utilizzando le opzioni del tema Divi o le impostazioni della pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi elemento interno del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere CSS direttamente a ogni elemento. Le voci CSS in queste impostazioni sono già incorporate con i tag di stile. Quindi devi solo inserire 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 mod differenti su dispositivi differenti o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Questo è tutto per questo tutorial.

Presentazione in blocco e selezione multipla su Divi

Presentazione in blocco e selezione multipla su Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Oggi abbiamo scoperto una nuova funzionalità su Divi, ovvero: Multiselect (selezione multipla) e Bulk Editing (Bulk Editing) per divi, una nuova incredibile funzionalità che ti consente di creare siti Web con nuova velocità ed efficienza . È ora possibile selezionare più elementi contemporaneamente ed eseguire azioni globali sull'intero gruppo di elementi.

Puoi trascinare, rilasciare, copiare, incollare, eliminare e persino modificare il design e il contenuto di ogni cosa contemporaneamente. Invece di apportare modifiche noiose a un gruppo di elementi uno per uno, e ancora e ancora, selezionali tutti e modificali tutti in una volta. È davvero impressionante.

Modifica più elementi contemporaneamente per risparmiare tempo

La modifica di più elementi contemporaneamente ti farà risparmiare un'enorme quantità di tempo rimuovendo le attività ripetitive, noiose e costose associate alla progettazione di un sito Web coerente.

Tenere premuto Cmd / Ctrl o Maiusc per selezionare più

selezione di diversi elementi.gif

Quando costruisci in Divi, ora puoi tenere premuti i tasti Cmd o Ctrl e fare clic sugli elementi per selezionarli. Puoi selezionare più elementi tutte le volte che vuoi e puoi anche selezionare una combinazione di moduli, righe e sezioni. Puoi anche tenere premuto il tasto Maiusc e fare clic per selezionare una serie di moduli in una colonna, una serie di righe in una sezione o una serie di sezioni in una pagina. Una volta selezionato, puoi modificare in blocco l'intera raccolta di elementi contemporaneamente.

Modifica in blocco di diversi moduli

modifica del blocco.gif

Quando modifichi in blocco il design di più elementi multi-selezionati, tutti si aggiornano in tempo reale, facendoti risparmiare tonnellate e tonnellate di tempo di progettazione. Quando apri le impostazioni modali per una raccolta di elementi, Divi visualizza automaticamente un elenco di impostazioni condivise. Quando si modifica il design, tutti gli elementi selezionati vengono aggiornati di conseguenza. Puoi persino modificare in blocco una raccolta di elementi diversi. Ad esempio, puoi aggiungere una casella ombra a un contenitore Blurb, un contenitore Immagine e una sezione contemporaneamente.

Trascina, rilascia, copia, incolla ed elimina rapidamente

sposta moduli in blocco divi.gif

La selezione multipla è un ottimo modo per copiare, incollare ed eliminare rapidamente più elementi contemporaneamente. È anche un ottimo modo per spostare una serie di elementi in una nuova posizione, piuttosto che trascinarli uno per uno. Puoi persino trascinare e rilasciare moduli, linee e sezioni contemporaneamente e Divi combinerà automaticamente gli elementi e li rilascerà in un'unica posizione.

Comprendi meglio la struttura della tua pagina

come capire la struttura di una pagina.gif

Tenere premuti i tasti Cmd o Ctrl è anche un ottimo modo per comprendere meglio la struttura della pagina e selezionare rapidamente piccoli moduli individuali che potrebbero essere difficili da trovare utilizzando l'interfaccia di compilazione minima di Divi. Quando tieni premuto il tasto Cmd o Ctrl, ottieni una chiara panoramica di tutti i moduli, linee e sezioni, dandoti un'immagine perfetta dell'intera pagina e di come tutti i pezzi si incastrano.

Selezione multipla e di modifica di massa sono disponibili su Divi, Divi poi scaricare e provare questa nuova funzione.

Come utilizzare i formati di visualizzazione del blog su Divi

Come utilizzare i formati di visualizzazione del blog su Divi

[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Quando scrivi un post sul blog da includere nel modulo blog, puoi utilizzare uno dei 6 diversi formati di post. Articolo, video, audio, citazione, galleria e link. Ciascuno di questi formati struttura il tuo articolo in modo diverso, con maggiore enfasi sul tipo di contenuto rappresentato dal formato.

presentazione del tipo di contenuto divi.jpg

Quando scrivi un post sul blog noterai una casella a destra del tuo editor di testo chiamata "Formato". In questa casella ci sono le 6 opzioni di formato. Se scegli "Standard" otterrai un post del blog con formattazione normale, mentre ogni altra opzione avrà un design unico associato al tipo di formato.

scegli un formato tutorial divi.jpg

Utilizzo del formato di pubblicazione video

Selezionando il formato del post video verrà posizionato un video nella parte superiore del post. Sostituirà anche l'immagine di anteprima standard nelle pagine dell'indice con un video incorporato. Dopo aver selezionato il formato del post "Video" nella casella delle opzioni di formato, la prossima cosa da fare è aggiungere un video al tuo post. Il tema utilizzerà automaticamente il primo video nel tuo post come formato video. Per aggiungere un video al tuo post, inserisci semplicemente l'URL del tuo video (Vimeo o YouTube) nell'editor del post o usa il pulsante "Aggiungi media" per caricare e incorporare il tuo file video.

aggiungi un video wordpress editeur.jpg

Utilizzando il formato dell'articolo audio

Selezionando il formato dell'articolo audio verrà visualizzato un lettore audio sul tuo articolo. Sostituirà anche l'immagine di anteprima standard nelle pagine dell'indice con il tuo lettore audio. Il lettore audio riproduce il primo file audio che incorpori nel tuo articolo. Per aggiungere un file audio al tuo post, usa il pulsante "Aggiungi media" per caricare il tuo file audio. Non c'è incorporamento del file audio. Una volta caricato un file, il tema lo utilizza automaticamente per il post che stai attualmente modificando. Il file audio dovrebbe essere scaricato durante la modifica dell'articolo.

aggiungere un file audio divi.jpg

Usa il formato del post di citazione

Il formato del post di citazione mostrerà una citazione stilizzata nella parte superiore del tuo post. La citazione sostituirà anche l'immagine di anteprima standard su tutte le pagine dell'indice. Quando selezionato, il formato del post audio utilizzerà il primo Blockquote nel tuo post come contenuto di citazione. Le citazioni in blocco possono essere facilmente aggiunte dall'editor dei post. Evidenzia il tuo testo e poi premi il pulsante blockquote per trasformarlo in una citazione.

tipo di citazione dell'annuncio wordpress.png

Usa il formato del post della galleria

Il formato del post della galleria mostrerà una galleria di immagini nella parte superiore del tuo post. Sostituirà anche l'immagine di anteprima standard su tutte le pagine dell'indice con un dispositivo di scorrimento dell'immagine. Una volta selezionato, il formato del post della Galleria utilizzerà la prima galleria che hai aggiunto al tuo post. Le gallerie possono essere aggiunte al tuo post utilizzando WordPress Media Editor. Basta fare clic su "Aggiungi un mediaPer creare una galleria e aggiungerla al tuo post.

aggiungi una galleria di immagini su WordPress.jpg

Utilizzando il formato link post

Il formato Link post creerà un link stilizzato e lo aggiungerà all'inizio del tuo post. Questo è l'ideale per condividere brevi informazioni con i tuoi lettori. Quando selezionato, il formato del post del link utilizzerà il primo link del tuo post come URL del link principale. Il collegamento verrà posizionato all'inizio del tuo articolo e sostituirà anche la miniatura standard su tutte le pagine dell'indice. Per aggiungere un collegamento al tuo post, puoi utilizzare il pulsante "link" nell'editor dei post di WordPress.

link al formato di pubblicazione su WordPress.jpg

Questo è tutto per la selezione dei formati di pubblicazione disponibili su Divi.