La pagina del checkout è uno degli ultimi steps in cui l’utente finalizza i suoi acquisti cliccando su ” completa l’acquisto”  procedendo al pagamento .

La pagina in questione però, se avessi mai cercato di personalizzarla, avrai notato che non è possibile farlo . Questo perché è una delle pagine protette dal plugin WooCommerce .

In realtà ci sono dei plugin specifici per poter personalizzare la pagina del checkout, ma se quello che cerchi è un metodo per cambiare semplicemente il colore dei pulsanti, possiamo riuscire a farlo tramite CSS.

Cambiare il colore della pagina Checkout di WooCommerce – CSS

Per poter personalizzare la nostra pagina di Woocommerce avremo bisogno di poter inserire il nostro codice di stile personalizzato all’interno del tema che stiamo utilizzando in WordPress.

Il 90% dei temi che di solito sono installati sul nostro WP , hanno la possibilità di inserire il CSS all’interno della sezione personalizza, proprio dove si modificano i dettagli del sito (nella parte frontend ) .

Infatti per questa modifica possiamo possiamo utilizzare la funzione “CSS Aggiuntivo” .

Se il tuo tema non dovesse avere questa funzione, potrai optare per un plugin che ti permetta di farlo come Simple Custo CSS and JS  , come già accennato in qualche articolo precedente .

Adesso che conosci gli strumenti per poter scrivere del codice all’interno del sito in WP , ti basta semplicemente incollare lo snippet che ho preparato per te :

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {

background:red !important;

background-color:red !important;

color:white !important;

text-shadow: transparent !important;

box-shadow: none;

border-color:#ca0606 !important;

}

.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {

background: red !important;

color:white !important;

text-shadow: transparent !important;

border-color:#ca0606 !important;

}

.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {

background: red !important;

box-shadow: none;

text-shadow: transparent !important;

color:white !important;

border-color:#ca0606 !important;

}

Se dovessi aver installato il plugin “Simple Custom Js and CSS dovrai cliccare su “Add Custom CSS nella tua Dashboard” :

Arrivati alla nostra pagina di aggiunta del CSS, possiamo dare un titolo al nostro codice (che in questo esempio ho chiamato Checkout ), cancellare il codice esempio ed inserire il nostro :

Se invece stessi utilizzando la funzione “CSS Aggiuntivo” del tuo tema ( personalizza ) , dovrai semplicemente incollare il codice all’interno .

Finita la procedura , noterai che i pulsanti della tua pagina Checkout saranno diventati rossi . Vuol dire che il nostro codice sta funzionando !

Per poter scegliere il colore più adatto al tuo tema, dovrai sostituire dove leggi “red”, con il tuo codice colore.

Se non conosci il codice del colore principale del tuo tema, potrai utilizzare uno degli strumenti che ti permetta di scoprirlo, come “ColorZilla” , oppure recarti sul sito Color Palette di Adobe per poterne generare uno .

Dove leggi “white” invece, sarà il colore del testo nel pulsante che potrai anch’esso sostituire a tuo piacimento .

Adesso non ti resta che goderti il tuo e-commerce con la pagina del checkout personalizzata !

È stato utile questo articolo ?

Lasciami un commento

L'articolo Colore Pagina Checkout su WooCommerce proviene da Alessandro Albergo.

Come al solito mi piace mostrare più metodi per riuscire ad ottenere un risultato sul proprio sito web.

Come aggiungere icone nel Menu di WordPress con Font Awesome :

Il primo metodo, è utilizzare un plugin chiamato Fontawesome , facilmente installabile come già ho spiegato in qualche articolo precedente : CLICCA QUI per leggere l’articolo.

Installata la nostra libreria potrai copiare il codice icona dal sito della libreria i incollarlo direttamente nel tuo menu :

Il risultato sarà visibile nella tua parte frontend del sito:

Metodo 2 – Plugin WP Menu Icons :

Se quello che stai cercando invece è un plugin più semplice e immediato, potresti utilizzare WP Menu Icons , ti basterà scaricare il pacchetto dal sito ufficiale o dal tuo WordPress stesso per poter incominciare a divertirti con le tue icone personalizzate :

Noterai appena attivato il plugin che nell’editor del tuo menu WordPress ci sarà un simbolo “+”  su ogni voce,  potrai scegliere la libreria di importazione e le icone :

Ora aggiungiamo una voce nel menù sotto quella che abbiamo creato precedentemente e vediamo le differenze :

Mentre per la prima voce abbiamo utilizzato il codice preso dal sito Font Awesome , per la seconda voce invece possiamo direttamente utilizzare il simbolo “+” per scegliere l’icona :

Bene, adesso non ti resta che personalizzare ogni voce del tuo menu e goderti il sito in WordPress con una user experience migliorata !

È stato utile questo articolo ?

Lasciami un commento

L'articolo Aggiungere icone al menu di WordPress proviene da Alessandro Albergo.

Sicuramente potevo utilizzare un’immagine “.png” , ma avrei dovuto impiegarci più tempo per adattare la dimensione su ogni dispositivo. Quindi come quasi tutti gli sviluppatori che utilizzano le icone, ho deciso di crearla con una libreria e precisamente ho utilizzato “Fontawesome“.

Cosa è Font Awesome ?

Font Awesome è una delle tante librerie per sviluppatori che mette a disposizione le icone in codice, che prendono forma grazie al file di stile “CSS” che il sito rilascia tramite link (CDN).

Molte di queste librerie hanno icone che si possono utilizzare con un piano Free, quindi basta semplicemente registrarsi e includere il link della CDN rilasciato, altre invece hanno un piano PRO (a pagamento e con CDN a parte).

Non preoccuparti perché l’icona di Instagram rientra nel piano Free .

Quindi per iniziare come primo step, installiamo la libreria! Niente di più facile, copiamo la CDN e inseriamola nell’ “head” del nostro progetto con il tag “link”. Per semplificarti il tutto ti condivido qui la CDN da inserire direttamente nell’ “head”, in questa maniera potrai anche non registrarti sul sito.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

Adesso potrai copiare il codice di ogni icona free del sito FA (Font Awesome) e incollarla nel tuo progetto, il risultato sarà appunto l’icona visualizzabile (quella che avrai scelto ). Se dovessi prendere un’icona pro invece, non essendo inclusa nella CDN, non verrà visualizzata sul sito web.

Posso installare Font Awesome su WordPress ?

Certo, come al solito è tutto più rapido, ti basta installare il plugin FontAwesome  e poi inserire il codice nell’HTML del tuo articolo o del Widget.

Per Sapere come utilizzare l’HTML nella pagine puoi vedere l’articolo Immagini Responsive , dove spiego come farlo .

Creiamo l’icona di Instagram con il suo vero colore

Come prima cosa, dopo aver installato la libreria sul tuo sito, cerchiamo l’icona di Instagram nella barra di ricerca del sito FA , semplicemente cercando la parola chiave (che in questo caso sarà “Instagram”).

Io ho usato questa icona:

<i class="fab fa-instagram fa-3x"></i>

Ho aggiunto la classe “fa-3x” che rende l’icona più grande. Ci sono varie misure del css di FA, e vanno da “fa-1x” a “fa-5x”, tu puoi scegliere la misura che più ti soddisfa.

Adesso non ci resta che aggiungere il nostro stile tramite CSS.

Utilizzando WordPress potrai aggiungere lo stile tramite il menù Personalizza -> CSS Personalizzato (Lo stesso menù che usi per modificare la Favicon del tuo sito) oppure installando il Plugin Simple Custom CSS and JS .

Copia e incolla questo codice all’interno del tuo CSS o del Plugin:

.insta-colore{
	color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Su WordPress :

Inseriamo quindi la classe che abbiamo istanziato con il nome di  “insta-colore” all’interno dell’icona di Font Awesome, quindi il risultato finale nell’ HTML sarà :

<i class="fab fa-instagram fa-3x insta-colore"></i>

Adesso dovresti vedere la tua icona di Instagram con lo stesso colore e sfumature di quella originale.

È stato utile questo articolo ?

Lasciami un commento per qualsiasi domanda o per qualche osservazione

L'articolo Colore icona Instagram Font Awesome proviene da Alessandro Albergo.

Cosa è la barra di progressione lettura ?

È semplicemente una barra di caricamento che trovi di solito in alto o in basso ad un articolo o pagina, che aumenta con l’avanzamento della lettura ( scroll ).

Proprio come quella che vedi su questo articolo in alto!

Perché dovrei averne una ?

In realtà non è niente di obbligatorio, ma una barra di progressione per la lettura, è un piccolo aiuto e un invito a scorrere la pagina fino in fondo e motiva il visitatore a leggere l’articolo fino in fondo.

Quindi oltre ad essere un’animazione carina, è anche un incentivo per l’utente a leggere tutto l’articolo e quindi restare più tempo sul sito web.

Sapevi che i visitatori di un sito impiegano solo un paio di secondi per decidere se rimanere sul sito o abbandonarlo ? È difficile mantenere alto l’interesse del lettore e catturare la sua attenzione, specialmente se si tratta di articoli lunghi.

Bene, quindi adesso che sappiamo i vantaggi di una barra di progressione lettura, possiamo scoprire come crearne una per il nostro sito web.

Barra di progressione lettura in codice

Qui ti spiegherò come creare la progress bar lettura in codice da inserire sul tuo sito web, se tu dovessi avere un sito in wordpress, potrai saltare questa parte e vedere il prossimo tutorial e i plugin da scaricare.

Vediamo subito il codice da inserire per il nostro sito web:

Il primo codice sarà in HTML e sarà semplicemente un”<div>” con una classe e un “ID” che sarà richiamato dal codice in Javascript

<div class="progressbarlettura" id="progressbarlettura"></div>

Come vedi sia la classe e sia l’ID hanno lo stesso nome per convenzione e per rendere tutto più semplice.

Supponiamo che hai un tag “article” dove all’interno hai tanti TAG  “p” e “h1 ” , bene ora quello che dobbiamo fare, sarà inserire quel codice HTML subito prima del TAG article, come in questo esempio:

<div class="progressbarlettura" id="progressbarlettura"></div>

<article>
	<h1>Titolo Articolo</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic doloribus nisi repellat officia voluptas, cum praesentium, temporibus distinctio quos. Facilis suscipit, consectetur labore optio quia beatae magni dolores iusto alias iste, in repellat adipisci aliquid cumque earum asperiores. Eligendi sint aperiam facilis quos</p>
</article>

Ora creiamo il foglio di stile CSS , e inseriamo il codice per la nostra progress bar :

.progressbarlettura {
    background: yellow;
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    width: 0%;
    height: 5px;
    z-index: 1000;
}

Come vedi il codice, creerà la Barra di progressione lettura di colore giallo, puoi cambiare colore inserendo il “codice colore” al posto di “yellow”.

Vediamo il codice in Javascrip da incorporare nel nostro sito web:

let prog = document.getElementById('progressbarlettura');

let body = document.body,
    html = document.documentElement;

let height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

const setProgress = () => {
   let scrollFromTop = (document.documentElement.scrollTop || body.scrollTop) + html.clientHeight;
   let width = scrollFromTop / height * 100 + '%';

   console.log('scroll', html.clientHeight, body.scrollTop);

   prog.style.width = width;
}

window.addEventListener('scroll', setProgress);

setProgress();

Bene, adesso che avrai importato tutto, potrai vedere la tua barra di progressione lettura visibile e animata durante lo scorrimento del tuo articolo !

Barra di progressione lettura con WordPress

Vediamo come poter avere la nostra barra di progressione lettura in maniere davvero semplice, con l’utilizzo dei plugin per WordPress.

Il primo plugin che possiamo utilizzare è Worth the Read mentre il secondo è Reading Progressbar .

Possiamo utilizzare uno dei 2, sono davvero molto simili ed è possibile modificare il colore e lo stile della barra di caricamento in entrambi.

Se dovessi installare Worth the Read, troverai una volta attivato il plugin, la voce nel menù della tua Daschboard altrimenti con Reading Progressbar verrà aggiunta la voce nel menù delle impostazioni della Dashboard.

Worth The Road :

Reading Progressbar :

Forse Worth the Read è più completo, ma in realtà io punterei più su una scelta di compatibilità.

Prova ad installare uno dei due, se non ci dovessero essere errori e riesci a visualizzare tutte le immagini nei tuoi articoli, allora potrai tenerlo installato, altrimenti potrai utilizzare l’altro .

Che ne pensi ? È stato utile questo articolo ?

Lasciamo un commento se non vai troppo di fretta

L'articolo Barra di progressione lettura Articolo e pagina web proviene da Alessandro Albergo.

Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.

Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.

PS: Per visualizzare il post pubblicato su instagram clicca qui.

Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.

Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Netflix Logo</title>
</head>

<body>
    
    <div class="logo">
        <div class="netflix">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <h3>Netflix</h3>
    </div>

</body>

</html>

Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: centet;
    align-items: center;
    background: black;
    height: 100vh;
}

