Comprensione delle impostazioni del layout della pagina in elemento

Durante la progettazione con Element, le impostazioni del layout di pagina svolgono un ruolo vitale nella progettazione del tuo sito Web.

Queste impostazioni ti consentono di controllare la struttura, lo stile e persino le basi di progettazione predefinite delle tue pagine.
Potresti creare un blog, una pagina di destinazione o un layout personalizzato; In tutti i casi, capire queste opzioni ti aiuterà a progettare con fiducia.

In questa guida, attraverseremo le impostazioni specifiche della pagina di Elementatore e le impostazioni del layout globale, risponderemo a domande comuni sull'editing di layout e ti aiuteranno a decidere l'approccio migliore quando crei pagine.

Comprensione delle impostazioni del layout della pagina in elemento

Come modificare il layout di pagina in Element?

Per modificare un layout di pagina in Element, accedi alla dashboard WordPress e vai alle pagine. Seleziona la pagina che si desidera personalizzare e fare clic su Modifica con Element.

Una volta che sei dentro Elementor, cerca l'icona di piccoli ingranaggi al centro. Facendo clic su questo apre il pannello delle impostazioni della pagina, dove troverai le opzioni per regolare le impostazioni generali, stile e avanzate per quella pagina specifica.

• Impostazioni generali gestiscono titoli, immagini in primo piano, commenti e layout di pagina.
• Impostazioni di stile Controlla sfondo, spaziatura e allineamento.
• Le impostazioni avanzate consentono di aggiungere CSS e animazioni personalizzate.

Impostazioni generali

La scheda Generale è dove si impostano gli elementi essenziali per la tua pagina. Ogni opzione qui influisce su come viene visualizzata la tua pagina e come interagisce con il tema o l'ambiente WordPress.

1. Titolo: Descrivi il titolo della pagina per descrivere lo scopo del tuo contenuto. Un titolo ben scelto migliora la leggibilità per i visitatori e contribuisce alla SEO.
2. Stato: scegli se la tua pagina è una bozza (non visibile ai visitatori), pubblicata (live sul tuo sito) o privato (solo visibile agli utenti accessi con le autorizzazioni giuste).
3. Estratto: scrivi un riepilogo del contenuto della pagina. Ciò è utile per i frammenti di motori di ricerca e per la visualizzazione di anteprime su pagine di archivio o di elenco.
4. Immagine in primo piano: imposta un'immagine in primo piano per rappresentare visivamente la pagina. È utile quando si condividono link sui social media o quando si visualizzano post nelle griglie del blog e nei widget.
5. Ordine: utilizzare i numeri per disporre la sequenza delle pagine negli elenchi di menu o pagine. Le pagine con numeri più bassi compaiono per primi, aiutandoti a controllare l'ordine del display.
6. Consenti commenti: decidere se i visitatori possono lasciare commenti sulla pagina. Questo di solito è abilitato per i post sul blog, ma spesso disabilitato per le landing page o contenuti statici.
7. Nascondi il titolo: attiva questa opzione se si desidera rimuovere il titolo della pagina predefinito e iniziare con una tela pulita. Questo è
8. Layout di pagina: Elementor offre diverse opzioni di layout di pagina per controllare il modo in cui viene visualizzato il contenuto. Ogni opzione ha uno scopo diverso, a seconda del tipo di pagina che si desidera creare.
   • Predefinito: questo layout segue il modello di pagina predefinito impostato nel pannello Element >> menu Hamburger >> Impostazioni del sito . Mantiene la struttura del design definita dal tuo tema. Ideale per pagine o blog normali in cui si desidera coerenza sul tuo sito.
   • Elementor Canvas: fornisce una pagina completamente vuota senza intestazione, piè di pagina o barra laterale. Questa opzione è perfetta per progetti senza distrazioni come landing page, in arrivo pagine o pagine di vendita.
   • Larghezza completa di Element: mantiene l'intestazione e il piè di pagina del tema ma rimuove la barra laterale, consentendo al contenuto principale di allungare la larghezza intera dello schermo. Una buona scelta quando si progetta layout immersivo, sezioni di eroi o cursori a larghezza intera.
   • Tema: utilizza il modello di pagina predefinito dal tema attivo. Se il tuo tema viene fornito con più varianti di modelli (come "nessuna barra laterale" o "solo contenuto"), possono anche apparire qui.
   • Pagina No Titolo: rimuove il titolo della pagina mantenendo intatto il resto della struttura del tema. Questa opzione è utile quando si desidera un design pulito senza il titolo predefinito mostrato nella parte superiore.

Impostazioni di stile

La scheda Style si concentra sull'aspetto visivo della tua pagina. Qui, puoi definire lo sfondo e la spaziatura che incorniciano i tuoi contenuti.

