Design Editor

Nozioni di base #

Quando lavori con Content per aggiungere elementi Clerk.io al tuo sito, l’Editor di Design può essere utilizzato per controllare l’aspetto degli elementi.

Puoi creare tutti i design che desideri, e qualsiasi numero di blocchi Content può utilizzare lo stesso design.

Quando vai alla pagina Designs per Search / Recommendations / Email, puoi visualizzare l’elenco di tutti i tuoi design, inclusi i loro ID.

Quando crei un nuovo design, puoi selezionare un modello iniziale dalla nostra Design Library per iniziare, oppure partire da zero.

Dimensioni schermo #

In alto a destra dello schermo, puoi vedere un’anteprima dei tuoi design per diverse dimensioni di schermo. Molti componenti supportano anche la personalizzazione individuale per ciascuna di queste dimensioni, in modo da rendere i tuoi design completamente responsive.

Puoi aggiungere stili per le seguenti dimensioni schermo:

• Desktop
• Tablet
• Mobile

Panoramica del layout #

L’Editor di Design consiste in:

• Una finestra di anteprima che mostra il design come apparirà sul tuo sito.
• L’albero dei componenti che elenca tutti i componenti che compongono il design.

I componenti sono generalmente elencati nell’ordine in cui vengono visualizzati. L’unica eccezione è quando utilizzi componenti flottanti come Badges, che possono essere posizionati sopra altri componenti.

Passando il mouse su qualsiasi componente nell’albero dei componenti, questo verrà evidenziato nella finestra di anteprima, così puoi vedere su cosa stai lavorando. Cliccando un elemento nella finestra di anteprima si selezionerà il relativo componente e si apriranno le sue impostazioni.

Puoi trascinare i componenti nell’albero per riordinarli o spostarli in diversi componenti parent. Indicatori visivi mostrano esattamente dove verrà posizionato un componente quando lo rilasci.

L’albero dei componenti supporta anche la navigazione da tastiera. Usa le frecce per muoverti tra i componenti e scorciatoie da tastiera per azioni comuni come copia, incolla e elimina componenti.

Componenti #

Ogni design è composto da un certo numero di elementi costitutivi, chiamati componenti. Un design può contenerne quanti ne vuoi, nell’ordine che preferisci.

Nuovi componenti vengono aggiunti cliccando il pulsante '+' nella parte destra sia del componente Background che di qualsiasi altro. Si aprirà un selettore di componenti dove puoi cercare per nome uno specifico tipo di componente.

Impostazioni generali #

Oltre alle loro impostazioni specializzate, la maggior parte dei componenti condivide anche le seguenti impostazioni standard.

Visualizzazione condizionale #

Questo ti consente di mostrare o nascondere un componente a seconda che venga soddisfatta una condizione. Usa la sintassi dal nostro sistema Filters, e fa sempre riferimento a item come fonte dati.

Un esempio potrebbe essere mostrare un componente solo se un prodotto è in offerta: item.on_sale == true.

Oppure mostrarlo solo se il prezzo supera 100 e il prodotto è disponibile: item.price > 100 and item.in_stock == true.

CSS personalizzato #

Questo ti consente di applicare regole CSS specifiche al componente, se hai bisogno di apportare modifiche non previste altrimenti dalle impostazioni. Il CSS viene modificato in un editor di codice dedicato con evidenziazione della sintassi.

Le regole CSS che aggiungi influenzeranno solo il componente a cui le applichi.

Caratteri #

L’Editor di Design include una vasta gamma di font utilizzabili. Inoltre, puoi scegliere di ereditare semplicemente il font dal tuo webshop selezionando Use webshop font.

L’unica eccezione è per le Embedded Email Recommendations, dove è necessario selezionare un font, poiché non hanno accesso ai font del tuo webshop.

Variabili Liquid #

In qualsiasi campo di testo, puoi aggiungere dati tramite il linguaggio di template Liquid.

Questo include la creazione di campi di testo dinamici come {{ headline }} o l’aggiunta di calcoli basati su attributi di prodotto come: {{ 100-((item.list_price*100)/item.price) | round }} %

