Come creare uno slider con GeneratePress e GenerateBlocks senza usare page builder pesanti

Creare uno slider in WordPress è una di quelle operazioni che sembrano semplici, ma che spesso finiscono per appesantire il sito più del necessario. Si installa un plugin, poi un secondo plugin per personalizzarlo meglio, poi magari si aggiungono animazioni, frecce, autoplay, effetti particolari e alla fine ci si ritrova con una sezione bella da vedere, ma pesante da caricare e difficile da mantenere.

Se si lavora con GeneratePress e GenerateBlocks, invece, si può ragionare in modo diverso: costruire uno slider pulito, leggero, personalizzabile e perfettamente integrato nel layout del sito, usando i blocchi per la struttura e un piccolo snippet CSS/JavaScript per il comportamento dinamico.

GeneratePress nasce proprio con un’impostazione orientata a velocità, stabilità e accessibilità, mentre GenerateBlocks permette di creare sezioni avanzate partendo da pochi blocchi essenziali come Container, Grid, Image, Button e Query Loop. Il Container è il blocco base per costruire sezioni personalizzate, il Grid serve per layout più articolati, l’Image block gestisce le immagini, il Button block permette di inserire call to action e il Query Loop consente di mostrare articoli in base a parametri specifici.

In questo articolo vediamo come costruire uno slider manuale usando GeneratePress + GenerateBlocks, senza Elementor, senza plugin slider esterni e senza codice inutilmente complicato.

Perché creare uno slider con GeneratePress e GenerateBlocks

Il vantaggio principale è il controllo.

Quando si usa un plugin slider tradizionale, spesso si ottiene un risultato rapido, ma anche molto vincolato: markup già deciso, file CSS e JavaScript caricati ovunque, opzioni grafiche difficili da adattare al proprio stile e, in alcuni casi, un impatto negativo sulle prestazioni.

Con GenerateBlocks, invece, lo slider viene costruito come una normale sezione del sito. Ogni slide può essere un Container. All’interno della slide si possono inserire titoli, testi, immagini, pulsanti, icone, sfondi e tutto ciò che normalmente si userebbe in Gutenberg.

Questo approccio è particolarmente utile se vogliamo creare:

• uno slider hero in homepage;
• uno slider di servizi;
• uno slider di testimonianze;
• uno slider di progetti portfolio;
• uno slider di articoli recenti;
• una sezione dinamica da inserire in una landing page.

GenerateBlocks Pro oggi include anche un Carousel Block pensato per creare slider, gallery, testimonial carousel, hero slider e query carousel. Tuttavia, la soluzione manuale resta molto interessante quando si vuole avere pieno controllo del codice, evitare dipendenze extra o costruire qualcosa di cucito su misura.

L’idea di base dello slider

Il concetto è semplice.

Creiamo una struttura composta da:

1. un contenitore principale dello slider;
2. un contenitore interno che contiene tutte le slide affiancate;
3. più slide, ognuna costruita con GenerateBlocks;
4. due pulsanti per andare avanti e indietro;
5. un piccolo JavaScript che sposta la traccia da una slide all’altra;
6. un CSS che gestisce layout, animazione, responsive e stile.

La parte bella è che il contenuto rimane modificabile da WordPress. Quindi non stiamo creando uno slider rigido scritto tutto in HTML, ma una struttura visiva che puoi modificare direttamente dall’editor.

Passaggio 1: creare il contenitore principale con GenerateBlocks

Apriamo la pagina in cui vogliamo inserire lo slider, per esempio la homepage o una landing page.

Aggiungiamo un blocco Container di GenerateBlocks. Questo sarà il contenitore esterno dello slider.

Nelle impostazioni avanzate del blocco assegniamo questa classe CSS:

sergio-slider

Questo contenitore avrà il compito di racchiudere tutto lo slider e di nascondere le slide che escono lateralmente dall’area visibile.

Possiamo impostare il Container in questo modo:

• larghezza: 100%;
• max-width: 1200px, se vogliamo centrarlo nella pagina;
• margin-left e margin-right: auto;
• overflow: hidden;
• border-radius, se vogliamo angoli arrotondati;
• padding: a piacere, oppure zero se vogliamo uno slider a tutta larghezza.

Passaggio 2: creare la traccia interna dello slider

Dentro il Container principale aggiungiamo un secondo Container.

A questo secondo Container assegniamo la classe:

sergio-slider-track

Questo sarà il “binario” dello slider, cioè l’elemento che si muoverà orizzontalmente quando clicchiamo sulle frecce.

La traccia conterrà tutte le slide una accanto all’altra. Il movimento dello slider non avverrà spostando ogni singola slide, ma spostando l’intera traccia.

È lo stesso principio dei carousel moderni: il viewport resta fermo, mentre il contenuto interno scorre.

Passaggio 3: creare le singole slide

Dentro sergio-slider-track inseriamo le slide.

Ogni slide può essere un altro Container di GenerateBlocks. A ogni Container assegniamo la classe:

sergio-slide

Dentro ogni slide possiamo inserire quello che vogliamo:

• un titolo;
• un paragrafo;
• un’immagine;
• un pulsante;
• una piccola descrizione;
• un link;
• una call to action.

Per esempio, se stiamo creando uno slider dei servizi, le slide potrebbero essere:

• Realizzazione siti WordPress;
• Restyling siti esistenti;
• Ottimizzazione SEO;
• Miglioramento performance;
• Manutenzione tecnica;
• Landing page per campagne pubblicitarie.

Se invece stiamo creando uno slider portfolio, ogni slide potrebbe contenere uno screenshot del progetto, il nome del cliente, una breve descrizione e un pulsante “Guarda il progetto”.

Passaggio 4: aggiungere i pulsanti di navigazione

Subito dopo il contenitore sergio-slider-track, sempre dentro sergio-slider, possiamo inserire un blocco Custom HTML con questo codice:

<div class="sergio-slider-controls" aria-label="Controlli slider">
  <button class="sergio-slider-prev" type="button" aria-label="Slide precedente">
    ‹
  </button>

  <button class="sergio-slider-next" type="button" aria-label="Slide successiva">
    ›
  </button>
</div>

Questi due pulsanti serviranno per navigare avanti e indietro.

Naturalmente puoi sostituire i simboli ‹ e › con icone SVG, testo, oppure pulsanti stilizzati in linea con il design del tuo sito.

Passaggio 5: aggiungere il CSS dello slider

Ora dobbiamo dare allo slider il suo comportamento visivo.

Il CSS può essere inserito in diversi modi:

• in Aspetto > Personalizza > CSS aggiuntivo;
• dentro un plugin come Code Snippets;
• nel child theme, se ne utilizzi uno;
• in un file CSS dedicato, se il sito è strutturato in modo più avanzato.

Ecco il CSS completo:

.sergio-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 24px;
}

.sergio-slider-track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

.sergio-slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: clamp(32px, 6vw, 80px);
  background: #f5f5f5;
}

.sergio-slide img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sergio-slider-controls {
  position: absolute;
  inset: auto 24px 24px auto;
  display: flex;
  gap: 12px;
  z-index: 5;
}

.sergio-slider-prev,
.sergio-slider-next {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.sergio-slider-prev:hover,
.sergio-slider-next:hover {
  transform: translateY(-2px);
  background: #000000;
}

.sergio-slider-prev:focus-visible,
.sergio-slider-next:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .sergio-slide {
    padding: 40px 24px 88px;
  }

  .sergio-slider-controls {
    right: 50%;
    transform: translateX(50%);
    bottom: 24px;
  }
}

Con questo CSS otteniamo una struttura pulita: ogni slide occupa il 100% della larghezza dello slider, la traccia viene disposta in orizzontale con display: flex, e lo spostamento da una slide all’altra avviene tramite transform.

Il valore importante è questo:

.sergio-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

Significa che ogni slide deve occupare esattamente tutta la larghezza visibile dello slider. Se abbiamo tre slide, saranno tre pannelli affiancati, ma l’utente ne vedrà una alla volta.

Passaggio 6: aggiungere il JavaScript

A questo punto manca solo il comportamento.

Il JavaScript deve:

• cercare tutti gli slider presenti nella pagina;
• contare quante slide ci sono;
• intercettare il click sui pulsanti;
• aggiornare la posizione della traccia;
• tornare alla prima slide quando si supera l’ultima;
• andare all’ultima slide quando si clicca “indietro” dalla prima.

Ecco il codice:

document.addEventListener(‘DOMContentLoaded’, function () {
const sliders = document.querySelectorAll(‘.sergio-slider’);

sliders.forEach(function (slider) {
const track = slider.querySelector(‘.sergio-slider-track’);
const slides = slider.querySelectorAll(‘.sergio-slide’);
const prevButton = slider.querySelector(‘.sergio-slider-prev’);
const nextButton = slider.querySelector(‘.sergio-slider-next’);

if (!track || !slides.length || !prevButton || !nextButton) {
  return;
}

let currentIndex = 0;

function updateSlider() {
  const offset = currentIndex * 100;
  track.style.transform = 'translateX(-' + offset + '%)';
}

nextButton.addEventListener('click', function () {
  currentIndex = currentIndex + 1;

  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }

  updateSlider();
});

prevButton.addEventListener('click', function () {
  currentIndex = currentIndex - 1;

  if (currentIndex < 0) {
    currentIndex = slides.length - 1;
  }

  updateSlider();
});

});
});

Questo codice è volutamente semplice e leggibile.

Non usa librerie esterne, non richiede jQuery e funziona anche se nella stessa pagina inseriamo più slider, perché ogni slider viene gestito singolarmente.

Versione pronta per Code Snippets

Se vuoi inserire tutto tramite Code Snippets, puoi usare una versione completa con CSS e JavaScript caricati nel front-end.

Esempio:

add_action('wp_footer', 'sergio_slider_generateblocks_script');

function sergio_slider_generateblocks_script() {
    ?>
    <style>
      .sergio-slider {
        position: relative;
        width: 100%;
        max-width: 1200px;
        margin-inline: auto;
        overflow: hidden;
        border-radius: 24px;
      }

      .sergio-slider-track {
        display: flex;
        transition: transform 0.6s ease;
        will-change: transform;
      }

      .sergio-slide {
        flex: 0 0 100%;
        min-width: 100%;
        box-sizing: border-box;
        padding: clamp(32px, 6vw, 80px);
        background: #f5f5f5;
      }

      .sergio-slide img {
        max-width: 100%;
        height: auto;
        display: block;
      }

      .sergio-slider-controls {
        position: absolute;
        inset: auto 24px 24px auto;
        display: flex;
        gap: 12px;
        z-index: 5;
      }

      .sergio-slider-prev,
      .sergio-slider-next {
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 999px;
        background: #111827;
        color: #ffffff;
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.25s ease, background-color 0.25s ease;
      }

      .sergio-slider-prev:hover,
      .sergio-slider-next:hover {
        transform: translateY(-2px);
        background: #000000;
      }

      .sergio-slider-prev:focus-visible,
      .sergio-slider-next:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 3px;
      }

      @media (max-width: 768px) {
        .sergio-slide {
          padding: 40px 24px 88px;
        }

        .sergio-slider-controls {
          right: 50%;
          transform: translateX(50%);
          bottom: 24px;
        }
      }
    </style>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const sliders = document.querySelectorAll('.sergio-slider');

        sliders.forEach(function (slider) {
          const track = slider.querySelector('.sergio-slider-track');
          const slides = slider.querySelectorAll('.sergio-slide');
          const prevButton = slider.querySelector('.sergio-slider-prev');
          const nextButton = slider.querySelector('.sergio-slider-next');

          if (!track || !slides.length || !prevButton || !nextButton) {
            return;
          }

          let currentIndex = 0;

          function updateSlider() {
            const offset = currentIndex * 100;
            track.style.transform = 'translateX(-' + offset + '%)';
          }

          nextButton.addEventListener('click', function () {
            currentIndex = currentIndex + 1;

            if (currentIndex >= slides.length) {
              currentIndex = 0;
            }

            updateSlider();
          });

          prevButton.addEventListener('click', function () {
            currentIndex = currentIndex - 1;

            if (currentIndex < 0) {
              currentIndex = slides.length - 1;
            }

            updateSlider();
          });
        });
      });
    </script>
    <?php
}

Questa versione funziona, ma carica il codice in tutto il sito. Se lo slider è presente solo in una pagina specifica, conviene limitare lo snippet a quella pagina.

Per esempio:

add_action('wp_footer', 'sergio_slider_generateblocks_script');

function sergio_slider_generateblocks_script() {

    if (!is_page(123)) {
        return;
    }

    ?>
    <!-- Qui dentro inserisci CSS e JavaScript dello slider -->
    <?php
}

add_action(‘wp_footer’, ‘sergio_slider_generateblocks_script’);

function sergio_slider_generateblocks_script() {

if (!is_page(123)) {
    return;
}

?>
<!-- Qui dentro inserisci CSS e JavaScript dello slider -->
<?php

}

Al posto di 123 bisogna inserire l’ID reale della pagina.

Questo è un dettaglio importante, perché su un sito ben ottimizzato non ha senso caricare codice dove non serve.

Come costruire graficamente una slide efficace

Uno slider non deve essere soltanto “una cosa che si muove”. Deve avere uno scopo.

Una slide efficace dovrebbe avere una struttura chiara:

Titolo forte
Breve descrizione
Immagine o elemento visivo
Pulsante di azione

Per esempio:

Realizzazione siti WordPress professionali

Creo siti web responsive, veloci e ottimizzati SEO, pensati per aziende, professionisti e attività locali.

[Richiedi un preventivo]

Oppure, per uno slider di articoli:

Guida CSS

Come creare un layout masonry solo con CSS

Scopri come realizzare una griglia moderna senza JavaScript e senza plugin.

[Leggi l’articolo]

Il rischio degli slider è quello di usarli solo come decorazione. In realtà, ogni slide dovrebbe portare l’utente verso un’azione precisa: leggere, contattare, scoprire, acquistare, approfondire.

Slider manuale o slider di articoli?

Ci sono due modi principali per usare questa soluzione.

Il primo è lo slider manuale. In questo caso creiamo ogni slide a mano con GenerateBlocks. È la soluzione migliore per hero slider, servizi, portfolio, testimonianze o sezioni commerciali.

Il secondo è lo slider dinamico. In questo caso possiamo usare il Query Loop di GenerateBlocks per mostrare articoli recenti o contenuti selezionati. Il Query Loop serve proprio a visualizzare post in base a parametri specifici, come tipo di contenuto, numero di articoli, ordine, categorie e altri criteri.

Per uno slider di articoli, l’idea è questa:

1. aggiungi un Query Loop;
2. imposti il numero di articoli da mostrare;
3. costruisci il layout della card;
4. assegni alla griglia o al contenitore del Query Loop le classi necessarie;
5. usi CSS e JavaScript per trasformare l’elenco in uno slider.

Questa soluzione è più avanzata, perché il markup del Query Loop può variare in base alla struttura del blocco. Per questo, se si sta scrivendo un articolo tutorial per utenti meno esperti, è meglio partire dallo slider manuale. Una volta capito il meccanismo, adattarlo al Query Loop diventa molto più semplice.

Accessibilità: attenzione a frecce, focus e autoplay

