17 suggerimenti CSS per risparmiare tempo per gli utenti di WordPress
Pubblicato: 2023-03-13WordPress offre infinite possibilità per progettare e personalizzare il tuo sito web. In questo articolo condivideremo alcuni suggerimenti pratici CSS specifici per gli utenti di WordPress, dallo stile dell'intestazione alla modifica dei caratteri.
Sebbene WordPress offra numerosi temi e modelli predefiniti, a volte è necessario prendere in mano la situazione e apportare personalizzazioni con i CSS.
Se ti è mai capitato di porre una di queste domande mentre lavori sul tuo sito WordPress:
- "Come faccio a rimuovere il pulsante 'leggi di più'?"
- "Come posso cambiare il colore di questo collegamento?"
- "Come faccio a rendere questo collegamento non selezionabile mantenendo il testo sulla pagina?"
…poi continua a leggere per imparare alcuni preziosi trucchi CSS per il tuo sito web.
In questo tutorial tratteremo:
- Suggerimenti per i CSS di WordPress
- Centrare un elemento orizzontalmente e verticalmente
- Cambia il colore del collegamento
- Rimuovere un collegamento
- Disabilitare un collegamento (il collegamento rimane visibile ma gli utenti non possono fare clic su di esso)
- Cambia il colore dei collegamenti al passaggio del mouse
- Collegamenti di stile
- Dai stile a un pulsante
- Cambia il carattere di una sezione
- Crea un'intestazione fissa
- Crea un'intestazione adesiva con un effetto ombra
- Aggiungi un colore di sfondo a una sezione
- Cambia il colore di sfondo del corpo
- Cambia il colore di una parola o frase specifica
- Crea un bordo attorno a un'immagine
- Crea un effetto al passaggio del mouse su un'immagine
- Modellare un modulo
- Crea un layout reattivo
- Porta le tue competenze CSS al livello successivo
Suggerimenti per i CSS di WordPress
Le uniche due cose che devi sapere per mettere in pratica questi suggerimenti sono:
- Come funziona il CSS
- Come aggiungere CSS a WordPress
Nota: i CSS non sono rischiosi, quindi se commetti un errore puoi semplicemente eliminare il codice o modificarlo... non si romperà nulla :)
Detto questo, passiamo direttamente ad alcuni suggerimenti pratici CSS con esempi in modo che tu possa provarlo sul tuo sito WordPress:
Centrare un elemento orizzontalmente e verticalmente
Per centrare un elemento (come un'immagine, un testo o un div) sia orizzontalmente che verticalmente, utilizza il seguente codice CSS:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
In questo codice, la proprietà position: relative viene utilizzata per posizionare l'elemento rispetto al suo antenato posizionato più vicino. Le top: 50% e left: 50% spostano l'elemento al centro del suo contenitore. Infine, la transform: translate(-50%, -50%) centra l'elemento sia orizzontalmente che verticalmente spostandolo indietro del 50% della sua larghezza e altezza.
Cambia il colore del collegamento
.item-class{
color : blue;
}
Puoi usare colori come bianco, nero, blu, rosso... ma potresti voler usare colori specifici.
In questo caso, puoi farlo in questo modo:
.item-class{
color : #F7F7F7;
}
Se stai cercando di creare una tavolozza di colori per il design del tuo sito web, prova a utilizzare lo strumento Tavolozza. È molto utile!
Nota: se vuoi combinare elementi, è abbastanza semplice.
Ad esempio, supponiamo che tu voglia disabilitare il clic e riportare il collegamento in nero.
Puoi usare questo codice:
.item-class{
pointer-events : none;
color : black;
}
Rimuovere un collegamento
.item-class{
display : none;
}
Nota: a volte potrebbe essere necessario inserire una a dopo la lezione per farla funzionare, in questo modo:
.item-class a{
display : none;
}
Prova ad aggiungere a o a sperimentare senza di essa per vedere se il tuo codice funziona o meno. Basta aggiungere il tuo CSS, salvare e controllare il tuo frontend.
Disabilitare un collegamento (il collegamento rimane visibile ma gli utenti non possono fare clic su di esso)
Nota: è sempre meglio modificare l'HTML per fare ciò, ma se i CSS potrebbero essere più semplici o l'unica soluzione possibile, utilizzare questo codice:
.item-class{
pointer-events: none;
}
Cambia il colore dei collegamenti al passaggio del mouse
Puoi fare in modo che i collegamenti cambino colore quando un utente ci passa sopra utilizzando il seguente codice CSS:
a:hover {
color: red;
}
In questo codice, il selettore a:hover prende di mira tutti i collegamenti sulla pagina su cui l'utente sta attualmente passando il mouse. La proprietà color: red cambia il colore del testo in rosso.
Collegamenti di stile
Per definire lo stile dei collegamenti sul tuo sito Web, utilizza il seguente codice CSS:
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
In questo codice, il a viene utilizzato per definire lo stile di tutti i collegamenti sulla pagina. La proprietà color imposta il colore dei collegamenti e la proprietà text-decoration rimuove la sottolineatura predefinita. La proprietà border-bottom aggiunge un sottile effetto di sottolineatura. La proprietà transition crea un effetto di transizione graduale quando l'utente passa il mouse sul collegamento. Il selettore a:hover viene utilizzato per definire lo stile del collegamento quando l'utente ci passa sopra.
Dai stile a un pulsante
Utilizza il codice seguente per definire lo stile di un pulsante:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
In questo codice, le varie proprietà vengono utilizzate per definire lo stile di un pulsante, incluse le proprietà background-color e color per l'aspetto del pulsante, la proprietà padding per la dimensione del pulsante e la proprietà cursor per modificare il puntatore del mouse quando si passa sopra il pulsante.
Cambia il carattere di una sezione
Cambia il carattere di una sezione del tuo sito web utilizzando il seguente codice CSS:
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
In questo codice, la proprietà font-family imposta il carattere su Arial o un carattere sans-serif simile, la proprietà font-size imposta la dimensione del carattere su 16 pixel e la proprietà line-height imposta la spaziatura tra le righe di testo su 1,5. volte la dimensione del carattere.
Crea un'intestazione fissa
Se desideri creare un'intestazione che rimanga fissa nella parte superiore della pagina mentre l'utente scorre, puoi utilizzare il seguente codice CSS:
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
In questo codice, la proprietà position: fixed fissa l'intestazione nella parte superiore del viewport e la proprietà top: 0 la posiziona nella parte superiore della pagina. La proprietà width: 100% garantisce che l'intestazione si estenda per l'intera larghezza del viewport. background-color , color vengono utilizzati per definire lo stile dell'intestazione e la proprietà z-index: 9999 garantisce che l'intestazione appaia sopra tutti gli altri elementi della pagina.
Crea un'intestazione adesiva con un effetto ombra
Per creare un'intestazione fissa con un effetto ombra che rimane fisso nella parte superiore della pagina mentre l'utente scorre, utilizza questo codice CSS:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
In questo codice, la proprietà position: fixed viene utilizzata per fissare l'intestazione nella parte superiore della pagina. Le proprietà top: 0 e left: 0 posizionano l'intestazione nell'angolo in alto a sinistra della pagina. La proprietà width: 100% imposta la larghezza dell'intestazione in modo che corrisponda all'intera larghezza della pagina. La proprietà background-color imposta il colore di sfondo dell'intestazione e la proprietà z-index garantisce che l'intestazione appaia sopra gli altri elementi della pagina. Infine, la proprietà box-shadow aggiunge un sottile effetto ombra all'intestazione. Il selettore .content viene utilizzato per aggiungere riempimento nella parte superiore della pagina in modo che il contenuto non venga coperto dall'intestazione fissa.
EBOOK GRATUITO
La tua tabella di marcia passo dopo passo verso un'attività di sviluppo web redditizia. Dall'acquisizione di più clienti alla crescita come un matto.
EBOOK GRATUITO
Pianifica, costruisci e lancia il tuo prossimo sito WP senza intoppi. La nostra lista di controllo rende il processo semplice e ripetibile.
Aggiungi un colore di sfondo a una sezione
Vuoi aggiungere un colore di sfondo a una sezione del tuo sito web? Quindi utilizzare il seguente codice CSS:
.section {
background-color: #f2f2f2;
padding: 20px;
}
In questo codice, la proprietà background-color: #f2f2f2 imposta il colore di sfondo su un grigio chiaro e la proprietà padding: 20px aggiunge 20 pixel di spazio attorno al contenuto all'interno della sezione.
Cambia il colore di sfondo del corpo
Aggiungi questo codice per cambiare il colore di sfondo del corpo del tuo sito web:
body {
background-color: #f5f5f5;
}
In questo codice, la proprietà background-color imposta il colore di sfondo su grigio chiaro.
Cambia il colore di una parola o frase specifica
Per cambiare il colore di una parola o frase specifica all'interno di un blocco di testo, puoi utilizzare il seguente codice CSS:
p span {
color: red;
}
In questo codice, il selettore p span prende di mira qualsiasi elemento span che appare all'interno di un elemento p . Puoi quindi racchiudere la parola o la frase che desideri scegliere come target con un elemento span nel tuo HTML, in questo modo:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Ciò farebbe apparire in rosso la frase “consectetur adipiscing elit”.
Crea un bordo attorno a un'immagine
Ecco come aggiungere un bordo attorno a un'immagine:
img {
border: 2px solid #ccc;
}
In questo codice la proprietà border imposta la larghezza, lo stile e il colore del bordo. Il valore 2px imposta la larghezza del bordo su 2 pixel, solid imposta lo stile su una linea continua e #ccc imposta il colore su grigio chiaro.
Crea un effetto al passaggio del mouse su un'immagine
Utilizza questo snippet di codice per creare un effetto al passaggio del mouse su un'immagine:
img:hover {
opacity: 0.8;
}
In questo codice, il selettore img:hover sceglie come target l'immagine quando l'utente ci passa sopra. La proprietà opacity imposta la trasparenza dell'immagine. In questo caso, il valore è impostato su 0,8, rendendo l'immagine leggermente trasparente quando l'utente ci passa sopra.
Modellare un modulo
Disegna un modulo sul tuo sito web con il seguente codice CSS:
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
In questo codice, le varie proprietà vengono utilizzate per definire lo stile di un modulo, incluse le proprietà background-color , padding e border-radius per l'aspetto generale del modulo. Il selettore form label viene utilizzato per definire lo stile delle etichette associate a ciascun campo del modulo. Il form input[type="text"], form input[type="email"], form textarea selector viene utilizzato per definire lo stile dei vari campi di input nel modulo. Il selettore form input[type="submit"] viene utilizzato per definire lo stile del pulsante di invio.
Crea un layout reattivo
Se desideri creare un layout reattivo che si adatti alle diverse dimensioni dello schermo, utilizza il seguente codice CSS:
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
In questo codice, la regola @media viene utilizzata per specificare stili diversi per dimensioni dello schermo diverse. La prima regola @media ha come target schermi con una larghezza massima di 768 px, mentre la seconda regola @media ha come target schermi con una larghezza minima di 769 px. I vari selettori all'interno di ciascuna regola @media vengono utilizzati per regolare il layout e l'aspetto della pagina in base alle dimensioni dello schermo.
Un altro suggerimento CSS...
Potresti scoprire che il tuo codice non funziona anche se hai fatto tutto correttamente. Ciò potrebbe essere dovuto al fatto che esiste già un codice CSS che dice qualcosa di diverso dal tuo codice.
Per sovrascriverlo, basta aggiungere !important in questo modo:
.item-class{
pointer-events: none !important;
}
Questi sono solo alcuni esempi di modi pratici in cui puoi utilizzare i CSS per migliorare il tuo sito Web WordPress.
Con i CSS, le possibilità di personalizzare l'aspetto del tuo sito web sono praticamente infinite. Imparando e applicando questi suggerimenti, puoi creare un sito Web che non sia solo visivamente accattivante ma anche ottimizzato per una migliore esperienza utente.
Porta le tue competenze CSS al livello successivo
Che tu sia un principiante o uno sviluppatore web o web designer professionista esperto, se desideri approfondire l'utilizzo dei CSS con WordPress, questi tutorial aggiuntivi sui CSS ti aiuteranno ad espandere le tue conoscenze e competenze:
- 10 semplici consigli per imparare i CSS per WordPress – Consigli pratici per i principianti che vogliono imparare i CSS specificatamente per l'uso con WordPress. Copre tutto, dalla comprensione della sintassi CSS all'utilizzo dei framework CSS.
- Imparare e fare riferimento a CSS per WordPress – Una guida completa per apprendere e fare riferimento a CSS specificatamente per l'uso con WordPress. Copre argomenti come l'utilizzo del personalizzatore WordPress, la comprensione dei selettori CSS e l'utilizzo dei temi secondari.
- 7 migliori siti per trovare snippet CSS e ispirazione: Cerchi ispirazione per il tuo codice CSS? Questo articolo elenca sette siti Web che offrono snippet CSS ed esempi che puoi utilizzare nel tuo sito Web WordPress.
- Come modellare le immagini sul tuo sito Web WordPress con i CSS – Le immagini sono una parte importante di qualsiasi sito Web e questo articolo offre suggerimenti su come modellarle utilizzando i CSS. Imparerai come aggiungere bordi, modificare le dimensioni e l'allineamento dell'immagine e altro ancora.
- Come aggiungere CSS personalizzati al tuo sito WordPress – Questo articolo ti guida attraverso il processo di aggiunta di CSS personalizzati al tuo sito WordPress, utilizzando sia il personalizzatore integrato che i plugin.
- Plugin CSS gratuiti per modificare dal vivo il tuo sito WordPress – Questo articolo elenca alcuni plugin CSS gratuiti che ti consentono di modificare dal vivo il tuo sito WordPress, rendendo più semplice vedere gli effetti delle modifiche CSS in tempo reale.
- 14 fantastici strumenti di animazione CSS per WordPress – Se desideri aggiungere alcune animazioni al tuo sito Web WordPress utilizzando i CSS, questo articolo elenca alcuni strumenti interessanti che puoi utilizzare per farlo.
- Aggiungi layout in muratura e griglia al tuo sito WordPress utilizzando CSS – Questo articolo spiega come utilizzare i CSS per aggiungere layout in muratura e griglia al tuo sito Web WordPress, creando un design visivamente più accattivante.
- 25 consigli degli esperti per una codifica CSS più pulita per WordPress – Se desideri migliorare la pulizia e la leggibilità del tuo codice CSS, questo articolo offre 25 consigli degli esperti per fare proprio questo.
- 25 suggerimenti professionali per migliorare il flusso di lavoro CSS: suggerimenti per migliorare il flusso di lavoro CSS, dall'utilizzo dei preprocessori CSS all'utilizzo degli strumenti di sviluppo del browser per eseguire il debug del codice.
Fai clic sui collegamenti per saperne di più e inizia a migliorare il tuo sito Web WordPress oggi stesso.
Contributori
Grazie al membro WPMU DEV Antoine di Incensy per aver contribuito all'idea di questo post e a molti degli esempi CSS utilizzati sopra. Controlla il profilo del partner dell'agenzia Incensy per maggiori dettagli.