Come modificare i margini in WordPress (Guida per principianti)

Modificare i margini in WordPress è un modo semplice per migliorare il design e l’esperienza utente del sito. I margini creano spazio tra gli elementi, rendendo i contenuti più leggibili e gradevoli alla vista.

Come best practice generale, utilizziamo sempre margini e spaziature abbondanti nella progettazione dei nostri siti web. Abbiamo notato che questo ha un impatto positivo sull’engagement degli utenti con le nostre pagine e i nostri contenuti.

In questa guida per principianti vi mostreremo come aggiungere e regolare i margini in WordPress. Imparerete diversi metodi per modificare i margini in varie aree del vostro sito web WordPress.

Cosa sono i margini in WordPress e nel Web Design?

I margini sono lo spazio aggiunto intorno a una pagina web o ad altri elementi all’interno di una pagina web.

Pensate a una tipica pagina web come a un foglio di carta vuoto. I margini sono lo spazio bianco o vuoto intorno ai bordi del foglio.

Lo scopo dell’uso dei margini è quello di garantire che gli elementi all’interno di una pagina web non appaiano schiacciati tra loro.

Allo stesso modo, i margini possono essere utilizzati intorno a diversi elementi all’interno del layout di pagina.

Ad esempio, è possibile modificare i margini delle immagini in modo che non siano troppo vicine al testo o aggiungere un margine per lasciare spazio tra l’area dei contenuti e la barra laterale.

In questo articolo verranno coperte molte informazioni. Fate clic sui link sottostanti per passare alla sezione desiderata.

Qual è la differenza tra margine e imbottitura?

Il margine e il padding sono entrambi utilizzati per aggiungere spazio bianco nel web design. Tuttavia, vengono utilizzati in modo molto diverso.

I margini aggiungono spazio vuoto all’esterno di un elemento, mentre il padding aggiunge spazio vuoto al suo interno.

I margini vengono utilizzati per aggiungere spazio all’esterno di un elemento. Consentono di garantire un ampio spazio tra gli elementi di una pagina web.

Vediamo ora alcuni esempi di quando utilizzare i margini.

1. Aggiunta di margini per aumentare lo spazio tra un’immagine e il testo di un articolo.

2. Regolare i margini per aggiungere spazio tra le sezioni, come l’intestazione e l’area dei contenuti.

Il padding, invece, viene utilizzato per aggiungere uno spazio cuscinetto tra il contenuto e i bordi di una casella o di un elemento.

Ecco alcuni esempi di quando è necessario utilizzare una spaziatura interna.

1. Regolare il padding per aumentare lo spazio cuscinetto dei pulsanti di chiamata all’azione.

2. Aumento dell’imbottitura in una colonna di testo

Sia il padding che i margini sono ampiamente utilizzati nel web design.

L’uso di spazi vuoti dà respiro a qualsiasi progetto, rendendolo più facile da usare ed elegante.

Per maggiori dettagli, consultate il nostro tutorial sulla differenza tra spaziatura interna e margini in WordPress.

Perché è necessario aggiungere o modificare i margini in WordPress?

I margini sono un aspetto cruciale del web design. Rendono il sito web piacevole e facile da usare.

Eseguiamo accuratamente test A/B su tutti i nostri siti web per capire come gli utenti interagiscono con il design. I risultati dimostrano sempre che l’aggiunta di margini ha un grande effetto sulle conversioni.

Quando si crea un design più pulito e organizzato, è più probabile che gli utenti rimangano più a lungo sul sito e completino le azioni desiderate.

I temi WordPress gestiscono l’aspetto del design del vostro sito WordPress. La maggior parte di essi fa già un ottimo lavoro di impostazione delle regole CSS per garantire un ampio spazio bianco con margini nel layout del tema.

Detto questo, a volte potrebbe essere necessario aggiungere dei margini per regolare le cose.

Ad esempio, potreste non gradire il margine intorno ai menu di navigazione o desiderare un margine maggiore intorno ai pulsanti di invito all’azione.

