Come creare riferimenti

Gli elementi a cui si fa riferimento sono cloni che vengono aggiornati automaticamente. Immagina di voler utilizzare un determinato elemento un paio di volte tra tutte le tue sottopagine. Non sarebbe carino non solo farlo in un paio di secondi ma anche in modo da non doversi mai preoccupare di aggiornarli ciascuno quando è necessario modificare solo una singola cosa?

Sommario

• Conoscenza di base
• Come creare un riferimento
• Impostazioni di riferimento
• Riferimenti parziale
• Migliori pratiche

Conoscenza di base

Un riferimento converte un contenitore con tutto il suo contenuto in una singola istanza. Ciò significa che una volta creato il riferimento non è più possibile selezionare alcun elemento figlio all’interno del riferimento.

1. Qualsiasi classe personalizzata impostata sull’elemento genitore di riferimento rimarrà nel riferimento. Questo adotterà tutti i CSS validi per l’elemento originale.
2. Le classi generiche vengono sostituite con la rispettiva classe di riferimento. Ad esempio , .ed-headline diventerà .ed-reference-headline, .ed-text diventerà .ed-reference-text ecc.
   Nota: questo può disabilitare gli stili applicati quando è stato scritto per .ed-text , ma non per . ed-testo-di-riferimento .
3. Gli oggetti di riferimento riceveranno un ID individuale.
   Nota: questo può disabilitare gli stili applicati quando sono stati scritti per un ID particolare.
4. I riferimenti hanno effetto all’interno di un progetto e di tutte le sue sottopagine, ma non possono essere applicati a progetti diversi.
5. I riferimenti possono essere convertiti nell’elemento originale e quindi modificati individualmente (elementi padre e figlio). Ciò disabiliterà tuttavia il comportamento di aggiornamento automatico. Fondamentalmente è come duplicare un elemento.

Come creare un riferimento

Per illustrare come funziona facciamo riferimento a un banner predefinito. Ciò è utile se desideri mantenere la stessa intestazione in tutte le sottopagine.

È possibile creare riferimenti in uno dei seguenti modi:

• fai clic con il pulsante destro del mouse all’interno di qualsiasi elemento a cui desideri fare riferimento e scegli Crea riferimento per duplicare questo elemento come nuovo riferimento proprio sotto.. Assicurati di aver selezionato l’elemento corretto controllando i breadcrumb nella parte inferiore dell’editor. L’elemento desiderato è solitamente l’elemento più a sinistra nel breadcrumb o il contenitore principale di un preset (indicato da un’icona puzzle davanti ad esso)
• fai clic con il pulsante destro del mouse e Copia elemento, quindi vai al punto in cui desideri avere il riferimento, fai nuovamente clic con il pulsante destro del mouse e scegli Incolla riferimento. Questo incollerà l’elemento copiato come riferimento proprio dove vuoi, anche tra le pagine.
• seleziona l’elemento a cui desideri fare riferimento e fai clic con il pulsante destro del mouse sull’elemento nel breadcrumb che apre anche il menu contestuale in cui puoi selezionare Crea riferimento

Suggerimento: puoi utilizzare le scorciatoie per creare questi riferimenti ancora più velocemente. Premi semplicemente [CTRL + C] per copiare l’elemento desiderato e premi [CTRL + SHIFT + V] per incollarlo come riferimento dopo qualunque elemento sia attualmente selezionato. Premendo [CTRL + V] si incollerà un duplicato dell’elemento copiato ma non un riferimento.

Nota come il contenitore nel breadcrumb cambia in Reference. In questo modo puoi verificare facilmente se un elemento è originale o referenziato. Nota anche come le lezioni rimangono le stesse.

Impostazioni di riferimento

Facendo doppio clic sull’elemento di riferimento si aprirà il relativo pannello delle impostazioni a sinistra.

Qui puoi trovare il suo nuovo ID e un paio di impostazioni e azioni:

• Copia impostazioni: seleziona questa casella di controllo per duplicare determinati effetti e animazioni da applicare anche al riferimento
• Converti riferimento: utilizzalo per trasformare questo riferimento in un duplicato regolare e disabilitare tutto il comportamento di aggiornamento
• Mostra elemento origine: ti porta dove si trova l’elemento originale.

Se fai clic su “Stile” puoi regolare le impostazioni per questo riferimento come per qualsiasi altro elemento, come aggiungere animazione, impostare una data di scadenza o applicare classi personalizzate.

Referenziamento parziale

A volte non vuoi che venga fatto riferimento all’intera intestazione in una sottopagina, perché vuoi cambiare lo sfondo dell’intestazione, ma il menu e la barra delle informazioni dovrebbero rimanere gli stessi. Se desideri fare riferimento solo a parti specifiche, segui questi passaggi:

Inizia copiando l’intero preset. Controlla il breadcrumb per assicurarti di aver selezionato l’elemento contenitore corretto. Puoi quindi fare clic con il pulsante destro del mouse sul preset nel breadcrumb che aprirà il menu contestuale in cui puoi selezionare “Copia” oppure utilizzare le scorciatoie Ctrl + C.

Ora puoi incollare l’intestazione nella sottopagina. È importante incollarlo in questo passaggio e non utilizzare “incolla come riferimento”.

Per il nostro esempio, lo assumiamo

• vogliamo cambiare lo sfondo dell’intestazione e regolare il testo al centro
• il menu e la barra delle informazioni dovrebbero essere gli stessi in tutte le sottopagine

Ora faremo riferimento solo agli elementi che dovrebbero rimanere gli stessi, quindi la barra delle informazioni e la barra dei menu. Per questo, torneremo alla nostra intestazione originale e selezioneremo la barra delle informazioni. Ancora una volta, il breadcrumb è uno strumento utile per verificare se hai selezionato l’elemento giusto. Quindi utilizziamo un clic con il tasto destro per selezionare “copia”. Torniamo alla nostra sottopagina e utilizziamo la scorciatoia Ctrl + Cmd + V oppure utilizziamo un clic con il tasto destro per selezionare “incolla come riferimento” per aggiungere la barra delle informazioni sotto la barra delle informazioni copiata. In questo caso, la nostra seconda barra informativa è un riferimento:

Ora eliminiamo la prima barra delle informazioni in modo che sia visibile solo la barra delle informazioni a cui si fa riferimento. Controlla i breadcrumb per assicurarti di eliminare/mantenere la barra delle informazioni di riferimento. 

Ora ripeti lo stesso per la barra dei menu. Una volta fatto ciò, hai una barra delle informazioni e una barra dei menu di riferimento che cambiano se cambiano i loro elementi di origine, ma lo sfondo e il testo dell’intestazione possono essere adattati alle tue esigenze.

Puoi ripeterlo tutte le volte che vuoi per garantire un aspetto coerente in tutte le sottopagine.

Migliori pratiche

È sempre importante capire a quale tipologia di elemento si fa riferimento e come questo è collegato agli altri elementi. Il breadcrumb è un ottimo modo per identificare gli elementi. Ad esempio, a volte non desideri che l’intera intestazione sia presente nelle sottopagine oppure desideri modificare le parole o le immagini nell’area dell’intestazione, mantenendo coerenti i menu e le informazioni di contatto.

È possibile fare riferimento a più elementi collegati insieme contemporaneamente. Raccomandiamo di utilizzare il metodo di riferimento soprattutto per la sezione intestazione, il menu e il piè di pagina. Questi elementi sono generalmente gli stessi su ogni pagina.

Se desideri che la Cookie Bar venga visualizzata su ogni pagina, puoi impostare l’elemento cookie nel footer, che è già referenziato in tutte le sottopagine, in modo da non doverti preoccupare di farne riferimento ovunque.