Divi 5 Aspect Ratio, Image Framing e Image Preset: guida pratica 2026

La fine del preprocessing immagini obbligatorio

Fino a giugno 2026, mantenere una griglia di immagini WordPress visivamente coerente significava una di due cose: passare 30 minuti in Photoshop o Affinity Photo a ritagliare ogni singola immagine alle stesse dimensioni, oppure accettare il disallineamento e sperare che il cliente non se ne accorgesse. Il 13 giugno 2026 Elegant Themes ha rilasciato un set di tre funzionalità coordinate per Divi 5 che ribaltano il problema: Aspect Ratio (controllo proporzionale dell'elemento), Image Framing (Object Fit e Object Position) e Image Preset (preset riusabile per riutilizzare le stesse regole su moduli diversi). Sono tre funzionalità che funzionano da sole ma che diventano un layer di design system mancante quando sono combinate.

Per uno sviluppatore WordPress che gestisce siti editoriali, e-commerce WooCommerce con griglia prodotti, o portfolio fotografici, è un cambio di flusso di lavoro: non devi più pre-processare le immagini in tooling esterno, perché la coerenza del layout diventa una proprietà del Visual Builder, non del file JPG. La differenza tra un sito Divi 5 con Aspect Ratio e uno senza è la stessa che c'è tra un layout fatto con CSS Grid e uno con tabelle HTML: stesso contenuto, qualità percettiva radicalmente diversa.

Su mrtux.it abbiamo già coperto il Preset System di Divi 5 e il Variable Generator con AI. Oggi entriamo nello specifico di queste tre nuove funzionalità: cosa fa ciascuna, come si combinano, quando usarle, e perché sono il tassello che mancava al design system Divi 5.

Cosa fa Aspect Ratio e perché non è solo un "resize"

Aspect Ratio è un setting nel gruppo Sizing del Design tab di qualsiasi modulo Divi 5 che ha dimensioni (Image, Blurb, Gallery, Post Carousel, Portfolio, Icon, e la maggior parte dei moduli con contenuto visuale). Quando imposti un Aspect Ratio, Divi 5 calcola automaticamente l'altezza dell'elemento in base alla larghezza renderizzata, mantenendo la proporzione che hai scelto: 16:9, 1:1, 4:3, 3:4, 4:5, 21:9, o un ratio custom come 7:5.

La differenza concettuale rispetto a width/height fissi

Se imposti un'immagine con width: 400px e height: 300px (le classiche proporzioni 4:3 in pixel fissi), quando il container si restringe a 300px su mobile, l'immagine mantiene quei 300px di altezza e crea spazio vuoto o overflow. Con Aspect Ratio, l'altezza viene ricalcolata: 300px di larghezza × (3/4) = 225px di altezza. Il layout rimane proporzionato, la griglia respira correttamente, e l'immagine non viene mai deformata.

Questo è il vero vantaggio: Aspect Ratio è responsive-by-design, mentre width/height fissi richiedono media query manuali per ogni breakpoint. Su un blog con 200 articoli e 3 breakpoint, sono 600 regole CSS che non devi più scrivere.

Quando usare Aspect Ratio

Ci sono almeno 5 pattern in Divi 5 dove Aspect Ratio è una funzionalità killer:

• Blog grid: card articolo con immagine in evidenza 16:9, garantita uguale su tutta la griglia
• Portfolio gallery: portfolio item con thumbnail 1:1 o 4:5, indipendentemente dall'orientamento dell'immagine originale
• Team grid: headshot 1:1 su tutta la griglia, anche se le foto originali sono 600×400
• WooCommerce product grid: 4:5 o 1:1 per le miniature, garantisce che lo store abbia un ritmo visivo coerente
• Hero banner: 21:9 o 16:9 con cover Object Fit, adatto a qualsiasi viewport

Limiti pratici di Aspect Ratio

Aspect Ratio funziona solo se l'immagine riempie il frame (con Object Fit: cover) o se viene contenuta completamente (con Object Fit: contain). Senza un Image Framing setting esplicito, Divi 5 usa lo stretch default che può deformare l'immagine. È qui che entra in gioco la seconda funzionalità del pacchetto.

Cosa fa Image Framing e perché è il complemento necessario

Image Framing è il setting che dice a Divi 5 come l'immagine deve comportarsi dentro il frame Aspect Ratio. È il duale CSS di object-fit e object-position.

Object Fit: 4 opzioni chiave

Il menu Object Fit in Image Framing offre 4 scelte che mappano esattamente le opzioni CSS standard.

• Cover: l'immagine riempie tutto il frame, tagliando le eccedenze. È la scelta giusta per il 90% dei casi (griglia prodotto, blog card, team grid). L'immagine può essere tagliata in alto/basso o ai lati, ma non viene mai deformata.
• Contain: l'immagine si adatta al frame mantenendo tutte le proporzioni, creando spazio vuoto (bande laterali o verticali) se le proporzioni originali non matchano. È la scelta giusta per loghi, icone, screenshot che devono essere visibili per intero.
• Fill: l'immagine riempie il frame allungandosi o schiacciandosi. È la scelta sbagliata quasi sempre: usa solo se hai un'immagine vettoriale (SVG) e vuoi che occupi esattamente lo spazio disponibile.
• None: l'immagine mantiene le sue dimensioni originali. È la scelta giusta per asset con dimensioni fisse (es. badge di certificazione) o se Aspect Ratio non è impostato e non vuoi che l'immagine venga toccata.

Object Position: dove si aggancia il ritaglio

Quando usi Cover, l'immagine viene ritagliata per riempire il frame. Object Position ti permette di scegliere quale parte dell'immagine rimane visibile. Le opzioni sono 9 allineamenti standard (top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right) più la possibilità di impostare coordinate custom in percentuale.

Su un portfolio fotografico, questo significa che puoi sempre garantire che il viso del soggetto (tipicamente al centro) resti visibile, anche su un crop 1:1 di una foto 16:9. Su un e-commerce, significa che il prodotto rimane centrato anche su miniature 4:5 di foto 1:1.

Combinare Aspect Ratio + Image Framing: il pattern consigliato

La combinazione che uso nel 90% dei casi è: Aspect Ratio 4:5 + Object Fit Cover + Object Position Center. Funziona su qualsiasi tipo di immagine, garantisce ritaglio centrato, e mantiene proporzioni coerenti su tutti i breakpoint. Per pattern specifici (es. hero image 21:9 con focus sul soggetto in alto a destra) si va su ratio custom e Object Position top-right.

Cosa fa Image Preset e perché chiude il cerchio del design system

Image Preset è l'estensione del Preset System Divi 5 al gruppo Option "Image". Se hai letto la guida al Preset System Divi 5, sai che un Preset è un set di proprietà di stile ripristinabili che puoi applicare a più elementi. Image Preset permette di creare preset specifici per le immagini, includendo Aspect Ratio, Image Framing, Border, Shadow, Filter, e Transform.

Esempio pratico: preset "Product Card Image"

Un e-commerce WooCommerce ha 4-5 pattern di immagine prodotto che si ripetono: card in griglia, card in carousel, featured product in homepage, immagine in pagina prodotto, thumbnail correlati. Senza Image Preset, devi configurare Aspect Ratio 4:5, Cover, Center su ognuno dei 5 pattern. Con Image Preset, crei un preset "Product Card Image" una volta e lo applichi a tutti i moduli immagine che devono matchare.

Il vantaggio operativo è enorme: cambi l'Aspect Ratio da 4:5 a 1:1 e tutti i 50+ moduli immagine del sito si aggiornano. È lo stesso principio del Variable Generator (token centralizzato) applicato alle immagini. Lo sviluppatore non tocca più 50 moduli, tocca 1 preset.

Esempio pratico: preset "Editorial Hero Image"

Su un blog editoriale, l'immagine hero degli articoli ha bisogno di un trattamento specifico: Aspect Ratio 21:9, Cover, Center, leggera ombra, nessun border-radius, filter brightness leggero per far risaltare il testo overlay. Crea un preset "Editorial Hero" una volta, applicalo a tutte le 200 pagine articolo del sito. Cambi un valore nel preset, 200 pagine si aggiornano in millisecondi.

Come creare un Image Preset

Il flusso è identico agli altri Preset Divi 5: configuri un modulo Image con le proprietà che ti servono, vai su Design → Preset, clicca "Save as Preset", dai un nome, e il preset è disponibile nella libreria. Da quel momento, ogni modulo Image (e moduli compatibili) può applicarlo con un click.

Combinazione con Loop Builder e Variable Generator

Le tre nuove funzionalità trovano la loro espressione massima quando sono combinate con Loop Builder e Variable Generator, altri due pilastri del design system Divi 5.

Pattern: Blog grid con Loop Builder + Aspect Ratio + Image Preset

Il Loop Builder di Divi 5 permette di creare template di card che si ripetono per ogni post del blog. Combinato con Aspect Ratio + Image Preset, puoi creare una griglia di 12 articoli con immagini perfettamente allineate in 5 minuti, senza scrivere CSS.

# WP-CLI per verificare la consistenza delle immagini nel Loop Builder
wp eval '
  $posts = get_posts(["posts_per_page" => 12, "post_type" => "post"]);
  $report = [];
  foreach ($posts as $p) {
    $thumb = get_post_thumbnail_id($p->ID);
    if ($thumb) {
      $meta = wp_get_attachment_metadata($thumb);
      $ratio = $meta["width"] / $meta["height"];
      $report[$p->ID] = [
        "title" => $p->post_title,
        "width" => $meta["width"],
        "height" => $meta["height"],
        "ratio" => round($ratio, 2),
      ];
    }
  }
  echo "Report consistenza aspect ratio immagini:\n";
  foreach ($report as $id => $data) {
    echo "  Post $id: {$data["width"]}x{$data["height"]} (ratio {$data["ratio"]})\n";
  }
'

Questo script identifica se ci sono immagini con aspect ratio molto diversi tra loro. Se sì, è un candidato per Aspect Ratio + Image Preset. Se tutte sono simili, il preprocessing tradizionale può bastare.

Pattern: WooCommerce con Variable Generator token + Image Preset

Su un e-commerce con design system multi-brand, il Variable Generator crea token come --image-product-ratio: 4/5 e --image-product-fit: cover. L'Image Preset può leggere queste variabili e applicarle a tutti i moduli immagine prodotto. Risultato: cambi il ratio in un token, tutti i preset e tutti i moduli si aggiornano.

Limiti reali di Aspect Ratio, Image Framing e Image Preset

Onestà intellettuale: anche queste tre funzionalità non sono perfette. Ci sono almeno 4 limiti da conoscere.

Limite 1: Aspect Ratio su immagini con dimensioni custom può rompere layout legacy

Se hai un sito Divi 4 migrato a Divi 5 con immagini che avevano width/height fissi, attivare Aspect Ratio può rompere il layout esistente. Soluzione: fare un audit pre-migrazione con lo script WP-CLI qui sopra e decidere modulo per modulo.

Limite 2: Image Preset non è compatibile con tutti i moduli

Alcuni moduli custom di terze parti o moduli Divi 5 meno recenti potrebbero non supportare il Preset System per le immagini. Verifica sempre la compatibilità del modulo prima di pianificare un rollout su larga scala.

Limite 3: Loop Builder + Aspect Ratio ha quirk su mobile Safari

Su Safari iOS, la combinazione Loop Builder + Aspect Ratio + Object Fit Cover può mostrare un pixel di spazio vuoto sotto l'immagine in alcuni casi. È un bug noto di WebKit. Workaround: aggiungere display: block all'immagine via CSS custom.

Limite 4: nessun Aspect Ratio per video embed

I video YouTube/Vimeo embeddati in Divi 5 non supportano Aspect Ratio nello stesso modo delle immagini. Per il 16:9 video ratio serve ancora il classico trick del padding-bottom 56.25% nel wrapper.

Quando NON usare Aspect Ratio + Image Framing

Ci sono almeno 3 scenari in cui queste funzionalità sono overengineering.

Scenario A: sito con 5 pagine e zero griglie

Se il sito è un portfolio one-shot o un sito vetrina di 5 pagine senza griglie, blog, o shop, Aspect Ratio è inutile. Meglio preprocessing delle immagini con uno strumento come Squoosh o Affinity Photo batch.

Scenario B: immagini con aspect ratio originale importante

Se il cliente fornisce immagini con aspect ratio specifico (es. foto di food che devono essere orizzontali 3:2, non quadrate), forzare Aspect Ratio 1:1 può creare crop indesiderati. Meglio rispettare il ratio originale e fare preprocessing.

Scenario C: hai bisogno di animazioni image-reveal

Se il tuo effetto grafico prevede animazioni di image reveal (clip-path animato, scale-up, parallax), Aspect Ratio + Image Framing possono interferire con le animazioni. Per effetti avanzati, custom CSS o un framework come GSAP è ancora la strada.

Setup pratico: configurare 3 Image Preset in 15 minuti

Vediamo un workflow reale per creare 3 Image Preset pronti all'uso in un sito editoriale.

Preset 1: "Card Blog"

Configurazione modulo Image:

• Aspect Ratio: 16:9
• Object Fit: Cover
• Object Position: Center
• Border Radius: 8px
• Box Shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
• Filter: Brightness 100% (default)

Salva come Preset con nome "Card Blog". Applica a tutti i moduli Image nelle card articolo del blog.

Preset 2: "Hero Editorial"

Configurazione:

• Aspect Ratio: 21:9
• Object Fit: Cover
• Object Position: Center
• Border Radius: 0
• Box Shadow: nessuna
• Filter: Brightness 75% (per favorire leggibilità testo overlay)
• Transform: Scale 1.0 hover Scale 1.05 (zoom leggero on hover)

Salva come Preset con nome "Hero Editorial". Applica al modulo Image in tutti gli articoli del blog.

Preset 3: "Product Card"

Configurazione:

• Aspect Ratio: 4:5
• Object Fit: Cover
• Object Position: Center
• Border Radius: 12px
• Box Shadow: 0 4px 16px rgba(0, 0, 0, 0.08)
• Filter: Saturate 110%

Salva come Preset con nome "Product Card". Applica a tutti i moduli Image in WooCommerce product grid.

Audit e governance dei Preset

Dopo aver creato i preset, è buona pratica fare un audit mensile per verificare che i Preset vengano effettivamente applicati (e non overridden da configurazioni locali sui singoli moduli):

# WP-CLI: trova moduli Image che NON usano un Preset
wp eval '
  global $wpdb;
  $results = $wpdb->get_results("
    SELECT p.ID, p.post_title, pm.meta_value
    FROM {$wpdb->posts} p
    INNER JOIN {$wpdb->postmeta} pm ON p.ID = pm.post_id
    WHERE pm.meta_key = "_et_pb_module_attributes"
    AND pm.meta_value LIKE "%image%"
  ");
  $without_preset = 0;
  foreach ($results as $r) {
    $attrs = maybe_unserialize($r->meta_value);
    if (!isset($attrs["image_preset"]) || empty($attrs["image_preset"])) {
      $without_preset++;
      echo "Modulo senza preset: Post {$r->ID} - {$r->post_title}\n";
    }
  }
  echo "\nTotale moduli Image senza Preset: $without_preset\n";
'

Domande frequenti su Divi 5 Aspect Ratio e Image Preset

Aspect Ratio funziona anche con immagini SVG?

Sì, Aspect Ratio funziona con qualsiasi immagine, incluse SVG, PNG, JPG, WebP, AVIF. Per SVG è particolarmente utile perché permette di mantenere le proporzioni del vettoriale in qualsiasi container.

Image Preset sovrascrive il CSS custom del modulo?

Sì, Image Preset ha priorità sul CSS custom del modulo. Se devi fare un'eccezione su un singolo modulo, puoi applicare un Preset locale invece del Preset globale, oppure usare il Free Form CSS per override puntuali.

Posso esportare Image Preset tra siti Divi 5 diversi?

Sì, il Preset System Divi 5 supporta export/import JSON. Vai su Divi → Preset Manager → Export, seleziona i Preset immagine, e importali nel nuovo sito. È il metodo consigliato per agenzie che gestiscono più siti dello stesso cliente o dello stesso settore.

Come interagisce Aspect Ratio con il Lazy Load nativo di WordPress?

Aspect Ratio è CSS puro e funziona indipendentemente dal lazy load. WordPress aggiunge l'attributo loading="lazy" alle immagini, ma il browser gestisce correttamente le proporzioni anche prima che l'immagine sia caricata, evitando il classico salto di layout (CLS).

Aspect Ratio ha impatto sulle performance?

No, Aspect Ratio è gestito dal browser via CSS aspect-ratio property, che è una feature performante. Anzi, migliora il CLS (Cumulative Layout Shift) perché le proporzioni sono definite prima del caricamento dell'immagine.

Posso usare Aspect Ratio con Loop Builder di WooCommerce?

Sì, e anzi è il pattern d'uso più potente. Loop Builder ripete un template di modulo per ogni prodotto/post del loop, e Aspect Ratio garantisce che tutte le iterazioni abbiano la stessa dimensione. Risultato: griglia WooCommerce con immagini perfettamente allineate senza preprocessing.

L'Object Position center è sempre la scelta giusta?

No, dipende dal contenuto dell'immagine. Per foto di prodotto con prodotto centrato, sì. Per foto di food o paesaggi, top-center o bottom-center può essere meglio. La regola pratica è: testa su 3-4 immagini rappresentative del tuo dataset e scegli il valore che produce il crop migliore.

Conclusione: design system per le immagini, non solo per i colori

Aspect Ratio, Image Framing e Image Preset sono il tassello che mancava al design system Divi 5. Fino a giugno 2026, il sistema era forte su colori, typography e spacing, ma debole sulle immagini: le proporzioni e i trattamenti visivi rimanevano un problema di preprocessing esterno. Con queste tre funzionalità coordinate, anche le immagini diventano un cittadino di prima classe del design system.

Per uno sviluppatore WordPress, significa meno tempo passato in Photoshop, meno dipendenza da tool esterni, e un flusso di lavoro che vive interamente dentro il Visual Builder. Per un'agenzia che gestisce molti siti Divi 5, significa design system veramente riutilizzabile, dove un cambio di preset si propaga a 50 siti senza toccare un'immagine.

La combinazione con Variable Generator e Loop Builder rende il quadro completo: token per i colori, token per la tipografia, Aspect Ratio per le immagini, Preset per i componenti. Il design system Divi 5 del 2026 non ha più gap evidenti rispetto a framework CSS nativi come Tailwind, e in più ha il vantaggio di essere visuale.

Riferimenti utili per approfondire

• Elegant Themes: Exploring Divi 5's New Ratio & Framing Settings - articolo ufficiale del 13 giugno 2026 su Aspect Ratio, Image Framing, Image Preset
• Elegant Themes: Divi 5.8 Release Notes - changelog 5.8 del 20 giugno 2026 con 66 fix e Customizable Workspaces
• Elegant Themes: Introducing Divi AI for Divi 5 - integrazione AI per generazione preset assistita
• Divi 5 preset e design system AI: cosa cambia per chi sviluppa temi WordPress - architettura completa del Preset System Divi 5
• Generare design system WordPress con AI e Divi 5 - Variable Generator + AI workflow
• Divi 5 Workspaces per agenzia multi-ruolo: setup pratico - Workspaces Divi 5 per team agenzia
• Toolchain agenzia WordPress moderna 2026: guida pratica completa - toolchain completa con Divi 5 e Claude Code
• Migliori AI website builder WordPress 2026: guida tecnica - confronto page builder con AI integrata
• Web Design 2026: 9 leggi che separano un sito da 500€ da uno da 50.000€ - principi di design system che governano Aspect Ratio e Preset
• Strumenti di grafica web 2026: dai pixel ai sistemi di design agentici - panoramica tool 2026
• MDN: CSS aspect-ratio property - specifica tecnica CSS aspect-ratio
• MDN: CSS object-fit property - specifica tecnica object-fit con valori cover, contain, fill, none