Editare la homepage con Elementor: aggiungere moduli (testo, immagini, pulsanti, ecc.)

Imparare ad aggiungere i moduli di base è una competenza fondamentale per progettare pagine con Elementor. In questa sezione, ti verrà spiegato passo per passo come aggiungere elementi comuni come testi, immagini, pulsanti e come modificarne lo stile, in modo da dare forma alla tua homepage.

Preparazione: entrare nella modalità di editing di Elementor.

1. Dopo aver effettuato l'accesso al pannello di amministrazione di WordPress, vai su "Pagine" → trova "Homepage" (o la pagina che vuoi modificare) e clicca su "Modifica".
2. Fai clic sul pulsante "Modifica con Elementor" (di colore blu e con l'icona di Elementor) nella parte superiore della pagina per accedere all'interfaccia di editing visivo.

Dopo l'accesso, l'interfaccia è divisa in tre parti:

• A sinistra: pannello del modulo.(Inclusi tutti gli elementi che possono essere aggiunti)
• Al centro: area di editing.(Visualizzazione in tempo reale dell'effetto della pagina)
• A destra: pannello degli stili.(Dopo aver selezionato l'elemento, è possibile regolare lo stile dei dettagli)

Primissimo passo: aggiungere il modulo "Titolo" (titolo del testo)

Il titolo è la "spina dorsale" della pagina, che serve a guidare i visitatori nella comprensione della gerarchia dei contenuti.

1. Trova il modulo dei titoli.Nella sezione dei moduli a sinistra, trova il modulo "Titolo" nella categoria "Base" (l'icona è un "T").
2. Drag & Drop per aggiungere alla pagina.Fare clic sul modulo "Titolo", trascinarlo nella posizione "Aggiungi elemento qui" nell'area di editing centrale e rilasciare il mouse. A questo punto, sulla pagina apparirà un titolo predefinito: "Questo è il titolo".
3. Modifica il contenuto del titolo.Seleziona il modulo di titolo appena aggiunto e verrà visualizzato un pannello di editing sul lato destro:
   • Nella sezione "Contenuto" → "Testo del titolo", elimina il testo predefinito e inserisci il tuo titolo (ad esempio "Benvenuto nel mio blog personale").
   • Nella sezione "Livello del titolo", seleziona il livello (H1 è il più grande, adatto per i titoli principali; H2 è il successivo, adatto per i sottotitoli, da scegliere in base alla gerarchia dei contenuti).
4. Aggiusta lo stile dei titoli.Fai clic sull'etichetta "Stile" del pannello di destra per personalizzare:
   • TipografiaNella casella a discesa "Tipo di carattere", seleziona il tipo di carattere che preferisci (ad esempio "Microsoft Yahei" o "Arial").
   • Dimensione: Trascina la barra di scorrimento "Dimensione del carattere" o inserisci direttamente un valore (si consiglia che la dimensione del titolo sia compresa tra 24 e 48 px).
   • ColoreClicca sul riquadro "Colore del testo" e seleziona il colore del titolo (ad esempio, nero o blu scuro).
   • AllineaFai clic sul pulsante "Allineamento del testo" e imposta il titolo a sinistra, al centro o a destra (si consiglia di posizionare il titolo principale della home page al centro).

Secondo passaggio: aggiungere il modulo "Paragrafo" (testo del corpo del messaggio)

I paragrafi vengono utilizzati per presentare contenuti dettagliati, come ad esempio introduzioni, spiegazioni, ecc.

1. Aggiungi il modulo dei paragrafiNella categoria "Base" a sinistra, trova il modulo "Paragrafo" (l'icona è un simbolo di paragrafo) e trascinalo sotto il modulo "Titolo".
2. Modifica il contenuto del paragrafo.Seleziona il modulo Paragrafo e, nella sezione "Contenuto" → "Testo" sul lato destro, inserisci il contenuto (ad esempio: "Qui condivido le mie riflessioni sulla vita e gli appunti di studio. Vi invito a partecipare e a scambiare opinioni!").
3. Ottimizza lo stile dei paragrafiPassare alla scheda "Stili":
   • Dimensione del carattereSi consiglia di impostarlo a 16-18 px (per una migliore leggibilità).
   • Altezza della riga: Regolare a 1,5-1,8 volte (per rendere più confortevole la spaziatura tra i caratteri).
   • Colore: Scegli un colore che si distingua dal titolo (ad esempio, grigio scuro), evitando di renderlo troppo simile al colore di sfondo.

Passo 3: Aggiungere il modulo "Immagini" (inserire le immagini)

Le immagini rendono la pagina più accattivante. Si consiglia di scegliere immagini chiare e pertinenti (come foto personali, immagini di prodotti o paesaggi).

1. Carica o seleziona un'immagine.Nella categoria "Base" sul lato sinistro, trova il modulo "Immagini" e trascinalo sotto il paragrafo. Seleziona il modulo "Immagini" e, nella sezione "Contenuto" → "Immagini" sul lato destro, fai clic su "Seleziona immagine":
   • Se l'immagine è già presente sul computer, clicca su "Carica file" → seleziona l'immagine → clicca su "Seleziona".
   • Se l'hai già caricato in precedenza, seleziona semplicemente l'immagine esistente nella "Libreria multimediale".
2. Aggiusta l'effetto di visualizzazione delle immagini.Passare alla scheda "Stili":
   • DimensioniNella sezione "Larghezza", imposta la percentuale dell'immagine rispetto alla pagina (ad esempio, 100% indica la larghezza a schermo intero, mentre 80% indica una larghezza più stretta).
   • Angoli arrotondati: Trascina la barra di scorrimento "Raggio bordo" per rendere gli angoli dell'immagine più arrotondati (quanto maggiore è il valore, più evidenti saranno gli angoli arrotondati).
   • Ombra: Attivando "Ombra della scatola", è possibile aggiungere una leggera ombra alle immagini (rendendo le immagini più tridimensionali).
3. Aggiungi una descrizione dell'immagine (opzionale)Nella sezione "Contenuto" → "Testo alternativo", inserire una descrizione dell'immagine (ad esempio "Le mie foto di viaggio") aiuterà i motori di ricerca a comprendere il contenuto dell'immagine e a migliorare il SEO.

Quarto passo: aggiungere il modulo "Pulsante" (per indirizzare i clic)

I pulsanti sono spesso utilizzati per guidare i visitatori a eseguire azioni come "Visualizza di più", "Contattami", "Acquista subito" e così via.

1. Modulo del pulsante "Aggiungi"Trova il modulo "Pulsante" nella categoria "Base" a sinistra e trascinalo sotto l'immagine.
2. Impostare il contenuto del pulsante e il link.Seleziona il modulo pulsante, nella sezione "Contenuto" a destra:
   • Testo: Inserisci il testo del pulsante (ad esempio, "Visualizza i miei articoli").
   • link (su un sito web)Fai clic sul campo di input accanto a "Dinamico", quindi inserisci l'indirizzo del link (come l'indirizzo della pagina di elenco dei tuoi blog o un link esterno).
     • Se il link si riferisce a una pagina all'interno del sito, è possibile fare clic sull'icona "Seleziona pagina" a destra della casella di input per selezionare direttamente la pagina di destinazione.
3. Progettare lo stile dei pulsanti.Passa alla scheda "Stili" e crea pulsanti accattivanti:
   • ColoreSelezionare il "Colore del testo" come bianco e il "Colore dello sfondo" come un colore vivace (come blu o arancione), in modo che si armonizzi con i colori principali della pagina.
   • DimensioniSeleziona "Medio" o "Grande" per le dimensioni dei pulsanti, in modo che questi siano più facili da cliccare.
   • FormaImposta il "raggio del bordo" a 5-10 pixel (un leggero bordo arrotondato è più estetico).
   • ** Effetto hover **: clicca sulla scheda "hover" e imposta il colore da visualizzare quando il mouse si sofferma sull'elemento (ad esempio, un colore più scuro), per migliorare l'interattività.

Quinto passo: regolare la spaziatura tra i moduli (per rendere la pagina più ordinata)

Dopo aver aggiunto più moduli, potrebbero verificarsi problemi di spaziatura troppo ravvicinata o troppo distante, che richiedono un'adeguamento del layout:

1. Seleziona il modulo.: Clicca sul bordo del modulo (apparirà un bordo blu).
2. Aggiusta i margini esterniNella sezione "Avanzate" del pannello di destra → "Margini", imposta la distanza tra il modulo e gli elementi superiori e inferiori (ad esempio, imposta il "Margine superiore" a 30 px per aumentare la distanza dal modulo soprastante).
3. Allineamento uniforme: Premi e tieni premuto Ctrl Il tasto (o Command Per selezionare più moduli contemporaneamente, fare clic sul pulsante "Allinea" nella barra degli strumenti superiore (ad esempio "Allinea al centro") per rendere gli elementi più ordinati.

6° passo: salvare e visualizzare in anteprima

1. Salva le modificheFai clic sul pulsante "Aggiorna" nell'angolo in basso a sinistra della pagina (si consiglia di salvare immediatamente dopo ogni modifica).
2. Effetto di anteprimaFare clic sul pulsante "Anteprima" nell'angolo in alto a sinistra, selezionare "Anteprima desktop", "Anteprima tablet" e "Anteprima telefono", e controllare il risultato della visualizzazione su diversi dispositivi (assicurandosi che il testo sul telefono non si sovrapponga e che le immagini non si deformino).

Consigli per i principianti

• I moduli possono essere aggiunti più volte: se sono necessari più paragrafi o immagini, è sufficiente trascinare il modulo corrispondente più volte.
• Modulo di eliminazione: dopo aver selezionato il modulo, premere un tasto della tastiera. Delete Premere il tasto Elimina o fare clic sull'icona del cestino situata sopra il modulo.
• Modulo di copia: dopo aver selezionato il modulo, fare clic sull'icona "Copia" per copiare rapidamente elementi con lo stesso stile (è possibile modificare il contenuto).

Con i passaggi sopra indicati, hai acquisito le competenze fondamentali per aggiungere moduli a Elementor. Successivamente, puoi provare ad aggiungere moduli come "icone", "linee di separazione" e "elenco", per rendere la homepage più ricca e variegata!