Entwicklermodus

Übersicht

Dieser Beitrag thematisiert den Entwicklermodus im Webseiten-Editor. Er erlaubt Ihnen direkten Zugang zu HTML und CSS der Seite. Für einfachen Zugang, ist der Code in separate Dokumente aufgeteilt.

Tipps für die Benutzung des Entwicklermodus

  1. Stellen Sie sicher, dass die innerhalb der Spalten bleiben. Seiten sind in eine Spalten- und Zeilenstruktur aufgeteilt. Das bedeutet, dass jede Zeile eine Spalte enthält, in welcher sich wiederum der Inhalt befindet. Wenn Sie Ihre eigene HTML hinzufügen oder bearbeiten -- stellen Sie sicher, dass es innerhalb einer Spalte ist. 
  2. Lassen Sie die Kategorien an Ort und Stelle. Das System ist auf den vielen Kategorien aufgebaut, die zu den Elementen hinzugefügt werden. Wenn Sie eine bereits existierende Kategorie entdecken (beginnt normalerweise mit dm), lassen Sie diese an ihrem Ort. Wenn Sie Kategorien entfernen, ist es möglich, dass die Seite nicht gleich aussieht, wenn Sie sie in der Vorschau ansehen.
  3. Beachten Sie die Größe der Kategorien. Spalten haben einen Größenwert, der als Kategorie hinzugefügt wird, so wie groß-6 oder klein-12. Dies bestimmt die Größe der Spalten innerhalb der Zeile. Sie sollten diese dort platziert lassen -- da Sie das wichtigste Element ist, um die Größe der Zeile auf verschiedenen Geräten einzustellen.
  4. Vermeiden Sie das Ändern von Verlängerungen. Im HTML werden Sie bereits Platzhalter für Elemente auf der Seite sehen. Wenn möglich, vermeiden Sie es diese zu bearbeiten, besonders die darin enthaltenen Datenwerte. Diese zu bearbeiten kann Widgets zerstören, wenn Sie wieder zurück in den regulären Editor schalten.

Häufige Tücken

Error Argumetation
DUPLICATE_ID Jedes Element muss eine spezifische ID haben
INVALID_ELEMENT_LOCATION Alle Elemente, die sich in einer Spalte befinden, müssen sich auch in einer Zeile befinden

BAD_PROPORTION

Eine Zeile muss aus 12 Spalten bestehen
INVALID_CLASS_FOR_ELEMENT Eine systemspezifische Kategorie wurde zu einem nicht gültigen Element hinzugefügt

HTML Editor

Developer Mode ermöglicht Ihnen Ihre Seiten HTML, spezifisch für jede Seite, zu bearbeiten. Jede Seite enthält eine HTML Datei, die die Seite für alle Geräte (klein, mittel, groß) strukturiert.

Zusätzlich erhalten Sie unter Seiten HTML/CSS Zugang zu den HTML Fußnoten, die zu jeder Ihrer Seiten hinzugefügt werden.

Zeilen und Spalten

Der Entwicklermodus ermöglicht Ihnen die Kontrolle über das Layout Ihrer Seite. Bestimmte Strukturen müssen jedoch beibehalten werden.

All Seiten unterliegen einer Zeilen- und Spaltenstruktur. Eine typische HTML, die Sie auf Ihrer Seite eventuell finden, könnte so aussehen:

<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">
    <!-- *** INSERT YOUR HTML BELOW *** -->
    <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575">
     This site uses rows!
    </div>
   </div>
  </div>
 </div>

Hier werden Sie eine Zeile sehen (dmRespRow), die von einer Spalte umgeben ist (dmRespColsWrapper), die widerum auch von einer Spalte umgeben ist (dmRespCol). Während Sie Ihre HTML kodieren, sollten Sie die Struktur beibehalten.

Innerhalb jeder Zeile können sich mehrere Spalten befinden. Jede Spaltenbreite ist basierend auf einem 12-Abschnitte Raster berechnet. Das bedeutet, dass die Breite der gesamten Spalten in einer Zeile auf jedem Gerät insgesamt ein Mehrfaches von 12 sein sollte (klein für Mobiltelefon, mittel für Tablet, groß für Desktop). In dem oberen Beispiel haben wir nur eine Spalte. Wenn wir eine weitere hinzufügen wollten, die die gesamte Breite auf dem Mobiltelefon, 3/4 der Breite auf dem Tablet und 1/2 der Breite auf dem Desktop einnehmen würde, dann sähe das folgendermaßen aus:

<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">
    <!-- *** INSERT YOUR HTML BELOW *** -->
    <div class="dmNewParagraph" data-dmtmpl="true" id="1397549575">
     This site uses rows!
    </div>
   </div>
   <div class="dmRespCol small-12 medium-9 large-6" id="100">and columns</div>
  </div>
 </div>

Spezifische IDs

Damit das System Elemente auf einer Seite nachvollziehen kann, muss jedes Element eine eigene ID besitzen. Es wird empfohlen Ihre IDs mit 100 zu beginnen und dann zu steigern.

CSS-Editor

Während Sie Ihre CSS Seiten bearbeiten, haben Sie Zugang zu einer Reihe von CSS Dateien. Unter Seiten HTML/CSS können Sie auf seitenspezifische CSS zugreifen. Hier finden Sie CSS Dateien, die für alle Geräte gelten; Desktop/Tablet (diese teilen sich CSS) und Mobiltelefon.

Unter Seiten HTML/CSS finden Sie eine CSS Datei, die für jede Seite Ihrer Webseite gilt, eine Motiv CSS Datei, die allgemeine Veränderungen enthalten wird, die Sie an Ihrem Motiv vorgenommen haben (so wie die allgemeine Änderung Ihrer Schriftart) und eine allgemeine CSS Datei für jedes Gerät.