Layout reattivo in We.Retail

Ultimo aggiornamento: 2023-05-04
  • Argomenti:
  • Developing
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Developer
ATTENZIONE

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Tutte le pagine We.Retail utilizzano il componente Contenitore di layout per implementare una progettazione reattiva. Il contenitore layout fornisce un sistema paragrafo che consente di posizionare i componenti all’interno di una griglia reattiva. Questa griglia può ridisporre il layout in base alle dimensioni e al formato del dispositivo/finestra. Il componente viene utilizzato insieme al Layout nell’editor di pagine, che consente di creare e modificare il layout dinamico a seconda del dispositivo.

Prova

  1. Modifica la pagina Navigazione artica nella sezione Esperienze del ramo principale lingua.

    http://localhost:4502/editor.html/content/we-retail/language-masters/en/experience/arctic-surfing-in-lofoten.html

  2. Passa a Anteprima per visualizzare l’aspetto che la pagina avrebbe rappresentato per un visitatore del sito web. Scorri verso il basso fino al contenuto dell’articolo acquaviti di Aloha nella Norvegia settentrionale.

    chlimage_1-178

  3. Ridimensiona la finestra del browser e osserva come il layout si adatta dinamicamente al ridimensionamento.

    chlimage_1-179

  4. Passa alla modalità Layout . Viene visualizzata automaticamente la barra degli strumenti dell’emulatore, che consente di pianificare il layout per dispositivo di destinazione.

    Quando si seleziona un componente, vengono visualizzate le opzioni mobili e nascoste nel menu di modifica e le relative maniglie di ridimensionamento.

    chlimage_1-180

  5. Quando si seleziona e si trascina la maniglia di ridimensionamento del componente, viene automaticamente visualizzata la griglia di layout che consente di eseguire le operazioni di ridimensionamento.

    chlimage_1-181

Ulteriori informazioni

Per ulteriori informazioni, consulta il documento di authoring Layout reattivo o il documento dell'amministratore Configurazione del contenitore di layout e della modalità di layout per informazioni tecniche complete.

In questa pagina