Come modificare i margini in WordPress (Guida per principianti)

Modificare i margini in WordPress è un modo semplice per migliorare il design del tuo sito. I margini creano spazio tra gli elementi, rendendo i tuoi contenuti più leggibili e visivamente accattivanti.

Come buona prassi generale, utilizziamo sempre margini e spaziatura quando progettiamo i nostri siti WordPress. Abbiamo notato che ciò ha un impatto positivo sul modo in cui gli utenti interagiscono con le nostre pagine web e i nostri contenuti.

In questa guida per principianti, ti mostreremo come aggiungere e regolare i margini in WordPress. Ti insegneremo diversi metodi per modificare i margini in varie aree del tuo sito WordPress.

Cosa sono i margini in WordPress e nel web design?

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

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

Lo scopo dell'utilizzo dei margini è garantire che gli elementi all'interno di una pagina web non sembrino schiacciati insieme.

Allo stesso modo, i margini possono essere utilizzati attorno a diversi elementi all'interno del layout della pagina.

Ad esempio, puoi modificare i margini attorno alle 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, copriremo molte informazioni. Fai clic sui collegamenti sottostanti per passare a qualsiasi sezione desideri.

• Qual è la differenza tra margine e padding?
• Perché potresti dover aggiungere o modificare i margini in WordPress?
• Come aggiungere margini in WordPress?
• Aggiungere margini in WordPress utilizzando l'editor completo del sito
• Aggiungere margini nell'editor a blocchi
• Aggiungere margini in WordPress utilizzando SeedProd
• Modifica dei margini utilizzando Thrive Architect
• Modificare i margini in WordPress utilizzando codice CSS
• Aggiungere e modificare i margini utilizzando CSS personalizzato nel tema WordPress
• Utilizzo di CSS personalizzato per modificare i margini nell'editor del sito
• Aggiungere margini con CSS nel personalizzatore del tema
• Modifica dei margini con codice CSS personalizzato utilizzando WPCode
• Domande frequenti sui margini in WordPress

Qual è la differenza tra margine e padding?

Margine e 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 che ci sia molto spazio tra gli elementi in una pagina web.

Ora diamo un'occhiata ad alcuni esempi di quando utilizzare i margini.

1. Aggiungere margini per aumentare lo spazio tra un'immagine e il testo in un articolo.

2. Regolare i margini per aggiungere spazio tra le sezioni, come l'intestazione e l'area del contenuto.

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

Ecco alcuni esempi di quando potresti voler utilizzare un padding aggiuntivo.

1. Regolare il padding per aumentare lo spazio di ammortizzazione nei tuoi pulsanti di invito all'azione.

2. Aumentare il padding in una colonna di testo

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

L'utilizzo di spazi vuoti aggiunge respiro a qualsiasi design, rendendolo più facile da usare ed elegante.

Per maggiori dettagli, consulta il nostro tutorial su la differenza tra padding e margini in WordPress.

Perché potresti dover aggiungere o modificare i margini in WordPress?

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

Nella nostra esperienza nella gestione di test A/B, abbiamo scoperto che l'uso strategico dello spazio bianco ha spesso un impatto positivo sulle conversioni.

Quando crei un design più pulito e organizzato, gli utenti sono più propensi a rimanere sul sito più a lungo e a completare le azioni desiderate.

I temi di WordPress gestiscono l'aspetto del design del tuo sito web WordPress. La maggior parte di essi fa già un ottimo lavoro nell'impostare le regole CSS per garantire abbondante spazio bianco utilizzando i margini nel layout del tuo tema.

Detto questo, potresti occasionalmente dover aggiungere margini per regolare le cose.

Ad esempio, potresti non gradire il margine attorno ai tuoi menu di navigazione o voler aggiungere più margine attorno ai tuoi pulsanti di invito all'azione.

Allo stesso modo, a volte potresti sentire che gli elementi sono troppo vicini tra loro o troppo distanti.

In tal caso, dovrai modificare i margini in WordPress da solo.

Come aggiungere margini in WordPress?

Ci sono molti modi per aggiungere margini in WordPress.

A seconda di dove vuoi aggiungere il margine e delle opzioni disponibili nel tuo tema WordPress, dovrai scegliere un metodo che funzioni per te.

Iniziamo con le opzioni predefinite integrate in WordPress stesso, poiché sono le più semplici per i principianti.

Aggiungere margini in WordPress utilizzando l'editor completo del sito

Se utilizzi un tema basato su blocchi con supporto per l'editor completo del sito, puoi utilizzare l'editor del sito integrato per modificare i margini ovunque sul tuo sito web WordPress.

