Design Editor

Basi #

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

Puoi creare quanti design desideri, e qualsiasi numero di blocchi Content può usare lo stesso design.

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

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

Dimensioni schermo #

In alto a destra dello schermo, puoi visualizzare in anteprima i tuoi design per diverse dimensioni dello schermo. Molti dei componenti supportano anche la personalizzazione individuale per ciascuna di queste dimensioni, così da rendere i tuoi design totalmente reattivi.

Puoi aggiungere stili alle seguenti dimensioni schermo:

• Desktop
• Tablet
• Mobile

Panoramica layout #

Il Design Editor è composto da:

• Una finestra di anteprima che mostra il design come apparirà sul tuo sito.
• La panoramica del layout che elenca tutti i componenti che compongono il design.

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

Passando il mouse su un componente nella panoramica del layout, verrà evidenziato nella finestra di anteprima, così potrai vedere su cosa stai lavorando. Facendo clic su un elemento nella finestra di anteprima si apriranno allo stesso modo le impostazioni del componente che lo visualizza.

Puoi trascinare i componenti nella panoramica del layout per cambiarne la posizione.

Componenti #

Ogni design è composto da una serie di blocchi fondamentali, chiamati componenti. Un design può contenerne quanti desideri, in qualsiasi ordine.

I nuovi componenti vengono aggiunti facendo clic sul pulsante '+' a destra sia del componente Background che di qualsiasi altro.

Impostazioni generali #

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

Visualizzazione condizionale #

Questa opzione consente di mostrare o nascondere il componente in base al fatto che una determinata condizione sia soddisfatta. Utilizza la sintassi del nostro sistema Filters e fa sempre riferimento a item come fonte dei dati.

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

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

CSS personalizzato #

Questa opzione ti permette di applicare regole CSS specifiche al componente, se hai bisogno di fare aggiustamenti che le altre impostazioni non consentono.

Le regole CSS aggiunte influenzeranno solo il componente a cui vengono applicate.

Font #

Il Design Editor dispone di un’ampia gamma di font che puoi utilizzare. Inoltre, puoi scegliere di ereditare il font dal tuo webshop selezionando Use webshop font.

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

Variabili Liquid #

In qualsiasi campo di testo, hai la possibilità di aggiungere dati tramite il linguaggio di templating Liquid.

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

L’esempio sopra calcolerebbe la percentuale arrotondata risparmiata quando un prodotto è in saldo.

Background #

Questo è un componente speciale che costituisce la base di qualsiasi design. Il background è il contenitore generale in cui vengono inseriti gli altri componenti del design.

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

Data Loop #

Permette di ciclare su un tipo di dati e mostrare la quantità desiderata. Può essere usato per visualizzare prodotti, categorie o pagine, oppure ciclare attraverso un attributo come varianti o colori.

Puoi impostare un index se vuoi iniziare da un elemento specifico della lista diverso dal primo, e scegliere la quantità di elementi da mostrare.

Questo componente mostra gli elementi in una colonna per impostazione predefinita.

Griglia di elementi #

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

Puoi configurare il numero di colonne in base alla dimensione dello schermo e lo spazio tra gli elementi sia orizzontalmente che verticalmente.

Slider #

Mostra gli elementi in una fila orizzontale con delle frecce slider per scorrerli.

Puoi configurare la quantità di elementi da mostrare per ogni diapositiva in base alla dimensione dello schermo e lo stile predefinito dei pulsanti. Attualmente ci sono 4 tipi di pulsante:

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

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

Load more button #

Principalmente usato per i design delle Search Page e Category Page, questo pulsante consente agli utenti di vedere più elementi rispetto alla quantità predefinita configurata.

Questa è una buona pratica perché permette di ridurre i tempi di caricamento mostrando inizialmente pochi elementi e lasciando all’utente la libertà di vederne altri.

Il pulsante può essere configurato con un testo personalizzato e la quantità di elementi da caricare ogni volta che viene cliccato. Caricherà tanti elementi quanti ne restituisce la Product Logic selezionata, finché non verranno trovati ulteriori elementi.

Box #

