Lesefortschritt:

Stylishe Ribbons in 15 Varianten – ein Weihnachtspräsent von Dr. Code

24. Dezember 2025 | CSS-Stylesheet, Divi-Theme

Trick # 523 | Dieser Beitrag beinhaltet 7880 Wörter. – Geschätzte Lesezeit: ca. 40 Minuten.

Divi-Module lassen sich recht einfach mit einem kleinen Textbanner – einem Ribbon – darstellen und hervorheben. Wir zeigen Ihnen heute, wie Sie solche Ribbons mittels CSS-Code erstelln können. Sie können aus 15 Varianten wählen.

In unserem Beispiel verwenden wir ein Informationstext-Modul (Blurb-Modul), welches wir mit einerm Ribbon-Text ergänzen. Sie können aber auch andere Module verwenden. Etwa das Text-Modul, ein Bild oder beliebige andere Divi-Module.

Nebenan zeigen wir eine Beispiel, wie das mit einem Bild-Modul aussehen könnte:

Ribbon

Sie benötigen dafür zweierlei Module:

Zunächst ein Text-Modul. Setzen Sie dessen unteren Rand (margin und padding) im «Design»-Tab unter «Zwischenräume» auf 0px.
Weiter benötigen Sie ein Modul Ihrer Wahl, auf welchem der Ribbon angezeigt werden soll – in unserem Fall verwenden wir ein Blurb-Modul. Setzen Sie dessen oberen Rand (margin und padding) im «Design»-Tab unter «Zwischenräume» auf 0px. Befüllen Sie dieses Modul mit dem von Ihnen gewünschten Inhalt.

Nun geht es an den Ribbon-Trick:

Wählen Sie die gewünschte Ribbon-Darstellung aus unseren 15 untenstehenden Varianten.
Dem Text-Modul fügen Sie nun den HTML-Code des entsprechenden Ribbons hinzu. Tun Sie dies unbedingt in der HTML- oder Text-Ansicht des Editors und nicht in der WYSIWYG- oder Design-Ansicht.
Passen Sie den darzustellenden Ribbon-Text nach Ihren Wünschen an.
Den CSS-Code des Ribbons kopieren Sie ebenfalls und fügen ihn dem CSS-Stylesheet Ihrer Website hinzu. Dies geschieht im Backend unter Design/Customizer/Zusätzliches CSS.
Die Farben des CSS-Codes können Sie natürlich nach Belieben anpassen.

Das war’s auch schon.

Es folgen nun die 15 unterschiedlichen Ribbons, aus welchen Sie wählen können:

Ribbon #1

Ribbon-Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon1 {
color: #fff!important;
font-size: 15px;
line-height: 40px!important;
right: 7px;
top: -35px;
padding: 0 10px;
transform-origin: left bottom;
transform: translate(29.3%) rotate(45deg);
position: absolute;
z-index: 5;
}

.ribbon1::before {
content: "";
position: absolute;
border-bottom: 40px solid #26c15f;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
left: -30px;
right: -30px;
bottom: 0;
z-index: -4;
}

.ribbon1::after {
content: "";
position: absolute;
left: -30px;
right: -30px;
bottom: -20px;
border-bottom: 20px solid transparent;
border-left: 20px solid #277644;
border-right: 20px solid #277644;
z-index: 5;
}

HTML-Code

<p class="ribbon1">Ribbon-Text</p>

Ribbon #2

Ribbon
Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon2 {
color:#fff;
background-color: #0c71c3;
font-weight: 600;
font-size: 17px;
text-align:center;
border-radius: 60% 60% 60% 60%;
box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.25);
right: -15px;
top: -35px;
padding-top:18px;
line-height: 1.2em;
position: absolute;
width: 85px;
height: 85px;
z-index: 10;
}

HTML-Code

<div class="ribbon2"><p>Ribbon<br />Text</p></div>

Ribbon #3

Ribbon

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon3 {
border: 1px dashed;
box-shadow:0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6);
background: #57DD43;
text-align: center;
width: 200px;
height: 40px;
line-height: 40px;
position: absolute;
top: 30px;
right: -50px;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index:10;
}

.ribbon3_wrap {
width: 100%;
height: 188px;
position: absolute;
top: -8px;
left: 8px;
overflow: hidden;
}
.ribbon3_wrap:before, .ribbon3_wrap:after {
content: "";
position: absolute;
}
.ribbon3_wrap:before {
width: 40px;
height: 8px;
right: 100px;
background: #4D6530;
border-radius: 8px 8px 0px 0px;
}
.ribbon3_wrap:after {
width: 8px;
height: 40px;
right: 0px;
top: 100px;
background: #4D6530;
border-radius: 0px 8px 8px 0px;
}

HTML-Code

<p class="ribbon3_wrap"><span class="ribbon3">Ribbon</span></p>

Ribbon #4