Uno slider dovrebbe essere piacevole da usare, ma anche accessibile.

Per questo motivo nel codice dei pulsanti abbiamo usato:

aria-label="Slide precedente"
aria-label="Slide successiva"

Questo aiuta chi utilizza screen reader a capire la funzione dei pulsanti.

Inoltre, nel CSS abbiamo previsto lo stato :focus-visible, così chi naviga da tastiera può vedere chiaramente quale pulsante è selezionato.

Un altro consiglio importante riguarda l’autoplay. Molti slider partono automaticamente, ma non sempre è una buona idea. Uno slider che cambia da solo può infastidire l’utente, peggiorare l’esperienza di lettura e creare problemi di accessibilità.

Se lo slider contiene contenuti importanti, è meglio lasciare il controllo all’utente.

Variante con autoplay

Se vogliamo comunque aggiungere l’autoplay, possiamo modificare il JavaScript in questo modo:

document.addEventListener('DOMContentLoaded', function () {
  const sliders = document.querySelectorAll('.sergio-slider');

  sliders.forEach(function (slider) {
    const track = slider.querySelector('.sergio-slider-track');
    const slides = slider.querySelectorAll('.sergio-slide');
    const prevButton = slider.querySelector('.sergio-slider-prev');
    const nextButton = slider.querySelector('.sergio-slider-next');

    if (!track || !slides.length || !prevButton || !nextButton) {
      return;
    }

    let currentIndex = 0;
    let autoplay;

    function updateSlider() {
      const offset = currentIndex * 100;
      track.style.transform = 'translateX(-' + offset + '%)';
    }

    function goNext() {
      currentIndex = currentIndex + 1;

      if (currentIndex >= slides.length) {
        currentIndex = 0;
      }

      updateSlider();
    }

    function goPrev() {
      currentIndex = currentIndex - 1;

      if (currentIndex < 0) {
        currentIndex = slides.length - 1;
      }

      updateSlider();
    }

    function startAutoplay() {
      autoplay = setInterval(goNext, 5000);
    }

    function stopAutoplay() {
      clearInterval(autoplay);
    }

    nextButton.addEventListener('click', function () {
      stopAutoplay();
      goNext();
      startAutoplay();
    });

    prevButton.addEventListener('click', function () {
      stopAutoplay();
      goPrev();
      startAutoplay();
    });

    slider.addEventListener('mouseenter', stopAutoplay);
    slider.addEventListener('mouseleave', startAutoplay);

    slider.addEventListener('focusin', stopAutoplay);
    slider.addEventListener('focusout', startAutoplay);

    startAutoplay();
  });
});

In questa versione lo slider cambia slide ogni 5 secondi. Quando l’utente passa sopra lo slider con il mouse, oppure entra nello slider con la tastiera, l’autoplay si ferma. Quando esce, riparte.

È una piccola accortezza, ma migliora molto l’esperienza utente.

Variante con pallini di navigazione

Volendo, si possono aggiungere anche i classici “pallini” sotto lo slider.

Nel blocco Custom HTML potremmo aggiungere:

<div class="sergio-slider-dots" aria-label="Navigazione slider"></div>

Poi il JavaScript potrebbe generare automaticamente un pallino per ogni slide.

Esempio:

document.addEventListener('DOMContentLoaded', function () {
  const sliders = document.querySelectorAll('.sergio-slider');

  sliders.forEach(function (slider) {
    const track = slider.querySelector('.sergio-slider-track');
    const slides = slider.querySelectorAll('.sergio-slide');
    const prevButton = slider.querySelector('.sergio-slider-prev');
    const nextButton = slider.querySelector('.sergio-slider-next');
    const dotsContainer = slider.querySelector('.sergio-slider-dots');

    if (!track || !slides.length || !prevButton || !nextButton || !dotsContainer) {
      return;
    }

    let currentIndex = 0;
    const dots = [];

    slides.forEach(function (_, index) {
      const dot = document.createElement('button');
      dot.type = 'button';
      dot.className = 'sergio-slider-dot';
      dot.setAttribute('aria-label', 'Vai alla slide ' + (index + 1));

      dot.addEventListener('click', function () {
        currentIndex = index;
        updateSlider();
      });

      dotsContainer.appendChild(dot);
      dots.push(dot);
    });

    function updateSlider() {
      const offset = currentIndex * 100;
      track.style.transform = 'translateX(-' + offset + '%)';

      dots.forEach(function (dot, index) {
        dot.classList.toggle('is-active', index === currentIndex);
      });
    }

    nextButton.addEventListener('click', function () {
      currentIndex = currentIndex + 1;

      if (currentIndex >= slides.length) {
        currentIndex = 0;
      }

      updateSlider();
    });

    prevButton.addEventListener('click', function () {
      currentIndex = currentIndex - 1;

      if (currentIndex < 0) {
        currentIndex = slides.length - 1;
      }

      updateSlider();
    });

    updateSlider();
  });
});

E il CSS dei pallini:

.sergio-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}

.sergio-slider-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.35);
  cursor: pointer;
  padding: 0;
}

.sergio-slider-dot.is-active {
  background: #111827;
}

Questa variante è utile quando abbiamo più di due o tre slide, perché aiuta l’utente a capire quante slide esistono e in quale posizione si trova.

Errori da evitare quando si crea uno slider

Il primo errore è inserire troppe slide. Uno slider con dieci o quindici contenuti rischia di essere ignorato. Meglio poche slide, ma molto curate.

Il secondo errore è mettere informazioni fondamentali solo dalla seconda slide in poi. Molti utenti non cliccheranno mai sulle frecce. Per questo la prima slide deve contenere il messaggio più importante.

Il terzo errore è usare immagini troppo pesanti. Uno slider spesso contiene immagini grandi, quindi conviene caricare file ottimizzati, possibilmente in formato WebP, con dimensioni coerenti rispetto allo spazio occupato nel layout.

Il quarto errore è abusare dell’autoplay. Lo slider non deve combattere contro l’utente. Se il contenuto cambia troppo velocemente, l’esperienza diventa fastidiosa.

Il quinto errore è non testare il comportamento da mobile. Su smartphone, lo slider deve essere leggibile, i pulsanti devono essere facili da premere e il testo non deve finire troppo vicino ai bordi.

Quando usare uno slider e quando evitarlo

Lo slider non è sempre la soluzione migliore.

Ha senso usarlo quando vogliamo mostrare più contenuti dello stesso tipo in uno spazio compatto. Per esempio, servizi principali, testimonianze, loghi clienti, progetti selezionati o articoli in evidenza.

Ha meno senso usarlo quando il contenuto è davvero importante e deve essere visto subito. In quel caso è spesso meglio una sezione statica, una griglia o una sequenza verticale di blocchi.

Dal punto di vista del web design, lo slider funziona bene quando è un supporto alla navigazione, non quando diventa il centro assoluto della pagina.

Conclusione

Creare uno slider con GeneratePress e GenerateBlocks è un ottimo modo per mantenere il sito leggero, ordinato e facile da personalizzare.

La struttura viene costruita visivamente con i blocchi, mentre CSS e JavaScript aggiungono il comportamento dinamico. In questo modo non dipendiamo da plugin slider esterni, non appesantiamo inutilmente WordPress e possiamo adattare ogni dettaglio allo stile grafico del sito.

La cosa più importante è progettare lo slider con criterio. Non basta far scorrere dei contenuti: ogni slide deve avere un messaggio chiaro, un ordine visivo leggibile e, possibilmente, una call to action precisa.

GeneratePress fornisce una base veloce e solida, GenerateBlocks permette di costruire sezioni flessibili e il codice personalizzato completa il lavoro. Il risultato è uno slider semplice, leggero e professionale, perfettamente integrato in un sito WordPress moderno.