Dove Inserire il CSS Personalizzato

Beaver Builder è un page builder visuale, ma questo non significa che il codice personalizzato non abbia un ruolo importante. Anzi, la capacità di integrare CSS e JavaScript personalizzato è ciò che separa un sito “fatto con un builder” da un sito veramente professionale e unico. Beaver Builder offre diversi punti di ingresso per il codice personalizzato, ognuno con i propri vantaggi e casi d’uso. In questa guida completa, esploreremo tutte le possibilità di personalizzazione tramite codice.

Dove Inserire il CSS Personalizzato

Beaver Builder offre molteplici posizioni dove puoi aggiungere CSS personalizzato, ognuna con un ambito di applicazione diverso. Comprendere la differenza tra queste posizioni è fondamentale per mantenere il codice organizzato e efficiente.

CSS a Livello di Modulo

Ogni modulo ha un campo CSS class e un campo ID nella scheda Avanzate. Puoi usare queste classi per targetizzare il modulo specifico con CSS. Inoltre, i moduli più avanzati offrono un’area dedicata per il codice CSS personalizzato direttamente nelle loro impostazioni. Questo CSS viene applicato solo al modulo specifico e non influenza il resto della pagina.

CSS a Livello di Riga

Come per i moduli, anche le righe hanno campi per classi CSS e ID personalizzati. Puoi aggiungere una classe alla riga e poi scrivere regole CSS che targetizzano quella classe specifica. Questo approccio è utile per applicare stili comuni a tutti gli elementi all’interno di una sezione.

CSS a Livello di Pagina

Nell’editor Beaver Builder, aprendo il menu principale e selezionando Layout CSS & JavaScript, trovi due aree di testo: una per il CSS e una per il JavaScript. Il CSS inserito qui si applica solo alla pagina corrente. Questa è la posizione ideale per stili specifici di una singola pagina che non devono influenzare il resto del sito.

CSS Globale nel Customizer

WordPress offre un’area per il CSS personalizzato nel Customizer (Aspetto → Personalizza → CSS aggiuntivo). Il CSS inserito qui si applica a tutto il sito e persiste anche se cambi tema. È la posizione ideale per stili globali che devono essere applicati ovunque, come personalizzazioni tipografiche, colori del brand o override degli stili del tema.

CSS nel Tema (Child Theme)

Per progetti professionali, la posizione migliore per il CSS personalizzato è il file style.css di un child theme. Questo approccio garantisce che le personalizzazioni non vengano perse quando il tema viene aggiornato e permette di utilizzare preprocessori CSS (Sass, Less) se lo desideri.

Tecniche CSS Avanzate con Beaver Builder

Personalizzare i Colori e la Tipografia

Per mantenere coerenza visiva, definisci i colori e i font del brand come variabili CSS custom properties. Inserisci queste variabili nel CSS globale (Customizer o child theme) e usale in tutto il sito:

:root {
  --color-primary: #0073aa;
  --color-secondary: #23282d;
  --color-accent: #00a0d2;
  --font-heading: Montserrat, sans-serif;
  --font-body: Open Sans, sans-serif;
}

.fl-module-heading .fl-heading {
  font-family: var(--font-heading);
  color: var(--color-primary);
}

.fl-module-rich-text {
  font-family: var(--font-body);
  color: var(--color-secondary);
}

L’uso delle custom properties CSS è particolarmente potente perché ti permette di cambiare l’intero schema colori del sito modificando solo i valori nella dichiarazione :root.

Hover Effects Personalizzati

Beaver Builder offre alcune opzioni di hover predefinite, ma con CSS personalizzato puoi creare effetti molto più sofisticati:

/* Card con effetto lift on hover */
.servizio-card .fl-col-content {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
}

.servizio-card .fl-col-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Pulsante con effetto gradiente animato */
.cta-animato .fl-button {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-size: 200{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} 200{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c};
  transition: background-position 0.5s ease;
}

.cta-animato .fl-button:hover {
  background-position: 100{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} 100{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c};
}

Layout Avanzati con CSS Grid e Flexbox

Sebbene il sistema di colonne di Beaver Builder copra la maggior parte delle esigenze di layout, CSS Grid e Flexbox ti permettono di creare disposizioni che vanno oltre le possibilità native del builder:

/* Griglia con card di altezza uguale */
.grid-servizi .fl-row-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  align-items: stretch;
}

/* Centratura verticale perfetta in una sezione hero */
.hero-centrato .fl-row-content-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

Animazioni CSS Personalizzate

Le animazioni native di Beaver Builder sono limitate a fade, slide e zoom. Con CSS personalizzato puoi creare animazioni uniche:

@keyframes pulse-glow {
  0{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} { box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.4); }
  70{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} { box-shadow: 0 0 0 15px rgba(0, 115, 170, 0); }
  100{6fb8dad3a9c483f1a21adb5997a0bd0fb65a4b2f8344003d223c5d2f2542798c} { box-shadow: 0 0 0 0 rgba(0, 115, 170, 0); }
}

.pulsante-evidenziato .fl-button {
  animation: pulse-glow 2s infinite;
}

@keyframes slide-in-bottom {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animazione-ingresso .fl-module {
  animation: slide-in-bottom 0.6s ease-out forwards;
}

JavaScript Personalizzato in Beaver Builder

Oltre al CSS, Beaver Builder permette di aggiungere JavaScript personalizzato per creare interazioni avanzate e funzionalità dinamiche.

Dove Inserire il JavaScript

• Layout JS: nel pannello “Layout CSS & JavaScript” dell’editor, nella scheda JavaScript. Si applica solo alla pagina corrente
• Modulo HTML: inserisci tag <script> in un modulo HTML per JavaScript specifico di una sezione
• Child theme: nel file functions.php del child theme, usando wp_enqueue_script() per caricare file JS personalizzati
• Plugin personalizzato: per progetti complessi, crea un plugin WordPress dedicato al tuo codice JS

Esempi Pratici di JavaScript

Scroll Reveal Personalizzato

document.addEventListener(DOMContentLoaded, function() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add(visibile);
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.2 });

  document.querySelectorAll(.scroll-reveal).forEach(el => {
    observer.observe(el);
  });
});

