Vorlagen

Mit Vorlagen definieren sie die Struktur bzw. das Aussehen von Standorten, Veranstaltungen, Seiten oder Beiträgen. Das ist sehr nützlich, wenn sie möchten, dass etwas in ihrem Guide immer den selben Look-and-Feel hat.

Neue Vorlage erstellen

  • Unter ADMIN – Vorlagen sind alle ihre angelegten Vorlagen aufgelistet.
  • Zum Erstellen einer neuen Vorlage klicken sie oben rechts auf “Vorlage anlegen”.
  • Definieren sie einen Namen für die Vorlage und vor allem rechts oben den Typ der Vorlage, diese sind:
    • Standort Content > Definiert den (vorgegebenen) Content / Freitext eines Standorts
    • Veranstaltung Content > Definiert den (vorgegebenen) Content / Freitext eines Events
    • Seiten Content > Definiert den (vorgegebenen) Bereich einer Seite
    • Beitrag Content > Definiert den (vorgegebenen) Bereich eines Beitrags
  • Die Option “Zwinged für alle vorgeschrieben” gibt an, ob diese Vorlage für alle neuen Objekte dieses Typs automatisch geladen wird. Das ist nützlich, wenn sie z.B. neue Standorte mit Öffnungszeiten-Vorlagen erstellen wollen.
  • Content erstellen
    • Im Hauptbereich geben sie den Text mit dem bekannten Rich-Text-Editor ein.
    • Tipp: Im Editor Menü unter Tools – <> Source Code können Sie freien HTML-Code eingeben. Damit erstellen sie zB.  ein Kachelmenü mit Bildern, welches auf verschiedene Bereiche ihrer Guide App verlinkt (siehe auch das Beispiel unten).
    • Wichtig: Wenn sie HTML-Code für die Vorlage nutzen, achten sie unbedingt auf responsive HTML, sodass die HTML-Seiten vor allem am Smartphone wie auch auf der SEO-optimierten Website app.simplemapp.com/<IhreGuideID> gut aussehen.
  • Um die Vorlage zu erstellen, klicken sie auf den Anlegen-Button rechts unten.
  • Die erstellte Vorlage lässt sich beim Erstellen vom definierten Typ (Standort, Veranstaltung, Seite, Beitrag) als Vorlage auswählen

Beispiel: Eine Vorlage für ein Kachelmenü mit Bildern erstellen

Wir erstellen hier eine responsive HTML-Seite mit Bildern, die auf dem Desktop 3 Bilder nebeneinander zeigt, und auf dem Smartphone 2 Bilder. Diese Vorlage möchten wir für die “Startseite” als “Willkommen”-Seite unserer Guide App verwenden. Als Vorlage dazu dient uns dieser Artikel, wo sie bei Problemen oder für Änderungen auch nachlesen können.

Erstellen sie dazu unter ADMIN – Vorlagen – “Vorlage anlegen” eine Vorlage vom Typ “Seiten Content”. Als Name der Vorlage verwenden sie am besten “Kachelmenü”.

1. Webansicht (3 Kacheln pro Reihe)

Bildschirmfoto 2016-09-06 um 18.01.49

2. Mobile Ansicht (2 Kacheln pro Reihe)

Bilderkachelmenü - Mobile Ansicht

I. Sourcecode der Vorlage einfügen

Erstellen sie unter Admin – Vorlage – Vorlage anlegen eine neue Vorlage und geben sie diese unter Content Erstellen im Editor als HTML-Sourcecode ein. Dazu klicken Sse im Editor in der Menüzeile (File, Edit, ….. Tools) auf den letzten Menüpunkt Tools und wählen den Submenüpunkt “<> Sourcecode” aus. Genau hier kopieren sie den folgenden HTML-Code hinein:

<!DOCTYPE HTML> 
<!-- #### README HOWTO CREATE A PAGE WITH PICTURE TILES http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ 
#########
-->
<html lang="de-DE"> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Willkommen</title>
  
  <style type="text/css">
body {
   margin: 0;
   padding: 0;
   background: #EEE;
}
.wrap {
   overflow: hidden;
   margin: 10px;
}
.box {
   float: left;
   position: relative;
   width: 20%;
   padding-bottom: 20%;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
.boxInner img {
   width: 100%;
height: auto;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: 0px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
   font: 12px/14px 'Open Sans',Arial,sans-serif;
   font-weight: bold;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
   /* Smartphone view: 2 tiles */
   .box {
      width: 50.0%;
      padding-bottom: 50.0%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles (NOTE: if you want to display 4 tiles, change %-values to 25%) */
   .box {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
} 
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
   }
}
  </style> 
</head> 
<body>
<div class="wrap"><!-- Define all of the tiles: -->
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" />
<div class="titleBox">Link 1</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
<div class="titleBox">Link 2</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
<div class="titleBox">Link 3</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
<div class="titleBox">Link 4</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
<div class="titleBox">Link 5</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
<div class="titleBox">Link 6</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
<div class="titleBox">Link 7</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
<div class="titleBox">Link 8</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
<div class="titleBox">Link 9</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
<div class="titleBox">Link 10</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
<div class="titleBox">Link 11</div>
</div>
</div>
<div class="box">
<div class="boxInner"><img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
<div class="titleBox">Link 12</div>
</div>
</div>
</div>
<!-- /#wrap -->
</body>
</html>

II. Anpassungen der Vorlage (optional)

Sie können die angezeigten Kacheln pro Reihe verändern, indem sie im <head> unter @media bei width und padding-bottom die Prozentzahlen entsprechend ändern.

@media only screen and (max-width : 480px) {
/* Smartphone view: 2 tiles */
.box {
width: 50.0%;
padding-bottom: 50.0%;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 3 tiles */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles (NOTE: if you want to display 4 tiles, change %-values to 25%) */
.box {
width: 33.3%;
padding-bottom: 33.3%;
}
}&lt;/code&gt;
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
padding-bottom: 25%;
}
}

III. Anwendung der Vorlage (des Kachelmenüs) auf einer Seite

Nachdem sie die Vorlage unter Typ “Seiten Content” gespeichert haben, erstellen sie eine neue Seite (ADMIN – Seite – “Seite anlegen”) und Typ “Content erstellen”. Um ihre erstellte Vorlage auszuwählen laden sie ihre Vorlage “Kachelmenü” rechts unter “Vorlage laden”. Der Inhalt der Seite im Editor zeigt nun die Bilderkacheln an. Nun müssen sie nur noch die Bilder ersetzen, die Links einfügen und die Unterschrift anpassen. ACHTUNG: das verändert die Seite selbst und nicht die Vorlage (die Vorlage wird bei Auswahl der Vorlage kopiert).

  1. Ersetzen sie die Bilder mit ihren eigenen. Bilder für Seiten müssen im Internet liegen, z.B. auf ihrer eigenen Homepage, Dropbox oder ähnlich. Die Bilder sollten für ein optimales Ergebnis des Kachelmenüs wie die Vorlage 460×460 Pixel groß sein.
    Zum Ersetzen der Bilder markieren das zu ersetzende Bild, klicken im Editor rechts auf das Bild Symbol (Insert/edit image) und passen die Source an. Alternativ, oder falls das nicht funktioniert, wählen sie “Editor – Tools – <> Source Code” und suchen sie nach den “<img src=”http:// … > Tags, wo sie die src ersetzen.
  2. Fügen sie die Links ein. Markieren sie dazu die Bilder und klicken im Editor auf das Link Symbol (vorletztes rechts; Achtung: rechte Maustaste – Edit/Insert Link funktioniert hier nicht). Wählen sie im Popup nun aus der “Link list” das Ziel, wohin sie bei Klick/Tap auf das Bild innerhalb ihres Guides verlinken wollen. Sie können den eingefügten Link immer im Sourcecode (Tools – <> Sourcecode) überprüfen.
  3. Nun ändern sie noch die Bildunterschrift mit dem Linkziel. Achten sie dabei darauf, dass Design nicht zu zerstören. Am einfachsten ist es dabei, “von der Mitte her” zu editieren, damit sie nicht in den falschen Bereich kommen. Alternativ können sie natürlich immer den Sourcecode editieren.

Geschafft! Ihr neues Kachelmenü ist einsatzbereit. Ihre App User werden es lieben 🙂

Tipp: Falls etwas schiefgegangen ist, lässt sich der letzte Schritt mit STRG+z rückgängig machen.