Un modo semplice per verificarlo è guardare nella dashboard di WordPress. Se vedi Aspetto » Editor, allora hai un tema basato su blocchi. Se invece vedi Aspetto » Personalizza, allora puoi passare a un altro metodo qui sotto.

Innanzitutto, devi andare su Aspetto » Editor per avviare l'editor del sito.

Una volta all'interno dell'editor del sito, fai clic per scegliere un modello dalla colonna di sinistra o fai clic in qualsiasi punto della finestra di anteprima.

Successivamente, fai clic sull'area o sull'elemento in cui desideri modificare i margini. Nella colonna di destra, vedrai l'opzione per regolare i margini nella scheda 'Stile'.

Mentre regoli i margini, l'editor evidenzierà l'area del margine.

Puoi anche scegliere di aggiungere margini alla parte superiore, inferiore, destra o sinistra.

Aggiungere margini nell'editor a blocchi

Se stai lavorando a un post del blog o a una pagina, utilizzerai l'editor a blocchi.

L'editor a blocchi in WordPress ti consente di aggiungere e modificare i margini per vari blocchi.

Fai semplicemente clic sul blocco in cui desideri aggiungere/modificare i margini. Nelle impostazioni del blocco, passa alla scheda 'Stile' e scorri fino all'opzione 'Dimensioni' o 'Margini'.

Aggiungere margini in WordPress utilizzando SeedProd

SeedProd è il miglior plugin per la creazione di pagine WordPress sul mercato. Ti consente di creare facilmente pagine personalizzate per il tuo sito web.

Puoi persino usarlo per creare un tema WordPress personalizzato da zero.

Molti dei nostri brand partner hanno progettato i loro interi siti web con SeedProd e adorano usarlo. Per saperne di più, consulta la nostra recensione completa di SeedProd.

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

Innanzitutto, devi installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta il nostro tutorial su come installare un plugin WordPress.

Successivamente, devi visitare SeedProd » Pagine di destinazione e quindi fare clic sul pulsante 'Aggiungi nuova pagina di destinazione'.

Dopodiché, ti verrà chiesto di scegliere un modello per la tua pagina.

SeedProd offre decine di modelli pronti all'uso che puoi utilizzare come punto di partenza, oppure puoi iniziare con un modello vuoto.

Fai clic per scegliere il tuo modello, quindi fornisci un nome per la tua landing page.

Questo avvierà il page builder di SeedProd.

Vedrai un'anteprima live della tua pagina sul lato destro. E gli elementi che puoi aggiungere alla tua pagina nella colonna di sinistra.

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

Fare clic su un elemento lo selezionerà e vedrai le sue opzioni nella colonna di sinistra. Da qui, passa alla scheda 'Avanzate' e fai clic sull'opzione 'Spaziatura'.

Da qui puoi modificare i margini e il padding per l'elemento selezionato.

Una volta terminata la modifica della pagina, non dimenticare di fare clic sul pulsante 'Salva' e 'Pubblica' nell'angolo in alto a destra.

Dopodiché, puoi visitare il tuo sito web per vedere le modifiche in azione.

Modifica dei margini utilizzando Thrive Architect

Thrive Architect è un page builder per WordPress facile da usare che ti consente di utilizzare un'interfaccia drag-and-drop per progettare pagine WordPress.

Durante i test, abbiamo scoperto che ha oltre 300 modelli che puoi usare come punto di partenza. Inoltre, puoi anche usarlo per modificare i tuoi post e pagine WordPress, prendendo in prestito il layout e lo stile del tuo tema WordPress esistente.

Per saperne di più, consulta la nostra recensione completa di Thrive Architect.

Per installare Thrive Architect, dovrai prima accedere al tuo account sul sito web di Thrive Themes.

Da lì, devi scaricare e installare il plugin Thrive Product Manager. Per maggiori dettagli, consulta il nostro tutorial su come installare un plugin WordPress.

Dopo l'attivazione, devi visitare la pagina Thrive Product Manager.

Fai clic sul pulsante ‘Accedi al mio account’ per connettere WordPress al tuo account Thrive Themes.

Una volta connesso, vedrai l'elenco dei prodotti Thrive Themes disponibili sotto il tuo account.

Fai clic sulla casella di controllo ‘Installa prodotto’ sotto Thrive Architect, quindi fai clic sul pulsante ‘Installa prodotti selezionati’ in basso.

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

Dopodiché, puoi modificare o creare un nuovo post o pagina di WordPress e fare clic sul pulsante ‘Modifica con Thrive Architect’ o ‘Avvia Thrive Architect’.

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

Puoi usare il tuo modello di tema per creare una pagina 'Normale' o un modello di pagina 'Pre-costruita'.

Se scegli l'opzione 'Pagina Pre-costruita', il plugin ti mostrerà una serie di modelli tra cui scegliere.

Clicca semplicemente per selezionare quello che assomiglia a ciò che vuoi creare.

Che si tratti di una pagina normale (utilizzando gli stili del tuo tema) o di una landing page, il page builder di Thrive Architect avrebbe le stesse funzionalità.

Vedrai un'anteprima live della tua pagina con una barra degli strumenti sulla destra e un pannello delle impostazioni a sinistra.

Puoi puntare e cliccare su un elemento per selezionarlo. Oppure clicca sul pulsante aggiungi [+] nella barra degli strumenti per aggiungere un nuovo elemento.

Una volta cliccato per selezionare e modificare un elemento, le sue impostazioni appariranno nella colonna di sinistra.

Da qui, clicca sulla scheda 'Layout e Posizione' per modificare i margini e il padding.

Vedrai una rappresentazione visiva dei margini e del padding.

Porta il mouse su un lato del margine e trascina la maniglia per aumentare o diminuire il margine.

Puoi ripetere il processo per modificare i margini su uno qualsiasi dei quattro lati.

Una volta terminato, non dimenticare di cliccare sul pulsante Salva Lavoro e poi selezionare l'opzione Salva ed Esci all'Editor Post.

Ora puoi cliccare sul pulsante 'Pubblica' o 'Salva' per salvare il tuo post o pagina WordPress.

Modificare i margini in WordPress utilizzando codice CSS

Questo metodo richiede l'aggiunta di codice CSS al tuo tema WordPress. Avrai anche bisogno di una conoscenza molto basilare di HTML e CSS.

Tuttavia, questo metodo ti offre maggiore flessibilità poiché puoi scegliere manualmente l'area in cui desideri aggiungere o regolare i margini.

Aggiungere e modificare i margini utilizzando CSS personalizzato nel tema WordPress

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

Prima di aggiungere o modificare i margini utilizzando CSS, potresti dover scoprire quale elemento devi indirizzare con il tuo codice CSS.

Ad esempio, se vuoi cambiare i margini attorno al corpo della pagina, puoi usare il seguente codice:

body { 
margin:50px; 
}

In questo codice, ‘px’ sta per pixel, un’unità di misura comune per gli schermi. Utilizzare la proprietà margin con un solo valore in questo modo imposta il margine per tutti e quattro i lati (superiore, destro, inferiore e sinistro) contemporaneamente.

Il modo più semplice per trovare l'elemento da selezionare è utilizzare lo strumento Ispeziona nel tuo browser.

Apri il tuo sito web in una nuova scheda del browser e posiziona il mouse sull'elemento attorno al quale desideri modificare i margini. Dopodiché, fai clic destro e seleziona ‘Ispeziona’ dal menu del browser.

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

Puoi spostare il mouse sul codice e il tuo browser evidenzierà l'area interessata da esso.

Nel codice, puoi vedere l'elemento HTML o la classe CSS che devi selezionare con il tuo CSS personalizzato. Pensala come l' ‘indirizzo’ della parte specifica della pagina che vuoi stilizzare.

Puoi persino provare i tuoi margini qui per vedere in anteprima come appariranno.

Tuttavia, queste modifiche non vengono salvate nel tuo tema e scompariranno quando ricarichi o chiudi la scheda del browser.

Vediamo diversi modi per salvare questo CSS personalizzato in WordPress.

Utilizzo di CSS personalizzato per modificare i margini nell'editor del sito

Se stai utilizzando un tema a blocchi con supporto per l'editor completo del sito. Allora, ecco come puoi aggiungere CSS personalizzato al tuo tema.

Innanzitutto, vai alla pagina Aspetto » Editor per avviare l'editor del sito e quindi passa al pannello ‘Stili’.

In fondo al pannello ‘Stili’, fai clic sulla scheda ‘CSS aggiuntivo’.

Questo aprirà un editor di testo dove potrai aggiungere il tuo codice CSS personalizzato. Il tuo codice CSS verrà applicato immediatamente e potrai vedere le modifiche apparire sullo schermo.

Una volta soddisfatto delle modifiche, non dimenticare di fare clic sul pulsante 'Salva' per memorizzare le tue modifiche.

Aggiungere margini con CSS nel personalizzatore del tema