Allo stesso modo, a volte si ha la sensazione che gli oggetti siano troppo vicini o troppo distanti tra loro.

In questo caso, dovrete modificare i margini in WordPress da soli.

Come aggiungere i margini in WordPress?

Ci sono molti modi per aggiungere margini in WordPress.

A seconda della posizione in cui volete aggiungere il margine e delle opzioni disponibili nel vostro tema WordPress, dovrete scegliere il metodo che fa per voi.

Cominciamo con le opzioni predefinite di WordPress, perché sono le più semplici per i principianti.

Aggiungere i margini in WordPress usando l’editor del sito completo

Se utilizzate un tema a blocchi con supporto completo per l’editor del sito, potete utilizzare l’editor del sito integrato per modificare i margini in qualsiasi punto del vostro sito WordPress.

Per prima cosa, è necessario andare su Aspetto ” Editor per lanciare l’editor del sito.

Una volta entrati nell’editor del sito, fare clic per scegliere un modello dalla colonna di sinistra o fare clic su un punto qualsiasi della finestra di anteprima.

Quindi, fare clic sull’area o sull’elemento in cui si desidera modificare i margini. Nella colonna di destra, l’opzione per regolare i margini si trova sotto la scheda ‘Stile’.

Mentre si regolano i margini, l’editor evidenzia l’area dei margini.

Si può anche scegliere di aggiungere margini in alto, in basso, a destra o a sinistra.

Aggiunta di margini nell’editor a blocchi

Se si lavora su un post del blog o su una pagina, si utilizzerà l’editor di blocchi.

L’editor a blocchi di WordPress consente di aggiungere e modificare i margini dei vari blocchi.

È sufficiente fare clic sul blocco in cui si desidera add-on/regolare i margini. Nelle impostazioni del blocco, passare alla scheda ‘Stile’ e scorrere giù fino all’opzione ‘Dimensioni’ o ‘Margini’.

Aggiunta di margini in WordPress con SeedProd

SeedProd è il miglior plugin per la creazione di pagine per WordPress presente sul mercato. Permette di creare facilmente pagine personalizzate per il vostro sito web. Potete anche usarlo per creare un tema WordPress personalizzato da zero.

L’intuitivo costruttore di pagine drag-and-drop di SeedProd consente di regolare facilmente i margini di qualsiasi elemento all’interno dell’editor.

Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.

Successivamente, è necessario visitare SeedProd ” Landing Pages e fare clic sul pulsante ‘Add-on’ (Aggiungi una landing page).

Successivamente, vi verrà chiesto di scegliere un modello per la vostra pagina.

SeedProd viene fornito con decine di modelli già pronti che possono essere utilizzati come punto di partenza, oppure si può iniziare con un modello vuoto.

Fare clic per scegliere il modello, quindi indicare un nome per la pagina di destinazione.

In questo modo si avvia il costruttore di pagine di SeedProd.

Sul lato destro viene visualizzata un’anteprima in tempo reale della pagina. E gli elementi che potete aggiungere alla vostra pagina nella colonna di sinistra.

È possibile puntare e fare clic su qualsiasi elemento della pagina per modificarlo.

Facendo clic su un elemento, questo viene selezionato e le sue opzioni vengono visualizzate nella colonna di sinistra. Da qui, passare alla scheda ‘Avanzate’ e cliccare sull’opzione ‘Spaziatura’.

Da qui è possibile modificare i margini e il padding dell’elemento selezionato.

Una volta terminata la modifica della pagina, non dimenticate di cliccare sui pulsanti “Salva” e “Pubblica” in alto a destra.

Dopodiché, potrete visitare il vostro sito web per vedere le modifiche in azione.

Modificare i margini con Thrive Architect

Thrive Architect è uno dei migliori strumenti di page builder per WordPress che consente di utilizzare un’interfaccia drag-and-drop per progettare le pagine di WordPress.

Viene fornito con oltre 300 template da utilizzare come punto di partenza. Inoltre, è possibile utilizzarlo per modificare le pagine e i post di WordPress, prendendo in prestito il layout e lo stile del tema WordPress esistente.

