WordPress è un CMS molto popolare in tutto il mondo grazie alla sua interfaccia semplice, ai temi altamente personalizzabili e all'infinita varietà di file i plugin potente. Ha semplificato la creazione, lo sviluppo e la gestione di siti Web, anche per gli utenti più dilettanti.

Oggi, e grazie a WordPress, non è più necessario disporre di conoscenze specifiche per creare pagine web attraenti. Tuttavia, lo sei peut être ti sei già imbattuto in un sito web che offre un design davvero incredibile e probabilmente ti sei chiesto: Come è stato fatto?

Sfortunatamente, se sei un dilettante o un principiante, non puoi fare molto, anche con WordPress, poiché per modificare il tuo tema, hai bisogno di un certo grado di esperienza in HTML, CSS, PHP e molte altre abilità a seconda della natura del tuo tema, ma anche del tuo progetto o obiettivo.

Tuttavia, anche se sei un programmatore esperto, hai sicuramente bisogno di uno strumento che ti permetta di risparmiare tempo e qualità sul risultato finale.

Heureusement, le plug-in WordPress « WPBakery Page Builder Precedentemente noto come " Visuale Compositore » fornisce una soluzione a questo problema. Con quest'ultimo, anche la maggior parte blogger principianti può creare pagine con un aspetto completamente unico per il proprio sito web.

Con questo plugin puoi creare:

  • Pagine di destinazione attraenti (pagina di destinazione)
  • Dalle pagine di vendita a aspetto professionale
  • Siti "vetrina" per la tua attività
  • Moduli pagine per la tua formazione
  • poco

È secondo me il miglior strumento di formattazione (o layout) su Internet. Soprattutto per gli utenti di WordPress.

In questo tutorial, quindi, ti mostrerò come dare un aspetto unico al tuo sito web (O blog) con l' plug-in Visuale Compositore.

Allora…

Come installare e configurare Plug-in WPBakery Page Builder

WPBakery Page Builder è un plug-in premium su cui puoi comprare Codecanyon : La migliore piattaforma di vendita sui plugin di Internet.

VA BENE. Dopo aver acquistato e scaricato questo plug-in di layout su WordPress, tutto ciò che devi fare è installarlo e attivarlo.

Quindi inizieremo apportando alcune modifiche di base. Per fare ciò, vai alla posizione "Impostazioni >> Visuale Compositore » sul cruscotto.

impostazioni generali

compositore visivo impostazioni generaliLa prima scheda (impostazioni generali), Consente di modificare:

  • Il contenuto su cui visivo comporre sarà disponibile. Puoi controllare gli articoli (settimana) e / o pagine (pagina)
  • Le diverse regole diaccesso ruoli diversi. Con questa opzione è possibile determinare che cambia ciò che. Verranno visualizzati i diversi ruoli disponibili. Dovrai fare clic su ciascuno di essi per controllare gli elementi ai quali esso (il ruolo) avrà accesso. Hai la possibilità di vietare l'uso di " visivo compositore "agli utenti di un ruolo specifico.
    attivare l'editor sul page builder di WPbakery
  • Abilita o disabilita gli elementi di risposta
  • Definire sottoinsiemi per caratteri Google

selezione di ruoli wpbakeryOpzioni di design

Nelle opzioni di progettazione, hai la possibilità di modificare l'aspetto visivo predefinito dei vari elementi del " visivo compositore '. Prima di usarlo, assicurati di aver selezionato l'opzione « Usa opzioni di design personalizzate ».

impostazioni css

Queste opzioni ti permetteranno di definire il colore che si applica a tutti gli elementi. 

  • Il " CSS personalizzato »Ti dà l'opportunità di personalizzare ulteriormente ogni elemento, solo gli sviluppatori possono sapere di cosa si tratta.
  • La scheda « Licenza del prodotto »Ti permette di attivare il tuo plug-in per ricevere aggiornamenti automatici.
  • La scheda « shortcodes beni Si tratta essenzialmente di sviluppatori.

Ok, ora creeremo una pagina Web personalizzata con Compositore visivo.

Come creare una pagina personalizzata con visivo compositore

Per creare facilmente pagine web personalizzate, puoi scegliere tra l'editor del " back office ", Ovvero modifichi il sito dalla dashboard di WordPress, dove quello di" front office '.

Editor-the-front-end-the-redattore backend

Se stai usando Gutenberg, noterai un pulsante "Editor di pagine" nella barra delle attività in alto.

editore visual compositore dashboard editor gutenberg

