Unbegrenzte WordPress-Themen und Plugins-Download. Kostenlose Downloads jeden Monat.

Herunterladen

Wie man benutzerdefinierte Multifunktionsleisten auf WordPress mit Elementor hinzufügen

Muneeb WordPress-Tutorials May 1, 2021

Bänder sind eine visuell ansprechende Möglichkeit, eine Ankündigung auf Ihrer Website zu machen. Es gibt zwar viele Situationen, in denen Sie Bänder verwenden können, aber Sie finden diese oft mit Verkäufen, Rabatten oder Ausverkauften Ankündigungen in Woocommerce-Shops.

Bänder werden verwendet, um den Besucher über einen Verkauf oder einen Rabatt zu informieren, sobald sie auf Ihrer Website ankommen. In diesem Tutorial werden wir verstehen, wie Sie Multifunktionsleisten mit Elementor hinzufügen können.

Warum sollten Sie Multifunktionsleisten verwenden?

Bänder sind eine großartige Möglichkeit, Ihren Besucher sofort anzulocken, wenn Sie eine Ankündigung machen. Zum Beispiel haben Sie einen Rabatt auf ein bestimmtes Produkt angekündigt und dann wenden Sie das Rabatt-Menüaufband auf die Miniaturansicht dieses Produkts an, es wird den Benutzer sofort dazu bringen, auf das Produkt zu klicken.

Bänder sind optisch ansprechend, wenn sie in einer bestimmten Weise verwendet werden. Sie können dem Benutzer helfen, nicht verwandte Produkte zu durchlaufen und die Conversions und Verkäufe Ihrer Website zu verbessern.

Divi herunterladen Das beste WordPress-Thema

Das beliebteste WordPress-Thema der Welt und der ultimative Wordpress-Seite-Builder

Divi herunterladen.

So fügen Sie benutzerdefinierte Multifunktionsleisten mit Elementor hinzu

Um den Prozess zu starten, müssen Sie einen inneren Abschnitt hinzufügen, in dem wir die Widgets hinzufügen.

Als Nächstes müssen Sie eine Spalte im Abschnitt ziehen. Für dieses Tutorial verwenden wir eine einspaltige Struktur.

Sobald Sie mit den oben genannten Einstellungen fertig sind, können Sie fortfahren und einen Titel für Ihr Menüband erstellen.

Wechseln Sie im nächsten Schritt zu den CSS-Klassen auf der Registerkarte Erweitert, und fügen Sie im Feld "gc-ribbon-style" hinzu.

Darunter müssen Sie das folgende benutzerdefinierte CSS hinzufügen.

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
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;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

Sie sind fast fertig. Veröffentlichen Sie es und überprüfen Sie Ihre Website, um zu sehen, wie es funktioniert.

So können Sie Ihren Produkten mit Elementor Farbbänder hinzufügen. Stellen Sie sicher, dass Sie sich uns auf unseren Facebook und Twitter anschließen, um immer wieder Updates über unsere Inhalte zu erhalten.

Share Your Thoughts