WMA BestBlock

New n

Introduction

WMA BestBlock - User Guide
Module for Joomla 6 - version 1.0.30

modwmabestblock displays a "bento" grid (interlocking blocks of different sizes) composed of 11 blocks. Each complete grid configuration is called a Set. If multiple Sets are created, the module scrolls through them like a slider.

Installation Joomla Backend: System -> Install -> Extensions.

Drag and drop the file modwmabestblock-vX.Y.Z.zip into the upload area (or select Install from folder / Install from URL).

Once installation is complete, the module appears under Content -> Site Modules named WMA BestBlock.

Updates
The module updates automatically via the Joomla update server: System -> Update -> Extension Updates. If a new version does not appear, click Clear cache first and then Check for updates.

Creating and Publishing the Module Content -> Site Modules -> New -> WMA BestBlock.

Enter a Title (usually hidden: set Show Title = Hide).

In the Assignment tab, choose which pages to display it on.

In the Module tab, select the template Position (the module is designed for full-width positions).

Set Status = Published and save.

The module occupies the full available width; the height is adjusted in the Options tab (step 3).

"Options" Tab - General Settings Applies to all Sets.

Height + Height Unit: Module height. Unit: vh = percentage of viewport height (recommended, e.g., 100 = full screen), % = container percentage, px = fixed pixels.

Autoplay: If enabled, the grid automatically advances when multiple Sets exist.

Delay (ms): Interval (in milliseconds) between Sets. Visible only when Autoplay is active. E.g., 6000 = 6 seconds.

Mouse Glow: Luminous white halo following the cursor over the grid.

Show Block Badge: Displays a small label on each block (the text from the "Badge" field). Useful during setup to identify blocks; should normally be disabled in production.

Enable Lightbox: If enabled, clicking a grid image opens it in a full-screen overlay (see section 6).

Lightbox Overlay Color: Dark background color behind the expanded image.

Overlay Opacity (%): Opacity level of the lightbox background: 100 = fully opaque, 85 = page underneath is slightly visible.

"Set" Tab - The Grid Layout 4.1 Grid Structure The grid consists of 4 columns and 4 rows. Blocks B1 to B8 hold content; B9, B10, and B11 are action/navigation buttons.

B1: Hero, large top-left block (Background image + text overlay at the bottom)

B2: Text Card (Text on solid background - "Blocks Color")

B3: Vertical Image (Image + text overlay)

B4: Text Block (Text on solid background)

B5: Image (Image + text overlay)

B6: Vertical Image (Image + text overlay)

B7: Text Card (Text on solid background)

B8: Vertical Image (Image + text overlay)

B9: Action Button (E.g., "Learn More" with a link)

B10: "Previous" Button (Navigates to the previous Set)

B11: "Next" Button (Navigates to the next Set)

Each block can contain both an image and text: if the image is omitted, only the background color is shown; if text is omitted, only the image is displayed.

4.2 Set Colors
At the top of each Set configuration:

Background Color: General module background for this Set

Blocks Color: Background color for text blocks (B2, B4, B7) and buttons

Text Color: Color for all text elements in the Set

Text Shadow: None / Light / Strong. Adds a shadow to text to improve readability over light images.

4.3 Content Fields for Blocks (B1-B8)
Image: Selected via the Joomla Media Manager.

Alt Text: Image alt attribute (accessibility / SEO). Uses the file name if left empty.

Text 1: Primary text line (usually the main heading).

Text 1 Tag: HTML tag for Text 1: H1-H4, P, DIV, or H2 LINK. See section 4.4.

Text 1 Size: Font size in rem (e.g., 2.5). Empty = block default size.

Text 2: Secondary text line (usually a subtitle or tag/category).

Text 2 Tag / Text 2 Size: Same options as above, applied to Text 2.

Joomla Article: Target article for the block link (see 4.4).

Custom URL: Alternative link target (used only if no article is selected).

Badge: Label text shown on the block when "Show Block Badge" is enabled. Also serves as the section header in the backend interface.

4.4 Enabling Block Links
The link (pointing to a Joomla Article or Custom URL) is active only if the text tag is explicitly set to H2 LINK. Selecting any other tag disables clickability.

Rules:

If a Joomla Article is selected, it takes priority over the Custom URL.

If no article is selected, the Custom URL is used (supported formats: http, https, mailto:, tel:, or relative paths like /page).

The link wraps the text elements (Text 1 and/or Text 2 set to H2 LINK), not the entire background image.

4.5 Buttons B9, B10, and B11
B9: Action button. Fields: Button Label, Joomla Article, or Custom URL. If no link is assigned, it remains a non-clickable visual element.

B10 / B11: Set navigation controls. Requires only a Button Label (e.g., "Previous" / "Next"). Active only when multiple Sets exist.

Multiple Sets = Slider Mode When more than one Set is created, the module automatically operates as a slider:

Buttons B10 / B11 switch to the previous or next Set.

Keyboard arrow keys can be used for navigation when the module has focus.

With Autoplay enabled, transitions occur automatically based on the "Delay (ms)" setting.

Each Set retains its independent color configuration, updating the color scheme on transition.

If only one Set exists, buttons B10/B11 remain visible but non-functional (they can be left empty or used as decorative elements).

Maximum allowed: 20 Sets per module instance.

Image Lightbox (Frontend) When Enable Lightbox is active in Options:

Hovering over a grid image changes the cursor to a zoom glass.

Clicking the image opens a full-screen modal over a dark background.

If the Set contains multiple images, users can navigate through them using side arrows or keyboard arrow keys; a counter displays progress (e.g., "3 / 8").

The modal can be closed via the X button, the Esc key, or by clicking outside the image container.

Background color and opacity can be adjusted in the Options tab.

Note: Text-only blocks (such as B7 without an image) are excluded from the lightbox gallery.

On mobile devices (viewport width up to 768px), the lightbox image scales to fill the entire screen without margins using object-fit: cover; parts of the image may be cropped. In mobile mode, closing the lightbox requires tapping the X button (backdrop clicks are unavailable as the image covers the entire viewport).

Managing Sets in the Backend In the Set tab, a dark control bar appears above each Set:

Arrow (chevron): Expands / collapses the Set. Sets are collapsed by default; click to open and edit.

Move icon: Drag and drop to reorder Sets.

Copy icon ("Copy set"): Duplicates the Set along with all contained data (images, text, dimensions, links, badges).

Trash icon: Deletes the Set.

At the bottom of the list, the green Add Set button creates a new empty Set.

Each block (B1-B8) is structured into two field columns. The grey section header dynamically reflects the text entered in the block's "Badge" field in real time.

Mobile Behavior The grid layout adapts dynamically based on screen width:

Up to 768px (tablets / landscape mobile): switches to a 2-column layout. Block B1 spans full width at the top, while remaining blocks stack sequentially. Height calculation switches to automatic (the "Height" setting is ignored).

Up to 420px (portrait mobile): transforms into a single-column stacked layout.

No additional configuration is required for mobile responsiveness.

"Information" Tab
Displays module version, release date, author details, and license info read directly from the installed package manifest. Used purely for version verification; contains no configurable settings.
Troubleshooting
Module does not display on the frontend: Verify Status = Published, proper Template Position, and Page Assignment. Ensure at least one Set contains valid content.

Clicking an image does not trigger lightbox: Enable Enable Lightbox in Options. If recently updated, clear the site cache and force refresh the page (Ctrl+F5).

Block text is not clickable: Links require setting Tag = H2 LINK on Text 1 or Text 2.

Slider does not auto-advance: Requires at least two Sets and Autoplay enabled in Options.

Color setting changes have no effect: Colors are managed per Set rather than globally in Options: open the specific Set to update its color fields.

