Una voce di menu a pulsante è un elemento della navigazione che mantiene la struttura di una normale voce di menu, ma viene stilizzato e percepito come un vero pulsante. Serve a dare maggiore evidenza ad un’azione importante migliorando la gerarchia visiva e guidando l’utente verso la conversione. Alcuni temi sviluppati per WordPress prevedono questa opzione; se non è presente questo articolo mostra la procedura per ottenere tale effetto mediante l’integrazione di codice CSS.

Caratteristiche principali

Iniziamo la procedura inserendo nella voce di menu che desideriamo evidenziare la classe menu-evidenziato, successivamnte inseriremo nella sezione del tema dedicata all’integrazione di codice CSS, una tra le configurazioni proposte negli esempi seguenti con lo scopo di ottenere effetti differenti.

Evidenziazione di base

/* Evidenziazione di base */
.menu-evidenziato > a {
    background: #ffcc00;
    color: #000;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.25s ease;
}

.menu-evidenziato > a:hover {
    background: #e6b800;
    color: #000;
}

Bordo elegante

.menu-evidenziato > a {
    border: 2px solid #0073e6;
    padding: 8px 14px;
    border-radius: 4px;
}

Effetto “pill button”

.menu-evidenziato > a {
    background: #6a00ff;
    color: #fff;
    padding: 10px 22px;
    border-radius: 30px;
}

Gradiente

.menu-evidenziato > a {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
}

L'articolo Voce di menu a pulsante proviene da Realizzazione di siti web a Pordenone.

Per vendere corsi online usando Gravity Forms Product Add‑ons for WooCommerce, il flusso ideale è costruire il corso come prodotto WooCommerce e usare Gravity Forms per gestire iscrizione, varianti, onboarding e pricing dinamico. L’add‑on permette di collegare un form avanzato a qualsiasi prodotto, con logiche condizionali, campi prezzo, user input e configurazioni complesse. Gravity Forms non è una piattaforma e‑learning, ma è perfetto come motore di vendita ed onboarding personalizzato. WooCommerce viene trasformato nel sistema di pagamento e Gravity Forms nel sistema di configurazione e raccolta di dati avanzata.

Cosa permette di fare Gravity Forms Product Add‑Ons

• Collegare un form Gravity Forms ad un prodotto WooCommerce.
• Usare logiche condizionali, campi prezzo, user input price, pricing dinamico.
• Impedire duplicati nel carrello: ogni configurazione è trattata come unica.
• Mostrare prezzi personalizzati.
• Creare prodotti altamente configurabili.

Struttura del sistema di vendita

• Il prodotto WooCommerce con l’opzione “Gravity Form” e la selezione del form.
  
  
  

  

• Il prezzo del prodotto potrà essere gestito da Gravity Forms.
• L’inventario sarà gestito da WooCommerce.

Il form di iscrizione con Gravity Forms

• Nome, e-mail, telefono.
• Scelta della modalità: online od in presenza.
• Scelta della data o della sessione.
• Materiali, tutoraggio e certificazioni.
• Codice Fiscale.
• Upload dei documenti personali.
• Condizioni di vendita e Privacy Policy.

Plugin da installare

• Gravity Forms.
• User Registration.
• Gravity Forms Product Add-ons for WooCommerce.
• Altri eventali Add-ons di Gravity Forms per gestire i Gateway di Pagamento od altre funzionalità.

L'articolo Vendere corsi online con Gravity Forms proviene da Realizzazione di siti web a Pordenone.

UN ESEMPIO DI PERSONALIZZAZIONE PER IL TEMA IMPREZA

HTML

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-name placeholder "Nome e Cognome *"]
  </div>

  <div class="cf7-col">
    [email* your-email placeholder "E-mail *"]
  </div>
</div>

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-subject placeholder "Oggetto *"]
  </div>

  <div class="cf7-col">
    [text your-company placeholder "Azienda"]
  </div>
</div>

[textarea* your-message placeholder "Messaggio *"]

[acceptance acceptance-419] Acconsento al trattamento dei dati personali comunicati. * [/acceptance]

[submit "Invia"]

CSS

/* Wrapper righe */
.wpcf7 form .cf7-row {
  display: flex;
  gap: 25px;
  margin-bottom: 20px;
}

/* Colonne */
.wpcf7 form .cf7-col {
  flex: 1;
}

/* Campi al 100% */
.wpcf7 form .cf7-col input,
.wpcf7 form .cf7-col select,
.wpcf7 form .cf7-col textarea {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .wpcf7 form .cf7-row {
    flex-direction: column;
  }
}

/* Impreza-like (facoltativo) */
.wpcf7 form .cf7-row {
  align-items: flex-start;
}

.wpcf7 form .cf7-col .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

UN ESEMPIO DI PERSONALIZZAZIONE PER IL TEMA ZEPHYR

HTML

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-name placeholder "Nome e Cognome *"]
  </div>

  <div class="cf7-col">
    [email* your-email placeholder "E-mail *"]
  </div>
</div>

<div class="cf7-row">
  <div class="cf7-col">
    [text* your-subject placeholder "Oggetto *"]
  </div>

  <div class="cf7-col">
    [text your-company placeholder "Azienda"]
  </div>
</div>

[textarea* your-message placeholder "Messaggio"]

