Il nostro plug-in Beaver Builder ti aiuta a creare siti Web completi con modelli e moduli. Tuttavia, a volte potresti voler personalizzare ulteriormente il tuo sito. Con gli shortcode di Beaver Builder, puoi aggiungere contenuto extra all'interno di moduli, intestazioni, piè di pagina e barre laterali.

In questo post, introdurremo gli shortcode di Beaver Builder e ti mostreremo come inserirli nei tuoi contenuti. Esploreremo anche alcuni esempi che potrebbero migliorare il design del tuo sito web. Entriamo!

Un'introduzione agli shortcode di Beaver Builder

Se hai già lavorato con siti Web WordPress, potresti già avere familiarità con gli shortcode. Questi sono piccoli frammenti di codice che aggiungono funzionalità al tuo sito.

Invece di scrivere tutto in HTML usando l'editor di codice, puoi semplicemente inserire uno shortcode nella tua pagina. Questo avrà uno slug o un ID che corrisponde a un elemento Beaver Builder, come un modulo, una riga o una colonna. Puoi anche utilizzare codici brevi per post, pagine o modelli di layout.

In questo esempio, stiamo aggiungendo una riga salvata a un modulo HTML:

Quando facciamo clic su Salva , Beaver Builder converte automaticamente lo shortcode nella riga salvata a cui corrisponde:

Più avanti nel post, ti mostreremo come aggiungere codici brevi nell'editor. Per ora, discutiamo i vantaggi dell'utilizzo degli shortcode di Beaver Builder.

Gli shortcode possono essere utili per aggiungere elementi visivi ad aree basate su testo. Ad esempio, potresti creare un modulo Prezzi e utilizzare uno shortcode per aggiungere una foto del prodotto. In questo modo, non dovrai lavorare con due moduli singoli (Prezzi e Foto) poiché saranno combinati:

Gli shortcode ti consentono anche di inserire elementi di Beaver Builder nei tuoi contenuti mentre lavori con l'editor blocchi di WordPress. Ciò significa che non sarà necessario passare all'editor di Beaver Builder per aggiungere un modulo, una riga o una colonna.

Puoi aggiungere codici brevi a qualsiasi modulo Beaver Builder con un campo di testo, inclusi:

• HTML
• Testo
• Intestazione
• Chiamare
• Icona
• Schede

Tuttavia, potrebbe non essere saggio aggiungere troppi shortcode. Ciò potrebbe aumentare i tempi di caricamento poiché il server deve richiedere i file CSS e Javascript per ogni shortcode. Si consiglia di utilizzarne al massimo due per pagina.

5 esempi di utili codici brevi di Beaver Builder

Esistono molti casi d'uso per gli shortcode di Beaver Builder. Diamo un'occhiata ad alcuni esempi utili.

1. Pulsanti di invito all'azione in una tabella dei prezzi

Supponiamo che tu abbia una tabella dei prezzi con più opzioni di prodotto su una pagina di destinazione o pagina di vendita. Potresti semplicemente elencare i prezzi e quindi indirizzare i clienti al check-out con un pulsante in fondo alla pagina. Tuttavia, gli utenti dovranno scorrere ulteriormente verso il basso, il che potrebbe potenzialmente danneggiare l'esperienza utente (UX).

Invece, puoi creare un pulsante Call to Action (CTA) che richiede ai clienti di acquistare il prodotto. Questo si collegherà direttamente alla pagina di pagamento in modo che i clienti non debbano navigare ulteriormente. Quindi, puoi aggiungere questo pulsante alla tabella dei prezzi con uno shortcode:

Ricorda di personalizzare il pulsante CTA in modo che corrisponda al tuo marchio visivo.

2. Un modulo di contatto in una scheda

Se hai un sito aziendale, potresti aggiungere alcune schede alla sezione Informazioni. In questo modo, gli utenti possono saperne di più sulla tua azienda senza dover scorrere la pagina verso il basso.

Supponiamo che tu voglia anche che potenziali clienti ti contattino in merito ai tuoi servizi non appena hanno finito di leggere. Gli utenti passano già del tempo a passare da una scheda all'altra. Dirigerli altrove potrebbe dare loro qualche secondo in più per ripensare alla loro decisione di raggiungere.

Invece, puoi aggiungere un modulo di contatto a una delle tue schede, utilizzando uno shortcode:

È così facile! Ora i clienti possono contattarti senza dover lasciare la pagina.

3. Immagini all'interno di una casella di testo

Quando crei le tue pagine, potresti preferire aggiungere immagini e testo a un singolo modulo. Sebbene tu possa usare due moduli separati, il contenuto verrebbe diviso e non saresti in grado di mettere l'immagine nel mezzo del testo.

La combinazione di testo e immagini è un modo efficace per visualizzare i prodotti nel tuo negozio online. Ad esempio, puoi aggiungere immagini al modulo della casella dei prezzi per mostrare le diverse caratteristiche del prodotto:

Teoricamente, potresti mettere insieme questo stesso layout con diversi moduli impilati uno sopra l'altro. Tuttavia, l'utilizzo di uno shortcode dell'immagine può accelerare il processo di progettazione.

4. Qualsiasi modulo nell'editor blocchi

Puoi anche utilizzare gli shortcode di Beaver Builder quando lavori con l'Editor blocchi. Questo potrebbe essere particolarmente utile se stai scrivendo un post sul blog e vuoi aggiungere elementi interattivi al tuo articolo.

Puoi facilmente trascinare un modulo Beaver Builder nella pagina senza uscire dall'Editor blocchi. Basta inserire un blocco Shortcode e incollare il codice all'interno:

Una volta pubblicato il post, lo shortcode visualizzerà i contenuti sul front-end:

Ad esempio, puoi inserire un modulo Modulo di contatto. Puoi anche aggiungere un invito all'azione che indirizza i clienti al tuo negozio o una mappa incorporata della posizione del tuo negozio.

5. La data (solo tema Beaver Builder)

Il nostro tema Beaver Builder viene fornito con uno shortcode Date personalizzato. Questo mostra la data corrente in qualsiasi parte della tua pagina, incluse intestazioni, piè di pagina e barre laterali:

Questo shortcode potrebbe essere utile se gestisci un sito Web di notizie. Puoi aggiungere la data utilizzando uno dei seguenti codici brevi:

Potresti anche voler utilizzare questo shortcode accanto al tuo messaggio di copyright nel piè di pagina. In questo modo, puoi assicurarti che sia sempre aggiornato.

Come aggiungere codici brevi con Beaver Builder (in 2 passaggi)

Abbiamo appena coperto diversi scenari in cui gli shortcode di Beaver Builder possono velocizzare e semplificare il processo di progettazione. Ora, diamo un'occhiata a come aggiungerli al tuo sito:

Passaggio 1: crea il tuo shortcode

Gli shortcode non sono facilmente disponibili sul tuo sito web. Dovrai prima salvare gli elementi di Beaver Builder prima di poterli inserire come shortcode. Questi elementi possono includere:

• Moduli
• Righe
• Colonne
• Modelli

Ad esempio, supponiamo che tu voglia progettare un modulo Modulo di contatto personalizzato. Puoi farlo andando su Beaver Builder > Moduli salvati > Aggiungi nuovo :

Ti verrà quindi chiesto di nominare il tuo modulo e sceglierne il tipo:

Fare clic su Aggiungi modulo salvato . Nella pagina successiva, seleziona Avvia Beaver Builder per accedere all'editor. Qui puoi personalizzare il modulo di contatto a tuo piacimento:

Quando sei pronto, assicurati di pubblicare il tuo modulo. Ora verrà visualizzato nella pagina dei moduli salvati . Se stai utilizzando l'ultima versione di Beaver Builder, potrai vedere gli shortcode generati automaticamente:

Se non riesci a vedere la colonna ShortCode , dovrai creare il codice manualmente. Per fare ciò, avrai bisogno dello slug del modulo.

Se fai clic sul pulsante Modifica sotto il modulo, dovresti essere in grado di visualizzarne lo slug. Se non riesci a vederlo, apri il menu Opzioni schermo e spunta la casella accanto a Slug :

Ora puoi usare il seguente codice per creare uno shortcode per questo modulo:

 [fl_builder_insert_layout slug="my-post-slug"]

Ricorda di sostituire "my-post-slug" con lo slug del tuo modulo Beaver Builder. Nel nostro esempio, sarà simile a questo:

 [fl_builder_insert_layout slug="contact-form"]

Questo è tutto: ora sai come creare codici brevi per i moduli Beaver Builder.

Passaggio 2: inserisci lo shortcode nella tua pagina

Il passaggio finale è aggiungere lo shortcode alla tua pagina. Nella maggior parte dei casi, questo processo comporterà l'incollaggio dello snippet all'interno del campo Testo di un modulo.

Ecco il nostro esempio di tabella dei prezzi di prima. Come puoi vedere, abbiamo aggiunto lo shortcode per il pulsante CTA nella casella di testo Caratteristica 5 :

Poiché Beaver Builder utilizza un editor front-end, sarai in grado di vedere immediatamente il tuo modulo salvato. In alcuni casi (come quando si utilizza un modulo HTML), potrebbe essere necessario salvare le modifiche prima che lo shortcode si converta nell'elemento visivo.

Conclusione

Gli shortcode di Beaver Builder ti consentono di aggiungere rapidamente moduli, righe, colonne o layout salvati in diverse parti delle tue pagine. Puoi usarli per accelerare il processo di progettazione e creare bellissime pagine WordPress.

Per ricapitolare, puoi utilizzare gli shortcode di Beaver Builder seguendo questi semplici passaggi:

1. Salva un elemento (modulo, riga, colonna o layout) e cerca il suo shortcode o slug.
2. Inserisci lo shortcode in un campo di testo all'interno di un modulo Beaver Builder o nel blocco Shortcode nell'Editor blocchi.

Sei pronto per iniziare a creare pagine straordinarie per il tuo sito? Dai un'occhiata all'elenco completo delle funzionalità intuitive di Beaver Builder!

DOMANDE CORRELATE

Beaver Builder usa gli shortcode?

Beaver Builder fornisce codici brevi per elementi salvati come moduli, righe, colonne e modelli. È quindi possibile aggiungere questi frammenti a campi e moduli basati su testo. Ciò è possibile sia nell'editor front-end di Beaver Builder che nell'editor blocchi di WordPress. Inoltre, gli shortcode ti consentono di utilizzare i tuoi altri plugin preferiti insieme a Beaver Builder.

Hai bisogno del tema Beaver Builder per usare gli shortcode?

Non è necessario il tema ufficiale di Beaver Builder per utilizzare gli shortcode. Puoi creare pagine e aggiungere codici brevi con la maggior parte dei temi utilizzando il plug-in per la creazione di pagine. Tuttavia, alcuni shortcode, come lo shortcode Date, funzionano solo con il tema Beaver Builder.

Qual è la differenza tra Beaver Builder e Beaver Themer?

Beaver Builder è uno strumento di creazione di pagine che consente di modificare l'area del contenuto di pagine e post utilizzando moduli e modelli. Al contrario, Beaver Themer è un plug-in aggiuntivo che ti consente di modificare aree del tuo sito che sono generalmente controllate dal tuo tema come intestazioni, piè di pagina e barre laterali. Questo contenuto include modelli di temi, parti di modelli e griglie di post.