Per installare Thrive Architect, occorre innanzitutto accedere al proprio account sul sito web di Thrive Themes.

Da qui, è necessario scaricare e installare il plugin Thrive Product Manager. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.

Dopo l’attivazione, è necessario visitare la pagina del Thrive Product Manager.

Fare clic sul pulsante “Accedi al mio account” per collegare WordPress al proprio account Thrive Themes.

Una volta connessi, vedrete l’elenco dei prodotti Thrive Themes disponibili nel vostro account.

Fare clic sulla casella di controllo “Installa prodotto” sotto Thrive Architect, quindi fare clic sul pulsante “Installa prodotti selezionati” in basso.

Thrive Product Manager installerà ora il plugin Thrive Architect per voi.

Dopodiché, è possibile modificare o creare una nuova pagina o post di WordPress e fare clic sul pulsante “Modifica con Thrive Architect” o “Avvia Thrive Architect”.

Thrive Architect chiederà di scegliere un modello se si tratta di una nuova pagina.

È possibile utilizzare il template del tema per creare una “pagina normale” o una “landing page precostruita”.

Se si sceglie l’opzione “Pre-built Landing Page”, il plugin mostra una serie di template tra cui scegliere.

È sufficiente fare clic per selezionare quello che assomiglia a ciò che si desidera creare.

Che si tratti di una pagina normale (utilizzando gli stili del tema) o di una landing page, il costruttore di pagine di Thrive Architect avrà le stesse caratteristiche.

Verrà visualizzata un’anteprima live della pagina con una barra degli strumenti a destra e un pannello delle impostazioni a sinistra.

È possibile puntare o fare clic su un elemento per selezionarlo. Oppure fare clic sul pulsante Aggiungi [+] nella barra degli strumenti per aggiungere un nuovo elemento.

Quando si fa clic per selezionare e modificare un elemento, le sue impostazioni appaiono nella colonna di sinistra.

Da qui, fare clic sulla scheda “Layout e posizione” per modificare i margini e la spaziatura interna.

Verrà visualizzata una rappresentazione visiva del margine e del padding.

Passare il mouse su un lato qualsiasi del margine e trascinare la maniglia per aumentare o diminuire il margine.

È possibile ripetere la procedura per modificare i margini su uno qualsiasi dei quattro lati.

Una volta terminato, non dimenticate di cliccare sul pulsante Salva lavoro e di selezionare l’opzione Salva ed esci dall’editor di post.

A questo punto è possibile fare clic sul pulsante “Pubblica” o “Salva” per salvare la pubblicazione o la pagina di WordPress.

Cambiare i margini in WordPress usando il codice CSS

Questo metodo richiede l’aggiunta di codice CSS al vostro tema WordPress. È inoltre necessaria una conoscenza di base di HTML e CSS.

Tuttavia, questo metodo offre una maggiore flessibilità, in quanto è possibile scegliere manualmente l’area in cui aggiungere o regolare i margini.

Aggiunta e modifica dei margini mediante CSS personalizzati in un tema WordPress

WordPress consente di salvare i CSS personalizzati nelle opzioni del tema WordPress. Tuttavia, a seconda del tema WordPress, ci sono diversi modi per farlo.

Prima di aggiungere o modificare i margini utilizzando i CSS, potrebbe essere necessario individuare l’elemento da indirizzare con il codice CSS.

Ad esempio, se si desidera modificare i margini del corpo della pagina, si può utilizzare il seguente codice:

body { 
margin:50px; 
}

Il modo più semplice per individuare l’elemento da colpire è usare lo strumento Inspect del browser.

Aprire il sito web in una nuova scheda del browser e posizionare il mouse sull’elemento che si desidera modificare i margini. Dopodiché, fate clic con il tasto destro del mouse e selezionate “Ispeziona” dal menu del browser.

Questo dividerà lo schermo del browser e si vedrà il codice HTML e il CSS dietro la pagina.

È possibile spostare il mouse sul codice e il browser evidenzierà l’area interessata.

Nel codice, si può vedere l’elemento HTML o la classe CSS che si deve indirizzare con il CSS personalizzato.