Il vantaggio con l'editor di Front office è che puoi modificare dal vivo le tue pagine e vedere come appaiono i diversi elementi sul tuo tema.

Con l'editor del back office

Per accedere all'editor del " back office », Ti invito a fare clic su« editore BACK-OFFICE '. Puoi tornare all'editor visivo di WordPress in qualsiasi momento facendo clic su " modalità classica ". Ma penso che non sarà necessario, quindi la formattazione della pagina web di questo plugin è completa.

Una volta nell'editor di back-office, puoi scegliere un layout globale che verrà applicato alla pagina.

Gli aggiornamenti pagina varia a seconda di cosa pensi di fare con la pagina. Quindi puoi scegliere « atterraggio pagina » per creare una home page, "Elenco dei servizi" per una pagina che mostra i servizi e così via. Con l'esperienza riuscirai anche a creare scommesse en pagine progettato su misura molto professionale.

Qualunque sia la scelta del tuo ambiente pagina, la presentazione degli elementi è simile su tutti questi ultimi. Puoi aggiungere un nuovo elemento it cliquant sur "+" nella parte superiore del arrivo box « Editor di visual », Oppure aggiungi un modello facendo clic sull'icona "Template".

Su ogni linea, puoi (da sinistra a destra) :

  • Sposta la linea
  • Gestisci colonne nella riga
  • Aggiungere una nuova colonna

Interfaccia del generatore di pagine wpbakeryAltre opzioni sono disponibili a destra del riquadro. Queste opzioni ti permettono di (da sinistra a destra) A:

  • ridurre la linea
  • modifica una riga
  • duplicare una riga
  • elimina una riga

layout di wpbackeryNel mezzo di ogni colonna, puoi aggiungere un elemento prima, modificare una colonna o eliminarlo.

opzioni di sezione di wpbackeryopzioni di sezione di wpbackery

Risorse raccomandate

Ecco alcuni compositori visivi di estensioni che ti consigliamo:

1 - Come gestire le colonne

Nella scheda di gestione delle colonne, puoi scegliere il numero di colonne che desideri aggiungere alla riga. Per comprendere i diversi modelli di colonna, sappi che ogni frazione corrisponde alla larghezza che la colonna occuperà. Per quanto un modello abbia frazioni, tante volte la pagina avrà colonne.

Naturalmente, sono disponibili diversi modelli di colonne 11, ma puoi crearne quanti ne desideri facendo clic sul collegamento "Custom" appena sotto l'elenco delle colonne.

Ad esempio, per visualizzare una sezione della pagina con colonne 2 di uguale larghezza, è necessario scegliere (O aggiungere) "1 / 2 + 1 / 2". 

Le colonne verranno visualizzate sul tuo blog e le loro larghezze verranno distribuite proporzionalmente alle dimensioni del tema. Una colonna può contenere il maggior numero di elementi possibile, quindi non hai limiti a questo livello.

layout della sezione wpbakery

I diversi elementi possono essere spostati in qualsiasi colonna.

spostare la casella di testo wordpress wpbakeryPassando il mouse su ogni elemento, sarai in grado di accedere alle sue opzioni, in particolare al pulsante che consente di:

  • spostare elemento
  • modificatore elemento
  • dupliquer elemento
  • supprimer elemento

Opzioni-gli-elementi

2 - Come aggiungere elementi

Hai la possibilità di personalizzare ogni colonna con gli elementi proposti da " Visivo Compositore '. Per aggiungere un elemento, fai clic sul pulsante "+" su una colonna specifica o sul pulsante "+" plug Menu principale.

aggiungi un elemento wpbakery
Quando una colonna è vuota (ne contiene nessun contenuto)lei ha un bottone "+" dentro.
 Ad esempio, per aggiungere un video, fare clic su questo pulsante e scegliere l'elemento video.

add-un-video

Cliccandoci sopra si aprirà una nuova finestra. In questa finestra, è necessario fornire il titolo, il collegamento al video e una classe aggiuntiva (che non è obbligatorio). Quando hai finito di inserire le varie informazioni sul tuo video, non dimenticare di salvare le modifiche.

sintonizzazione video di wpbakeryIl tuo video sarà disponibile nell'editor di back office. Salva le modifiche ancora una volta. Ora puoi visualizzarlo semplicemente facendo clic " anteprima ".

aggiungi video wpbakery wordpressIl processo per aggiungere un articolo è lo stesso per tutti gli altri, con poche eccezioni. Le informazioni da completare possono variare a seconda degli elementi. 