L’esempio sopra calcolerà la percentuale arrotondata risparmiata quando un prodotto è in offerta.

Background #

Questo è un componente speciale che costituisce la base di ogni design. Il background è il contenitore generale in cui viene inserito il resto del design.

Di solito il background è trasparente, ma puoi selezionare un colore di sfondo se necessario.

Data Loop #

Questo permette di ciclare su un tipo di dati e mostrarne un quantitativo scelto. Può essere usato per visualizzare prodotti, categorie o pagine, oppure per scorrere un attributo come varianti o colori.

Puoi impostare un index se vuoi partire da un elemento nella lista diverso dal primo, e puoi scegliere quanti elementi mostrare.

Questo componente mostrerà gli elementi in una colonna per impostazione predefinita.

Griglia di elementi #

Funziona proprio come il Data Loop, ma mostra gli elementi in un layout a griglia invece che in una sola colonna. È utile per creare un design Search Page o Category Page con i prodotti affiancati.

Puoi configurare il numero di colonne in base alle dimensioni dello schermo, e la spaziatura tra gli elementi sia orizzontalmente che verticalmente.

Slider #

Mostra gli elementi in una riga orizzontale con frecce di scorrimento.

Puoi configurare quanti elementi mostrare per ogni slide in base alle dimensioni dello schermo e lo stile di default dei pulsanti. Attualmente ci sono 4 tipi di pulsante:

• Default
• Yellow
• Bordered
• No background (se vuoi personalizzare le frecce con il CSS)

Usa Button position per scegliere se i pulsanti devono essere centrati ai lati dello slider o visualizzati in uno dei suoi 4 angoli.

Pulsante Carica altri #

Utilizzato principalmente nei design Search Page e Category Page, questo pulsante consente agli utenti di vedere più elementi rispetto al valore di default che hai configurato.

Questa è una buona pratica perché riduce i tempi di caricamento mostrando inizialmente meno elementi e consentendo agli utenti di visualizzarne altri solo se lo desiderano.

Il pulsante può essere configurato con un testo personalizzato e la quantità di elementi da caricare ogni volta che viene cliccato. Caricherà il numero di elementi che la Product Logic restituisce, fino a esaurimento.

Box #

Questi funzionano da contenitori per altri componenti. Possono essere usati per raggruppare componenti o creare un layout multicolonna.

Possono essere configurati con un colore di sfondo e un layout basato sul sistema CSS flexbox.

Puoi anche controllare le dimensioni del box, così come margini e padding.

Linea #

Una semplice linea divisoria utilizzata per separare visivamente i componenti.

Puoi controllarne colore e stile, ad esempio se deve essere solida, tratteggiata, a punti o doppia.

Badge #

Questo è un ottimo modo per aggiungere stile visivo al tuo design ed è particolarmente utile per mettere in evidenza dettagli sui prodotti come sconti, novità e altro.

I Badges hanno una serie di impostazioni per controllare stile, posizione, testo da visualizzare e altro. Possono essere visualizzati in uno dei 4 angoli di un elemento e possono essere mostrati come box arrotondati o banner diagonali.

Pulsante #

Un semplice pulsante che può fungere da call-to-action efficace per i visitatori. Permette di configurare il testo da visualizzare, un link personalizzato o un evento onclick da eseguire al click, e il colore di sfondo per adattarlo al tuo brand.

L’evento onclick è un pezzo di Javascript che viene eseguito al click sul pulsante, e può essere usato per funzioni come aggiungi al carrello, wishlist e altre funzionalità Javascript.

Immagine #

Un componente visuale che mostra un’immagine di una dimensione specificata in base a un attributo (come l’immagine di un prodotto) o un URL specifico.

Puoi aggiungere un link unico all’immagine se, ad esempio, vuoi reindirizzare i clienti alla pagina prodotto dopo il click e puoi scegliere un effetto hover-over come l’ingrandimento dell’immagine al passaggio del mouse.

Link #

Configura un URL verso cui inviare i visitatori quando qualsiasi componente all’interno viene cliccato.

Puoi scegliere il valore di un attributo (es. URL prodotto), un URL specifico o un evento onclick.

Prezzo #

Utilizzato più frequentemente per mostrare il prezzo di un prodotto, questo componente include diverse impostazioni specifiche:

Queste includono il numero di decimali, i separatori delle migliaia e decimali e il simbolo di valuta da visualizzare prima o dopo il prezzo.

Testo #

Aggiunge blocchi di testo al tuo design. Sono usati per svariati scopi, come mostrare i nomi dei prodotti o delle pagine, brand, descrizioni e ogni altro dato che vuoi rappresentare come testo.

Il testo può essere basato su testo statico di tua scelta o su dati di attributi come i nomi dei prodotti o i titoli delle pagine. Puoi anche stilizzare il testo con opzioni di formattazione classiche come grassetto, corsivo e altro.

Varianti colore #

Si tratta di un Data Loop specializzato che ti consente di ciclare su un elenco di codici colore e mostrarli come opzioni colore. Funzionano al meglio se invii un elenco di codici colore per ogni prodotto. Es. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Recensioni #

Aggiunge le stelle di valutazione al tuo design, indicando quanto il prodotto è stato apprezzato dagli acquirenti. Le recensioni sono visualizzate come 5 stelle, con la media rappresentata da stelle colorate di nero.

Inoltre, mostra il numero di recensioni ricevute accanto alle stelle.

Per funzionare è necessario che i seguenti due attributi siano disponibili per i prodotti:

• reviews_avg: La valutazione media del prodotto su 5 stelle.
• reviews_amount: Il numero totale di recensioni per il prodotto.

HTML personalizzato #

Si tratta di un componente specializzato che consente di aggiungere qualsiasi codice HTML al tuo design. Può essere usato per aggiungere script personalizzati o blocchi specializzati che sarebbero difficili da realizzare con gli altri componenti.

Supporta anche l’uso di variabili Liquid, per accedere e lavorare con oggetti dati come prodotti, categorie e pagine.

Copiare componenti #

Se vuoi riutilizzare componenti da un altro design, puoi copiarli tra diversi design. Funziona sia tra differenti design su uno stesso Store, sia tra Store diversi nel tuo account.

Passa il mouse su un componente nell’albero e clicca il pulsante Copy oppure usa la scorciatoia da tastiera. Vai al tuo design di destinazione e clicca il pulsante Paste per aggiungerlo all’interno del componente dove dovrà essere mostrato. Puoi anche usare le scorciatoie di copia e incolla standard.

Visualizzazione del codice #

In qualsiasi momento puoi ispezionare il codice generato per il tuo design cliccando il pulsante View code. Questo apre una vista del codice con evidenziazione della sintassi, mostrando l’HTML e CSS generato.

Puoi usarlo per convertire il tuo design dell’Editor in un Code Design, copiando HTML e CSS, creando un nuovo Code Design vuoto e aggiungendovi i codici HTML e CSS.

Annulla / Ripristina #

Se commetti un errore, puoi sempre annullare le azioni più recenti cliccando il pulsante Undo o ripristinarle con il Redo.

Il sistema annulla/ripristina include una timeline visiva che mostra un elenco delle modifiche apportate. Puoi cliccare in qualsiasi punto della timeline per tornare a quello stato specifico, rendendo facile rivedere e navigare nella cronologia delle modifiche.

Modalità scura #

L’Editor di Design supporta il tema in modalità scura. Puoi attivarla dalla barra degli strumenti per passare dall’aspetto chiaro a quello scuro.

Scorciatoie da tastiera #

L’Editor di Design supporta scorciatoie da tastiera per le azioni più comuni. Queste ti permettono di lavorare più velocemente senza usare il mouse.

Le scorciatoie comuni includono:

• Copia un componente
• Incolla un componente
• Elimina un componente
• Annulla / Ripristina modifiche
• Frecce per spostarsi nell’albero dei componenti

Pubblicazione #

Quando sei pronto per usare il tuo design, deve essere pubblicato cliccando il pulsante Publish presente nella barra degli strumenti. Dopo aver apportato modifiche, dovresti pubblicare nuovamente il design.

Puoi poi scegliere se uscire dall’Editor di Design o restare per effettuare altre modifiche.