Come Aggiungere Facilmente l'Ombra della Casella in WordPress (4 Modi)

Un'ombra della casella è uno dei modi più semplici per aggiungere profondità ed enfasi agli elementi sul tuo sito WordPress. Possiamo creare questo effetto con poche righe di CSS.

Detto questo, anche se è semplice, alcuni lettori di WPBeginner hanno chiesto consigli su come implementarlo efficacemente, specialmente se non si sentono a proprio agio con il codice.

In questo articolo, ti mostreremo diversi modi per aggiungere facilmente ombre della casella in WordPress, passo dopo passo. 

Perché Aggiungere Ombre della Casella in WordPress?

Un'ombra della casella, a volte nota anche come ombra proiettata, è un effetto visivo che fa sembrare che qualcosa sullo schermo stia proiettando un'ombra.

Tendiamo a prestare maggiore attenzione agli oggetti che appaiono più vicini a noi. Con questo in mente, molti proprietari di siti web aggiungono ombre della casella ai loro contenuti più importanti per farli sembrare come se stessero fluttuando sopra la pagina.

Ad esempio, se aggiungi una grande ombra a un pulsante di invito all'azione, sembrerà fisicamente più vicino al visitatore, attirando la sua attenzione.

Detto questo, vediamo come puoi aggiungere ombre della casella al tuo blog WordPress o sito web. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare.

• Metodo 1. Aggiungere un'Ombra della Casella Utilizzando il Codice (Maggior Controllo)
• Metodo 2. Aggiungere un'Ombra della Casella Utilizzando un Plugin Gratuito
• Metodo 3. Aggiungere un'Ombra della Casella Utilizzando un Page Builder (Facile)
• Metodo 4. Aggiungere un'Ombra della Casella Utilizzando CSS Hero (Avanzato)
• Scopri altri modi per aggiungere design unici al tuo sito WordPress

Metodo 1. Aggiungi un'ombra a box usando il codice (maggiore controllo)

Se aggiungi un effetto ombra a ogni blocco di WordPress, questo può rendere il tuo sito disordinato e confuso. Tenendo conto di ciò, dovresti aggiungere un'ombra a box solo agli elementi più importanti della pagina.

Dovresti anche mantenere le ombre a box coerenti in tutto il tuo sito. Il modo migliore per farlo è definire lo stile in CSS usando WPCode.

WPCode è il miglior plugin per snippet di codice utilizzato da oltre 1 milione di siti web WordPress. Rende facile aggiungere codice personalizzato in WordPress senza dover modificare il file functions.php.

Con WPCode, anche i principianti possono modificare il codice del proprio sito web senza rischiare errori e refusi che possono causare molti errori comuni di WordPress.

La prima cosa che devi fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet.

Qui vedrai tutti gli snippet WPCode pronti all'uso che puoi aggiungere al tuo sito. Questi includono uno snippet che ti permette di disabilitare completamente i commenti, caricare tipi di file che WordPress di solito non supporta, disabilitare le pagine di allegato, e molto altro.

Passa semplicemente il mouse su ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e poi fai clic su ‘+ Aggiungi snippet personalizzato’ quando appare.

Successivamente, devi scegliere il tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Per questo tutorial, dovrai aggiungere CSS personalizzato a WordPress, quindi seleziona ‘Snippet CSS’ come tipo di codice.

Ora verrai indirizzato alla pagina Crea snippet personalizzato.

Per iniziare, digita un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella dashboard di WordPress.

Quindi, nella casella ‘Anteprima codice’, copia e incolla il seguente snippet di codice:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

Nell'esempio sopra, potrebbe essere necessario sostituire i valori px a seconda del tipo di ombra che si desidera creare.

Per aiutarti, ecco cosa significano i diversi valori px, andando da sinistra a destra:

• Offset orizzontale. Quando imposti un valore positivo, l'ombra viene spostata verso sinistra. Se digiti un valore negativo come -5px, l'ombra verrà spostata verso destra. Se non vuoi aggiungere un offset orizzontale, puoi usare 0px.
• Offset verticale. Se usi un valore positivo, l'ombra verrà spostata verso il basso. Se digiti un valore negativo, l'ombra verrà spostata verso l'alto. Se non vuoi spostare l'ombra verticalmente, digita semplicemente 0px.
• Raggio di sfocatura. Questo sfoca l'ombra in modo che non abbia bordi netti. Maggiore è il valore, maggiore è l'effetto di sfocatura. Se preferisci usare bordi netti, digita 0px.
• Raggio di diffusione. Maggiore è il valore, maggiore è la diffusione dell'ombra. Questo valore è opzionale, quindi saltalo se non vuoi mostrare una diffusione.
• Colore. Sebbene il grigio sia il colore più comune per le ombre, puoi usare qualsiasi colore desideri digitando un codice esadecimale. Se non sei sicuro di quale codice usare, puoi esplorare diversi colori utilizzando una risorsa come Codici Colore HTML.

Quando sei soddisfatto dello snippet, scorri fino alla sezione 'Inserimento'. WPCode può aggiungere il tuo codice in diverse posizioni, come dopo ogni post, solo frontend o solo amministrazione.

Per utilizzare il codice CSS personalizzato su tutto il tuo sito web WordPress, fai clic su 'Inserimento automatico' se non è già selezionato. Quindi, apri il menu a discesa 'Posizione' e scegli 'Intestazione sito'.

Dopodiché, sei pronto per scorrere fino in cima allo schermo e fare clic sull'interruttore 'Inattivo', in modo che cambi in 'Attivo'.

Infine, fai clic su ‘Salva snippet’ per rendere attivo lo snippet CSS.

Ora, puoi aggiungere la classe CSS personalizzata a qualsiasi blocco.

Nell'editor a blocchi di WordPress editor a blocchi, seleziona semplicemente il blocco in cui desideri aggiungere un'ombra alla casella. Quindi, nel menu a destra, fai clic per espandere la sezione 'Avanzate'.

Qui vedrai dei campi in cui puoi aggiungere diverse classi.

In 'Classe/i CSS aggiuntiva/e', digita shadow-effect.

Quando sei pronto per pubblicare l'ombra alla casella, fai semplicemente clic sul pulsante 'Pubblica' o 'Aggiorna'.

Ora, se visiti il tuo sito web, vedrai l'ombra alla casella attiva.

Oltre ad aggiungere un'ombra alla casella, puoi anche usare WPCode per cambiare il colore del testo o persino personalizzare lo stile delle blockquote del tuo tema WordPress con CSS.

Metodo 2. Aggiungere un'ombra alla casella utilizzando un plugin gratuito

Se non ti senti a tuo agio a scrivere codice, potresti preferire creare ombre usando Drop Shadow Box. Questo plugin gratuito ti consente di aggiungere ombre alle caselle a qualsiasi blocco utilizzando l'editor di pagine e post integrato di WordPress.

Innanzitutto, dovrai installare e attivare il plugin. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Non ci sono impostazioni da configurare, quindi puoi iniziare a usare questo plugin subito.

Per aggiungere un'ombra, fai semplicemente clic sull'icona '+' e inizia a digitare 'Drop Shadow Box'. Quando appare il blocco giusto, fai clic su di esso per aggiungerlo alla pagina o al post.

Questo aggiunge l'ombra come una casella vuota, quindi il passo successivo è aggiungere del contenuto.

Per fare ciò, vai avanti e fai clic sul '+' all'interno del blocco Drop Shadow Box.

Quindi, aggiungi semplicemente il blocco che desideri utilizzare e configurarlo come al solito.

Ad esempio, nell'immagine seguente abbiamo aggiunto un blocco Immagine e selezionato una foto dalla libreria multimediale di WordPress.

Fatto ciò, fai clic per selezionare il blocco Drop Shadow Box. Nel menu di destra, vedrai tutte le impostazioni che puoi utilizzare per stilizzare questo blocco.

WordPress imposta automaticamente la larghezza dell'ombra, ma puoi modificarla aprendo il menu a discesa 'Larghezza' e quindi scegliendo 'Pixel' o '%'.

Puoi quindi ridimensionarlo utilizzando le impostazioni che appaiono.

Il plugin Drop Box Shadow è dotato di alcuni effetti diversi come bordi curvi e un effetto 'Prospettiva' accattivante.

Per visualizzare in anteprima i diversi effetti, apri semplicemente il menu a discesa 'Effetto' e scegli dall'elenco. L'anteprima si aggiornerà automaticamente in modo da poter provare diversi stili per vedere quale preferisci.

Puoi anche cambiare se il plugin mostra l'ombra all'interno del riquadro, all'esterno del riquadro o entrambi utilizzando gli interruttori 'Ombra interna' e 'Ombra esterna'.

Dopodiché, puoi cambiare il colore della casella e del bordo utilizzando le impostazioni sotto l'intestazione ‘Colori’.

Tieni presente che ‘Sfondo’ si riferisce all'interno della casella con ombra a goccia, mentre ‘Bordo’ appare all'esterno del blocco.