h3{
    color: white;
    position: absolute;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-family: arial;
    letter-spacing: 12px;
    font-weight: 800;
}

.netflix{
    position: relative;
    width: 350px;
    height: 500px;
}

.netflix span{
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
}

.netflix span:nth-child(1){
    background: #b00612;
    left: 0;
}

.netflix span:nth-child(2){
    background: #e50810;
    left: 0;
    transform-origin: top;
    z-index: 1;
    transform: skewX(25deg);
    box-shadow:  0 0 40px rgba(0,0,0,1);
}

.netflix span:nth-child(3){
    background: #b00612;
    right: 0px;

}

Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato!  Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).

Ti è piaciuto questo articolo ?

Lasciami un commento per farmelo sapere

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.

Sei nel posto giusto per poter scoprire 4 strumenti fondamentali che DEVI avere nella tua cassetta degli attrezzi!

L’estensioni che sto per elencarti sono disponibili per Google Chrome e anche per Firefox.

Il primo add-on che uso quotidianamente, è ColorZilla (Chrome) – ColorZilla (Firefox) ,  utilissimo per identificare il colore sulle pagine Web . Con questo strumento hai la possibilità di scoprire il codice colore che ha ogni singolo elemento di un sito, crearne uno tuo e vedere la cronologia di colori usati. Uno strumento di cui non potrai più farne a meno :

Il secondo strumento molto utile che utilizzo è WhatFont (Chrome) – WhatFont (Firefox) , utilissimo per riconoscere i fonts sulle pagine web , e poter ottenere il nome esatto per poter poi scaricare lo stesso stile di scrittura scoperto:

Il terzo strumento che ti consiglio è Fake Filler (Chrome) – Fake Filler (Firefox) , ottimo in campo di testing sui form.

Utile per quando provi a riempire durante uno sviluppo i tuoi form di contatto (o altri campi) per capire se funziona tutto alla perfezione.

Non dovrai più scrivere tante volte all’interno dei campi durante il tuo sviluppo. Il plugin riconosce il form e lo riempirà con parole in latino, date casuali o numeri di telefono fake:

Ultimo ma non per ordine di importanza è uno strumento molto conosciuto, si chiama Wappalyzer (Chrome) – Wappalyzer (Firefox) , ottimo add-on per chi ama capire quali strumenti sono stati utilizzati per sviluppare un website.

Basta cliccare sulla sua icona per avere un reso-conto di tutti i plugin e librerie utilizzati. Inoltre potrai capire anche se il sito è stato sviluppato con un CMS o meno :

Adesso potrai divertirti a scoprire come è stato realizzato qualsiasi sito web e raccogliere informazioni per creare lo stile che ti piace !

È stato utile questo articolo ??

Lasciami un commento