1. Tipo di sfondo: scegli un colore solido, uno sfondo gradiente o un'immagine per impostare l'umore per la tua pagina. Uno sfondo ben selezionato crea un impatto visivo e rafforza il tuo marchio.
2. Spaziatura: regola i margini e l'imbottitura per controllare la quantità di spazio all'interno e intorno al tuo contenuto. I margini si allontanano gli elementi, mentre l'imbottitura crea spazio per respirare all'interno di un contenitore.

Puoi anche impostare l'allineamento del testo, le impostazioni di design reattive e le regolazioni della spaziatura per garantire che la tua pagina abbia un bell'aspetto su desktop, tablet e cellulari.

Impostazioni avanzate

Per una maggiore flessibilità, Element include una scheda avanzata con opzioni che vanno oltre le basi.

1. CSS personalizzato: aggiungi il tuo codice CSS a elementi specifici in stile. Il codice qui si applica solo alla pagina corrente, dandoti la libertà di realizzare personalizzazioni uniche senza influire sul resto del tuo sito.
2. Scorri e effetti di movimento: aggiungi animazioni o effetti di scorrimento per un fascino visivo extra.

La scheda Advanced è dove designer e sviluppatori possono veramente personalizzare l'aspetto di una pagina.

Impostazioni di layout globali

Mentre le impostazioni di pagina controllano le singole pagine, le impostazioni di layout globali consentono di definire le impostazioni predefinite per l'intero sito. Per accedere alle impostazioni globali, aprire qualsiasi pagina in Element, fare clic sull'icona di impostazione del sito in alto a sinistra e selezionare layout.

Da qui puoi regolare:

1. Larghezza del contenuto: definire la larghezza massima del contenuto. L'impostazione standard è 1140px, che funziona bene per la maggior parte degli schermi desktop.
2. Implementazione del contenitore: impostare la spaziatura interna predefinita per i contenitori. È possibile applicare la stessa imbottitura su tutti i lati o personalizzare la parte superiore, inferiore, a sinistra e a destra individualmente.
3. Gaps: controllare lo spazio tra colonne e righe all'interno dei contenitori. Questo aiuta a mantenere l'allineamento pulito e una spaziatura costante.
4. Selettore del titolo della pagina: se il tema utilizza un selettore unico per i titoli di pagina, lo specifica qui. Ciò consente a Elementor di nascondere o titoli di pagina correttamente.
5. Sezione allungata adattarsi a: Definire quale elemento Tag HTML dovrebbe usare quando si allungano le sezioni a tutta larghezza. Il tag più comune è il corpo, ma alcuni temi possono usare un wrapper diverso.
6. Layout di pagina predefinito: selezionare un valore predefinito globale come Elementor Canvas o Element Larghezza completa, invece di fare affidamento sulle impostazioni del tema per ogni nuova pagina.

Dopo aver configurato le tue preferenze, fai clic su Salva modifiche per applicarle sul tuo sito.

Qual è la larghezza del layout predefinita in Element?

La larghezza del layout predefinita di Elementor è di 1140 pixel. Questa larghezza è ampiamente utilizzata perché offre un'esperienza di lettura confortevole sugli schermi desktop, pur adattando bene a tablet e dispositivi più piccoli.

È possibile modificare questa impostazione nelle impostazioni del sito >> layout se il design richiede un layout più stretto o più ampio.

Qual è il modo ottimale di creare una pagina con Elementor?

Il modo ottimale dipende dal tuo obiettivo:

• Se stai costruendo una normale pagina di contenuti o un blog, attenersi al layout predefinito in modo che l'intestazione, il piè di pagina e la barra laterale rimangano intatti.
• Per le landing page o le imbarcazioni di vendita, utilizzare la tela elementare per un design senza distrazioni.
• Se vuoi layout ampio e coinvolgente ma hai ancora bisogno di elementi di navigazione e piè di pagina, vai con la larghezza completa di Element.

Una buona pratica è impostare prima le vostre impostazioni predefinite globali, quindi tutte le nuove pagine iniziano con la tua struttura preferita. Quindi, perfezionare le singole pagine utilizzando il pannello delle impostazioni della pagina quando necessario.

Avvolgimento!

Le impostazioni del layout di pagina in Element ti danno il controllo delle singole pagine e del tuo sito nel suo insieme.

Imparando come utilizzare le impostazioni di layout generali, di stile, avanzate e globali , è possibile creare design che sembrano professionali, sono facili da gestire e abbinare gli obiettivi del tuo sito Web.

Se stai costruendo una pagina di destinazione unica, le impostazioni specifiche della pagina saranno sufficienti.

Ma se stai lavorando su un sito Web più ampio, la configurazione delle impostazioni predefinite globali risparmierà tempo e garantirà la coerenza del design in tutte le pagine.

Con queste opzioni di impostazione, Elementator ti dà la flessibilità di progettare il tuo sito Web esattamente come lo si immagina.