Introduzione body:not(.logged-in)
Sommario
In questa breve guida ti insegno a oscurare qualsiasi elemento del tuo sito internet realizzato con WordPress e Elementor, molto utile soprattutto se ti sei letto anche la guida che avevo scritto su come creare una pagina personalizzata account di woocommerce. Infatti in quella guida ti insegno come aggiungere e personalizzare la pagina account e come oscurare le personalizzazioni.
Ora ci sono diversi motivi del perché tu voglia nascondere pulsanti, sezioni, colonne, a utenti che non hanno un account e sicuramente la prima cosa che ti viene in mente è quella di installare un’altro plugin per la gestione dei contenuti.
Devi capire che non serve sempre installare un plugin, molto spesso la soluzione è piú semplice di quanto tu possa pensare.`Infatti in questo articolo con 3 righe di codice CSS possiamo oscurare un preciso elemento che non vogliamo mostrare a chi non ha un account del sito. Pronto?
Cosa sono i CSS
I CSS sono i fogli di stile delle pagine, quindi gestiscono la gran parte dei colori, layout del sito e in alcuni casi possono avere un ruolo molto importante, come in questo caso ma puoi trovare una guida bella dettagliata a riguardo su Wikipedia CSS.
Modificare CSS elementor
Se ormai hai preso la mano con il miglior page builder per wordpress avrai visto nella colonna di sinistra la voce avanzato e la parte CSS personalizzato. Quell’area ti permette di inserire qualsiasi codice CSS per modificare un elemento specifico come vuoi senza andare a toccare il foglio di stile style.css del tema. Bello vero?
Quindi se per esempio vogliamo oscurare i quattro elementi della precedente guida “Ordini, Download etc..” e mostrarli sono agli utenti loggati al sito dovremo prima di tutto assegnare un ID alla riga o elemento singolo che vogliamo oscurare.
In questo caso vado chiamo come ID “sezionilog” l’intera riga che voglio oscurare come puoi vedere nella seguente foto:
Una volta eseguito apro la sezione “CSS personalizzato” e quindi incollo questo codice:
body:not(.logged-in) #sezionilog{
display: none;
}
Ecco che vado a dire a Elementor che se “not” quindi non é “logged-in” quindi loggato al sito prendi la sezione “#sezionilog” e nascondila “display:none;”.
Cosi facendo la nostra sezione personalizzata viene completamente nascosta agli utenti esterni.
Conclusione nascondere elementi della pagina con CSS
Vogliono concludere questa piccola guida facendo capire quando potente siano i CSS e che molto spesso la soluzione é solamente 3/4 righe di codice. Ripeto non cadere come fanno molti inesperti nella trappola dei plugins. Si certo ce ne sono molti di utili ma cerca di mantere il sito leggero e sano sapendo il codice che inserisci soprattutto é una questione di velocitá del sito e sicurezza del sito wordpress.
Detto questo spero che questa guida ti sia piaciuta se se nuovo/a seguimi su Facebook e condividi questo articolo.