style Archivi - Alessandro Albergo https://alessandroalbergo.it/tag/style/ Alessandro Albergo, sviluppatore - Frontend e Backend - Bari - Realizzazione siti web Wed, 15 Dec 2021 11:18:56 +0000 it-IT hourly 1 https://wordpress.org/?v=7.0 https://alessandroalbergo.it/wp-content/uploads/2021/03/cropped-aa-giallo-32x32.png style Archivi - Alessandro Albergo https://alessandroalbergo.it/tag/style/ 32 32 Mostrare elemento al click sul tuo sito web https://alessandroalbergo.it/mostrare-elemento-al-click/ https://alessandroalbergo.it/mostrare-elemento-al-click/#comments Sun, 21 Mar 2021 18:00:07 +0000 https://alessandroalbergo.it/?p=2645 Come creare un elemento che viene visualizzato al click del pulsante. 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..

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

]]> Come creare un elemento che viene visualizzato al click del pulsante.

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”:

 

MOSTRARE ELEMENTO AL CLICK DI UN BOTTONE JQUERY

 

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.

]]> https://alessandroalbergo.it/mostrare-elemento-al-click/feed/ 8 Immagini responsive articoli di WordPress https://alessandroalbergo.it/immagini-responsive-articoli-di-wordpress/ https://alessandroalbergo.it/immagini-responsive-articoli-di-wordpress/#comments Sun, 21 Mar 2021 06:25:12 +0000 https://alessandroalbergo.it/?p=2518 Perché le immagini degli articoli/pagine del mio sito non si adattano sullo schermo dei cellulari (non sono responsive) ? A volte può sembrare un mistero e la domanda che alcuni mi fanno è:  Perché le immagini degli articoli sul mio WordPress non sono responsive ? Eppure ho un tema che garantisce il responsive di tutte..

L'articolo Immagini responsive articoli di WordPress proviene da Alessandro Albergo.

]]> Perché le immagini degli articoli/pagine del mio sito non si adattano sullo schermo dei cellulari (non sono responsive) ?

A volte può sembrare un mistero e la domanda che alcuni mi fanno è:  Perché le immagini degli articoli sul mio WordPress non sono responsive ? Eppure ho un tema che garantisce il responsive di tutte le pagine !

Beh se ti stai ponendo questa domanda sei nel posto giusto per imparare in 2 minuti a rendere le immagini dei tuoi articoli responsive 😀 .

In realtà molto probabilmente, il tuo sito è responsive e sicuramente lo sviluppatore avrà già testato tutto nei minimi dettagli prima di rendere disponibile il tema che hai sul tuo sito.

Quello che però ti sta creando “l’errore del responsive” è un conflitto tra classi e stili tra WordPress e il Tema stesso.

Si Ale…Ma che significa ?

Lasciami spiegare, ogni tema nel proprio pacchetto ha uno o più fogli di stile che determinano le grandezze, colori, font, e responsive di tutto i sito comprese le immagini .

Infatti se dai un’occhiata al tuo tema, attraverso il tuo menù (Aspetto -> editor del tema) all’interno della cartella troverai un foglio che si chiama style.css, il nome è lo stesso per tutti i temi di WordPress, in quanto è obbligatorio per lo sviluppatore lasciare il file con il nome style.

Questo file è un foglio CSS che contiene delle classi che creano la grafica e il layout al tuo sito web.

Devi sapere che lo stile che si crea per un sito web, potrebbe essere reimpostato da qualcosa (parlo di codice) che in ordine di importanza venga letto e sovrascriva lo stile precedentemente impostato.

Ci sono tanti modi per creare uno stile, uno di questi è il foglio CSS (come il file style.css) e un altro può essere la scrittura in linea direttamente nel codice HTML .

Per intenderci , cliccando su visualizza come HTML sulla tua pagina editor, noterai che quando provi a centrare un testo, WordPress scrive uno stile in linea , esempio :

responsive immagini stile in linea wordpress

Come vedi, questa frase viene centrata da WordPress scrivendo style=”text-align:center;” .

Quello che c’è  da sapere, è che lo stile in linea (inline style) ha priorità assoluta rispetto al foglio di stile e questo accade proprio per le immagini che risultano non essere più responsive.

 

Adesso che abbiamo capito il funzionamento, rendiamo le immagini responsive sul nostro WordPress

 

Provando a caricare un’immagine, proprio come nell’esempio del testo centrato, noterai osservando in modalità testo HTML , un inline-style all’immagine, solo che questa volta troveremo scritto altezza (height) e larghezza (width) .

Facciamo un esempio e cerchiamo di renderla responsive.

Carichiamo l’immagine in un articolo e selezioniamo con la matita, “dimensioni reali” e “posizione -> centro”:

 

100%

Adesso clicchiamo su visualizza come HTML (se non sai come farlo puoi dare un’occhiata a questo articolo  dove spiego il link di ancoraggio e come visualizzare con il nuovo blocco di WordPress l’ HTML)

 

responsivi height e width in linea wordpress immagini

 

Come possiamo notare, WordPress ha creato uno stile con width e height all’ immagine , e per quanto possiamo cancellare quel codice, WordPress lo andrà a ricreare sicuramente, quindi come possiamo fare ?

Il metodo che ti consiglio, è sostituire i numeri che vedi dopo lo stile scrivendo 100%, in questa maniera andrai ad adattare tutte le immagini su ogni tipo di schermo.

 

 

Et voilà 😀 ! Le tua immagine ora sarà responsive per tutti i dispositivi!

Ti lascio il link di W3School che spiega nel dettaglio il funzionamento del CSS: Clicca qui

Utile ? Lasciami un feedback nei commenti 🙂

 

 

 

L'articolo Immagini responsive articoli di WordPress proviene da Alessandro Albergo.

]]> https://alessandroalbergo.it/immagini-responsive-articoli-di-wordpress/feed/ 1