L'articolo Estensioni Chrome e Firefox per il Web proviene da Alessandro Albergo.

Se ti infastidiscono gli spam che ti arrivano dal form di contatto del tuo sito in WordPress, sei nel posto giusto per imparare ad integrare Goolge reCAPTCHA, ed evitare email pubblicitarie che arrivano sulla tua posta elettronica.

Come primo consiglio, ti suggerisco di utilizzare (ma forse lo starai già utilizzando) il plugin Contact Form 7 .

Si presenta come un ottimo form di contatto ed è davvero personalizzabile su tutti i punti di vista.

Se hai bisogno di una guida su come utilizzarlo puoi dare un’occhiata al mio articolo;  form di contatto.

Ora andiamo sul nostro plugin  (lo troviamo nel menù del pannello di controllo sotto la voce contatto) e clicchiamo integrazione :

Adesso dovresti vedere nella schermata, una sezione con la scritta reCAPTCHA:

Bene , proseguiamo con “Imposta integrazione” , e dovresti vedere un form simile a questo :

Non ci resta che inserire le chiavi di Google reCAPTCHA per far si che l’ anti spam funzioni con il form di contatto.

Va bene Ale.. Ma queste chiavi di Google come le genero ? Si paga ??

Assolutamente no! Il reCAPTCHA è un servizio gratuito di Google e per generarle ti servono 5 minuti

Vediamo come fare. Clicca su questo link : reCAPTCHA (v3).

Dovresti vedere ora la Dashboard reCAPTCHA di Google , effettua l’accesso con il tuo account ( va bene anche lo stesso account che usi per Gmail ):

Ora clicca su v3 Admin Console e poi il tasto aggiungi  “+” (in alto a destra) per iniziare a generare le tue chiavi :

Bene adesso diamo un nome all’etichetta (consiglio di scrivere l’indirizzo o il nome del sito, per trovarlo subito nel caso dovessimo avere più chiavi), selezioniamo reCAPTCHA v3, inseriamo il dominio e accettiamo i termini e le condizioni. Infine, clicchiamo su invia

Adesso cliccando sull’ingranaggio delle impostazioni in alto a destra, vedremo le impostazioni e il tipo di reCAPTCHA creato (in questo caso v3).

Selezioniamo la voce chiavi “reCAPTCHA v3” e si aprirà una finestra con le chiavi da copiare:

Copiamole e inseriamo la chiave pubblica nella casella dove il plugin chiede “Chiave del sito” e la chiave privata dove c’è scritto “Chiave Segreta” ( nell’integrazione di Contact Form 7 ).

Bene a questo punto dovresti vedere il tuo reCAPTCHA funzionante, noterai infatti un pulsante/badge di Google sulla destra in tutte le pagine del sito.

Quel badge è utile per i termini e le condizioni di Google e per quel che sappiamo, è obbligatorio tenerle sul sito.

Non c’è un altro modo per mostrare i termini e le condizioni ? Si può togliere il badge?

Si certo, basta utilizzare il css personalizzato. Clicchiamo su personalizza sito (il bottone che utilizzi per modificare il titolo o il logo del tuo sito web) e dove ti chiede di inserire il CSS personalizzato incolliamo questo codice:

.grecaptcha-badge { visibility: hidden; }

Nel caso tu non abbia questa opzione nel tuo tema, potrai optare per un plugin che ti permetta di aggiungere del css personalizzato, valido per tutto il sito, il suo nome è Simple Custom CSS and JS .

Ora basterà salvare le modifiche per notare che il badge sarà sparito.

Adesso ti converrà indicare nel footer gli stessi termini e condizioni di google, copia e incolla questo testo:

THIS SITE IS PROTECTED BY RECAPTCHA AND THE GOOGLE PRIVACY POLICY AND TERMS OF SERVICE APPLY.

Bene! Ora il tuo sito è protetto dagli spam!

È stato utile l’articolo ?

Lasciami un commento per farmelo sapere .

L'articolo Evitare Spam con Google reCAPTCHA su WordPress 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.

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 :

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

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)

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.