Mit Hilfe des Widget Editors lässt sich ganz einfach die Button-Farbe, die Schriftart, sichtbare Inhalte etc. einstellen und bearbeiten. Doch um alle Anpassungsmöglichkeiten auszuschöpfen, sollte man sich mit CSS beschäftigen.
Hinweis
Um Ihren CSS Code zu testen, gibt es mehrere Websites, die dies ermöglichen. Eine davon wäre z.B. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
1. Jetzt mit CSS loslegen!
Jeder CSS-Code sollte mit der Bezeichnung beginnen, damit dieser weiß, dass es sich um das Product- und Catalog Widget handelt. Darüberhinaus ist dies die Verknüpfung zwischen CSS und HTML-Code an.
Anschließend, abhängig davon was genau bearbeitet werden soll wird eine Bezeichnung unter dem ersten und und dem bestehenden HTML-Code aus dem Regiondo Widget Editor, um den Befehl zu schließen.
Wichtig
Die erste Zeile meint, dass mit dem Product- und Catalog Widget gearbeitet wird. Alles fett gedruckte muss eingegeben werden, sodass der Code funktioniert. Alles kursiv gedruckte meint, dass es variabel ist und damit geändert werden kann.
2. Klassisches Beispiel für eine CSS-Anpassung
In dem untenstehenden CSS-Code finden Sie häufig gewünschte Anpassungsmöglichkeiten. Die Auswirkungen des Codes auf die Widgets sehen Sie im oberen Bild. Dabei wird zwischen der Catalog- und Product View unterschieden. Um Ihnen jede Anpassungsmöglichkeit zu erläutern, gehen wir im Folgenden den Code Schritt für Schritt durch.
2.1 Überschrift im Produkt "Booking"
Mit diesem CSS-Code wird die Überschrift "Booking" in der Product View bearbeitet. Dabei ändert sich auch die Farbe der Preisangabe. Im aktuellen Code wurde die Farbe #0275A4 (blau) verwendet. Diese kann mit einem beliebigem Hex-Farbcode ersetzt werden.
.regiondo-booking-header {
color: #0275A4;
}2.2 Überschrift im Produkt "Title the offer"
Die Bezeichnung regiondo-product-header im CSS-Code bezeichnet die Überschrift über dem Angebotsbild in der Product View. Durch das Austauschen des Hex-Farbcodes kann die Farbe beliebig geändert werden.
.regiondo-product-header {
color: #0275A4;
}2.3 Allgemeiner Hintergrund des ganzen Widgets
Theoretisch lässt sich auch die Farbe des Hintergrunds ändern, jedoch sollte diese immer transparent bleiben. Warum? Durch den transparenten Hintergrund, passen die Widgets optimal zur Website.
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}2.4 Ausblenden des Regiondo Logos in der Catalog View
Dieser CSS-Code ermöglicht Ihnen das Regiondo Logo (siehe Bild) in der Catalog View auszublenden.
.Re-c-MuiButton-label svg {
display:none ;
}2.5 Überschrift im Produkt "Description", "More information", "Venue"
Mit diesem CSS-Code lässt sich die Product View des Widgets bearbeiten. Zum einem könnte auch hier die Hintergrundfarbe des Booking Widgets angepasst werden, allerdings sollte diese bestenfalls transparent bleiben. Zum anderem kann die Schriftfarbe der sichtbaren Produktdetails individualisiert werden. In unserem Beispiel wären diese: "Beschreibung" (Description), "Mehr Informationen" (More Information) sowie der "Veranstaltungsort" (Venue).
Im folgenden CSS-Code kann die Farbe mit jedem beliebigen Hex-Farbcode geändert werden.
Beispiel
Der Hex-Farbcode #0275A4 (blau) wurde in #008000 (grün) geändert.
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}2.6 Überschrift "Title the offer"
Auch die Überschrift des Angebots in der Catalog View lässt sich farblich individualisieren. Dazu einfach den bestehenden Hex-Farbcode in die gewünschte Farbe ändern.
.regiondo-list-product-header{
color: #0275A4;
}Beispiel
Der Hex-Farbcode #0275A4 (blau) wurde in #008000 (grün) geändert.
2.7 HTML-Code aus dem Widget Editor
Dies ist der Code, den Sie aus Ihrem Widget Editor entnehmen können.
Damit die CSS-Anpassung funktioniert, muss noch ein Snippet in den HTML-Code aus dem Widget-Editor eingefügt werden.
Der Teil styles-template-id="product-catalog-widget-styles" muss nach dem Erstellen des HTML-Codes im Widget-Editor hinzugefügt werden.
Beispiel HTML-Code aus dem Widget-Editor:
customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"
Snippet nach dem einfügen
Ergebnis:
styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"
3. Andere mögliche CSS-Anpassungen
3.1 Button Hover Farbeffekt in der Catalog View
Durch Hinzufügen dieses CSS-Codes kann die Farbe des Button-Hovers in der Catalog View angepasst werden. In diesem Fall ist die Farbe des Hovers grün und die Hintergrundfarbe des Buttons blau. Im untenstehenden GIF sehen Sie die daraus resultierende Wirkung.
Hinweis
Was ist ein Hover-Effekt? Es wird auch Mouseover-Effekt genannt und erscheint, wenn der Nutzer mit der Maus über ein Element, hier ein Button, fährt.
.regiondo-list-product-button:hover {
background-color: green;
color: blue
}3.2 Angebotsbild mit abgerundeten Ecken
Mit diesem CSS Code lassen sich die Ecken des Angebotsbildes abrunden. Öffnen Sie dazu am besten einen HTML Simulator, fügen den untenstehenden Code hinzu und fügen eine beliebige Prozentzahl ein. Die Änderungen lassen sich im Simulator erkennen und Sie wissen dementsprechend genau, welche Prozentzahl am besten für Sie funktioniert.
.regiondo-list-product-image {
border-radius: 35% 35% 35% 35% / 35% 35% 35% 35%};3.3 Ersetzen der Highlight Stichpunkte mit dem Logo
Nur Stichpunkte sind langweilig! Ersetzen Sie die Highlight Stichpunkte in der Produktbeschreibung mir Ihrem Logo und holen Sie damit das Maximum aus den Personalisierungsmöglichkeiten raus. Ersetzen Sie einfach den roten Link im untenstehenden CSS Code mit dem Link, welcher zu Ihrem Logo führt. Das war´s auch schon!
.regiondo-product-highlights li::before {
content: "";
position: absolute;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGJuXVE0Qvz70hWMErEJRjw_u_Jo6zunyhnXcD64cTwSQ6IblBY-bcD43P5MDVNIsYjlY&usqp=CAU") center no-repeat;
background-size: contain;
width: 25px;
height: 25px;
margin-left: -35px;
margin-top: -5px;
}