Le funzionalità adattabili non sono supportate negli annunci HTML AMP. Gli annunci video, le GIF animate e gli annunci illustrati possono utilizzare layout di più dimensioni.
Il responsive design utilizza un layout flessibile che si adatta a orientamenti o dimensioni dell'area visibile diversi, in modo da non dover creare più layout. Google Web Designer offre diversi strumenti per consentirti di realizzare un responsive design.
Come minimo, il documento deve avere dimensioni della pagina adattabili. Puoi anche creare un layout fluido definendo le dimensioni degli oggetti e le posizioni con le percentuali. Per personalizzare ogni elemento per diverse dimensioni dell'area visibile o intervalli di dimensioni, utilizza le regole multimediali.
Gli annunci illustrati non possono essere adattabili, ma possono utilizzare il flusso di lavoro adattabile in un layout a più dimensioni per esportare dimensioni diverse da un singolo documento.
Dimensioni della pagina adattabili
Rendere adattabile tutto il documento
La larghezza e l'altezza dei documenti adattabili devono essere impostate su 100% per occupare tutto lo spazio disponibile sullo schermo.
-
Documenti esistenti: nel riquadro Adattabili, seleziona la casella di controllo Layout adattabile.
-
Nuovi file: nella finestra di dialogo del nuovo file, seleziona la casella di controllo Layout adattabile quando specifichi le dimensioni. Questa opzione non è disponibile per tutti i tipi di file.
Per rendere adattabili i contenuti della pagina, puoi utilizzare il layout fluido e le regole multimediali.
Layout fluido
Dimensioni e posizioni basate sulla percentuale
Panoramica della creazione percentuale
Oltre alle dimensioni della pagina, puoi anche specificare la dimensione e la posizione degli elementi in percentuale anziché in pixel. Le percentuali mantengono la dimensione e l'allineamento di un elemento in relazione ai valori del contenitore principale, anche quando cambia.
Quando allinei gli elementi, l'opzione Layout fluido per gli strumenti di allineamento e distribuzione consente di impostare facilmente le posizioni basate sulla percentuale.
Regole multimediali
Eseguire l'override di attributi e stili CSS per diversi orientamenti e dimensioni
Le regole multimediali consentono al documento di rilevare la dimensione e l'orientamento dell'area visibile e di applicare attributi e stili diversi di conseguenza. Ad esempio, un telefono potrebbe mostrare i contenuti in una singola colonna, mentre su un tablet, gli stessi contenuti potrebbero essere visualizzati in due colonne. Queste modifiche, chiamate override, si verificano per dimensioni o intervalli di dimensioni specifici.
Puoi spostarti tra diversi gruppi di regole nel riquadro Adattabili:
- Regole predefinite: seleziona Modifica documento di base quando apporti modifiche al gruppo predefinito di stili o quando apporti modifiche che si applicano a tutte le dimensioni del viewport (ad esempio se aggiungi o elimini asset, componenti o eventi).
- Regole multimediali: seleziona una dimensione o un intervallo di dimensioni specifici per sostituire gli stili e gli attributi predefiniti della dimensione specifica del viewport.
Quando viene selezionata una regola multimediale, puoi impostare gli stili e gli attributi da applicare solo a tale dimensione o intervallo di dimensioni. Ad esempio, puoi modificare la posizione, la dimensione, l'origine, la visibilità o l'animazione di un elemento. Google Web Designer ti consente inoltre di eseguire l'override dei contenuti di testo, delle impostazioni di adattamento del testo e delle proprietà dei componenti.
Scopri di più sulle regole multimediali e gli override.
