Principiante di WordPress: personalizzazione di livello medio

Per andare oltre le semplici nozioni di base nel mio ultimo blog per principianti di WordPress, nelle ultime due settimane ho lavorato per ricreare una delle nostre pagine demo di ProteusThemes. La demo del tema Auto per essere precisi. Proprio come prima, i miei colleghi mi hanno impostato compiti passo dopo passo per mettermi sulla mia strada. Queste sono le lezioni più importanti che ho imparato finora.

Scatole di icone

I widget Icon Box sono un elemento molto utile del linguaggio visivo . Può sembrare ovvio, ma avere il numero di telefono della tua azienda accanto all'icona di un telefono è un modo semplice ma efficace per migliorare l' esperienza utente del tuo sito .

Il mio compito era aggiungere le caselle delle icone nell'intestazione della home page. Per fare ciò, nella tua dashboard devi andare su Aspetto -> Widget e quindi all'interno di 'Barre laterali del tema ' seleziona ' Intestazione '.

Dopo aver individuato ' Intestazione ', dirigi la tua attenzione a sinistra dello schermo, dove vedrai un elenco di ' Widget disponibili '. ProteusThemes: IconBox è il widget che stai cercando.

Ora hai due opzioni . Puoi trascinare e rilasciare il widget a destra dello schermo e posizionarlo nell'intestazione, oppure quando fai clic sul widget vedrai un menu a discesa delle sue posizioni applicabili, puoi semplicemente selezionare ' Intestazione ' da questo elenco e fare clic sul pulsante blu ' Aggiungi widget ':

Ora vedrai che ci sono molte icone tra cui scegliere all'interno del widget, ai fini di questo esercizio ho scelto il telefono. Tutto quello che devi fare è dare un titolo all'Icon Box e decidere quali informazioni vuoi che appaiano accanto ad essa.

Sotto tutte le icone nel menu del widget, vedrai un'opzione per ' evidenziare questo widget '. Spunta quella casella se le informazioni nella casella delle icone sono estremamente importanti e vorresti che risaltassero di più.

Dispositivo di scorrimento della prima pagina

Ricreare la demo automatica richiedeva l'aggiunta di un dispositivo di scorrimento come funzionalità nella home page. Per fare in modo che ciò accada, seleziona Pagine -> Tutte le pagine -> Home ; una volta che sei nell'editor della tua home page devi trovare il menu a tendina ' Attributi di pagina' sul lato destro dello schermo. Trovalo e cambia il " Modello " in " Prima pagina con dispositivo di scorrimento ".

Una volta che sei passato a " Prima pagina con slider ", ci sarà una nuova meta nella parte inferiore dello schermo intitolata " Slider della prima pagina ", fai clic qui per aggiungere le tue immagini e il testo allo slider:

codici brevi

Ricreare il dispositivo di scorrimento della prima pagina ci porta piacevolmente agli shortcode . Come mai? Perché nella demo automatica che sto ricreando, ci sono pulsanti all'interno del dispositivo di scorrimento .

A questo punto è importante sottolineare che è proprio necessario installare dei plugin consigliati . L'errore che ho commesso è stato quello di inserire lo shortcode nel "testo della diapositiva" senza aver attivato il plug-in ProteusThemes Shortcodes . Se non hai attivato il plugin, il codice stesso apparirà nello slider, invece del pulsante che stai cercando di creare.

C'è una sezione 'Shortcodes' in tutta la documentazione dei nostri temi che ti fornisce molte opzioni disponibili per lo stile e la funzionalità del pulsante che puoi inserire. Tutto quello che devi fare è copiare e incollare questo codice nella sezione "testo diapositiva" del dispositivo di scorrimento. Basta modificare il testo del pulsante all'interno del codice in base alle tue esigenze ed è pronto per l'uso.

Ovviamente puoi utilizzare gli shortcode in altri posti oltre al semplice dispositivo di scorrimento. Ad esempio, se hai scritto un pezzo di marketing dei contenuti per provare a vendere qualcosa, usa gli shortcode per creare un pulsante CTA efficace nella parte inferiore del tuo post sul blog.

Generatore di pagine

Fare i conti con il plug-in Page Builder di SiteOrigin è stato assolutamente fondamentale per ricreare la demo automatica. Il primo compito per cui ho dovuto usarlo è stato creare questa sezione IconBox con Popover sotto l'intestazione della home page:

Per fare ciò, vai alla pagina che vuoi modificare, nel mio caso la home page. Quindi devi individuare il menu del generatore di pagine , che assomiglia a questo:

Da qui, seleziona ' Aggiungi riga '. Vedrai quindi le opzioni relative alle colonne all'interno di questa riga. Puoi selezionare quante colonne vuoi, il loro rapporto di dimensione e se le vuoi in ordine di dimensione che va da sinistra a destra , o viceversa. Per il mio IconBox Popover, ho selezionato 3 colonne di dimensioni pari.

Ora che hai le colonne pronte, puoi iniziare ad aggiungervi funzionalità aggiungendo widget. A tale scopo, fai clic sulla colonna che desideri aggiungere, una volta selezionata la colonna, fai clic sul pulsante " Aggiungi widget " dal menu in alto.

A seconda del widget selezionato, puoi aggiungere ulteriori funzionalità alla colonna. Nel mio IconBox Popover ' Opening Times ', ad esempio, era necessario aggiungere il widget ProteusThemes Opening Time all'interno dell'IconBox Popover, in modo che le informazioni pertinenti venissero mostrate nel popover se si faceva clic sulla colonna.

Un problema che ho riscontrato dopo aver creato questa riga di popover IconBox era che la riga non era dello stesso colore della demo automatica, né si estendeva per l' intera larghezza della mia pagina. È facile risolvere questo tipo di problemi. Innanzitutto, posiziona il cursore sull'icona a forma di chiave inglese sopra la riga, quindi seleziona " Modifica riga ". Per cambiare il colore, il passaggio successivo è selezionare ' Design ' dal menu ' Stili di riga ', qui puoi cambiare il colore e altre opzioni di design.

Per modificare la dimensione della tua riga, seleziona prima ' Layout ' dal menu ' Stili di riga '. Questo ti darà la possibilità di aggiungere padding alla riga. Quindi, se desideri che la riga si estenda all'intera larghezza della pagina, seleziona il menu a discesa " Layout riga " e scegli " Larghezza intera ".

Ho usato Page Builder esattamente allo stesso modo per creare queste colonne di pagine in primo piano:

Per fare ciò, invece di aggiungere il widget Iconbox con Popover alla colonna, ho scelto il widget ProteusThemes: Pagina in primo piano . Dovresti divertirti a mettere diversi widget nelle colonne per avere davvero un'idea di quanto sarà utile il generatore di pagine per te.

Questo sarà tutto per ora. Dai un'occhiata al mio post precedente per alcuni suggerimenti di base. Clicca qui sotto per iscriverti alla nostra newsletter e ricevere questo tipo di contenuto e molto altro direttamente nella tua casella di posta...

ISCRIVITI ORA