T
E
X
T

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon4 {
color: #ffffff !important;
background: #F47530;
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.4);
font-family: 'Ubuntu',Helvetica, Arial, Lucida, sans-serif;
font-weight: 700;
text-transform: uppercase;
text-align: center;
font-size: 16px;
line-height: 1.2em;
width: 60px;
padding: 10px 0;
position: absolute;
top: -6px;
left: 15px;
border-top-left-radius: 3px;
z-index:10;

}

.ribbon4:before {
border-bottom: 6px solid #8D5A20;
content: "";
position: absolute;
height: 0;
width: 0;
right: -5.5px;
top: 0.1px;
border-right: 6px solid transparent;
}

.ribbon4:after {
border-left: 30px solid #F47530;
border-right: 30px solid #F47530;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -29.5px;
left: 0;
border-bottom: 30px solid transparent;
}

HTML-Code

<span class="ribbon4">T<br>E<br>X<br>T</span>

Ribbon #5

Ribbon-Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon5 {
color: #ffffff;
background: #59324C;
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.18);
font-family: 'Ubuntu',Helvetica, Arial, Lucida, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
width: 150px;
height: 50px;
line-height: 50px;
padding-left: 15px;
position: absolute;
left: -8px;
top: 20px;
z-index:10;
}

.ribbon5:before, .ribbon3:after {
content: "";
position: absolute;
}
.ribbon5:before {
height: 0;
width: 0;
top: -8.5px;
left: 0.1px;
border-bottom: 9px solid black;
border-left: 9px solid transparent;
}

.ribbon5:after {
border-left: 15px solid #59324C;
height: 0;
width: 0;
right: -14.5px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}

HTML-Code

<span class="ribbon5">Ribbon-Text</span>

Ribbon #6

Ribbon-Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon6 {
color: #fff;
background: #00B3ED;
box-shadow: -1px 2px 3px rgba(0,0,0,.3);
position: absolute;
top: 15px;
padding: 8px 10px;
z-index:10;
font-weight:500;
}

.ribbon6:before {
content: "";
position: absolute;
width: 7px;
height: 100%;
top: 0;
left: -6.5px;
padding: 0 0 7px;
background: inherit;
border-radius: 5px 0 0 5px;
}
.ribbon6:after {
background: lightblue;
content: "";
position: absolute;
width: 5px;
height: 5px;
bottom: -5px;
left: -4.5px;
border-radius: 5px 0 0 5px;
}

HTML-Code

<span class="ribbon6">Ribbon-Text</span>

Ribbon #7

Ribbon

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon7 {
color:#fff;
text-shadow: 0.08em 0.08em 0em rgba(0,0,0,0.4);
font-family: 'Lato',Helvetica, Arial, Lucida, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 0.4px;
position: absolute;
top: -6.1px;
right: 10px;
z-index:10;
}

.ribbon7:after {
border-top: 10px solid #F8463F;
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

.ribbon7 span {
background: #F8463F;
position: relative;
display: block;
text-align: center;
padding: 12px 8px 10px;
border-top-right-radius: 8px;
width: 120px;
box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.28);
}

.ribbon7 span:before, .ribbon7 span:after {
position: absolute;
content: "";
}

.ribbon7 span:before {
background: #F8463F;
height: 6px;
width: 6px;
left: -6px;
top: 0;
}

.ribbon7 span:after {
background: #C02031;
height: 6px;
width: 8px;
left: -8px;
top: 0;
border-radius: 8px 8px 0 0;
}

HTML-Code

<p class="ribbon7"><span>Ribbon</span></p>

Ribbon #8

Ribbon-Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon8 {
background: #EDBA19;
color: #ffffff;
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
font-family: 'Ubuntu',Helvetica, Arial, Lucida, sans-serif;
font-weight: 700;
font-size: 16px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
z-index:10;

}

.ribbon8:before {
border-top: 10px solid #cd8d11;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;

border-left: 10px solid transparent;
}

.ribbon8:after {
border-top: 10px solid #cd8d11;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

HTML-Code

<span class="ribbon8">Ribbon-Text</span>

Ribbon #9

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Ribbon

CSS-Code

.ribbon9 {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
bottom: -10px;
left: -10px;
z-index:10;
}

.ribbon9:before,
.ribbon9:after {
border: 5px solid #8383c2;
position: absolute;
z-index: -1;
content: '';
display: block;
border-bottom-color: transparent;
border-left-color: transparent;
}

.ribbon9:before {
bottom: 0;
right: 0;
}
.ribbon9:after {
top: 0;
left: 0;
}

.ribbon9 span {
background-color: #B9B9E5;
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
right: -25px;
bottom: 30px;
transform: rotate(225deg);
}

HTML-Code

<p class="ribbon9"><span>Ribbon</span></p>

Ribbon #10

Ribbon

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon10 {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
top: -10px;
right: -10px;
z-index:10;
}

.ribbon10:before,
.ribbon10:after {
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #260065;
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon10:before {
top: 0;
left: 0;
}
.ribbon10:after {
bottom: 0;
right: 0;
}

.ribbon10 span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #6C64DC;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
left: -25px;
top: 30px;
transform: rotate(45deg);
}

HTML-Code

<p class="ribbon10"><span>Ribbon</span></p>

Ribbon #11

Ribbon

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon11 {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
top: -10px;
left: -10px;
z-index:10;
}

.ribbon11:before,
.ribbon11:after {
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #057A70;
border-top-color: transparent;
border-left-color: transparent;
}

.ribbon11:before {
top: 0;
right: 0;
}

.ribbon11:after {
bottom: 0;
left: 0;
}

.ribbon11 span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #00A99D;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
right: -25px;
top: 30px;
transform: rotate(-45deg);
}

