Modalità sviluppatore

Panoramica

L'articolo tratta della Modalità sviluppatore nell'editor del sito Web. Lo strumento consente di ottenere un accesso diretto ai codici HTML e CSS del sito. Il codice viene organizzato in file separati per un accesso semplificato. 

Suggerimenti per utilizzare la Modalità sviluppatore

  1. Assicurati di rimanere all'interno delle colonne. I siti vengono suddivisi in una struttura a righe e colonne. Ciascuna riga contiene una colonna che a sua volta contiene i contenuti. Quando aggiungi o modifichi il tuo codice HTML, assicurati che sia situato all'interno di una colonna.
  2. Lascia le classi al loro posto. Il sistema fa affidamento alle numerose classi aggiunte agli elementi. Se visualizzi una classe esistente (generalmente inizia con dm) lasciala dove si trova. Se le classi vengono rimosse l'aspetto del sito potrebbe essere diverso quando si attiva l'anteprima.
  3. Annota la dimensione delle classi. La dimensione delle colonne viene aggiunta come suffisso alla classe per cui si avrà large-6 o small-12. Ciò determina la dimensione delle colonne all'interno di quella riga. Questi dati devono essere mantenuti così come sono in quanto rappresentano la parte principale della dimensione della riga su diversi dispositivi.
  4. vita di modificare le estensioni, se possibile. Nel linguaggio HTML, vedrai i segnaposto degli elementi già posizionati su questa pagina. Se possibile, evita di modificarli, in particolare i valori dei dati al loro interno. La modifica di tali dati potrebbere interrompere il funzionamento dei widget una volta che si torna all'editor normale.

Errori più comuni

Errore Motivo
DUPLICATE_ID Ciascun elemento deve essere dotato di un ID univoco
INVALID_ELEMENT_LOCATION Tutti gli elementi devono essere posizionati in una colonna che a sua volta deve essere situata in una riga.

BAD_PROPORTION

È possibile aggiungere fino a 12 colonne in una riga
INVALID_CLASS_FOR_ELEMENT È stata aggiunta una classe automaticamente assegnata dal sistema a un elemento non valido

Editor HTML

La Modalità sviluppatore consente l'accesso per modificare il codice HTML dei siti per pagina. Ciascuna pagina sarà costituita da un file HTML che rappresenta la struttura del sito per tutti i tre dispositivi piccolo, medio e grande.

Inoltre, avrai l'accesso al codice HTML del piè di pagina, aggiunto in fondo a ogni pagina in HTML/CSS del sito.

Righe e colonne

La Modalità  sviluppatore fornisce un grande controllo sul layout del sito, sebbene sia necessario mantenere determinate strutture.

Tutti i siti rispettano la struttura righe e colonne. Ecco un tipico estratto di codice HTML che è possibile trovare nel sito: 

<div class="dmRespRow" style="text-align: center;" id="1760459017">
  <div class="dmRespColsWrapper" id="1104281418">
   <div class="dmRespCol small-12 medium-12 large-12" id="1773415070">
    <!-- *** INSERISCI QUI IL TUO CODICE HTML *** -->
    <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575">
     Il sito utilizza le righe!
    </div>
   </div>
  </div>
 </div>

 

Verrà visualizzata una riga (dmRespRow) incorporata in un wrapper di una colonna (dmRespColsWrapper​) adattata intorno a una colonna (dmRespCol). Durante la creazione del codice HTML dovrà essere mantenuta questa stessa struttura.

AAll'interno di ciascuna riga si avranno più colonne. La larghezza di ciascuna colonna viene calcolata con un sistema a griglia di 12 sezioni. Ciò significa che la larghezza del totale delle colonne in una riga deve essere aggiunta a un multiplo di 12 su ciascun dispositivo (small per i cellulari, medium per i tablet e large per il desktop).  Nell'esempio precedente c'è solo una colonna, ma se volessimo aggiungerne un'altra occuperà l'intera larghezza disponibile per il cellulare, 3/4 della larghezza sul tablet e 1/2 della larghezza sul desktop e si otterrà un risultato simile a questo: 

<div class="dmRespRow" style="text-align: center;" id="1760459017">
  <div class="dmRespColsWrapper" id="1104281418">
   <div class="dmRespCol small-12 medium-3 large-6" id="1773415070">
    <!-- *** INSERISCI IL CODICE HTML DI SEGUITO *** -->
    <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575">
     Questo sito utilizza righe
    </div>
   </div>
   <div class="dmRespCol small-12 medium-9 large-6" id="100">e colonne</div>
  </div>
 </div>
 

 

ID univoci

Affinché il sistema tenga traccia degli elementi su un sito ciascun elemento deve essere dotato di un ID univoco. Si consiglia di far iniziare gli ID da 100 e procedere incrementando tale numero.

Editor CSS

Durante la modifica del codice CSS del sito disponi dell'accesso a un gruppo di file CSS. Nella pagina HTML/CSS è possibile accedere al codice CSS specifico della pagina. Qui puoi trovare i file CSS che verranno applicati su tutti i dispositivi, desktop/tablet (condividono lo stesso CSS) e cellulari.

Sotto la voce HTML/CSS sito è presente un file CSS che verrà applicato a ciascuna pagina sul sito, un tema di un file CSS che conterrà le modifiche globali effettuate sul tema (come la modifica globale dello stile del carattere) e un file CSS per ciascun dispositivo.dispositivo.