Potete anche provare i vostri margini qui per vedere in anteprima come appariranno.

Tuttavia, queste modifiche non vengono salvate nel tema e scompaiono quando si ricarica o si chiude la scheda del browser.

Vediamo i diversi modi in cui è possibile salvare il CSS personalizzato in WordPress.

Utilizzo di CSS personalizzati per modificare i margini nell’editor del sito

Se si utilizza un tema a blocchi con il supporto completo dell’editor del sito. Ecco come aggiungere CSS personalizzati al tema.

Per prima cosa, andare alla pagina Aspetto ” Editor per lanciare l’editor del sito e poi passare al pannello ‘Stili’.

Nella parte inferiore del pannello “Stili”, fare clic sulla scheda “CSS aggiuntivi”.

Verrà visualizzato un editor di testo in cui è possibile aggiungere il codice CSS personalizzato. Il codice CSS verrà immediatamente applicato e sarà possibile vedere le modifiche sullo schermo.

Una volta soddisfatti delle modifiche, non dimenticate di cliccare sul pulsante “Salva” per memorizzare le modifiche.

Aggiunta di margini con i CSS nel personalizzatore del tema

Se si utilizza un tema classico (senza supporto per l’editor del sito), è possibile salvare il CSS personalizzato nel personalizzatore del tema.

Accedere alla pagina Aspetto ” Personalizzazione per avviare il personalizzatore del tema.

Il personalizzatore mostrerà diverse opzioni a seconda del tema di WordPress.

È necessario fare clic sulla scheda CSS aggiuntivo per espanderla.

La scheda scorrerà per mostrare un semplice riquadro in cui aggiungere il CSS personalizzato.

Non appena si aggiunge una regola CSS valida, sarà possibile vederla applicata nel riquadro di anteprima live del sito web.

Una volta soddisfatti delle modifiche, fare clic sul pulsante “Pubblica” per memorizzare le modifiche.

Modificare i margini con il codice CSS personalizzato utilizzando WPCode

Il modo più semplice per aggiungere codice CSS personalizzato in WordPress è utilizzare il plugin WPCode.

È il miglior plugin per gli snippet di codice di WordPress che consente di aggiungere qualsiasi codice CSS/HTML/PHP/JavaScript al vostro sito WordPress senza interromperlo.

Il vantaggio di usare WPCode è che non si perdono le modifiche CSS quando si cambia tema di WordPress.

La prima cosa da fare è installare e attivare il plugin WPCode. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.

Dopo l’attivazione, andare alla pagina Code Snippets ” + Add New.

Passare il mouse sull’opzione “Aggiungi codice personalizzato (nuovo snippet)” nella libreria degli snippet di codice e fare clic sul pulsante “Usa snippet”.

Quindi, nella parte superiore della pagina, aggiungere un titolo per lo snippet CSS personalizzato. Può essere qualsiasi cosa che aiuti a identificare il codice.

Dopodiché, scrivete o incollate il vostro CSS personalizzato nella casella “Anteprima codice” e impostate il “Tipo di codice” scegliendo l’opzione “Snippet CSS” dal menu a discesa.

Ad esempio, se si desidera aggiungere o modificare i margini intorno all’intero corpo della pagina web, è possibile utilizzare il seguente codice CSS:

body { 
margin:50px;
}

Quindi, scorrere fino alla sezione “Inserimento” e selezionare il metodo “Inserimento automatico” per eseguire il codice in tutto il sito WordPress.

Se si desidera eseguire il codice solo su determinate pagine o post, si può scegliere il metodo ‘Shortcode’.

A questo punto, è necessario tornare all’inizio della pagina e spostare l’interruttore su “Attivo”.

Infine, fare clic sul pulsante “Salva snippet” per memorizzare le modifiche.

Ora è possibile visitare il sito web per vedere il CSS personalizzato in azione.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere o modificare i margini in WordPress. Potreste anche voler imparare come affiancare le immagini in WordPress o come aggiungere pulsanti di testo sottolineati e giustificati in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.