[acceptance acceptance-765] Acconsento al trattamento dei dati personali comunicati. * [/acceptance]

[submit "Invia"]

CSS

/* Layout base */
.cf7-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.cf7-col {
  flex: 1;
}

/* Campi full width */
.wpcf7 textarea {
  width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
  .cf7-row {
    flex-direction: column;
  }
}

L'articolo Contact Form 7 su due colonne con Impreza & Zephyr proviene da Realizzazione di siti web a Pordenone.

Possiamo risolvere il problema senza l’utilizzo di un plugin, inserendo all’interno del file functions.php, del tema utilizzato il codice seguente:

// Cambia il logo nella pagina di login.
function custom_login_logo() { ?>
    <style type="text/css">
        #login h1 a {
            background-image: url('url del logo') !important;
            background-size: contain !important;
            width: px !important;
            height: px !important;
        }
    </style>
<?php }
add_action('login_head', 'custom_login_logo');

L'articolo Modifica il logo nella pagina di login proviene da Realizzazione di siti web a Pordenone.

1 – Video MP4 responsive con AutoPlay ed anteprima senza controlli. Ideale per presentazioni a “tutto schermo”.

HTML

<div class="video-wrap"><video poster="/path/anteprima.jpg" 
preload="metadata" autoplay="autoplay" 
loop="loop" muted="" width="100%" height="100%">
<source src="/path/video.mp4" type="video/mp4" />
Il tuo browser non supporta il video HTML5.
</video></div>

CSS

.video-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.video-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9; usa 75% per 4:3 */
}
.video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* o 'contain' se preferisci no crop */
}

2 – Video MP4 responsive con controlli senza anteprima. Ideale per essere inserito all’interno di un contenuto.

HTML

<div class="video-responsive">
<video controls>
<source src="/path/video.mp4" type="video/mp4">
Il tuo browser non supporta il video HTML5.
</video></div>

CSS

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

3 – Video MP4 responsive con controlli ed anteprima. Ideale per essere inserito all’interno di un contenuto.

HTML

<div class="video-wrap">
<video controls preload="metadata" poster="/path/anteprima.jpg">
<source src="/path/video.mp4" type="video/mp4">
Il tuo browser non supporta il video HTML5.
</video></div>

CSS

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 960px; /* opzionale: limita la larghezza */
  margin: 0 auto;
}
.video-wrap::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9; usa 75% per 4:3 */
}
.video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; /* o 'contain' se preferisci no crop */
}

L'articolo Inserire un video MP4 su WordPress senza usare plugin proviene da Realizzazione di siti web a Pordenone.

Il metodo di correzione proposto prevede l’utilizzo del seguente codice CSS:

/* Inizio Conctact Form 7 - centratura del checkbox */
.wpcf7-form-control.wpcf7-acceptance label {
    display: flex;
    line-height: 1.2;
}
.wpcf7-form-control.wpcf7-acceptance input[type="checkbox"] {
    width: auto;
    margin-top: 0;
    margin-right: 5px;
}

.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0;
}
/* fine Conctact Form 7 - centratura del checkbox*/

L'articolo Allineare testo e casella di accettazione proviene da Realizzazione di siti web a Pordenone.

Per iniziare andremo a scriviamo la parte in HTML nella sezione apposita dell’ applicativo:

<div id="responsive-form" class="clearfix">
<div class="form-row">
<div class="column-half">Nome (*) [text* first-name]</div>
<div class="column-half">Cognome (*) [text* last-name]</div>
</div>
<div class="form-row">
<div class="column-half">Email (*) [email* your-email]</div>
<div class="column-half">Telefono [text your-phone]</div>
</div>
<div class="form-row">
<div class="column-full">Oggetto (*) [text* your-subject]</div>
</div>
<div class="form-row">
<div class="column-full">Messaggio (*) [textarea* your-message]</div>
</div>
<div class="form-row">[submit "INVIA"]</div>
</div>

Per disporre i campi del modulo su due colonne implementiamo l’applicativo con il codice seguente:

/* inizio Conctact Form 7 su due colonne */
#responsive-form{
max-width:600px /* questo parametro può essere modificato */;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
.wpcf7-submit{
float: right;
margin-right: 10px;
}
/* fine Conctact Form 7 su due colonne */

L'articolo Contact Form 7 su due colonne con The7 proviene da Realizzazione di siti web a Pordenone.

Nascondiamo il logo principale inserendo all’interno della pagina il codice seguente:

.fusion-logo img {
    display: none;
}

Inseriamo il nuovo logo dopo aver individuato l’ID della pagina:

.page-id-ID .fusion-logo-link {
    background-image: url(percorso dell'immagine del nuovo logo);
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    position: relative;
    height: altezza del nuovo logo espressa in px;
    width: larghezza del nuovo logo espressa in px; 
}

Se all’evento “scroll” è attivo lo “sticky header” potrebbe sorgere la necessità di modificare il colore della barra flottante:

.fusion-body .fusion-is-sticky.fusion-header-wrapper .fusion-header, .fusion-body .fusion-is-sticky.fusion-header-wrapper .fusion-secondary-main-menu {
    background-color: codice colore;
}

L'articolo Sostituire il logo in una pagina specifica del tema Avada proviene da Realizzazione di siti web a Pordenone.