Design Editor

Fondamentali #

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

Puoi creare qualsiasi numero di design che desideri, e qualsiasi numero di blocchi di Contenuto può utilizzare 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 iniziale dalla nostra Design Library per iniziare, o semplicemente partire da zero.

Dimensioni dello schermo #

Nella parte superiore destra dello schermo, puoi visualizzare in anteprima i tuoi design per diverse dimensioni dello schermo. Molti dei componenti supportano anche la stilizzazione individuale per ciascuna di queste dimensioni dello schermo per rendere i tuoi design completamente reattivi.

Puoi aggiungere stili alle seguenti dimensioni dello schermo:

• Desktop
• Tablet
• Mobile

Panoramica del layout #

Il Design Editor stesso è 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 utilizzi componenti fluttuanti come Badges, che possono essere posizionati sopra altri componenti.

Passare il mouse su qualsiasi componente nella panoramica del layout lo evidenzierà nella finestra di anteprima, così puoi vedere con cosa stai lavorando. Cliccando su un elemento nella finestra di anteprima si apriranno anche le impostazioni per il componente che lo visualizza.

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

Componenti #

Ogni design è composto da un certo numero di mattoni, chiamati componenti. Un design può contenere quanti più componenti desideri, in qualsiasi ordine desideri.

Nuovi componenti vengono aggiunti cliccando il pulsante '+' sul lato destro del componente Background o di qualsiasi altro.

Impostazioni generali #

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

Visualizzazione condizionale #

Questo ti consente di mostrare o nascondere il componente in base al fatto che una condizione sia soddisfatta. Utilizza la sintassi del nostro sistema di Filters e fa sempre riferimento a item come sorgente 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 #

Questo ti consente di applicare regole CSS specifiche al componente, se hai bisogno di apportare modifiche che le impostazioni non consentono altrimenti.

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

Font #

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

L’unica limitazione di questo è per Embedded Email Recommendations, dove devi 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 attraverso il linguaggio di templating 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 calcolerebbe la percentuale arrotondata risparmiata quando un prodotto è in saldo.

Sfondo #

Questo è un componente speciale che è la base di qualsiasi design. Lo sfondo è il contenitore generale in cui viene inserito il resto del design.

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

Ciclo di dati #

Questo ti consente di scorrere un tipo di dati e mostrare una quantità scelta di essi. Può essere utilizzato per visualizzare prodotti, categorie o pagine, o scorrere un attributo come varianti o colori.

Puoi impostare un index se desideri iniziare da un certo elemento nell’elenco diverso dal primo, e puoi scegliere la quantità di elementi da 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 piuttosto che in una singola colonna. Questo è utile per creare un design di Pagina di Ricerca o Pagina di Categoria con prodotti mostrati uno accanto all’altro.

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

Slider #

Mostra elementi in una fila orizzontale con frecce dello slider per scorrere tra di essi.

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

• Predefinito
• Giallo
• Bordato
• Senza sfondo (se desideri personalizzare le frecce con CSS)

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

Pulsante “Carica di più” #

Principalmente utilizzato per design di Pagina di Ricerca e Pagina di Categoria, questo pulsante consente agli utenti di vedere più elementi rispetto alla quantità predefinita che hai configurato.

Questa è una buona pratica poiché ti consente di ridurre i tempi di caricamento mostrando inizialmente una quantità minore di elementi e lasciando che gli utenti vedano di più 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à quanti più elementi possibile fino a quando la scelta di Product Logic non restituirà più elementi.

Box #

Questi funzionano come contenitori per altri componenti. Possono essere utilizzati per raggruppare componenti insieme o per creare un layout con più colonne.

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

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

Linea #

Una semplice linea divisoria utilizzata per separare visivamente i componenti.

Puoi controllare il suo colore e stile, come se dovrebbe essere solida, tratteggiata, a linee 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, notizie e altro.