Contatore Animato al Scroll

function animateCounter(element, target, duration) {
  let start = 0;
  const step = target / (duration / 16);
  const timer = setInterval(() => {
    start += step;
    if (start >= target) {
      element.textContent = target;
      clearInterval(timer);
    } else {
      element.textContent = Math.floor(start);
    }
  }, 16);
}

// Attiva quando l’elemento entra nel viewport
const counters = document.querySelectorAll(.contatore-animato);
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const target = parseInt(entry.target.dataset.target);
      animateCounter(entry.target, target, 2000);
      observer.unobserve(entry.target);
    }
  });
});
counters.forEach(counter => observer.observe(counter));

Menu Sticky con Cambio Stile

window.addEventListener(scroll, function() {
  const header = document.querySelector(.fl-theme-builder-header);
  if (window.scrollY > 100) {
    header.classList.add(header-scrolled);
  } else {
    header.classList.remove(header-scrolled);
  }
});

Abbinando questo JavaScript al CSS corrispondente, puoi creare un header che cambia aspetto durante lo scroll (diventa più compatto, cambia colore di sfondo, riduce il logo).

Creare Moduli Personalizzati

Per gli sviluppatori, Beaver Builder offre un’API completa per la creazione di moduli personalizzati. Un modulo personalizzato è un componente PHP che estende la classe FLBuilderModule e definisce:

• Impostazioni: i campi che l’utente può configurare nel pannello del modulo (testo, colori, dimensioni, toggle, selettori)
• Frontend HTML: il markup generato nel frontend della pagina
• Frontend CSS: gli stili specifici del modulo
• Frontend JS: il JavaScript necessario per il funzionamento del modulo

La documentazione ufficiale di Beaver Builder fornisce guide dettagliate e un modulo di esempio per iniziare. I moduli personalizzati possono essere distribuiti come plugin WordPress indipendenti o inclusi nel child theme.

Hooks e Filtri di Beaver Builder

Beaver Builder espone numerosi hooks (action e filter) che permettono agli sviluppatori di modificare il comportamento del builder senza modificare il codice sorgente. Alcuni hooks utili:

• fl_builder_before_render_row / fl_builder_after_render_row: eseguono codice prima/dopo il rendering di una riga
• fl_builder_before_render_module / fl_builder_after_render_module: per i moduli
• fl_builder_register_settings_form: per aggiungere campi personalizzati alle impostazioni dei moduli
• fl_builder_render_css: per modificare il CSS generato
• fl_builder_render_js: per modificare il JavaScript generato

Questi hooks sono fondamentali per gli sviluppatori che vogliono estendere le funzionalità di Beaver Builder mantenendo la compatibilità con gli aggiornamenti futuri.

Best Practice per il Codice Personalizzato

• Usa classi specifiche: prefissa le tue classi CSS con un identificatore unico (es. .mio-sito-) per evitare conflitti con gli stili del builder e dei plugin
• Rispetta la specificità CSS: usa la specificità minima necessaria per sovrascrivere gli stili di Beaver Builder. Evita !important quando possibile; se necessario, usa selettori più specifici
• Testa su tutti i breakpoint: il codice CSS personalizzato deve funzionare su desktop, tablet e mobile. Usa media query coerenti con i breakpoint di Beaver Builder
• JavaScript non invasivo: non sovrascrivere le funzioni JavaScript native di Beaver Builder. Usa namespace per le tue funzioni e verifica che jQuery sia caricato prima di usarlo
• Performance: minimizza il codice CSS e JS personalizzato. Un file CSS da 50 KB di override è un segnale che qualcosa non va nel design di base
• Documentazione: commenta il codice personalizzato spiegando lo scopo di ogni regola. Il “te stesso del futuro” te ne sarà grato
• Versionamento: se il progetto è complesso, usa Git per il versionamento del codice personalizzato (child theme o plugin)

Strumenti di Debug

Per lavorare efficacemente con CSS e JavaScript personalizzato in Beaver Builder, familiarizza con gli strumenti di debug del browser:

• Chrome DevTools (F12): ispeziona gli elementi, modifica gli stili in tempo reale, debugga JavaScript
• Computed Styles: nella scheda “Computed” di DevTools, vedi esattamente quali regole CSS vengono applicate a un elemento e da dove provengono
• Console JavaScript: per testare script e visualizzare errori
• Responsive Mode: per verificare il comportamento del codice su diversi viewport

Conclusione

La capacità di integrare CSS e JavaScript personalizzato è ciò che rende Beaver Builder uno strumento adatto sia ai principianti che agli sviluppatori esperti. Le molteplici posizioni per l’inserimento del codice, l’API per moduli personalizzati e il sistema di hooks offrono una flessibilità completa senza sacrificare la comodità dell’editing visuale. Nel prossimo articolo, esploreremo i migliori addon e estensioni che espandono le funzionalità di Beaver Builder con moduli e funzionalità aggiuntive.

Hai bisogno di personalizzazioni avanzate per il tuo sito Beaver Builder? Il nostro team di sviluppatori può aiutarti. Contattaci per una consulenza o scopri i nostri servizi di realizzazione siti web personalizzati.