Se utilizzi Elementor sul tuo sito in WordPress, devi sapere che di default è possibile nascondere le sezioni o widget di ogni pagina creata cliccando su : Avanzate -> Responsive -> Nascondi elemento per mobile, desktop , tablet .

Quello che andiamo a fare in questo caso,  è nascondere la sezione / widget per tutti gli utenti, compresi noi stessi .

Ecco perché oggi ti suggerisco un plugin molto utile per poter nascondere gli elementi solo a determinati utenti in una pagina creata con Elementor .

Plugin per nascondere elementi su una pagina creata con Elementor – WordPress

Il plugin in questione che ci aiuterà a gestire la visibilità delle sezioni che vogliamo nascondere a determinati utenti, si chiama Visibility Logic for Elementor , conta più di 10.000 installazioni attive :

Bene quindi non ci resta che installare e attivare il nostro plugin e vedere subito come poter creare una sezione con visibilità logica .

Rechiamoci sulla pagina di Elementor in cui vogliamo nascondere gli elementi per determinati utenti .

Ci basta cliccare (dopo aver aperto l’editor della pagina con Elementor ) , la sezione interessata e subito recarci su Avanzate -> Visibility Control :

Come vedi ho impostato che la sezione sarà nascosta solo per utenti loggati, ma in realtà si possono scegliere anche i diversi ruoli del tuo sito WordPress :

Per esempio potresti nascondere la sezione per utenti non loggati , selezionando la voce “Guest” , oppure solo per determinati ruoli se hai intenzione di creare die piani abbonamento sul tuo sito !

Bene adesso sai come poter gestire la visibilità delle sezioni sul tuo sito in WordPress utilizzando Elementor !

È stato utile questo articolo ?

Lasciami un commento

Potrebbe interessarti : Come nascondere la top-bar di amministrazione  oppure Come gestire la modalità provvisoria di Elementor .

L'articolo Nascondere elementi per determinati utenti su Elementor proviene da Alessandro Albergo.

In realtà per quanto potrebbe sembrare un controsenso è un bene che ci stia rispondendo con questo messaggio .

Elementor  vuole dare un aiuto per poter risolvere il problema. Infatti cliccando su “Abilità modalità provvisoria” potremo utilizzare il plugin in maniera minimale (quindi senza addons ) . In questa maniera dovremmo riuscir a capire quale sezione della pagina sta creando l’errore .

Come riuscire a rimuovere l’errore Elemento modalità provvisoria

Soluzione 1

Come detto prima quello che ti consiglio di fare è di abilitare la modalità provvisoria ed eliminare una sezione per volta per poter capire quale ti stia creando il conflitto con il plugin .

Il procedimento è : Salvare, vedere se l’errore continua ad esserci e nel caso dovesse essere così, tornare indietro e continuare a provare ripristinando la sezione eliminata ed eliminando la successiva .

Possiamo dire che questa è una soluzione azzardata perché potrebbe accadere che non si riesca a tornare più indietro.

Infatti quello che consiglio di fare prima di procedere, è un’alternativa più lunga ma più sicura.

Soluzione  2

La seconda alternativa (la più lunga) consiste nel disattivare un plugin per volta, ricaricare la pagina che presenta l’errore, e cliccare su modifica con Elementor . Se la modalità provvisoria verrà riproposta , allora potrai riattivare il plugin e disattivare il prossimo continuando fino a quando non capirai quale strumento (plugin ) ti sta creando un conflitto .

In realtà quasi sempre il problema è dovuto ad un plugin che si integra con il nostro Page Builder , che probabilmente non è aggiornato oppure presenta dei bug non ancora risolti.

Quando avrai trovato il plugin che ti crea l’errore della modalità provvisoria del plugin Elementor , potrai verificare la disponibilità di un suo aggiornamento, oppure provare a disinstallarlo e reinstallarlo.

Soluzione  3

Assicurati che anche il plugin Elementor ed Elementor Pro sia aggiornato !

Spero che questa piccola guida ti abbia dato una mano per poter risolver il conflitto del page builder sul tuo sito in WordPress .

È stato utile questo articolo ?

Lasciami un commento se hai bisogno di più info o se hai risolto il bug  con questo tutorial.

L'articolo Elementor modalità provvisoria proviene da Alessandro Albergo.

Ciao oggi ti spiegherò come mostrare un elemento, video o altro, al click di un pulsante(click to show) nel tuo sito web anche per CMS come WordPress utilizzando jquery.

