EK Boxen
Schritt 1:- Gehe auf "Design einstellen"
- Dann auf "Erweiterte Einstellungen" ...
- dort fügst du in "Inhalt der Box rechts" unter "Einfachter Text" diesen HTML code ein:
<div class="boxen"> <h2>Überschrift</h2> Hier Dein Inhalt Box 1 </div> <div class="boxen"> <h2>Überschrift</h2> Hier Dein Inhalt Box 2 </div> <div class="boxen"> <h2>Überschrift</h2> Hier Dein Inhalt Box 3 </div>
Schritt 2:
- In "Text über Design ...
- fügst du den Code zwischen <style type="text/css"><!-- und </style> ein:
/* Aussehen der rechten Boxen */
.boxen {
width: 90%;
min-height: 100px;
padding: 10px;
margin-top: 30px;
background-color: #DCC006;
border: 1px solid #c9c9c9;
overflow: hidden;
transition: all 0.5s linear 0s;
}
/* Aussehen Balken mit Ueberschrift */
.boxen h2 {
background-color: #F5F2F2;
color: black;
font-size: 14px;
margin: -10px 0px 20px -20px;
width: 270px;
padding-left: 30px;
box-shadow: 3px 5px 10px 5px #F5F2F2;
}
.boxen:hover {
background-color: #1275B3;
transition: all 0.5s linear 0s;
}
.boxen {
width: 90%;
min-height: 100px;
padding: 10px;
margin-top: 30px;
background-color: #DCC006;
border: 1px solid #c9c9c9;
overflow: hidden;
transition: all 0.5s linear 0s;
}
/* Aussehen Balken mit Ueberschrift */
.boxen h2 {
background-color: #F5F2F2;
color: black;
font-size: 14px;
margin: -10px 0px 20px -20px;
width: 270px;
padding-left: 30px;
box-shadow: 3px 5px 10px 5px #F5F2F2;
}
.boxen:hover {
background-color: #1275B3;
transition: all 0.5s linear 0s;
}
Schritt 3:
Nun musst du die Breite der Boxen bestimmen.
Unter ...
- ... "Design Einstellen" ...
- ..."Erweiterte Einstellungen"...
- ... bei "Breite der rechten Box rechts" auf 300 Pixel stellen (andere Größen auch möglich, jedoch kann es sein, dass ein Fehler entsteht)
Schritt 4:
Überschrifft und Inhalt einfügen.
Diese Boxen basieren auf den Code von Clean-test.de.tl