Modifica del contenuto di una pagina con l’Editor pagina dell’AEM edit-content

L’editor di pagine AEM è uno strumento utile per creare il contenuto di una pagina. Scopri come utilizzarlo per trascinare e rilasciare i contenuti e modificarli direttamente.

Panoramica overview

Nell’editor pagina puoi eseguire tre azioni di base per modificare il contenuto:

  1. Aggiunta di nuovi componenti mediante trascinamento nella pagina.
  2. Aggiunta di nuove risorse mediante trascinamento nella pagina.
  3. Modifica di componenti sul posto già esistenti nella pagina.

L’editor di pagine dell’AEM fornisce un’interfaccia utente intuitiva per eseguire queste attività, oltre a fornire accesso a funzioni più avanzate.

Inoltre, l’editor ti consente di organizzare il contenuto esistente nella pagina consentendo di:

Aggiunta di componenti adding-components

Puoi trascinare i nuovi componenti nella pagina selezionandoli dal browser dei componenti nel pannello laterale e rilasciandoli in un segnaposto di componente.

Segnaposto Componente component-placeholder

Il segnaposto del componente è un indicatore che mostra dove verrà posizionato un componente quando lo rilasci. Ha due apparizioni.

  • Quando si aggiunge un nuovo componente alla pagina (trascinandolo dal browser dei componenti), questo viene visualizzato come una casella grigia con i dettagli del componente che si sta posizionando.

    Segnaposto per l’aggiunta di un nuovo componente a una pagina

  • Quando sposta un componente esistente, verrà visualizzato come un quadrato blu.

    Segnaposto per lo spostamento di un componente esistente su una pagina

In entrambi i casi, la destinazione selezionata verrà visualizzata come un contorno blu sotto il componente che si sta trascinando. La destinazione se il componente viene posizionato al momento del rilascio.

Aggiunta di un componente dal browser Componenti adding-a-component-from-the-components-browser

Puoi aggiungere un nuovo componente utilizzando il browser componenti. Il segnaposto componente mostra dove stai posizionando il componente.

  1. Verificare che l'editor di pagine sia in modalità Modifica.
  2. Apri il browser dei componenti .
  3. Trascina il componente richiesto nella posizione richiesta e rilascialo.
  4. Modifica il componente appena inserito.
NOTE
Su un dispositivo mobile, il browser componenti occuperà l’intero schermo. Dopo aver iniziato a trascinare un componente, il browser si chiude per mostrare nuovamente la pagina per permetterti di posizionarlo.

Aggiunta di un componente dal sistema paragrafo adding-a-component-from-the-paragraph-system

Puoi aggiungere un nuovo componente utilizzando il segnaposto Trascina qui i componenti del sistema paragrafo:

  1. Verificare che l'editor di pagine sia in modalità Modifica.

  2. Per selezionare e aggiungere un nuovo componente dal sistema paragrafo esistono due modi:

    • Seleziona l’opzione Inserisci componente (+) dalla barra degli strumenti di un componente esistente o dalla casella Trascina qui i componenti.

      Inserire un componente

    • Se utilizzi un dispositivo desktop, puoi fare doppio clic sulla casella Trascina qui i componenti.

  3. Viene aperta la finestra di dialogo Inserisci nuovo componente che consente di selezionare il componente richiesto. Tocca o fai clic sul componente da aggiungere.

    • Utilizza i filtri di ricerca per trovare il componente.
    • Per ulteriori informazioni sul componente, utilizza l’icona delle informazioni accanto ai nomi dei componenti.

    Finestra di dialogo Inserisci nuovo componente

  4. Il componente selezionato viene aggiunto alla destinazione selezionata. Se necessario, Modifica il componente.

Aggiunta di una risorsa adding-asset

Puoi anche aggiungere un nuovo componente alla pagina trascinando una risorsa dal browser risorse. Crea automaticamente un componente del tipo appropriato (e contenente la risorsa).