Duplicating a Set results in blank fields: Resolved in version 1.0.26. Update the module to the latest release.

Update warning: "does not provide a checksum": Informational notice, not a critical error; installation remains valid. Under Extension Updates, click Clear cache before running Check for updates.

WMA BestBlock - Guida all'uso

Modulo per Joomla 6 - versione 1.0.30

modwmabestblock mostra una griglia "bento" (blocchi di dimensioni diverse incastrati tra loro) composta da 11 blocchi. Ogni configurazione completa della griglia si chiama Set. Se si creano più Set, il modulo li fa scorrere come uno slider.

Installazione

Backend Joomla: Sistema -> Installa -> Estensioni.
Trascinare il file modwmabestblock-vX.Y.Z.zip nell'area di caricamento (oppure Installa da cartella / Installa da URL).
A installazione completata il modulo compare in Contenuti -> Moduli sito con il nome WMA BestBlock.

Aggiornamenti

Il modulo si aggiorna da solo tramite il server di aggiornamento Joomla: Sistema -> Aggiorna -> Aggiornamenti estensioni. Se una nuova versione non compare, cliccare prima Svuota cache e poi Cerca aggiornamenti.

Creare e pubblicare il modulo

Contenuti -> Moduli sito -> Nuovo -> WMA BestBlock.
Dare un Titolo (di solito nascosto: impostare Mostra titolo = Nascondi).
Nella scheda Assegnazione scegliere in quali pagine mostrarlo.
Nella scheda Modulo scegliere la Posizione del template (il modulo è pensato per posizioni a tutta larghezza).
Impostare Stato = Pubblicato e salvare.

Il modulo occupa tutta la larghezza disponibile; l'altezza si regola nelle Opzioni (punto 3).

Scheda "Opzioni" - impostazioni generali

Valgono per tutti i Set.

  Impostazione
  Cosa fa




  Altezza + Unità Altezza
  Altezza del modulo. Unità: vh = percentuale dell'altezza schermo (consigliato, es. 100 = schermo intero), % = percentuale del contenitore, px = pixel fissi.


  Autoplay
  Se attivo, con più Set la griglia avanza da sola.


  Ritardo (ms)
  Secondi (in millisecondi) tra un Set e l'altro. Visibile solo con Autoplay attivo. Es. 6000 = 6 secondi.


  Bagliore Mouse
  Alone bianco luminoso che segue il cursore sopra la griglia.


  Mostra blocco Badge
  Mostra su ogni blocco una piccola etichetta (il testo del campo "Badge"). Utile in fase di configurazione per capire quale blocco si sta guardando; di norma va disattivato in produzione.


  Abilita Lightbox
  Se attivo, cliccando un'immagine della griglia questa si apre ingrandita a tutto schermo (vedi punto 6).


  Colore Sfondo Lightbox
  Colore dello sfondo scuro dietro l'immagine ingrandita.


  Trasparenza Sfondo (%)
  Quanto è coprente lo sfondo del lightbox: 100 = pieno, 85 = si intravede la pagina sotto.

Scheda "Set" - la griglia

4.1 Com'è fatta la griglia

La griglia ha 4 colonne e 4 righe. I blocchi da B1 a B8 sono contenuti; B9, B10, B11 sono pulsanti.

