[HTML] Pulsanti animati per wordpress

Ragnarr · 23 Feb 2017

Salve a tutti,

premetto che questo è il mio primo intervento in questo forum, quindi scusate l'eventuale imprecisione nelle mie espressioni.

Premetto che non sono un informatico ma soltanto una persona che sta cercando di creare il proprio blog da solo, imparando anche per meccanismo di prova ed errore.

Dedico le ultime ore della giornata a costruire il mio blog cercando di farlo il meglio possibile con le risorse a mia disposizione; adesso passo a spiegarvi il mio problema.

Ho creato una pagina descrittiva del servizio che voglio offrire ed ora, anche per snellire il menù, ho deciso di inserire dei pulsanti con i collegamenti alle pagine che sono legate direttamente all'argomento.
Questi pulsanti però vorrei che fossero delle immagini e che si animino al passaggio del mouse (ad esempio che si rialzino o che si scolorino al passaggio del mouse) insomma vorrei creare un'animazione sul pulsante al passaggio del mouse.
Esistono dei plug-in per questo? oppure è possibile farlo in altro modo?

Grazie per l'attenzione e per le eventuali risposte!

Max 1 · 23 Feb 2017

È possinile farlo con i css3. Non so se esiste dei plug-in per WP perché non conosco a fondo WP, ma se vuoi ti sposto nella sezione adatta

Ragnarr · 24 Feb 2017

Ciao! Si certo che per me va bene! Grazie!

Ragnarr · 24 Feb 2017

Max 1 ha scritto:
È possinile farlo con i css3. Non so se esiste dei plug-in per WP perché non conosco a fondo WP, ma se vuoi ti sposto nella sezione adatta

Certo che puoi! Grazie!

glm1986ITALY · 24 Feb 2017

Esiste un plugin molto valido e free:
https://srd.wordpress.org/plugins/buttons-x/

Ragnarr · 24 Feb 2017

glm2006ITALY ha scritto:
Esiste un plugin molto valido e free:
https://srd.wordpress.org/plugins/buttons-x/

Ciao!!!! Grazie! Ho provato il plug-in che mi hai consigliato! E' molto simile ad un'altro che avevo trovato "Image Hover Effect" per entrambi ovviamente per fare qualcosa di carino è necessaria la versione pro! Colgo l'occasione per chiederti se mi conviene acquistare la versione pro oppure lasciare perdere.
In ogni caso il tuo suggerimento mi ha dato visuale su molti plug-in interessanti! Grazie di cuore!

glm1986ITALY · 24 Feb 2017

Prova a guardare anche elementor: è un page builder estremamente potente, leggero che fa un po'di tutto!

Max 1 · 24 Feb 2017

E provare con i css3 prima di spendere soldi?

Ragnarr · 24 Feb 2017

ok! Adesso sono proprio in wordpress ad aggiornare un pò di pagine, lo scarico e ti faccio sapere! Grazie!

Ragnarr · 24 Feb 2017

Max 1 ha scritto:
E provare con i css3 prima di spendere soldi?

e come funziona?

Max 1 · 24 Feb 2017

Non ha un funzionamento specifico! Si crea un'animazione attraverso un codice CSS3. Ma sai cosa sono?

Ragnarr · 24 Feb 2017

Max 1 ha scritto:
Non ha un funzionamento specifico! Si crea un'animazione attraverso un codice CSS3. Ma sai cosa sono?

In realtà non proprio. So che si parla di codici ma non conosco nè l'utilizzo nè il codice

Max 1 · 24 Feb 2017

Allora diventa complicato! Comunque che tipo di animazione vorresti fare?

Ragnarr · 24 Feb 2017

Max 1 ha scritto:
Allora diventa complicato! Comunque che tipo di animazione vorresti fare?

posso inserire il link della casa madre per dare l'idea del tipo di pulsante che voglio creare?

Max 1 · 24 Feb 2017

Ragnarr · 24 Feb 2017

Max 1 ha scritto:
Si!

https://it.eipass.com/
questo è il link; i pulsanti che vorrei creare sono quelli tipo vicino allo slideshow

Ragnarr · 24 Feb 2017

Ragnarr ha scritto:
https://it.eipass.com/
questo è il link; i pulsanti che vorrei creare sono quelli tipo vicino allo slideshow

oppure come stanno alla fine della pagina prima del banner finale

Max 1 · 24 Feb 2017

Codice:

<style type="text/css">
.box {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 300px;
    width: 300px;
}
.testo {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    margin: 0px;
    padding: 20px;
    height: 260px;
    width: 260px;
    top: 0;
    left: 0;
    visibility: hidden;
    text-align: center;
}
.box:hover .testo {
    visibility: visible;
}
</style>

HTML:

<div class="box">
    <img src="tua-immagine.jpg" width="300" height="300" alt=""/>
    <div class="testo" onClick="document.location.href='tua-pagina.html';">
        Inserite qui il Commento dell'immagine
    </div>
</div>

Ragnarr · 27 Feb 2017

Max 1 ha scritto:

Codice:

<style type="text/css">
.box {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 300px;
    width: 300px;
}
.testo {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    margin: 0px;
    padding: 20px;
    height: 260px;
    width: 260px;
    top: 0;
    left: 0;
    visibility: hidden;
    text-align: center;
}
.box:hover .testo {
    visibility: visible;
}
</style>

HTML:

<div class="box">
    <img src="tua-immagine.jpg" width="300" height="300" alt=""/>
    <div class="testo" onClick="document.location.href='tua-pagina.html';">
        Inserite qui il Commento dell'immagine
    </div>
</div>

ed eccomi qui! Di nuovo alla tastiera! dove dovrei inserire questo codice? Grazie anticipatamente!!!

Ragnarr · 27 Feb 2017

glm2006ITALY ha scritto:
Prova a guardare anche elementor: è un page builder estremamente potente, leggero che fa un po'di tutto!

Plug-in scaricato! Molto semplice ed intuitivo! Sono riuscito in qualche modo a sistemare il tutto! Ovviamente io punto ad imparare di più e a creare queste cose senza il builder! Grazie!

[HTML] Pulsanti animati per wordpress

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Moderatore

Nuovo Utente

Moderatore

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Discussioni simili

Privacy & Transparency

Privacy & Transparency