Puoi configurare questo comportamento per l’installazione in uso. Per ulteriori informazioni, consultare il documento Guida di riferimento ai componenti.

Per creare un componente trascinando uno dei tipi di risorsa indicati sopra:

  1. Assicurati che la pagina sia in modalità Modifica.
  2. Apri il browser Risorse.
  3. Trascina la risorsa richiesta nella posizione desiderata. Il segnaposto componente mostra dove è posizionato il componente e viene visualizzata una destinazione in cui verrà inserito.
  4. Rilascia la risorsa sul target. Nella posizione richiesta viene creato un componente appropriato per il tipo di risorsa, contenente la risorsa selezionata.
  5. Modificare il componente, se necessario.
NOTE
Su un dispositivo mobile, il browser Risorse occupa l’intero schermo. Quando inizi a trascinare una risorsa, il browser si chiuderà per mostrare nuovamente la pagina e permetterti di posizionarla.

Se sfogliando le risorse disponibili scopri che è necessario eseguire una rapida modifica a una risorsa, puoi avviare l’editor risorse direttamente dal browser, facendo clic sull’icona di modifica accanto al nome della risorsa.

Modifica diretta dei componenti edit-in-place

Selezionando un componente si apre la barra degli strumenti del componente. Consente di accedere a varie azioni che possono essere eseguite sul componente.

Barra degli strumenti del componente

Le azioni disponibili nella barra degli strumenti del componente sono appropriate per il componente selezionato. La visualizzazione dipende dal componente selezionato e potrebbe non essere descritta in questa sezione.

  • Modifica ti consente di modificare il contenuto del componente, spesso direttamente. Il suo comportamento dipende dal componente.

    Pulsante Modifica

  • Configura consente di modificare alcuni parametri del componente non direttamente correlati al suo contenuto, normalmente in una finestra di dialogo. Il suo comportamento dipende dal componente.

    Pulsante Configura

  • Copia copia il componente negli Appunti per incollarlo altrove. Il componente originale rimane invariato.

    Pulsante Copia

  • Taglia copia il componente negli Appunti. Il componente originale viene rimosso.

    Pulsante Taglia

  • Elimina elimina il componente dalla pagina con la tua conferma.

    Pulsante Elimina

  • Inserisci componente apre la finestra di dialogo per aggiungere un nuovo componente.

    Pulsante Inserisci

  • Incolla incolla il componente dagli Appunti alla pagina. Se l'originale rimane, dipende dal fatto che hai usato Copia o Taglia.

    • È possibile utilizzare Incolla per collocare i componenti sulla stessa pagina o su una pagina diversa.
    • Se si incolla in un’altra pagina che era già aperta prima dell’operazione Taglia/Copia, per visualizzare il contenuto incollato è necessario aggiornare la pagina.
    • L’elemento viene incollato sopra l’elemento in cui selezioni l’azione Incolla.
    • L’azione Incolla viene mostrata solo se è presente contenuto negli Appunti.

    Pulsante Incolla

  • Gruppo consente di selezionare più componenti contemporaneamente. È possibile eseguire la stessa azione su un dispositivo desktop tramite Ctrl+clic o Comando+clic.

    Pulsante Gruppo

  • Elemento padre seleziona il componente padre del componente selezionato.

    Pulsante Elemento padre

  • Layout consente di modificare il layout del componente selezionato.

    • Ciò vale solo per il componente selezionato e non attiva la Modalità di layout per l’intera pagina.

    Pulsante Layout

  • Converti in variante di frammento di esperienza consente di creare un frammento di esperienza dal componente selezionato o di aggiungerlo a un frammento di esperienza esistente.

    Pulsante Converti in frammento esperienza

Finestra di dialogo di modifica del componente component-edit-dialog

Alcuni componenti offrono opzioni di modifica aggiuntive rispetto a quelle disponibili direttamente. È possibile aprire la finestra di dialogo per modifica di un componente utilizzando l'icona Modifica (matita) della barra degli strumenti del componente per accedere ad altre opzioni di configurazione.

Le opzioni di modifica effettive dipendono dal componente. Per alcuni componenti alcune azioni saranno disponibili solo in modalità a schermo intero. Esempio:

  • Componente testo

    Barra degli strumenti del componente testo

  • Componente immagine

    Barra degli strumenti del componente immagine

Modifica componenti in modalità a tutto schermo edit-content-full-screen-mode

Molti componenti offrono una modalità a schermo intero per la modifica accessibile con questo pulsante.

Pulsante Schermo intero

La modifica a schermo intero consente di visualizzare più opzioni di modifica rispetto all’editor locale, ad esempio per il componente Immagine.

Componente immagine a schermo intero

Utilizza il pulsante Riduci a icona per attivare la modalità a schermo intero.

Pulsante Riduci a icona

Spostamento dei componenti moving-components

Per spostare un componente:

  1. Seleziona il componente da spostare tenendo premuto o facendo clic.

  2. Trascina il componente nella nuova posizione.

    • L'editor pagina indica la posizione del componente con un segnaposto e dove è possibile eliminare il paragrafo con una destinazione.

    Spostamento di un componente

  3. Rilascialo nella posizione desiderata.

TIP
Per spostare un componente puoi anche utilizzare Taglia e Incolla.

Modifica del layout dei componenti editing-component-layout

Invece di passare più volte dalla modalità di modifica alla modalità di layout per regolare le impostazioni di un componente, è possibile selezionare l’azione Layout. Questo permette di modificare rapidamente il layout di quello specifico componente, senza uscire dalla modalità di modifica.

  1. In modalità Modifica della console Sites, seleziona un componente per visualizzare la barra degli strumenti del componente.

  2. Seleziona l'azione Layout per modificare il layout del componente.

    Pulsante Layout della barra degli strumenti del componente

  3. Una volta selezionata l'azione Layout, è possibile modificare il layout del componente come si fa in modalità layout.

    • Vengono visualizzate le maniglie di ridimensionamento del componente.
    • La barra degli strumenti dell’emulatore viene visualizzata nella parte superiore dello schermo.
    • La barra degli strumenti del componente presenta le azioni di layout al posto delle azioni di modifica standard.

    Un componente in modalità layout

  4. Dopo aver apportato le modifiche necessarie, tocca o fai clic sul pulsante Chiudi nel menu Azioni del componente per interrompere la modifica del layout del componente e la barra degli strumenti del componente torna al suo normale stato di modifica.

    Barra degli strumenti di un componente pagina

TIP
L’azione Layout è limitata al componente selezionato. Ad esempio, se stai modificando il layout di un componente e fai clic su un altro componente, per il componente appena selezionato viene visualizzata la barra degli strumenti di modifica standard (non la barra degli strumenti di layout), mentre le maniglie di ridimensionamento e la barra degli strumenti dell’emulatore scompaiono.
Se devi modificare il layout globale della pagina, che iinteresserà più componenti, passa alla modalità di layout.

Modifica dell’ereditarietà dei componenti inherited-components

L’ereditarietà è il meccanismo in cui il contenuto può essere collegato in modo che la modifica di un elemento cambia automaticamente l’altro. I componenti ereditati possono essere il risultato di vari scenari, tra cui:

Puoi annullare e riabilitare l’ereditarietà. A seconda del componente, queste opzioni sono disponibili dalla barra degli strumenti del componente, se il componente fa parte di una Live Copy o di un lancio.

  • Annulla ereditarietà

    Pulsante Annulla ereditarietà

  • Riabilita ereditarietà se l'ereditarietà è già annullata

    Pulsante Riattiva ereditarietà

  • Rollout è disponibile anche nel blueprint o nell'origine Live Copy

    Pulsante Rollout

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab