Impostazioni di base

Testo
Testo
STILE PULSANTE

Potrebbe differire leggermente dall interfaccia reale.

Anteprima modifiche

Questa impostazione si applica al testo del pulsante.

Testo
Testo
STILE PULSANTE

Potrebbe differire leggermente dall interfaccia reale.

Anteprima modifiche

Questa impostazione si applica al testo del pulsante.

Tag
Tag HTML
Link
URL del link
https://
Destinazione del link
_self
rel Attribute
none
Titolo del link
aria-label
ID di tracciamento
Posizione del pulsante
ID

Potrebbe differire leggermente dall interfaccia reale.

Tag HTML
Tag HTML
Link

Potrebbe differire leggermente dall interfaccia reale.

Testo

Punto chiave: Imposta il testo visualizzato sul pulsante. Il suo ruolo è comunicare chiaramente l'azione successiva che l'utente dovrebbe compiere.

Cosa cambia con questa impostazione: La formulazione del testo influisce direttamente sul tasso di clic e sulla velocità di comprensione.

Suggerimento per la regolazione: Puntate a circa 10-18 caratteri e includete un verbo (es.: Scopri di più / Iscriviti) per trasmettere meglio l'intento.

Voci di impostazione

  • Testo: Testo visualizzato sul pulsante. Il valore predefinito è "STILE PULSANTE".

Per visualizzare un testo diverso al passaggio del mouse, attivate la scheda Hover e impostate il testo hover.

Quando e selezionato Link
URL del link
https://
Destinazione del link
Stessa pagina
Imposta come si apre il link
REL Attribute
Nessuno
Impostazioni SEO e sicurezza
Titolo del link
Tooltip visualizzato al passaggio del mouse

Potrebbe differire leggermente dall interfaccia reale.

Quando e selezionato Pulsante
Tipo di pulsante
button

Potrebbe differire leggermente dall interfaccia reale.

Elementi comuni
ARIA-LABEL
Testo descrittivo per screen reader
ID di tracciamento
ID clic per GTM ecc. (data-click-id)
Posizione del pulsante
Posizione di collocazione del pulsante (data-button-location)
ID

Potrebbe differire leggermente dall interfaccia reale.

Tag

L'aspetto reale potrebbe differire leggermente.

Punto chiave: Imposta il tag HTML di output e i relativi attributi. Qui si definisce chiaramente se si tratta di un link di navigazione o di un pulsante di esecuzione.

Cosa cambia con questa impostazione: Anche le informazioni relative a SEO, accessibilità e tracciamento (GTM) vengono determinate da questa impostazione.

Suggerimento per la regolazione: Scegliete a per la navigazione tra pagine e button per l'esecuzione di JavaScript o l'invio di form, così la struttura resta coerente.

Voci di impostazione

  • Tag HTML: Link (tag <a>) / Pulsante (tag <button>). Il valore predefinito è Link.

Dal punto di vista semantico dell'HTML, scegliete Link quando lo scopo è la navigazione tra pagine o lo spostamento a un URL, e Pulsante quando lo scopo è l'esecuzione di JavaScript o la gestione di form. I crawler SEO seguono i link nei tag <a>, quindi Link è consigliato per la navigazione interna del sito.

Quando si seleziona Link

L'aspetto reale potrebbe differire leggermente.

L'aspetto reale potrebbe differire leggermente.

  • Link URL: Imposta l'URL di destinazione. Per le pagine oggetto di tracciamento, registrate l'URL canonico.
  • Link Target: Scegliete se aprire nella stessa scheda (_self) o in una nuova scheda (_blank). Per i link esterni è consigliata una nuova scheda.
  • rel Attribute: Aggiunge attributi come noopener, noreferrer, nofollow per regolare sicurezza e requisiti SEO.

Quando si imposta target="_blank", rel="noopener" viene aggiunto automaticamente (forzato internamente come misura di sicurezza). Non è possibile rimuovere manualmente noopener. Se non volete trasferire il valore SEO a un sito esterno, aggiungete nofollow.

  • Link Title: Imposta una descrizione supplementare del link, utilizzata per accessibilità e rinforzo semantico.

Quando si seleziona Pulsante

L'aspetto reale potrebbe differire leggermente.

  • Pulsante Type: Selezionate button / submit / reset per definire il comportamento all'interno del form.

submit esegue l'invio del form. Se utilizzato al di fuori di un form, selezionate button. reset reinizializza tutti i campi del form, quindi valutatene l'uso con cautela per prevenire operazioni accidentali. Il valore predefinito è button (non esegue l'invio del form).

Restrizione di accessibilità: Se Link URL è vuoto o impostato su #, nell'output HTML viene aggiunto automaticamente role="button". In questo modo, i pulsanti che non funzionano come link vengono correttamente annunciati come "pulsante" dagli screen reader.

Fallback del testo hover: Se nella scheda Hover il testo hover non è impostato, il testo normale viene utilizzato anche nello stato hover.

Voci comuni

L'aspetto reale potrebbe differire leggermente.

  • aria-label: Etichetta per la lettura dello schermo. Da impostare quando il testo visualizzato non trasmette chiaramente l'intento. Fornisce indicazioni operative precise agli utenti di screen reader.
  • Tracking ID: Identificativo per il tracciamento. Utilizzato per l'aggregazione degli eventi con GTM o strumenti di analisi.
  • Pulsante Location: Etichetta gestionale della posizione. Facilita l'identificazione durante i test A/B con più CTA.
  • ID: ID univoco. Utilizzato per riferirsi in modo univoco all'elemento tramite CSS o integrazione JavaScript.

Tracking ID e Pulsante Location vengono generati come attributi data-* nell'HTML. Possono essere utilizzati come riferimento da tag manager come GTM. L'ID deve essere univoco all'interno della pagina. Impostare lo stesso ID su più blocchi potrebbe causare malfunzionamenti di CSS e JavaScript.