I badge hanno una gamma di impostazioni per controllare lo stile, la posizione, il testo da visualizzare e altro. Possono essere mostrati in uno dei 4 angoli di un elemento e possono essere mostrati come una scatola arrotondata o un banner diagonale.

Pulsante #

Un semplice pulsante che può funzionare come una chiamata all’azione efficace per i visitatori. Ti consente di configurare il testo da visualizzare, un link personalizzato o un evento onclick da utilizzare quando viene cliccato, e il colore di sfondo in modo che corrisponda al tuo marchio.

L’evento onclick è un pezzo di Javascript che dovrebbe essere eseguito quando il pulsante viene cliccato, il che può essere utilizzato per funzioni di aggiunta al carrello, funzionalità di lista dei desideri e altre funzionalità Javascript.

Immagine #

Un componente visivo che mostra un’immagine in una dimensione specificata basata su un attributo (come un’immagine di prodotto) o un URL specifico.

Puoi aggiungere un link unico all’immagine se ad esempio desideri inviare i clienti alla pagina del prodotto quando viene cliccata e puoi scegliere un effetto di hover come ingrandire l’immagine quando i visitatori passano il mouse sopra di essa.

Link #

Configura un URL per inviare i visitatori quando viene cliccato qualsiasi componente al suo interno.

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

Prezzo #

Utilizzato più spesso per visualizzare il prezzo di un prodotto, questo componente contiene un certo numero di impostazioni di configurazione specifiche per il prezzo.

Queste includono la quantità di decimali, i separatori 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. Questi sono utilizzati per molti scopi diversi, come mostrare i nomi di prodotti o pagine, marchi, descrizioni e qualsiasi altro dato che desideri rappresentare come testo.

Il testo può essere basato su testo statico a tua scelta o dati di attributo come nomi di prodotto o titoli di pagina. Puoi scegliere di limitare il testo a una certa quantità di caratteri per mantenere i layout intatti e stilizzare il tuo testo con formattazioni classiche come grassetto, corsivo e altro.

Varianti di colore #

Questo è un Data Loop specializzato che ti consente di scorrere un elenco di codici colore e mostrarli come opzioni di colore. Funzionano meglio se invii un elenco di codici colore per ogni prodotto. E.g. color_codes = ['#FFA07A', '#008080', '#4CAF50', '#FFD700']

Recensioni #

Aggiunge stelle di recensione al tuo design, indicando quanto i compratori hanno gradito il prodotto. Le recensioni sono mostrate come 5 stelle, con la valutazione media mostrata come stelle di colore nero.

Inoltre, mostra il numero di recensioni che il prodotto ha ricevuto accanto alle stelle.

Richiedono che i seguenti due attributi siano disponibili per i prodotti:

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

HTML personalizzato #

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

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

Copiare Componenti #

Se desideri riutilizzare componenti da un design diverso, puoi copiarli tra i design. Questo funziona sia tra design diversi su un singolo Store, ma puoi anche copiare componenti tra Store sul tuo account.

Basta passare il mouse su un componente nel tuo design sorgente e cliccare il pulsante Copy. Vai al tuo design di destinazione e clicca il pulsante Paste per aggiungere all’interno del componente dove dovrebbe essere mostrato.

Visualizzare il Codice #

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

Puoi usare questo per convertire il tuo design del Design Editor in un Design di Codice, copiando l’HTML e il CSS, creando un nuovo Design di Codice vuoto e aggiungendo l’HTML e il CSS ad esso.

Annulla / Ripeti #

Se commetti un errore, puoi sempre annullare le tue ultime azioni cliccando il pulsante Undo o ripristinarlo con il pulsante Redo. Entrambi si trovano appena sotto la finestra di anteprima.

Pubblicazione #

Quando sei pronto per utilizzare il tuo design, deve essere pubblicato cliccando il pulsante Publish. Dopo aver apportato modifiche, dovresti anche pubblicare nuovamente il tuo design.

Puoi quindi scegliere di uscire dal Design Editor, o rimanere e apportare ulteriori modifiche.