Selezionando l'elemento di testo, ad esempio, troverai un classico editor visuale (quello disponibile quando si scrivono articoli o pagine), ma anche un'opzione che consente di aggiungere un'animazione durante la visualizzazione dell'elemento. Quest'ultimo può quindi dissolversi da una posizione all'altra, a seconda delle impostazioni.

impostazioni del blocco di testoIl più interessante con questo plug-in, è che sarai in grado di creare barre laterali se il tuo tema non lo fa, per esempio. Per fare ciò, fare clic sul pulsante Aggiungi (" + ")e scegli l'elemento " Commenti WP récents "," Facebook piace E infine « Categorie Wp '.

Ora crea questo modello di colonna personalizzato 1 / 3 + 2 / 3 »O qualsiasi altro e aggiungi l'elemento sidebar nella colonna di sinistra o in quella di destra. Non importa perché tutto dipende da quanto ampia vuoi dare alla tua barra laterale creata con questa estensione di layout rispetto a Visual Composer.

configurazione delle colonne di wpbakery

Noterai una nuova colonna vuota sulla destra, aggiungi un nuovo elemento a tua scelta (Ti consiglio di aggiungere un semplice testo). Ora salva la pagina e vai all'anteprima per vedere il risultato di questo esercizio.

3 - Come salvare e riutilizzare un modello di pagina

È possibile salvare il modello della tua pagina e utilizzarlo in seguito. Adoro questa opzione perché ti consente di risparmiare ore e ore cercando di copiare un modello da una pagina. Qui tutto è fatto con un clic. Sì hai sentito bene, IN UN CLIC ... o in due 🙂

Per salvare un modello, fare clic sull'icona dei modelli. Nella finestra che apparirà, inserisci il nome del tuo modello nel campo " Salva il layout corrente come modello », Quindi fare clic su« Salva modello '.

Importante: È necessario farlo sulla pagina che si desidera salvare come modello e non su una pagina vuota.

registra un modello wpbakery

È lo stesso modo in cui troverai i diversi modelli che hai salvato, più in basso nella stessa finestra nella sezione "Carica un modello".

i miei modelli di wpbakeryTutto quello che devi fare in questo caso è creare una nuova pagina, quindi andare su modelli e scegliere quello che vuoi dare alla tua pagina.

Con l'editore del front-office

L'editore del front office ha il vantaggio de ti permettono di modificare la tua pagina in tempo reale. In altre parole, ti consente di vedere come apparirà ogni modifica apportata al tuo sito utilizzando Visual Composer. Il vantaggio di questo approccio è che non devi lavorare alla cieca come fai con l'editor di pagine di back-office.

Puoi passare da un'opzione all'altra in qualsiasi momento (Back office Office o bordo).

L'editor di front-office non è molto diverso dall'editor di back-office, in quanto c'è un bar utilisateur identiche, ma anche tutte le opzioni dell'editor di back office sono le stesse dell'editor di front office.

barra degli strumenti di wpbakeryTuttavia, sono stati aggiunti cinque nuovi pulsanti, questi includono:

  • Attivazione o disattivazione delle guide
  • L'emulatore, che ti permette di vedere come apparirà il tuo blog su diversi dispositivi
  • Il pulsante Indietro per il back office
  • Il pulsante Salva modifiche
  • Il pulsante di uscita visivo compositore

opzioni di wpbakeryOgni elemento di una pagina può essere modificato, potrai vedere le opzioni disponibili passando con il mouse sopra ogni elemento. Il pulsante a forma di "GIOCARE", ti consentirà di visualizzare più opzioni per un elemento.

Opzioni-gli-elementi-of-the-Front Office

I tuoi primi passi possono essere difficili, ma con la pratica otterrai un home page in questo modo.  Se lo desideri, prima di ottenere il plug-in, Puoi testarlo gratuitamente (login, l'utente: demo, Password: demo).

Ecco cosa sono riuscito a ottenere in 1 minuto a casa. Con la pratica, puoi ottenere risultati molto soddisfacenti. E se hai bisogno di aiuto per costruire il tuo sito Web WordPress con questo potente plug-in, sentiti libero di farlo contatta il team di BlogPasCherchi sarà felice di realizzare i tuoi progetti.

Spero che questo tutorial interamente in francese ti aiuti a muovere i primi passi con il plug-in « Visuale Compositore '. Se hai un problema, noi (o assistenza) saremo felici di aiutarti. Non dimenticare: una bella pagina web converte i clienti più curiosi.

Estensioni consigliate

Ecco alcuni compositori visivi di estensioni che ti consigliamo:

Scopri altri plugin su CodeCanyon

Condividi questo tutorial con chi è nel bisogno.