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 pratici suggerimenti CSS specifici per gli utenti di WordPress, dallo stile dell'intestazione alla modifica dei caratteri.
Sebbene WordPress offra molti temi e modelli predefiniti, a volte è necessario prendere in mano la situazione e apportare personalizzazioni con i CSS.
Se ti sei mai posto 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 link?"
- "Come posso rendere questo collegamento non cliccabile ma mantenere il testo sulla pagina?"
... quindi continua a leggere per imparare alcuni preziosi trucchi CSS per il tuo sito web.
In questo tutorial, tratteremo:
- Suggerimenti CSS per WordPress
- Centra un elemento orizzontalmente e verticalmente
- Cambia il colore del collegamento
- Rimuovere un collegamento
- Disabilita un link (il link rimane visibile ma gli utenti non possono cliccarci sopra)
- Cambia il colore dei link al passaggio del mouse
- Collegamenti di stile
- Modella un bottone
- Cambia il carattere di una sezione
- Crea un'intestazione adesiva
- 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
- Modella una forma
- Crea un layout reattivo
- Porta le tue abilità CSS al livello successivo
Suggerimenti CSS per WordPress
Le uniche due cose che devi sapere per implementare 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 cancellare il tuo codice o modificarlo... non romperà nulla :)
Detto questo, passiamo direttamente ad alcuni suggerimenti pratici sui CSS con esempi in modo che possiate provarli sul vostro sito WordPress:
Centra 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 in relazione 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 procedere 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 Paletton. È molto utile!
Nota: se vuoi combinare elementi, è abbastanza facile.
Ad esempio, supponiamo di voler 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 la 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.
Disabilita un link (il link rimane visibile ma gli utenti non possono cliccarci sopra)
Nota: è sempre meglio modificare l'HTML per fare ciò, ma se CSS potrebbe essere più semplice o l'unica soluzione possibile, usa questo codice:
.item-class{
pointer-events: none;
}
Cambia il colore dei link al passaggio del mouse
Puoi fare in modo che i collegamenti cambino colore quando un utente passa sopra di essi utilizzando il seguente codice CSS:
a:hover {
color: red;
}
In questo codice, il selettore a:hover ha come target tutti i link 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 dare uno stile ai link 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 a viene utilizzato per definire lo stile di tutti i collegamenti nella 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 uniforme quando l'utente passa con il mouse sopra il collegamento. Il selettore a:hover viene utilizzato per definire lo stile del collegamento quando l'utente vi passa sopra con il mouse.
Modella un bottone
Utilizzare 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 le dimensioni 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 font su Arial o un font sans-serif simile, la proprietà font-size imposta la dimensione del font 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 adesiva
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 sono usati per definire lo stile dell'intestazione e la proprietà z-index: 9999 assicura che l'intestazione appaia sopra tutti gli altri elementi della pagina.
Crea un'intestazione adesiva con un effetto ombra
Per creare un'intestazione adesiva 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 assicura 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 spaziatura all'inizio della pagina in modo che il contenuto non venga coperto dall'intestazione fissa.
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 si rivolge a qualsiasi elemento span che appare all'interno di un elemento p . Puoi quindi avvolgere la parola o la frase che vuoi scegliere come target con un elemento span nel tuo codice 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>
Questo 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
Usa questo frammento 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 passa sopra di essa. 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.
Modella una forma
Modella 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 usate per definire lo stile di un form, incluse le proprietà background-color , padding e border-radius per l'aspetto generale del form. 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 è usato per definire lo stile dei vari campi di input nel form. 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 e 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 consiglio 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 sovrascrivere questo, 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 non solo visivamente accattivante, ma anche ottimizzato per una migliore esperienza utente.
Porta le tue abilità CSS al livello successivo
Che tu sia un principiante o uno sviluppatore web professionista o un web designer esperto, se vuoi approfondire l'uso dei CSS con WordPress, questi tutorial CSS aggiuntivi ti aiuteranno ad espandere le tue conoscenze e abilità:
- 10 semplici consigli per imparare i CSS per WordPress – Suggerimenti pratici per i principianti che vogliono imparare i CSS specificamente 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 imparare e fare riferimento a CSS specificamente per l'uso con WordPress. Copre argomenti come l'utilizzo del Customizer di WordPress, la comprensione dei selettori CSS e il lavoro con i temi child.
- 7 migliori siti per trovare frammenti CSS e ispirazione - Cerchi ispirazione per il tuo codice CSS? Questo articolo elenca sette siti Web che offrono snippet ed esempi CSS che puoi utilizzare nel tuo sito Web WordPress.
- Come applicare uno stile alle 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 Web WordPress, utilizzando sia il Customizer integrato che i plug-in.
- Plugin CSS gratuiti per la modifica in tempo reale del tuo sito WordPress – Questo articolo elenca alcuni plug-in CSS gratuiti che ti consentono di modificare in tempo reale il tuo sito Web WordPress, rendendo più facile 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 fantastici strumenti che puoi utilizzare per farlo.
- Aggiungi layout in muratura e griglia al tuo sito WordPress utilizzando i 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 vuoi 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 iniziare 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 usati sopra. Controlla il profilo del partner dell'agenzia di Incensy per maggiori dettagli.
***
Nota: non accettiamo articoli da fonti esterne. I membri WPMU DEV, tuttavia, possono contribuire con idee e suggerimenti per tutorial e articoli sul nostro blog tramite Blog XChange.