+---------------------+----------+----------+
| | B2 | |
| B1 +----------+ B3 |
| (Hero) | | |
| | B6 +----------+
+----------+----------+ | |
| B4 | B5 | | B8 |
| | +----------+ |
+-----+----+-----+----+ B7 | |
| B9 | B10 | B11 | | |
+-----+-----+--------+-----------+----------+

  Blocco
  Ruolo
  Note




  B1
  Hero, blocco grande in alto a sinistra
  Immagine di sfondo + testo sovrapposto in basso


  B2
  Card di testo
  Testo su sfondo colorato (colore "Colore Blocchi")


  B3
  Immagine verticale
  Immagine + testo sovrapposto


  B4
  Blocco di testo
  Testo su sfondo colorato


  B5
  Immagine
  Immagine + testo sovrapposto


  B6
  Immagine verticale
  Immagine + testo sovrapposto


  B7
  Card di testo
  Testo su sfondo colorato


  B8
  Immagine verticale
  Immagine + testo sovrapposto


  B9
  Pulsante azione
  Es. "Scopri di più" con link


  B10
  Pulsante "Precedente"
  Va al Set precedente


  B11
  Pulsante "Successivo"
  Va al Set successivo

Ogni blocco può avere sia immagine che testo: se manca l'immagine resta solo lo sfondo colorato; se manca il testo resta solo l'immagine.

4.2 Colori del Set

In cima a ogni Set:

  Campo
  Effetto




  Colore Sfondo
  Sfondo generale del modulo per questo Set


  Colore Blocchi
  Sfondo dei blocchi di testo (B2, B4, B7) e dei pulsanti


  Colore Testi
  Colore di tutti i testi del Set


  Ombra Testi
  Nessuna / Leggera / Forte. Aggiunge un'ombra ai testi per renderli leggibili sopra immagini chiare.

4.3 Contenuto di un blocco (B1-B8)

  Campo
  A cosa serve




  Immagine
  Si sceglie dal media manager di Joomla.


  Testo alternativo
  Testo alt dell'immagine (accessibilità / SEO). Se vuoto, viene usato il nome del file.


  Testo 1
  Prima riga di testo (di solito il titolo).


  Tag Testo 1
  Tag HTML del Testo 1: H1-H4, P, DIV, oppure H2 LINK. Vedi 4.4.


  Dimensione Testo 1
  Grandezza del carattere in rem (es. 2.5). Vuoto = dimensione predefinita del blocco.


  Testo 2
  Seconda riga di testo (di solito sottotitolo o tag/categoria).


  Tag Testo 2 / Dimensione Testo 2
  Come sopra, per il Testo 2.


  Articolo Joomla
  Articolo a cui puntare il link del blocco (vedi 4.4).


  URL Libero
  Indirizzo alternativo per il link (usato solo se non è selezionato un articolo).


  Badge
  Testo della piccola etichetta mostrata sul blocco quando l'opzione "Mostra blocco Badge" è attiva. Nel backend appare anche come intestazione della sezione del blocco.

4.4 Come si attiva il link di un blocco

Il link (verso l'Articolo o l'URL Libero) viene applicato solo se il tag del testo è impostato su H2 LINK. Con qualsiasi altro tag il testo non è cliccabile.

Regole:

Se è selezionato un Articolo Joomla, ha la precedenza sull'URL Libero.
Se non c'è articolo, viene usato l'URL Libero (sono ammessi solo http, https, mailto:, tel: o percorsi interni tipo /pagina).
Il link si applica al testo (Testo 1 e/o Testo 2 con tag H2 LINK), non all'intera immagine.

4.5 I pulsanti B9, B10, B11

B9 - pulsante di azione. Campi: Etichetta Pulsante, Articolo Joomla o URL Libero. Se non c'è link, resta un pulsante non cliccabile (utile solo come elemento grafico).
B10 / B11 - navigazione tra i Set. Si imposta solo l'Etichetta Pulsante (es. "Precedente" / "Successivo"). Funzionano solo se esiste più di un Set.

Più Set = slider

Se si crea più di un Set, il modulo diventa uno slider:

I pulsanti B10 / B11 passano al Set precedente / successivo.
Funzionano anche le frecce della tastiera quando il modulo ha il focus.
Con Autoplay attivo l'avanzamento è automatico ogni "Ritardo (ms)".
Ogni Set ha i propri colori: cambiando Set cambia anche lo schema cromatico.

