auf jeder Seite anderen Boxeninhalt

Seiten mit unterschiedlichen Boxen-Inhalt

Wir können auf jeder erstellten Seite anderen Boxen-Inhalt anzeigen lassen.

- in diesem Beispiel gehen wir von 3 Seiten aus.
- auf 3 Seiten sollen immer 2 Boxen zu sehen sein.
- 2 Boxen bekommen den Klassennamen boxen1
- 2 Boxen bekommen den Klassennamen boxen2
- 2 Boxen bekommen den Klassennamen boxen3
- siehe dazu "Schritt 1" :

---

Schritt 1: HTML-Code für die Rechte Box

- auf "Design" gehen
- auf "Designeinstellungen
- nun unten auf "Erweiterte Einstellungen anzeigen"
- dort finden wir das Feld "rechte Box"
- wir fügen dort unsere 6 Boxen ein

<div class="boxen1">
<h3> Titel Box 1 </h3>
Hier Inhalt für Box 1
</div>

<div class="boxen1">
<h3> Titel Box 2 </h3>
Hier Inhalt für Box 2
</div>


<div class="boxen2">
<h3> Titel Box 1 </h3>
Hier Inhalt für Box 1
</div>

<div class="boxen2">
<h3> Titel Box 2 </h3>
Hier Inhalt für Box 2
</div>


<div class="boxen3">
<h3> Titel Box 1 </h3>
Hier Inhalt für Box 1
</div>

<div class="boxen3">
<h3> Titel Box 2 </h3>
Hier Inhalt für Box 2
</div>

Wenn Ihr pro Seite 3 Boxen sehen möchtet, benötigt Ihr 9 Boxen.
Von jedem Klassennamen also eine zusätzliche Box.

---

Der CSS-Code

Nun folgt der CSS-Code für das Aussehen aller Boxen.
Die werden erstmal unsichtbar gemacht mit display:none;

<style type="text/css">
<!--

/* Aussehen der neuen Boxen */
.boxen1, .boxen2, .boxen3 {
    display: none;
    width: 92%;
    min-height: 100px;
    padding: 10px;
    margin: 0px 0px 20px 0px;
    border: 1px solid #ccc;
    overflow:hidden;
}

/* Titelfelder der Boxen */
#sidebar div h3 {
    width: 240px;
    background-color: #333333;
    color: #FFFFFF;
    font-size:14px;
    margin:-10px 0px 20px -20px;
    padding-left: 30px;
}
-->
</style>

Ist der CSS-Code im Feld "Text ÜBER Design" eingefügt, ist keine Box zu sehen.

---

Sichtbar machen

- gehe auf "Seiten"
- wähle gewünschte Seite aus
- nun ist die Seite zum Bearbeiten offen
- oben im Editor (Werkzeugleiste) auf "Quellcode" klicken
- wir machen die Boxen sichtbar mit der Klasse boxen1
- füge zu Beginn der Seite ein:

<style type="text/css">
.boxen1 { display: block!important; }
</style>

- wähle nun die nächste Seite aus
- wieder oben im Editor auf "Quellcode" klicken
- wir machen die 2 Boxen sichtbar mit der Klasse boxen2
- füge zu Beginn der Seite ein:

<style type="text/css">
.boxen2 { display: block!important; }
</style>

- wähle nun die dritte Seite aus
- wieder oben im Editor auf "Quellcode" klicken
- wir machen die Boxen mit Klasse boxen3 sichtbar
- füge zu Beginn der Seite ein:

<style type="text/css">
.boxen3 { display: block!important; }
</style>

---

Mehr als 3 Seiten ?

Soll auf mehreren Seiten der gleiche Boxeninhalt angezeigt werden, bekommen die gewünschten Seiten den Code zum "sichtbar" machen.

Beispiel:
Du fügst in 2 Boxen einige Kontaktdaten ein. Zum Beispiel einen "Skype-Chat-Link", oder Facebook-Messenger-Link, Link zu Deinem Youtube-Kanal, deiner Instagram-Seite, eine ICQ Nummer, Deine Handynummer, oder ein Foto von Dir, Deine Emailadresse, deine Google Plus Profilseite. Und diese Boxen werden sichtbar gemacht auf den Seiten : "Gästebuch" / "Kontakt" / "Impressum" .