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 in modo da indicare che si tratta del Widget Prodotto e Catalogo. Inoltre, questo termine è responsabile della connessione tra codice CSS e HTML.
Successivamente, a seconda di ciò che si desidera modificare esattamente, si deve inserire un termine sotto il primo e il codice HTML esistente dal Widget Editor di Regiondo. Il termine viene utilizzato per chiudere il comando. È tutto!
Importante
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.
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.
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:
customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"
Aggiungere lo snippet dopo il file
Risultato:
styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"
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;
}