Editor X: impostare le dimensioni di un elemento
Tempo di lettura: 5 min.
Editor X sta passando a Wix Studio, la nostra nuova piattaforma per agenzie e freelancer.Scopri di più su Wix Studio
Utilizzando le opzioni nel pannello Ispezione, puoi impostare le dimensioni dell'elemento esattamente come desideri. Inserisci valori fissi di larghezza e altezza in pixel per una massima precisione o utilizza misurazioni fluide in modo che il tuo elemento si adatti perfettamente a qualsiasi dimensione dello schermo.
In questo articolo, scopri di più su come ridimensionare gli elementi nell'Editor X:
Vuoi saperne di più?
Dai un'occhiata alla nostra lezione sul ridimensionamento degli elementi (contenuto in inglese) nell'Editor X academy.
Strutturare un sito responsivo
Prima di aggiungere contenuti al sito, è importante creare una struttura e creare i livelli in base a tale logica. I livelli sono organizzati nel modello "padre-figlio" (contenuto in inglese), il che significa che il livello superiore agisce come "padre" del livello inferiore.
Mostrami un esempio
La dimensione di un elemento padre può influire sui suoi elementi figli dato che questi si ridimensionano rispetto al genitore. Per assicurarti che il design resti responsivo, basta definire il ridimensionamento e il posizionamento dei livelli dall'alto verso il basso.
Lavorare con i punti di interruzione:
Puoi impostare diverse opzioni di ridimensionamento per gli elementi in ciascun punto di interruzione.
Opzioni di ridimensionamento fisse vs. fluide
Quando si ridimensiona un elemento, è possibile scegliere se utilizzare dimensioni fisse o fluide dal pannello Ispezione:
- Fisse: questa opzione mantiene la larghezza dell'elemento invariata in tutti i viewport. Non si rimpicciolisce o si ingrandisce in base alle dimensioni dello schermo
- Fluide: questa opzione regola la larghezza (e talvolta l'altezza) degli elementi in base alle dimensioni dello schermo
- Ridimensiona proporzionalmente: seleziona questa casella di spunta in modo che l'altezza e la larghezza dell'elemento restino proporzionali quando l'elemento viene ridimensionato. Quando questa opzione non è selezionata, la larghezza del tuo elemento viene regolata in base alle dimensioni dello schermo mentre la sua altezza rimane invariata
Suggerimento:
Puoi anche trascinare i punti di manipolazione attorno all'elemento per modificarne le dimensioni.
Unità di misura disponibili
Nell'Editor X, puoi utilizzare una varietà di diverse unità di misura per ridimensionare gli elementi. La scelta dell'unità di misura dipende da come si desidera ridimensionare gli elementi al variare della larghezza dei viewport.
Clicca qui sotto per scoprire tutte le unità di misura e quando utilizzarle:
Auto
Pixels (px)
Percentuale (%)
Larghezza Viewport (vw)
Altezza Viewport (vh)
Valori minimi e massimi
Contenuto max (max-c)
Usare il calcolo per determinare la dimensione dei tuoi elementi
Il calcolo è uno strumento utile quando è necessario ridimensionare con precisione un elemento utilizzando unità di misura fluide. Utilizzando principi matematici, è possibile scrivere una "formula" che determini la larghezza o l'altezza di un elemento. Puoi anche combinare diverse misurazioni in questo calcolo (es. vh e px).
Mostrami come fare
nella parte superiore dell'Editor XAd esempio, utilizza il calcolo per progettare un'intestazione (100 px) e una sezione che, insieme, occupino l'altezza esatta del viewport (100 vh) in ogni dimensione dello schermo. Puoi impostare l'altezza della sezione su (100 vh - 100 px), in modo che l'intestazione venga sempre presa in considerazione nel calcolo (100 px).
Adattare un elemento
Allunga l'elemento per coprire l'intero sfondo del contenitore principale. Quando si utilizzano griglie, è possibile allungare l'elemento per coprire una cella specifica o l'intera area della griglia.
Allungando un elemento, la larghezza e l'altezza vengono impostate su Auto in modo che l'elemento e il relativo contenitore si ridimensionino in funzione del viewport. Dato che l'elemento è allungato, i suoi valori di larghezza e altezza sono gli stessi del suo contenitore principale.
Per saperne di più:
Maggiori informazioni sulla creazione di un sito responsivo utilizzando gli strumenti dell'Editor X:
Hai trovato utile questo articolo?
|