Questi funzionano da contenitori per altri componenti. Possono essere usati per raggruppare i componenti insieme oppure per creare un layout a più colonne.

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 margine e padding.

Linea #

Una semplice linea divisoria utilizzata per separare visivamente i componenti.

Puoi controllarne colore e stile, se deve essere solida, punteggiata, tratteggiata o doppia.

Badge #

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

I Badges hanno una serie di impostazioni per controllarne stile, posizione, testo da visualizzare e altro. Possono essere mostrati in ciascuno dei 4 angoli di un elemento ed essere visualizzati come box arrotondato o banner diagonale.

Button #

Un pulsante semplice che può servire come call-to-action efficace per i visitatori. Ti permette di configurare il testo da mostrare, un link personalizzato o un evento onclick da usare al click, e il colore di sfondo in modo che si abbini al tuo brand.

L’evento onclick è un frammento di Javascript che viene eseguito quando il pulsante viene cliccato, utile per funzioni come aggiunta al carrello, wishlist e altre funzionalità Javascript.

Immagine #

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

Puoi aggiungere un link unico all’immagine nel caso, ad esempio, volessi inviare i clienti alla pagina prodotto al clic, e puoi scegliere un effetto hover come l’ingrandimento dell’immagine al passaggio del mouse.

Link #

Configura un URL a cui inviare i visitatori quando uno qualsiasi dei componenti interni viene cliccato.

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

Prezzo #

Usato principalmente per mostrare il prezzo di un prodotto, questo componente contiene numerose impostazioni specifiche relative al prezzo.

Queste includono il numero di decimali, il separatore delle migliaia e dei decimali, e il simbolo della valuta, da visualizzare prima o dopo il prezzo.

Testo #

Aggiunge blocchi di testo al tuo design. Sono usati per molti scopi diversi, come mostrare nomi di prodotti o pagine, brand, descrizioni e qualsiasi altro dato che vuoi rappresentare come testo.

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

Varianti colore #

Questa è una versione specializzata del Data Loop che permette di ciclare su un elenco di codici colore e mostrarli come opzioni di colore. Funziona al meglio se invii un elenco di codici colore per ogni prodotto. Esempio: color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Recensioni #

Aggiunge le stelle di valutazione al tuo design, indicando quanto i clienti hanno apprezzato il prodotto. Le recensioni sono mostrate come 5 stelle, con la valutazione media evidenziata come stelle nere.

Inoltre, viene visualizzato il numero di recensioni ricevute dal prodotto accanto alle stelle.

Sono necessari i seguenti due attributi disponibili per i prodotti:

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

Custom HTML #

Questo è un componente specializzato che ti consente di aggiungere qualsiasi codice HTML al tuo design. Può essere usato per aggiungere script personalizzati, o per inserire blocchi specializzati che sarebbero difficili da creare con altri componenti.

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

Copiare componenti #

Se desideri riutilizzare componenti da un altro design, puoi copiarli tra i design. Questo funziona sia tra diversi design su uno stesso Store, sia tra Store diversi sul tuo account.

Basta passare il mouse su un componente nel design di origine e cliccare il pulsante Copy. Vai al design di destinazione e clicca il pulsante Paste per inserirlo nel componente dove desideri venga visualizzato.

Visualizzare il codice #

In qualsiasi momento, puoi ispezionare il codice generato per il tuo design facendo clic sul pulsante View code. Questo ti mostrerà rispettivamente l’HTML e il CSS generati.

Puoi usare questa funzione per convertire il tuo design creato con il Design Editor in un Code Design, copiando l’HTML e il CSS e creando un nuovo Code Design vuoto aggiungendovi il codice.

Annulla / Ripeti #

Se commetti un errore, puoi sempre annullare le ultime azioni facendo clic sul pulsante Undo o aggiungerle di nuovo con il pulsante Redo. Entrambi si trovano appena sotto la finestra di anteprima.

Pubblicazione #

Quando sei pronto a usare il tuo design, devi pubblicarlo cliccando il pulsante Publish. Dopo aver apportato modifiche, dovrai anche pubblicare di nuovo il tuo design.

Potrai poi scegliere se uscire dal Design Editor o restare e apportare ulteriori modifiche.