Consegna gratuita e rapida
Soddisfazione garantita
Acquista in tutta sicurezza
Ottime recensioni

Guida allo stile

Questa guida di stile di esempio mostra l'intera gamma di elementi WYSIWYG che puoi usare per contenuti editoriali estesi nelle pagine o negli articoli. Non è un elenco esaustivo, ma mostra la maggior parte degli elementi comuni di cui potresti aver bisogno!

Usa class="intro" per un testo di apertura che deve risultare più evidente di un paragrafo standard, pur mantenendo l'aspetto di contenuto della pagina.

Usa class="small" per note secondarie che devono restare leggibili, ma avere chiaramente meno rilievo rispetto al testo principale.

Usa class="citation" per note sulle fonti, crediti compatti, didascalie o osservazioni editoriali.

Testo editoriale

Le pagine editoriali possono combinare importanza elevata, enfasi, testo rimosso, termini evidenziati e inline code-style labels senza interrompere il ritmo.

Usa <mark> per attirare l'attenzione su una frase, <del> o <s> per testo rimosso o non più attuale e <code> per etichette letterali, nomi di file, impostazioni o brevi riferimenti tecnici.

Usa class="callout" su un paragrafo per brevi indicazioni, note sul lancio, contesto d'acquisto o informazioni importanti sulle policy.

Gerarchia dei titoli

I titoli devono creare una struttura chiara. Riserva <h1> al titolo principale della pagina quando il template non ne fornisce già uno, quindi usa <h2> e <h3> per organizzare le sezioni della pagina.

Titolo di livello uno per l'artwork

Titolo di livello due per le sezioni della pagina

Titolo di livello tre per le sottosezioni

Titolo di livello quattro per i dettagli raggruppati

Titolo di livello cinque per le etichette compatte
Titolo di livello sei per i metadati

Semantica inline

Usa <kbd> per comandi da tastiera come Ctrl + K, <abbr> per abbreviazioni come SEO e <dfn> quando introduci un termine come contenuto strutturato.

Usa <time> per date come , <cite> per titoli o fonti come The Darkroom Journal, <var> per variabili come n e <samp> per output di esempio come Salvataggio completato.

Gli esempi inline includono anche grassetto, corsivo, sottolineato, barrato, pedice, apice e un link al prodotto.

Indirizzo

Usa <address> per dettagli di contatto o di localizzazione, non per la formattazione postale generica.

Negozio principale
123 Example Avenue
New York, NY 10001
Visualizza le sedi

Elenchi

Gli elenchi devono facilitare la consultazione rapida, lasciando comunque spazio sufficiente per testare a capo, link e formattazione inline.

Elenco non ordinato con passaggi ordinati

  • Confronta i prodotti con attenzione. Inizia con un altro artwork in evidenza, quindi esamina i dettagli più importanti per l'uso previsto.
  • Pianifica il percorso d'acquisto. Un elemento dell'elenco può includere passaggi ordinati nidificati:
    1. Conferma i requisiti di dimensioni, materiale o stile.
    2. Esamina i contenuti di supporto, incluse le FAQ e le pagine sulle policy.
    3. Scegli l'opzione che bilancia meglio vestibilità, finitura e disponibilità.
  • Usa formulazioni concise, ma includi abbastanza contesto perché ogni elemento abbia senso anche durante una lettura rapida.

Elenco ordinato con note non ordinate

  1. Presenta lo scopo della pagina con un paragrafo chiaro e un link pertinente.
  2. Sostieni il punto principale con dettagli utili:
    • Evidenzia i termini chiave con moderazione.
    • Usa <code> per etichette o frammenti letterali.
    • Includi testo in grassetto o in evidenza solo quando aiuta il lettore.
  3. Concludi la sezione con un pensiero successivo chiaro, non con un frammento senza seguito.

Citazioni e callout

Usa i blocchi di citazione per testi tratti da fonti, testimonianze, estratti editoriali o dichiarazioni che richiedono una separazione visiva dal testo circostante.

