Come modificare i margini in WordPress (Guida per principianti)

Volete cambiare i margini in WordPress?

I margini sono uno degli elementi di design più importanti, in grado di migliorare significativamente l’esperienza dell’utente e l’estetica di qualsiasi progetto. Aggiungono spazi tra gli elementi in modo che il contenuto sia leggibile e che tutto sia facilmente identificabile.

In questa guida per principianti vi mostreremo come aggiungere e modificare i margini in WordPress. Vi mostreremo vari metodi per modificare i margini in diverse aree del vostro sito 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 tratteremo molti argomenti. Fate clic sui link sottostanti per passare a qualsiasi sezione desideriate.

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.

Esempi:

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.

Esempi:

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.

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

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

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.

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

Ad esempio, potreste non gradire il margine intorno ai vostri menu di navigazione o desiderare di aggiungere più margine intorno ai vostri pulsanti di chiamata 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.

Aggiunta di margini in WordPress utilizzando l’editor completo del sito

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 visitare la sezione Aspetto ” Editor per avviare 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, sotto la scheda Stile, apparirà l’opzione per regolare i margini.

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 blocchi

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

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

È sufficiente fare clic sul blocco in cui si desidera aggiungere/regolare i margini. Nelle impostazioni del blocco, passare alla scheda Stile e scorrere 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 la sezione SeedProd ” Pagine di destinazione e fare clic sul pulsante Aggiungi nuova pagina di destinazione.

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 fare clic 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 fare clic sul pulsante Salva e pubblica nell’angolo 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 modelli che potete utilizzare come punto di partenza. Inoltre, è possibile utilizzarlo per modificare i post e le pagine 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.

Successivamente, è possibile modificare o creare un nuovo post o pagina di WordPress e fare clic sul pulsante Modifica con Thrive Architect.

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

È possibile utilizzare il modello del tema per creare una pagina normale o un modello di pagina di destinazione precostituito.

Se si sceglie l’opzione Pagina di atterraggio precostituita, il plugin mostra una serie di modelli 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 il padding.

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 fare clic sul pulsante Salva lavoro e di selezionare l’opzione Salva ed esci dall’editor di post.

Ora è possibile fare clic sul pulsante Pubblica o Salva per salvare il post 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é, selezionate con il tasto destro del mouse la voce 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 aggiuntivo.

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 fare clic 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.

Nota: è disponibile anche una versione gratuita di WPCode.

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 consultare la nostra scheda completa sullo sviluppo di temi WordPress o dare un’occhiata alla nostra guida sulla personalizzazione dei temi WordPress.

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