Essendo una guida anche per siti Web che non utilizzano CMS, non servirà installare plugin su WordPress.

Utilizzando già di base un page builder come Elementor , Divi o altro, potrai creare tutto senza installare niente, ma nel caso così non fosse, dovrai scrivere il tuo codice all’interno del foglio .js del tuo tema oppure installare il plugin Simple Custom CSS and JS .

La bellezza di questo Plugin, è che puoi scrivere il tuo codice all’interno con il il modulo personalizza che usi di solito per il tuo sito e quindi mantenerlo anche nel caso tu dovessi cambiare il tema WordPress.

Sappi che tutto sarà creato utilizzando il codice in linguaggio jquery che ti mostrerò in questa guida.

Per prima cosa servirà creare una classe per la sezione che conterrà l’ elemento, (in questo esempio una parola) che apparirà al click del pulsante nel tuo sito web, nel caso il tuo sito non sia un CMS potrai crearla in questa maniera:

<section class="mostra-al-click"> 
 <div> 
  <p>Questo testo apparirà al click del pulsante</p>
 </div>
</section>

Nel caso tu stessi usando WordPress con un page builder come per esempio Elementor, potrai dare il nome della Classe nelle impostazioni della sezione cliccando su “avanzato”:

Bene adesso creiamo il pulsante che ci farà apparire la sezione grazie ad una classe che noi gli daremo:

<button class="clicca-e-mostra">Clicca qui per mostrare</button>

Usando WordPress, basterà inserire il pulsante e sempre con “avanzato” e aggiungere la classe :

Codice Jquery per mostrare elemento al click sul tuo sito web

Abbiamo quasi ultimato il click to show per il sito web, non ci resta che inserire il codice che ho creato, nel tuo html o nei vari fogli di .js e .css o nel plugin Simple Custom Css e Js. Oppure copiarlo nel modulo <html> del page builder che in questo esempio è Elementor:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
    $('.clicca-e-mostra').each(function(i){
    $(this).click(function(){ $('.showclick').eq(i).show();
    $('.mostra-al-click').eq(i).show();
    $('.clicca-e-mostra').eq(i).hide();
    $('.clicca-e-nascondi').eq(i).show();
    }); });
    });


    });
</script>
<style>
.mostra-al-click{ 
    cursor: pointer; 
    } 
.clicca-e-mostra{ 
    display: none; 
    } 
</style>

Per Elementor useremo il modulo <html>:

Come vedi il codice si divide in 2 parti.

• Una parte è lo style che ti servirà a nascondere la sezione contenente l’elemento e a far si che venga mostrato il puntatore del mouse sul bottone (che non avendo un link non te lo mostra).
• L’altra parte invece è il jquery che aggiungerà una proprietà (hide) al pulsante quando verrà mostrata l’immagine.

Posso creare un pulsante per far scomparire l’elemento e far riapparire il bottone ?

Certamente! Proviamoci subito !

Creiamo un pulsante “nascondi elemento”, che ci riporti al punto iniziale, quindi lo aggiungiamo subito sotto a quello già creato, ma con un’altra classe:

<button class="clicca-e-mostra">Clicca qui per mostrare</button>
<button class="clicca-e-nascondi">Clicca qui per nascondere</button>

Chiaramente ora andremo ad aggiungere qualche riga nel codice jquery e nello style per l’ultimo pulsante:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
    $('.clicca-e-mostra').each(function(i){
    $(this).click(function(){ $('.showclick').eq(i).show();
    $('.mostra-al-click').eq(i).show();
    $('.clicca-e-mostra').eq(i).hide();
    $('.clicca-e-nascondi').eq(i).show();
    }); });
    });  


    jQuery(function($){
    $('.clicca-e-nascondi').each(function(i){
    $(this).click(function(){ $('.clicca-e-nascond').eq(i).show();
    $('.mostra-al-click').eq(i).hide();
    $('.clicca-e-nascondi').eq(i).hide();
    $('.clicca-e-mostra').eq(i).show();
    }); });
    });  
    
    
    });
</script>

<style>
.clicca-e-mostra{
cursor: pointer;
}

.clicca-e-nascondi{
cursor: pointer;
}

.mostra-al-click{
display: none;
}

.clicca-e-nascondi{
display: none;
}
</style>

Ora non ti resta che salvare e goderti il tuo click to show e click to hide !

È stato utile ?

Lasciamo un commento per farmelo sapere!

L'articolo Mostrare elemento al click sul tuo sito web proviene da Alessandro Albergo.