Design Clean
    >> Tipps zum anpassen

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" .





Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :30 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben