Prendi il controllo preciso delle dimensioni di ogni elemento nel Page Builder di HITLEAD usando Container Size. Questo articolo ti mostra come impostare altezza e larghezza personalizzate, scegliere l'unità giusta e assegnare valori diversi per desktop e mobile.


INDICE DEI CONTENUTI


Cos'è il controllo Container Size (Altezza e Larghezza)?

Container Size è un controllo integrato nel page builder che ti permette di definire altezza e larghezza di un elemento direttamente nell'editor. Questi valori determinano quanto spazio occupa un elemento all'interno del suo contenitore padre (ad esempio colonna, riga o sezione). Puoi scegliere le unità più adatte ai tuoi obiettivi di layout e impostare valori specifici per dispositivo per design responsive.


Vantaggi principali di Container Size

  • Layout precisi: Regola le dimensioni degli elementi per design esatti.
  • Controllo responsive: Imposta valori diversi per desktop e mobile.
  • Flessibilità delle unità: Scegli tra più unità di misura per selezionare quella più adatta allo scenario specifico.
  • Build più pulite: Ottieni risultati precisi nell'interfaccia senza ricorrere a CSS personalizzato.

Unità di misura supportate

Le diverse unità cambiano il modo in cui viene calcolata la dimensione. Le seguenti unità familiari del web design sono disponibili così puoi scegliere quella più adatta al tuo progetto!

  • px – numero fisso di pixel (dimensione esatta)
  • % – percentuale del contenitore padre
  • em / rem – scala relativa alla dimensione del font
  • vh / vw – altezza o larghezza basata sul viewport
  • auto – il browser determina la dimensione ottimale

Come modificare Container Size

Segui questi passaggi per assegnare dimensioni precise agli elementi in pochi clic:

Passaggio 1: Apri il Page Builder

  • Apri il Page Builder per il tuo Funnel o la tua pagina web navigando in Sites > Funnels o Websites.
  • Seleziona il sito/Funnel, poi apri l'Editor per la pagina che vuoi modificare.

Schermata 1 — Controlli Altezza e Larghezza per gli Elementi del Page Builder

Passaggio 2: Seleziona l'elemento

Seleziona l'elemento che vuoi ridimensionare (testo, pulsante, immagine, Form, ecc.)

Schermata 2 — Controlli Altezza e Larghezza per gli Elementi del Page Builder

Passaggio 3: Vai a Container Size

Nella barra laterale destra, seleziona la scheda Styles. Poi scorri fino alla sezione Container Size.

Schermata 3 — Controlli Altezza e Larghezza per gli Elementi del Page Builder

Passaggio 4: Imposta le dimensioni

Seleziona un'unità di misura (px, %, ecc.) dal menu a tendina accanto a Height e Width. Poi inserisci la dimensione desiderata per Height e Width.

Schermata 4 — Controlli Altezza e Larghezza per gli Elementi del Page Builder

Passaggio 5: Ottimizza per mobile

Usa il selettore dispositivo accanto a Container Size per passare alla Mobile View e inserisci un valore specifico per mobile se necessario.

Schermata 5 — Controlli Altezza e Larghezza per gli Elementi del Page Builder


Domande frequenti

D: Posso usare i decimali come 33.33% per colonne uguali?

Sì! I decimali sono supportati per un controllo fine (es. 33.33% × 3 card). Verifica su mobile per evitare andature a capo indesiderate.

D: Come annullo le modifiche?

Imposta l'unità su auto per ripristinare le dimensioni naturali dell'elemento.

D: I valori mobile influenzano il desktop?

No. I valori impostati in Mobile View si applicano solo al mobile, lasciando intatte le impostazioni desktop.

D: Posso ancora usare le impostazioni Margin e Padding?

Assolutamente! Il controllo Height & Width aggiunge un ulteriore livello — usali tutti e tre insieme per un controllo completo del layout.

D: Sono ammessi valori negativi o zero per larghezza/altezza?

I valori negativi (o 0) non sono supportati. Se viene inserito un numero uguale o inferiore a 0, l'elemento rimarrà alle dimensioni attuali.


Articoli correlati

  • Impostazioni immagine avanzate per Mobile e Desktop
  • Usare la barra laterale destra nel Funnel & Website Builder
  • Creare design responsive per mobile con facilità (Funnel & Website Builder)
  • Layout annidati nel Funnel e Website Builder
  • Drag & Drop con layout gerarchico automatico