Se desideri creare una casella con ombra più morbida e arrotondata, puoi abilitare l'interruttore ‘Angoli arrotondati’. Infine, puoi cambiare l'allineamento e il padding, in modo simile a come personalizzi altri blocchi in WordPress.

Per creare più ombreggiature di casella, segui semplicemente lo stesso processo descritto sopra.

Quando sei soddisfatto dell'aspetto della pagina, fai semplicemente clic su ‘Aggiorna’ o ‘Pubblica’ per rendere attive tutte le tue nuove ombreggiature di casella.

Metodo 3. Aggiungi un'ombra di casella utilizzando un Page Builder (Facile)

Se desideri aggiungere ombreggiature di casella a landing page, home page personalizzate o qualsiasi parte del tuo tema WordPress, ti consigliamo di utilizzare un plugin page builder.

SeedProd è il miglior page builder WordPress drag-and-drop. Ti consente di progettare landing page personalizzate e persino di creare un tema WordPress personalizzato senza dover scrivere una singola riga di codice.

Ti consente inoltre di aggiungere ombreggiature di casella a qualsiasi blocco utilizzando il suo editor drag-and-drop avanzato.

Per prima cosa, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Upon activation, go to SeedProd » Landing Pages in your WordPress dashboard.

SeedProd comes with more than 300+ professionally designed templates that are grouped into categories. Along the top, you’ll see categories that let you create beautiful coming soon pages, activate maintenance mode, create a custom login page for WordPress, and more.

All of SeedProd’s templates are easy to customize, so you can use any design you want.

When you find a template you want to use, simply hover your mouse over it and click on the checkmark icon.

You can now type in a name for your landing page into the ‘Page Name’ field. SeedProd will automatically create a ‘Page URL’ using the page name.

È intelligente includere parole chiave pertinenti nel tuo URL ove possibile, poiché ciò aiuta i motori di ricerca a capire di cosa tratta la pagina. Questo spesso migliorerà la tua SEO di WordPress.

Per modificare l'URL generato automaticamente della pagina, digita semplicemente nel campo 'URL pagina'.

Quando sei soddisfatto delle informazioni che hai inserito, fai clic su 'Salva e inizia a modificare la pagina'. Questo caricherà l'interfaccia del page builder di SeedProd.

Questo semplice builder drag-and-drop mostra un'anteprima live del design della tua pagina sulla destra. Sulla sinistra c'è un menu che mostra tutti i diversi blocchi e sezioni che puoi aggiungere alla pagina.

Quando trovi un blocco che desideri aggiungere, semplicemente trascinalo e rilascialo sul tuo modello.

Per personalizzare un blocco, procedi e fai clic per selezionare quel blocco nell'editor di SeedProd. Il menu di sinistra mostrerà ora tutte le impostazioni che puoi utilizzare per personalizzare il blocco.

Ad esempio, se fai clic su un blocco Titolo, puoi digitare il tuo testo o cambiare il colore del testo e la dimensione del carattere.

Mentre costruisci la pagina, puoi spostare i blocchi nel tuo layout trascinandoli e rilasciandoli. Per istruzioni più dettagliate, consulta la nostra guida su come creare una landing page con WordPress.

Per creare un'ombra a scatola, fai clic per selezionare qualsiasi blocco nell'editor di pagine SeedProd. Le impostazioni nel menu di sinistra possono variare tra i blocchi, ma in genere dovrai fare clic su una scheda 'Avanzate'.

Qui, cerca un menu a discesa 'Ombra' nella sezione 'Stili'. Apri semplicemente questo menu a discesa e scegli uno stile di ombra come Sottile, Medio o 2X Grande.

L'anteprima si aggiornerà automaticamente, quindi puoi provare diversi stili per vedere quale si adatta meglio al design della tua pagina.

Se non vuoi utilizzare nessuno degli stili pronti all'uso, fai clic su 'Personalizzato'.

Questo aggiunge alcune nuove impostazioni in cui puoi modificare il colore, la sfocatura, l'estensione e la posizione dell'ombra personalizzata.

Fatto ciò, puoi continuare a lavorare sulla pagina aggiungendo altri blocchi e ombre a scatola.

Quando sei soddisfatto dell'aspetto della pagina, fai clic sul pulsante 'Salva' e quindi scegli 'Pubblica' per renderla attiva.

Metodo 4. Aggiungere un'ombra a scatola usando CSS Hero (Avanzato)

Se non ti senti a tuo agio a lavorare con il codice ma desideri comunque creare ombre a scatola avanzate, puoi provare CSS Hero. Questo plugin premium ti consente di ottimizzare ogni parte del tuo tema WordPress senza dover scrivere una singola riga di codice.

CSS Hero ti permette di creare un'ombra unica per ogni blocco, quindi è anche un'ottima scelta se vuoi creare molti effetti ombra diversi. Puoi saperne di più sul plugin nella nostra recensione di CSS Hero.

Innanzitutto, devi installare e attivare il plugin CSS Hero. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, vedrai un pulsante 'Procedi all'attivazione del prodotto' in cima alla schermata. Fai clic su questo pulsante.

Questo ti porterà al sito web di CSS Hero dove potrai accedere al tuo account e ottenere una chiave di licenza. Segui semplicemente le istruzioni sullo schermo e verrai reindirizzato al tuo sito in pochi clic.

Successivamente, fai clic sul testo 'CSS Hero' nella barra degli strumenti di amministrazione di WordPress.

Questo aprirà l'editor di CSS Hero.

Per impostazione predefinita, l'editor di CSS Hero ha un'anteprima WYSIWYG del tuo sito web e un pannello sinistro dove puoi modificare ogni elemento del tuo web design.

Se ti accorgi di non essere sulla pagina in cui desideri aggiungere l'ombra della casella, puoi passare dalla modalità 'Modifica' alla modalità 'Naviga'.

Questo ti permette di interagire con menu di navigazione, link e altri contenuti come di consueto.

Ora puoi navigare alla pagina o al post in cui desideri aggiungere l'ombra.

Appena raggiungi quella pagina, procedi e passa di nuovo alla modalità 'Modifica'.

Fatto ciò, fai clic sul paragrafo, sull'immagine, sul pulsante o su qualsiasi altro contenuto in cui desideri aggiungere un'ombra a box.

Nel pannello di sinistra, fai clic su 'Extra'.

Ora puoi procedere e fare clic su 'Crea Ombra'.

Questo mostrerà tutte le impostazioni che puoi utilizzare per creare un'ombra a box.

Per iniziare, puoi cambiare se l'ombra appare all'interno o all'esterno del blocco utilizzando le impostazioni 'Posizione Ombra'.

Qui, abbiamo selezionato 'Esterno' per far apparire l'ombra all'esterno dell'immagine stessa.

Dopo aver preso questa decisione, puoi perfezionare l'orientamento dell'ombra utilizzando il piccolo punto nella casella 'Orientamento'.

Trascina semplicemente il punto in una nuova posizione per vederlo muoversi nell'anteprima live.

Quando sei soddisfatto della posizione dell'ombra, puoi cambiarne il colore, la sfocatura e la diffusione.

CSS Hero mostrerà queste modifiche immediatamente, così potrai provare diverse impostazioni per vedere cosa funziona meglio.

Per aggiungere un'ombra a scatola ad altri blocchi, segui lo stesso processo descritto sopra.

Quando sei soddisfatto dell'aspetto della pagina, fai clic su 'Salva' per rendere effettive le modifiche.

Scopri altri modi per aggiungere design unici al tuo sito WordPress

I metodi sopra descritti forniscono un'ottima base per aggiungere ombre a scatola in WordPress. Ma cosa succede se vuoi ottenere effetti ancora più unici e creativi?

Nei seguenti articoli, troverai guide utili su come aggiungere vari elementi di design al tuo sito web:

• Come aggiungere effetti di hover alle immagini in WordPress – Questa guida esplora diversi effetti di hover che puoi creare per le tue immagini, rendendo il tuo sito web più coinvolgente e interattivo per i visitatori.
• Come aggiungere facilmente animazioni CSS in WordPress – Le animazioni, insieme alle ombre a scatola, possono creare un'esperienza utente dinamica e visivamente accattivante, catturando l'attenzione dei tuoi visitatori e mantenendoli coinvolti.
• Come aggiungere un effetto parallasse a qualsiasi tema WordPress – Incorporando effetti parallasse, puoi migliorare l'illusione della profondità e creare un sito web più immersivo.
• Come creare un divisore di forme personalizzato in WordPress – Questo articolo ti mostra come creare forme uniche per separare visivamente le sezioni del tuo contenuto.
• Come Creare Facilmente uno Slider Responsive in WordPress – Questa guida ti insegna come creare slider per mostrare i tuoi contenuti in modo attraente e salvaspazio.
• Come Aggiungere uno Sfondo Animato in WordPress – Aggiungere sfondi animati può creare un'esperienza utente unica e visivamente interessante.

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere un'ombra a box in WordPress. Potresti anche voler imparare come rimuovere CSS inutilizzato in WordPress e come ottimizzare la consegna CSS di WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.