Come creare una barra laterale WordPress personalizzata senza codice
Pubblicato: 2022-02-02Vuoi imparare a creare una barra laterale WordPress personalizzata senza codice?
Una barra laterale ben progettata migliora l'esperienza dell'utente e migliora la navigazione per loro. Ma personalizzare la barra laterale utilizzando le impostazioni predefinite di WordPress non è sempre molto semplice. E la codifica è ancora più difficile.
In questo post, ti mostreremo come aggiungere una barra laterale in WordPress in pochi semplici passaggi.
Perché dovresti aggiungere una barra laterale personalizzata di WordPress
Le barre laterali forniscono un modo semplice ma efficace per visualizzare informazioni importanti che vorresti che i visitatori vedessero. In molti siti WordPress, è comune dedicare barre laterali per fornire collegamenti rapidi a post correlati, pagine di social media e moduli di optin.
Questo ti aiuta a garantire la migliore esperienza utente per i tuoi utenti e ti consente di indirizzare i visitatori alle aree del tuo sito che vorresti che vedessero. Di conseguenza, le barre laterali ti consentono di aumentare le visualizzazioni di pagina, il tempo di permanenza, il coinvolgimento e le conversioni.
Anche se molti temi WordPress sono dotati di barre laterali già pronte, non forniscono il tipo di facile personalizzazione visiva che si ottiene con alcuni plugin di WordPress.
SeedProd è il miglior plugin per WordPress per creare barre laterali con una semplice funzionalità di trascinamento della selezione. Pertanto, utilizzeremo SeedProd per mostrarti come aggiungere una barra laterale in WordPress senza alcun codice.
Come creare una barra laterale WordPress personalizzata senza codice
Per sapere come aggiungere una barra laterale in WordPress, segui semplicemente i passaggi seguenti:
- Installazione di SeedProd
- Scelta di un modello di tema
- Personalizzazione della barra laterale di WordPress
- Aggiunta di un modulo di contatto all'interno della barra laterale
- Aggiunta di post recenti all'interno della barra laterale di WordPress
- Eliminazione di elementi dalla barra laterale
- Salvataggio delle modifiche e pubblicazione della barra laterale
Iniziamo.
1. Installazione di SeedProd
Per cominciare, devi avere SeedProd installato sul tuo sito. Se non sai come installarlo, consulta questo tutorial su come installare un plugin per WordPress.
Per accedere alla funzione di creazione di temi WordPress di SeedProd (di cui avrai bisogno per creare una barra laterale), dovrai acquistare la licenza SeedProd Pro. Dopo aver effettuato l'acquisto e creato un account con SeedProd, accedi all'area del tuo account e vai alla scheda Download . Qui troverai la tua chiave di licenza. Copialo (ne avremo bisogno in seguito).
Dalla dashboard di WordPress, vai a SeedProd » Impostazioni. In questa schermata dovresti vedere il campo della tua chiave di licenza . Incolla qui la chiave di licenza e fai clic sul pulsante Verifica .
Ora che SeedProd è impostato sul tuo sito, utilizziamo alcuni modelli per semplificare la nostra attività di creazione della barra laterale.
2. Scelta di un modello di tema
Dalla tua area di amministrazione di WordPress, fai clic su SeedProd »Costruttore di temi.
Questa è la dashboard principale in cui puoi controllare le impostazioni per tutti i tuoi diversi elementi del tema, inclusa la barra laterale.
Ora, fai clic sul pulsante Temi arancione.
SeedProd ha vari temi per diversi tipi di aziende e organizzazioni tra cui agenzie di marketing, ristoranti, broker di mutui e altro ancora. Puoi scegliere un tema più adatto alla tua attività e quindi personalizzare la barra laterale finché non appare esattamente come desideri.
Per questo esempio, utilizzeremo il tema Starter, che funziona benissimo per i siti Web semplici. Quando selezioni il tema, l'area del generatore di temi verrà ora popolata automaticamente con tutte le parti essenziali che compongono il tema.
Puoi abilitare e disabilitare ogni parte diversa a seconda delle tue esigenze. Dal momento che nel nostro esempio utilizzeremo solo una barra laterale per la pagina del blog, manterremo solo la barra laterale e l' indice del blog, gli archivi, la ricerca e le parti abilitate.
Usando i pulsanti di commutazione sotto l'intestazione Pubblicato abbiamo disabilitato altre parti del tema e lasciato la barra laterale allo stato SÌ .
Ora siamo pronti per iniziare a personalizzare la barra laterale.
3. Personalizzazione della barra laterale di WordPress
Per iniziare a personalizzare la barra laterale di WordPress, posiziona il cursore sull'opzione Barra laterale nella dashboard del generatore di temi SeedProd e fai clic su Modifica design.
Questo aprirà l'interfaccia del generatore di temi. La barra laterale del tema Starter ha una barra di ricerca, categorie e icone dei social media abilitate per impostazione predefinita.
Ma puoi aggiungere più elementi alla barra laterale o sostituire quelli esistenti con qualcos'altro. Nel riquadro di sinistra troverai tonnellate di blocchi che puoi trascinare e rilasciare nell'area a destra, che è un'anteprima dal vivo della barra laterale.
Di seguito, ti mostreremo come eseguire alcune comuni personalizzazioni della barra laterale, ma questi sono tutti passaggi facoltativi.
Aggiunta di un modulo di contatto all'interno della barra laterale
In questo esempio, ti mostreremo come aggiungere un semplice modulo di contatto alla barra laterale. Ma prima assicurati di aver installato WPForms. Se hai bisogno di aiuto con questo, consulta questo documento sull'installazione di WPForms.
WPForms si integra automaticamente con SeedProd. Quindi, tutti i moduli che hai creato con WPForms possono essere aggiunti come blocco nella barra laterale usando SeedProd.
Per fare ciò, digita semplicemente "modulo di contatto" nella barra di ricerca nella scheda Blocchi . Quindi, trascina e rilascia il blocco Modulo di contatto nel punto in cui desideri posizionarlo sulla barra laterale.
Dopo aver posizionato il modulo nella barra laterale, fare clic sul blocco WPForms per aprire le opzioni del modulo. Da qui, puoi aggiungere un modulo già creato o addirittura crearne uno nuovo premendo il pulsante +Nuovo modulo .
Utilizzeremo un modulo che abbiamo già creato con WPForms facendo clic sul menu a discesa Seleziona un modulo e selezionandone uno dall'elenco.
Ecco come appare il modulo.
Se è necessario modificare il modulo, fare clic su Modifica il modulo selezionato. Questo aprirà il builder WPForms nella stessa finestra e potrai apportare le modifiche desiderate senza dover uscire dalla schermata del generatore di temi.
Oltre a ciò, puoi personalizzare il design del modulo andando alla scheda Avanzate . SeedProd fornisce opzioni per modificare lo stile, gli attributi, la spaziatura e la visibilità del dispositivo del modulo.
Ad esempio, se desideri nascondere la barra laterale quando il tuo sito viene visualizzato su dispositivi mobili, fai semplicemente clic sul menu Visibilità dispositivo e quindi attiva il pulsante Nascondi su dispositivo mobile .
Successivamente, ti mostreremo come aggiungere post recenti nella barra laterale del tuo blog.
Aggiunta di post recenti all'interno della barra laterale di WordPress
Ancora una volta, usa il campo di ricerca nella scheda Blocchi del generatore di temi e digita "post recenti". Ora trascina e rilascia il blocco Post recenti nell'area in cui desideri che venga visualizzato.
Il widget Post recenti si popola automaticamente quando vengono pubblicati nuovi post del blog sul tuo sito web.
Se fai clic sul widget quando è posizionato sul lato destro del builder, puoi accedere a impostazioni come il controllo del numero di post che desideri vengano visualizzati.
Ci sono solo 3 post sul nostro sito di prova di esempio. Ma è buona norma includere 5 post recenti da mostrare nella barra laterale.
Eliminazione di elementi dalla barra laterale
Con il generatore di temi SeedProd, eliminare elementi dalla barra laterale è facile come aggiungere nuovi elementi.
Nel nostro esempio, rimuoveremo il blocco della barra di ricerca dalla barra laterale. Spetta interamente a te decidere quali parti desideri rimuovere dalla barra laterale. Stiamo solo rimuovendo la barra di ricerca per la dimostrazione.
Normalmente, è considerata una buona pratica mantenere la barra laterale semplice e mirata, quindi cerca di non includere troppi widget nella barra laterale.
Per eliminare un blocco, passa con il mouse fino a quando non appare un contorno arancione attorno al blocco che desideri eliminare e premi l'icona del cestino.
Vedrai quindi una richiesta per confermare l'azione di eliminazione. Premi Sì, eliminalo! pulsante per andare avanti.
Questo è tutto ciò che serve per eliminare qualsiasi blocco o elemento dalla barra laterale.
4. Salvataggio delle modifiche e pubblicazione della barra laterale
Quando hai finito di personalizzare la barra laterale a tuo piacimento, fai clic sul pulsante Salva in alto a destra.
Ora, fai clic sul pulsante a croce per uscire dal generatore di temi.
Questa azione aggiungerà la barra laterale alla pagina del tuo blog. Apri la pagina del blog del tuo sito dal frontend per vedere la barra laterale di WordPress appena creata. (In questo esempio, abbiamo solo le icone dei social media e il modulo di contatto abilitati).
E questo è tutto! Ora sai come aggiungere una barra laterale in WordPress e personalizzarla in modo che appaia proprio come piace a te.
Quindi, imposta un sottodominio di posta elettronica
Vuoi mantenere la tua reputazione e-mail e mantenere alti tassi di consegna? In tal caso dovresti considerare di impostare un sottodominio di posta elettronica. Consulta la nostra guida sui sottodomini e-mail per scoprire come gestire al meglio la tua reputazione e-mail e configurare un sottodominio e-mail.
Potresti anche voler conoscere la consegna della posta elettronica e la sua importanza. Puoi controllare il nostro articolo sul miglioramento della consegna delle e-mail per maggiori dettagli.
Pronto a correggere le tue email? Inizia oggi con il miglior plugin SMTP per WordPress. WP Mail SMTP Elite include la configurazione completa del guanto bianco e offre una garanzia di rimborso di 14 giorni.
Se questo articolo ti ha aiutato, seguici su Facebook e Twitter per ulteriori suggerimenti e tutorial su WordPress.