Ich (T-2-the-imo) brauche fast auf jeder Seite Teaser auf der Startseite. Im groben sehen Teaser immer gleich aus: farbiger Hintergrund, abgerundete Ecken, Teaserheadline/-text und ein Button, der meist auf gleicher Höhe sein soll.
- In einem Text-/oder HTML-Widget fügst Du den HTML-Code ein:
<div class="teaser">
<h3>Teaserheadline</h3>
<p>
Teasertext mit ein bis zwei informativen Sätzen.
</p>
<a href="#" title="Link zur Zielseite als Button">Weitere Informationen</a>
</div> - dieses Widget kopierst Du und fügst es in ein Spaltenelement ein, dann folgt inhaltlich die Anpassung
- Du brauchst 3 Teaser? Dann machst Du drei Spalten und fügst da 3 mal das HTML-Widget ein.
- Der zugehörige CSS-Code wandert in den Head-Bereich zwischen die <style>-Tags.
- Um die Buttons auf einer Höhe sitzen zu haben, ist es notwendig, die ID des umgebenden Spaltenelements herauszufinden und diesem dann ensprechende CSS-Anweisungen zu geben.
/* Teaser-Style */
.teaser {
border: 2px solid #666;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #3e312f;
min-height: 343px;
padding: 15px;
background: #333;
}
/* Button im Teaser */
.teaser a {
display: block;
margin-top: 10px;
padding: 5px 7px;
background: #9d3145;
border-radius: 3px;
color: #fff !important;
text-decoration: none !important;
vertical-align: bottom;
}
/* Buttons auf gleicher Höhe innerhalb des Spaltenelements mit der ID #cc-m-123456789 */
#cc-m-123456789 .teaser a {
bottom: 22px;
position: absolute;
}
#cc-m-123456789 {
position: relative;
}
