Indice
Differenziare codice per breakpoints
Togliere immagini dal blog listing
Copyright nel footer: aggiornare anno automaticamente
BOTTONE HTML snippet = inserire un bottone
Come rendere cliccabile un numero di telefono
Cache buster = forzare l'aggiornamento della pagina cancellando la cache
Tabella che si impila su mobile
Header blog più basso su mobile
Come annidare stili/classi css
Back – Link che porta al punto precedente
Accessibilità link "target=_blank
Responsiveness: differenziare il codice per breakpoints
Per regolare gli stili solo per alcuni breakpoints, aggiungere la seguente stringa nel file “custom css”:
@media (max-width: 710px){
.pwr-step__title {
font-weight: 600;
font-size: 18px;
}
}
In questo caso lo stile ha effetto solo per gli schermi di massimo 710px di larghezza.
È possibile anche usare per avere effetto agli schermi di larghezza minima.
@media (min-width: 710px){
…
}
Solitamente i breakpoints sono i seguenti:
@media (min-width: 640px){ }
@media (min-width: 768px){ }
@media (min-width: 1024px){ }
@media (min-width: 1200px){ }
Togliere le immagini dal blog listing
Per non mostrare le immagini nel blog listing, aggiungere questo codice nel design tool
.pwr-blog-listing .pwr-post-item__img {
display: none;
height: 0 !important;
}
.pwr-post-item__info-box {
top: 0;
}
Copyright: aggiornare il testo automaticamente
Aggiungere questo script qui sopra, nel global content per avere l’anno corrente che si auto-aggiorna.
ATTENZIONE: a volte non funziona su mobile, verificare.
HTML Snippet per Button
Questo il codice HTML da inserire
Mentre questi sono gli stili che si possono usare:
pwr-cta--primary-solid
pwr-cta--regular-solid
pwr-cta--regular-solid-primary-background
pwr-cta--primary-border
pwr-cta--regular-border
pwr-cta--link
pwr-cta--link pwr-cta--link--back
pwr-cta--custom-01
pwr-cta--custom-02
pwr-cta--custom-03
pwr-cta--custom-04
Se si vuole inserire un bottone ma senza link, ad esempio in un modulo che poi viene completamente linkato, questo è il codice da usare:
Come rendere cliccabile un numero di telefono
Cache buster
Aggiungere questo codice alla fine dell’url; per ricaricare, cambiare il numero alla fine
?hsCacheBuster=2474
Tabella che si impila su mobile
Dentro nella tabella, nel TD, mettere questa classe:
class="block"
nel css poi mettere questo
/* this .block class must be added to the td of a table if you want the columns to be underneath each other on a mobile device. */
@media screen and (max-width:600px) {
.block { display: block !important; width: 100% !important; }
}
Header blog più basso su mobile
Per alzare i post su mobile, nella pagina listing:
/* BLOG HEADER MOBILE */
@media (max-width: 575px){
.pwr-hero:not(.pwr-hero--full-height) {
height: 100px !important;
min-height: initial !important;
}
.pwr-hero .pwr-hero__info-box, .pwr-hero .pwr-hero__info-box.page-center {
margin-top: 40px;
}
}
Come annidare le classi css
Nel codice che segue, lo stile si applica solo agli elementi "a" che sono dentro a degli elementi "p":
p a {
text-decoration: underline;
}
Nel codice che segue, invece, lo stile si applica sia agli elementi contenuti in "p", sia agli elementi contenuti in "a":
p, a {
text-decoration: underline;
}
"Read more text" mini-modulo
Un mini-modulo che permette di nascondere del testo dietro ad un "read more", che se cliccato mostra l'intero testo.
Qui ci sono gli esempi di Maka; qui le istruzioni su come fare.
Back – Link che porta al punto precedente
Questo codice permette di riportare l'utente al punto da dove è arrivato: la pagina precedente, oppure un punto nella pagina che ha attivato l'ancora.
Dentro a href="#" lasciare l'asterisco.
La parte rel="noopener" dice al browser di non aprire una nuova finestra.
onclick="history.go(-1) dice di andare al punto precedente registrato.
Accessibilità link target=_blank
Per fare in modo che i link inseriti nei testi che aprono in nuova finestra siano accessibili, occorre fare una modifica a livello di codice. Questo permette di avvisare gli utenti non vedenti di sapere che, cliccando sul link, vengono reindirizzati in una nuova finestra.
Il codice del link si presenterà in questo modo:
https://ander.group/" target="_blank" rel="noopener">
Powered by Ander Group
(apre in una nuova scheda)
Viene applicata la classe focus-target ad uno span che contiene il testo che sarà visibile e sarà cliccabile, mentre viene applicata la classe sr-only ad un testo aggiuntivo che esprime l'indicazione di apertura in una nuova scheda.
Per fare in modo che questa seconda stringa non venga mostrata (noi vogliamo che venga letta ai non vedenti, ma non mostrata a tutti) occorre aggiungere il seguente codice nel file child.css
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Sticky Button Mobile
Inserire questo codice nell’header della pagina su cui introdurre il pulsante mobile, oppure nell’header generale per introdurlo su tutte le pagine (N.B.) per vedere il pulsante è necessario entrare da mobile, non funziona rimpicciolire la finestra da desktop!
Questo il codice da inserire, modificando il link all’icona e i parametri CSS per lo stile desiderato:
Prenota online