Con l'aiuto del Widget Editor è possibile impostare e modificare facilmente il colore del pulsante, il carattere e il contenuto visibile. Ma per sfruttare appieno tutte le opzioni di personalizzazione, è consigliabile familiarizzare con il CSS.
Nota
Esistono molti siti web per testare il codice CSS. Uno di questi: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
1.Come lavorare con i CSS
Ogni codice CSS dovrebbe iniziare con il termine <template id="product-catalog-widget-styles"> in modo da indicare che si tratta del Widget Prodotto e Catalogo. Inoltre, questo termine è responsabile della connessione tra codice CSS e HTML.
<template id="product-catalog-widget-styles">
<style>
</style>
</template>
Successivamente, a seconda di ciò che si desidera modificare esattamente, si deve inserire un termine sotto il primo <style>. È importante che sia posto un punto . davanti ad esso e una parentesi graffa { dietro di esso. Nella riga successiva è possibile stabilire se, ad esempio, il colore deve essere modificato. Di conseguenza, la parola color viene inserita e un due punti (:) dopo di essa. Dopo di ciò, è possibile definire un codice colore esadecimale o inserire direttamente il colore come parola (ad esempio 'verde').
È molto importante aggiungere un punto e virgola ; dopo il colore. Per completare il tutto, una parentesi graffa } viene utilizzata di nuovo. È quindi possibile inserire ulteriori codici CSS, altrimenti si conclude con </style> e il codice HTML esistente dal Widget Editor di Regiondo. Il termine </template> viene utilizzato per chiudere il comando. È tutto!
Importante
<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #008000;
}
</style>
Il primo termine indica che si lavora con il Widget Prodotto e Catalogo. Tutto ciò che è in grassetto deve essere inserito perché il codice funzioni. E tutto ciò che è in corsivo significa che può essere modificato.
Nota
Come realizzare parentesi graffe? Prova...
- Alt Gr e 7 per {
- Alt Gr e 0 per }
2. Tipico esempio di modifica CSS
Nel codice CSS qui sotto troverete le opzioni di personalizzazione più richieste. È possibile vedere gli effetti del codice sui widget nell'immagine qui sopra. Viene fatta una distinzione tra la visualizzazione del catalogo e quella del prodotto. Per spiegarvi ogni opzione di personalizzazione, esamineremo il codice CSS passo per passo.
<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #0275A4;
}
.regiondo-product-header {
color: #0275A4;
}
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}
.Re-c-MuiButton-label svg {
display: none;
}
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}
.regiondo-list-product-header{
color: #0275A4;
}
</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
2.1 Intestazione del prodotto "Prenotazione"
Questo codice CSS modifica l'intestazione "Prenotazione" nella pagina del Prodotto. Cambia anche il colore delle informazioni sul prezzo. Nel codice attuale è stato utilizzato il colore #0275A4 (blu). Questo può essere sostituito con qualsiasi codice colore esadecimale.
.regiondo-booking-header {
color: #0275A4;
}
2.2 Intestazione del prodotto "Titolo dell'offerta
Il termine regiondo-product-header nel codice CSS indica l'intestazione sopra l'immagine dell'offerta nella pagina del Prodotto. Scambiando il codice colore esadecimale, il colore può essere modificato a piacere.
.regiondo-product-header {
color: #0275A4;
}
2.3 Sfondo del widget
In teoria, anche il colore dello sfondo può essere modificato, ma dovrebbe sempre rimanere trasparente. Perché? I widget si adatteranno in modo ottimale al sito Web se lo sfondo è trasparente.
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}
2.4 Nascondere il logo di Regiondo dal Catalogo
Questo codice CSS consente di nascondere il logo di Regiondo dal Catalogo.
.Re-c-MuiButton-label svg {
display:none;
}
2.5 Intestazione del prodotto "Descrizione dell'esperienza", "Più informazioni", "Sede".
Questo codice CSS consente di modificare la visualizzazione del widget prodotto. Da un lato è possibile regolare il colore di sfondo del Widget di Prenotazione, ma sarebbe ideale mantenerlo trasparente. Dall'altro lato è possibile personalizzare il colore dei caratteri dei contenuti visibili. In questo caso si tratterebbe di: Descrizione dell'esperienza, Più informazioni e Sede.
Nel seguente codice CSS è possibile modificare il colore con qualsiasi codice colore esadecimale.
Esempio
Il codice colore esadecimale #0275A4 (blu) è stato cambiato in #008000 (verde).
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}
2.6 Intestazione "Titolo dell'offerta
Le intestazioni delle offerte nel Catalogo possono essere personalizzate anche in termini di colore. È sufficiente sostituire il codice colore esadecimale esistente con il colore desiderato.
.regiondo-list-product-header{
color: #0275A4;
}
Esempio
Il codice colore esadecimale #0275A4 (blu) è stato cambiato in #008000 (verde).
2.7 Codice HTML dal Widget Editor
Questo è il codice che puoi ottenere dal Widget Editor.
</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
Affinché la personalizzazione dei CSS funzioni, è necessario inserire uno snippet nel codice HTML estrapolato dal Widget Editor
La parte styles-template-id="product-catalog-widget-styles" deve essere aggiunta dopo aver creato il codice HTML dal Widget Editor
Esempio di codice HTML dal Widget Editor:
<product-catalog-widget customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
Aggiungere lo snippet dopo il file <product-catalog-widget
Risultato:
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
3. Altre possibili modifiche del CSS
3.1 Effetto di cambio colore al passaggio del mouse sul pulsante nel Catalogo
Aggiungendo questo codice CSS, è possibile regolare il colore dell'effetto al passaggio del mouse sul pulsante nel catalogo. In questo caso il colore dell'effetto al passaggio del mouse è verde, ma è possibile anche decidere quale colore di sfondo deve avere il pulsante. In questo esempio il colore di sfondo è il blu. Guardate la GIF per vedere il risultato.
Nota
Che cos'è l'effetto hover? È chiamato anche effetto mouseover e compare quando l'utente passa con il mouse su un elemento, ad esempio un pulsante.
.regiondo-list-product-button:hover {
background-color: green;
color: blue
}
3.2 Immagine dell'offerta con angoli arrotondati
Se si aggiunge questo codice CSS, è possibile modificare gli angoli dell'immagine dell'offerta. Aprire un simulatore HTML, aggiungete il codice qui sotto e inserite un numero a piacere. Le modifiche possono essere visualizzate nel simulatore e saprete esattamente quale percentuale va bene per voi.
.regiondo-list-product-image {
border-radius: 35% 35% 35% 35% / 35% 35% 35% 35%};
3.3 Sostituire gli highlight con immagini
I soli punti chiave sono noiosi! Sostituite i punti chiave evidenziati nella descrizione del prodotto con il vostro logo e sfruttate al massimo le opzioni di personalizzazione. Basta sostituire il link rosso nel codice CSS qui sotto con il link che porta al vostro logo. Ecco fatto!
.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;
}