Il contenuto di prodotto più utile risponde alle domande pratiche, offrendo al tempo stesso un punto di vista distintivo del brand.

Team editoriale Darkroom

Usa class="pullquote" quando una citazione deve avere maggiore rilievo visivo rispetto a un normale blocco di citazione.

Nota sul merchandising: usa class="callout" su un contenitore a blocco quando il callout richiede più frasi, link o una formattazione inline più ricca attorno a prodotti come questo artwork in evidenza.

Immagini

Usa le figure quando un'immagine richiede una didascalia. Gli esempi seguenti usano <figure class="embed image"> e <figcaption class="caption"> per mostrare il posizionamento della didascalia in basso e in alto.

Immagine di esempio per la guida di stile
Usa class="caption" per il testo descrittivo della didascalia sotto un'immagine.
Una didascalia può comparire anche prima dell'immagine quando il contesto deve venire prima.
Esempio di immagine secondaria per la guida di stile

Video ospitato

Usa l'elemento <video> standard per contenuti MP4 ospitati. Mantieni il markup semplice, a meno che il layout circostante non richieda una struttura aggiuntiva.

Iframe YouTube

Usa l'iframe YouTube standard quando un video deve essere incorporato da YouTube.

Tabella

Le tabelle devono includere intestazioni utili e contenuti vari nelle celle, così che i lettori possano confrontare rapidamente i dettagli.

Confronto tra artwork di esempio
Caratteristica Opzione standard Opzione in evidenza Note
Link principale Prodotto uno Prodotto due I link nelle celle della tabella devono essere facili da riconoscere e toccare.
Adattamento editoriale Descrizione breve con enfasi leggera. Una descrizione più lunga che va a capo su più righe e include testo in grassetto per la frase più importante. Usa celle di lunghezza variabile per verificare allineamento e spaziatura.
Dettaglio sulla cura Spot clean Professional care recommended Il codice inline può identificare etichette letterali, istruzioni di cura o specifiche compatte.
Disponibilità Limitata Disponibile online e presso il negozio principale. Le celle della tabella possono includere evidenziazioni, link e indicazioni lunghe quanto una frase.

Elenco di definizioni

Usa <dl> per coppie termine-descrizione, voci di glossario, specifiche compatte o metadati raggruppati.

Paragrafo introduttivo
Usa class="intro" per creare un paragrafo di apertura più incisivo.
Didascalia
Usa class="caption" sulle didascalie delle figure che richiedono uno stile coerente.
Pull quote
Usa class="pullquote" quando una citazione deve diventare un momento editoriale più incisivo.

Blocco di codice

Usa <pre> con <code> per esempi più lunghi in cui spaziatura e interruzioni di riga sono importanti.

<section>
  <h2>Care notes for artwork</h2>
  <p class="intro">Begin with a concise overview that helps readers orient themselves.</p>
  <ul>
    <li><strong>Store carefully.</strong> Keep the item clean, dry, and protected between uses.</li>
    <li><em>Review the details.</em> Link to related products or supporting pages where useful.</li>
  </ul>
  <p class="small">Use small text for secondary reminders, not primary instructions.</p>
</section>

Toggle

Usa <details> e <summary> per contenuti opzionali che devono essere disponibili senza sovraccaricare la pagina principale.

Esempio di contenuto espandibile

I blocchi di dettagli sono utili per policy dense, informazioni sulla cura, indicazioni sulle taglie o note editoriali opzionali.

Separatori ed elenchi di attività

Usa <hr> quando una separazione tematica è più chiara di un altro titolo. Gli input con casella di controllo possono comparire nei contenuti in stile attività quando la pagina deve mostrare progressi o una checklist.

  • Elemento dell'attività completato con progressi importanti già raggiunti.
  • Elemento dell'attività non completato con contesto di supporto ancora in sospeso.

Quando ogni sezione ha uno scopo chiaro, i contenuti estesi restano facili da consultare, utili da leggere e coerenti in tutta l'esperienza Darkroom.