- Home
- Categorie
- Coding e Sistemistica
- CMS & Piattaforme Self-Hosted
- Ridurre dimensione titolo sito
-
Ridurre dimensione titolo sito
Salve a tutti,
Come posso diminuire la grandezza del titolo del mio sito? Tema: Magazine Pro - StudioPress.
Dalle impostazioni del tema e da personalizza non c'è l'opzione tipografia, e il CSS preferisco non toccarlo perché combino guai. Grazie.
2 Risposte
-
Ciao,
purtroppo genesis (su cui è basato quel tema) non è il tema adatto se non si vuole toccare il css perché cerca di essere il più leggero possibile, non ho il backend del tema davanti ma non penso tu possa evitare di scrivere almeno un poco di css.
-
@giusy-napoli In realtà fare delle piccole prove non comporta grossi rischi. Su WP c'è un "modulo" apposito per i "custom css". Li' puoi fare tutti i test che vuoi: inserisci la modifica (magari fanne una alla volta se hai poca dimestichezza), ti fai un giro sul sito e verifichi il risultato.
Pero' non ho capito cosa intendi per "titolo del mio sito": il "logo" del tuo sito (quindi nell'header) o il titolo della pagina? Nel primo caso devi verificare sul tuo tema il nome della classe, nel secondo (normalmente) è la classe H1.Se ci indichi anche l'indirizzo del tuo sito magari possiamo aiutarti meglio...
ciao
1 Risposta
-
@panebianco3d Salve, il sito è https://tenacemente.com/ al momento come titolo ho caricato un'immagine con la scritta tenacemente.com e una stella, però il tutto appesantisce parecchio il caricamento. Tuttavia, se tolgo l'immagine caricata e imposto solo la scritta normale in nero, questa risulta troppo lunga su dispositivi mobili, dove il titolo si legge solo a metà.
1 Risposta
-
@giusy-napoli mmm
prima di tutto hai caricato un logo croppato a 600px ma lo visualizzi a 380px di larghezza, quindi se invece usi una immagine 380px gia guadagni un bel popoi il logo ha il lazy loading attivo, a vedere dal codice jetpack-lazy-image usi jetpack
guarda qui https://jetpack.com/support/lazy-images/
ed escludi il logo dal lazyload, e dovresti guadagnare altro tempo/risorsase invece vuoi usare il solo titole testuale, il codice css dovrebbe essere:
.site-titlea vedere dalla demo del tema
https://www.studiopress.com/themes/magazine/#demo-fullè impostato su font-size:48px
stessa impostazione la vedo nel tuo sito.
ora genesis io l'ho visto tipo solo due volte e non ricordo, ma in teoria nel Personalizza di Wordpress, dovresti avere la sezione dove inserire del CSS, oppure da qualche parte in Genesis ci sarà una sezione dove inserire del custom css
in alternativa se usi il tema child, avrai sicuramente anche uno style css child da usare.
qui linee guida e tutorial
https://themeisle.com/blog/css-in-wordpress/
https://kinsta.com/it/blog/wordpress-css/una volta che ti senti sicura, se vuoi modificare in css il titolo del sito, riducendo solo per la parte mobile e non desktop aggiungi questo codice e vedi se ti funziona:
@query (max-width:600) {
.site-title {font-size:30px}
}e poi lavori su quel 30px in su o in giu a seconda dei tuoi gusti
-
@shazarak Ciao, grazie. Ho la sessione dove poter inserire CSS aggiuntivo in personalizza, cosa dovrei scrivere esattamente? @query (max-width:600) {
.site-title {font-size:30px}
}
-
@giusy-napoli scusami , si esatto
@query (max-width:600px) { .site-title {font-size:30px} }il significato è che gli stai dicendo: fino ad una risoluzione di 600px ( diciamo mobile) imposti il font del titolo a 30pc invece che a 45px
ovviamente se vuoi puoi cambiare anche quel 600px aumentando o diminuendo il valore
in teoria puoi usare anche step ed intervalli
esempio@query (min-width:601px) and (max-width:1024){ .site-title {font-size:40px} }questo indica che deve impostare il font a 40px per le risoluzioni tra 601px e 1024
e cosi via
qui magari te lo spiega meglio di me
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
-
@shazarak ha detto in Ridurre dimensione titolo sito:
@query (max-width:600px) {
.site-title {font-size:30px}
}Ciao, grazie, ma con il plugin google fonts non si può fare?
-
@giusy-napoli mmm la risposta breve è no,
quella un pochino piu lunga è che "plugin google fonts" non mi risulta voglia dire nulla
nel senso che google font è una cosa, ovvero una serie di font online di google ( la faccio breve), pluginè altra cosa...ora, sevo supporre che possa esistere un plugin per i google font? se si non ne sono a conoscenza mi spiace
in ogni caso per modificare l'altezza ( sempre per farla breve) del titolo del tuo sito, o hai una qualche sezione dedicata di Genesis oppure lo devi fare con il css.
in realta è sempre css, soltanto che se passi dalle impostazioni di un tema, semplicemente ci pensa lui ad inserire il codice che ti ho dato di esempio al posto tuo.dovresti controllare, o chiedere a chi conosce Genesis Framework, se e dove sta l'impostazione per cambiare il font del titolo ( e sottotitolo ) del tema/sito
ma ripeto hai a disposizione il Customizer di Wordpress, e con una semplice riga di css risolvi quello che hai chiesto
-
@giusy-napoli Tutte queste preoccupazioni per ridurre un logo perfetto (sia da desktop che da mobile). Io lascerei tutto così com'è. La velocità del sito? Anche i CSS la riducono. Dovresti concentrarti su altro per velocizzare l'homepage. Non credo che quel logo sia la causa principale dovuto al rallentamento del tuo sito. Un consiglio spassionato.
-
ciao,
anche secondo me il logo - come dice @kyle46 - come dimensione va già bene così.
Le ottimizzazioni su di esso potrebbero invece essere:- al momento è in formato jpg, per com'è fatto lo convertirei in png32 o ancora meglio in webp (puoi usare gimp per questo, che è oltretutto free e se vuoi anche una portableapps se non lo vuoi installare).
- ridurre la dimensione, al momento quello che usi in effetti è più grande del necessario e se vuoi un'ottimizzazione "superspinta" per seo/prestazioni tieni d'occhio (anche) queste cose.
Se poi vuoi usare i custom css, per sicurezza aggiungi un bel "!important" in modo che le tue classi vengano sicuramente "sovrascritte" a quelle base, quindi rispetto a quanto suggerito da @shazarak modificherei così:
@query (min-width:601px) and (max-width:1024){
.site-title {font-size:40px !important}
}facci sapere,
ciao
-
@panebianco3d Ciao, ringrazio sia te che @kyle46 per il consiglio. Infatti anche a me piace l'attuale titolo con logo. Il mio problema è che sia la Home che qualunque articolo del mio sito hanno un punteggio di 34 per dispositivi mobili su PageSpeed Insights. Su Desktop invece non ho problemi di caricamento. Ecco perché sto cercando di ridurre tutto al minimo indispensabile perché penso che la rapidità su dispositivi mobili sia fondamentale e che questo penalizzi il sito.
-
@shazarak Grazie mille.