Se stai utilizzando un tema classico (senza supporto per l'editor del sito), puoi salvare il tuo CSS personalizzato nel personalizzatore del tema.

Vai alla pagina Aspetto » Personalizza per avviare il personalizzatore del tema.

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

Devi fare clic sulla scheda CSS aggiuntivo per espanderla.

La scheda scorrerà per mostrarti una semplice casella dove puoi aggiungere il tuo CSS personalizzato.

Non appena aggiungi una regola CSS valida, potrai vederla applicata nel riquadro di anteprima live del tuo sito web.

Una volta soddisfatto delle modifiche, fai clic sul pulsante 'Pubblica' per memorizzare le tue modifiche.

Modifica dei margini con codice CSS personalizzato utilizzando WPCode

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

È il miglior plugin per snippet di codice WordPress che ti consente di aggiungere qualsiasi codice CSS/HTML/PHP/JavaScript al tuo sito web WordPress senza danneggiarlo.

Durante la nostra valutazione, lo abbiamo trovato estremamente facile da usare. Per saperne di più sulla nostra esperienza, consulta la nostra recensione dettagliata di WPCode.

Il vantaggio di utilizzare WPCode è che non perderai le tue modifiche CSS quando cambierai il tuo tema WordPress.

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

Dopo l'attivazione, vai alla pagina Snippet di codice » + Aggiungi nuovo.

Passa il mouse sull'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ nella libreria degli snippet di codice e fai clic sul pulsante ‘Usa snippet’.

Successivamente, in cima alla pagina, aggiungi un titolo per il tuo snippet CSS personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare il codice.

Dopo di che, scrivi o incolla il tuo CSS personalizzato nella casella ‘Anteprima codice’ e imposta il ‘Tipo di codice’ scegliendo l'opzione ‘Snippet CSS’ dal menu a discesa.

Ad esempio, se vuoi aggiungere o modificare i margini attorno al corpo dell'intera pagina web, puoi usare il seguente codice CSS:

body { 
margin:50px;
}

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’ e seleziona il metodo ‘Inserimento automatico’ per eseguire il codice su tutto il tuo sito WordPress.

Se vuoi eseguire il codice solo su determinate pagine o post, puoi scegliere il metodo ‘Shortcode’.

Ora, devi tornare in cima alla pagina e attivare l'interruttore su ‘Attivo’.

Infine, fai clic sul pulsante ‘Salva snippet’ per memorizzare le tue modifiche.

Ora puoi visitare il tuo sito web per vedere il tuo CSS personalizzato in azione.

Domande frequenti sui margini in WordPress

Ecco alcune domande che i nostri lettori pongono frequentemente sull'aggiunta di margini in WordPress:

Qual è la differenza principale tra margine e padding?

Il margine è lo spazio esterno al bordo di un elemento, che crea distanza tra esso e altri elementi. Il padding è lo spazio interno al bordo di un elemento, che crea un'imbottitura tra il contenuto e il bordo stesso.

Pensa al margine come allo spazio tra le cornici dei quadri su un muro, e al padding come al passepartout all'interno di una singola cornice.

Per maggiori informazioni, puoi anche consultare la nostra guida su padding vs margin in WordPress.

Come posso modificare i margini specificamente per i dispositivi mobili?

Per regolare i margini per i dispositivi mobili, puoi utilizzare le media query CSS. Questo ti permette di applicare stili specifici per diverse dimensioni dello schermo.

I plugin per page builder come SeedProd offrono anche controlli specifici per dispositivo, permettendoti di cambiare facilmente i margini per le visualizzazioni desktop, tablet e mobile.

Perché l'opzione margine non viene visualizzata per un blocco specifico nell'editor di WordPress?

Non tutti i blocchi di WordPress dispongono di controlli margine integrati, poiché ciò può dipendere dal tuo tema.

Se l'opzione manca, puoi racchiudere il blocco in un blocco Gruppo, che dispone di impostazioni per margini e padding. Puoi anche utilizzare uno dei metodi CSS personalizzati per selezionare direttamente il blocco.

È meglio usare un plugin o CSS personalizzato per modificare i margini?

Per i principianti, un plugin per page builder come SeedProd è spesso più facile perché fornisce un'interfaccia visiva.

Per gli utenti più avanzati o per apportare modifiche a tutto il sito, il CSS personalizzato offre un controllo più preciso.

Utilizzare un plugin come WPCode per aggiungere il tuo CSS è un'ottima scelta perché protegge il tuo codice quando aggiorni o cambi il tuo tema.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere o modificare i margini in WordPress. Potresti anche voler imparare come mettere le immagini una accanto all'altra in WordPress o come aggiungere pulsanti per sottolineare e giustificare il testo in WordPress.

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