HTML-Code

<p class="ribbon11"><span>Ribbon</span></p>

Ribbon #12

Ribbon
Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon12 {
background: #EA4335;
color: #FFF;
height: 85px;
width: 85px;
text-align: right;
padding-top: 10px;
padding-right: 10px;
position: absolute;
top: -1px;
right: -1px;
flex-direction: row;
border-radius: 0 0 0 100%;
border: 1px dashed #FFF;
box-shadow: 0 0 0 4px #EA4335;
z-index:10;
font-size: 18px;
}

HTML-Code

<p class="ribbon12"><span>Ribbon<br />Text</span></p>

Ribbon #13

Ribbon-Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon13 {
background: #FF5D5B;
color: #FFF;
padding: 10px 20px!important;
position: absolute;
top: 40px;
right: -1px;
}

.ribbon13:after {
position: absolute;
right: 0;
top: 0;
bottom: 0;
content: "";
left: -12px;
border-top: 19px solid transparent;
border-right: 12px solid #FF5D5B;
border-bottom: 19px solid transparent;
width: 0;
}

HTML-Code

<p class="ribbon13">Ribbon-Text</p>

Ribbon #14

Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon14 {
background: #e00cc1;
color:#ffff;
font-weight: 500;
font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif;
width:100px;
top: 45px;
right: 0 ;
font-size: 14px
letter-spacing: 1px;
text-transform: uppercase;
line-height: 100%;
padding: 10px 12px;
border-radius: 0 ;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
position: absolute;
}

HTML-Code

<p class="ribbon14">Text</p>

Ribbon #15

Text

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

CSS-Code

.ribbon15 {
color: #fff;
background: #d64444;
text-transform: uppercase;
text-align: center;
position: absolute;
top:40px;
left:15px;
padding: 0 ;
border-radius: 50% ;
overflow: hidden;
font-weight: 600;
font-size: 15px;
width: 53px;
height: 53px;
line-height: 53px ;
display: inline-block;
}

HTML-Code

<p class="ribbon15">Text</p>

Divi-Informationstext-Modul (Blurb-Modul) mit einem Button versehen

15. Mai 2024 CSS-Stylesheet | Divi-Theme | Handlungsaufruf-Modul

Es gibt gute Gründe, das Informationstext-Modul (Blurb-Modul) mit einem Button zu ergänzen. Insbesondere in Situationen, in denen das Hinzufügen eines separaten Button-Moduls aufgrund der Gestaltung des Blurbs nicht sinnvoll wäre. Da Sie aber ...

Drücken Sie Ihrer Website einen Stempel auf

10. März 2021 CSS-Stylesheet

Wenn Sie Ihre besten Beiträge, ihre neuesten Inhalte oder Ihre persönlichen Favoriten mit einem Stempel auszeichnen möchten, gelingt das mit ein wenig CSS ganz einfach. Das gibt richtig coole Möglichkeiten im Stempel-Look,

Keine Inhalte gefunden.

Divi-Module

Dr.-Code-Specials

Geplante Beiträge

Child-Theme erstellen

Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.

mehr Infos

Member-Bereich

Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.

Jetzt kostenlos und spamfrei registrieren

Themenidee?

Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.

Themenvorschlag

Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.

Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.

Stylishe Ribbons in 15 Varianten – ein Weihnachtspräsent von Dr. Code

Ribbon #1

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #2

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #3

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #4

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #5

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #6

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #7

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #8

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #9

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #10

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #11

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #12

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #13

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #14

Lorem Ipsum

CSS-Code

HTML-Code

Ribbon #15

Lorem Ipsum

CSS-Code

HTML-Code

So fügen Sie einen hervorgehobenen Text in jedes beliebige Word­Press-Menü ein

Divi-Menu-Hack #1: Separatoren im Divi-Standard-Menu anzeigen

Divi-Informationstext-Modul (Blurb-Modul) mit einem Button versehen

Drücken Sie Ihrer Website einen Stempel auf

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Child-Theme erstellen

Member-Bereich

Themenidee?

Werbung

Pin It on Pinterest

So fügen Sie einen hervorgehobenen Text in jedes beliebige WordPress-Menü ein