Con un solo Set, i pulsanti B10/B11 restano visibili ma inattivi (conviene lasciarli vuoti o usarli come decoro).

Massimo 20 Set per modulo.

Lightbox immagini (frontend)

Se in Opzioni è attivo Abilita Lightbox:

Passando il mouse su un'immagine della griglia il cursore diventa una lente di ingrandimento.
Cliccando l'immagine si apre a tutto schermo su sfondo scuro.
Se il Set contiene più immagini, nel lightbox si scorre tra tutte con le frecce laterali, con le frecce della tastiera, e un contatore mostra "3 / 8".
Si chiude con il pulsante X, con il tasto Esc, o cliccando fuori dall'immagine.
Colore e trasparenza dello sfondo si regolano nelle Opzioni.

Nota: le sezioni di solo testo (B7 e simili quando non hanno immagine) non sono ingrandibili.

Su dispositivi mobili (schermo fino a 768px) l'immagine ingrandita occupa tutto lo schermo senza margini e viene ritagliata per riempire l'area (object-fit: cover): può non essere visibile per intero. In questa modalità la chiusura avviene solo con il pulsante X (il tocco "fuori dall'immagine" non è disponibile perché l'immagine copre tutto).

Gestire i Set nel backend

Nella scheda Set, sopra ogni Set c'è una barra scura con i comandi:

  Comando
  Azione




  Freccia (chevron)
  Espande / comprime il Set. I Set sono compressi di default: cliccare per aprirli e modificarli.


  Icona sposta
  Trascinare per riordinare i Set.


  Icona copia ("Copia set")
  Duplica il Set con tutti i suoi contenuti (immagini, testi, dimensioni, link, badge).


  Cestino
  Elimina il Set.

In fondo alla lista, il pulsante verde Aggiungi Set crea un nuovo Set vuoto.

Ogni blocco B1-B8 è diviso in due colonne di campi; l'intestazione grigia della sezione riporta il testo del campo "Badge" del blocco (aggiornata in tempo reale mentre si digita).

Comportamento su mobile

La griglia si riorganizza automaticamente in base alla larghezza dello schermo:

fino a 768px (tablet / phone landscape): passa a 2 colonne, B1 resta in alto a tutta larghezza, gli altri blocchi si impilano in ordine, l'altezza diventa automatica (l'impostazione "Altezza" viene ignorata);
fino a 420px (phone in verticale): tutti i blocchi vanno in una sola colonna, uno sotto l'altro.

Non serve configurare nulla per il mobile.

Scheda "Informazioni"

Mostra versione, data di rilascio, autore e licenza del modulo, letti dinamicamente dal pacchetto installato. Serve solo a verificare quale versione è in uso; non ci sono impostazioni.

Problemi frequenti

Sintomo
Causa / Soluzione

Il modulo non appare in frontend
Verificare Stato = Pubblicato, la Posizione del template e l'Assegnazione alle pagine. Serve almeno un Set con contenuto.

Cliccando l'immagine non si ingrandisce
Attivare Abilita Lightbox nelle Opzioni. Se si è appena aggiornato il modulo, svuotare la cache del sito e ricaricare la pagina (Ctrl+F5).

Il testo di un blocco non è cliccabile
Il link si attiva solo con Tag = H2 LINK sul Testo 1 o Testo 2.

Lo slider non avanza da solo
Serve più di un Set e l'opzione Autoplay attiva.

Cambiando i colori non cambia niente
I colori si impostano per Set, non nelle Opzioni: aprire il Set e modificare i campi "Colori Set".

Duplicando un Set i campi risultano vuoti
Risolto dalla versione 1.0.26. Aggiornare il modulo all'ultima versione.

L'aggiornamento dice "non fornisce un checksum"
Messaggio informativo, non un errore: l'installazione è comunque valida. Sul sito successivo, in Aggiornamenti estensioni cliccare Svuota cache prima di Cerca aggiornamenti.