Costruttore Sito

Elementi

Elementi di web design per il website builder di Laundry ERP

Elementi

Gli elementi aiutano a strutturare e presentare i contenuti in modo efficace. Spaziano da componenti basati su testo come titoli, elenchi e evidenziazioni di testo a elementi interattivi come pulsanti e link. Possono essere aggiunti anche elementi visivi come immagini, icone, video e animazioni per migliorare la presentazione e l'organizzazione del contenuto.

Per aggiungere o modificare un elemento del sito web:

  1. Vai alla pagina del sito web pertinente e clicca Modifica.
  2. Clicca la sezione della pagina in cui vuoi aggiungere o modificare un elemento.
  3. Apporta le modifiche necessarie.
  4. Clicca Salva.
Nota: Gli stili predefiniti per titoli, pulsanti, link e testo dei paragrafi, ad esempio, sono definiti nella scheda Tema dell'editor del sito web.

Titoli {#titles}

I titoli definiscono le intestazioni e organizzano i contenuti del sito web in diversi livelli per chiarezza e struttura. Per inserire un titolo, digita /title, scegli lo stile dell'intestazione (Intestazione 1, Intestazione 2 o Intestazione 3) e digita il testo.

Suggerimento: In alternativa, digita il testo, selezionalo e scegli lo stile appropriato dalla sezione Testo Inline nella scheda Personalizza dell'editor del sito web. In questa sezione sono disponibili anche opzioni di formattazione aggiuntive, come font e colori.

Pulsanti {#buttons}

I pulsanti sono elementi interattivi che permettono di collegare a un'altra pagina o a un'ancora della pagina. Per inserire un pulsante:

  1. Digita /button.
  2. Inserisci l'etichetta del pulsante nel campo Etichetta Link.
  3. Aggiungi l'URL o Email. Digita / per cercare una pagina e # per collegarti a un'ancora.
  4. Imposta lo Stile, la Dimensione e il Layout per definire l'aspetto del pulsante.
  5. Se necessario, attiva l'interruttore per aprire la pagina o l'ancora collegata in una nuova scheda.
  6. Clicca Applica per salvare le modifiche.
Suggerimento: Per modificare un pulsante esistente, clicca il pulsante e modifica le opzioni nella sezione Testo inline dell'editor del sito web.

Immagini {#images}

Per inserire un'immagine:

  1. Digita /image.
  2. Cerca nel database Unsplash o clicca Carica un'immagine per scegliere un file dalle tue immagini locali.
  3. Clicca Aggiungi.
  4. Per personalizzare l'immagine, clicca sull'immagine e modifica le opzioni nella sezione Immagine dell'editor del sito web. Ad esempio:
    • Sostituisci l'immagine.
    • Definisci un tag alt nel campo Descrizione.
    • Inserisci un tag title nel campo Tooltip. Questo testo apparirà quando i visitatori passano il mouse sopra l'immagine.
    • Aggiungi una Forma; alcune forme permettono anche la personalizzazione del colore.
    • Regola la Larghezza dell'immagine, ad esempio, per migliorare le prestazioni. Può essere suggerita una dimensione più piccola se è sufficiente per la visualizzazione.
    • Ridimensiona l'immagine utilizzando lo strumento Trasforma.
    • Regola il Padding per aggiungere spazio (in pixel) attorno all'immagine.
    • Ecc.

Video {#videos}

Per aggiungere un video, digita /video, inserisci l'URL e attiva le opzioni desiderate:

  • Autoplay: per riprodurre automaticamente il video quando si accede alla pagina. Il video viene automaticamente disattivato per impostazione predefinita.
  • Loop: per riprodurre il video in loop.
  • Nascondi controlli player
  • Nascondi pulsante schermo intero

Icone {#icons}

Per inserire un'icona, digita /image, vai alla scheda Icone, seleziona un'icona e clicca Aggiungi. Per modificare un'icona, cliccaci sopra e usa la sezione Icona dell'editor del sito web per personalizzare le opzioni, come Colore, Dimensione, Animazioni, Forma, ecc.

I link vengono utilizzati per collegare pagine e risorse diverse, guidando i visitatori e migliorando la navigazione. Per aggiungere un link, digita /link, quindi, nel popup che si apre, inserisci l'Etichetta del link e aggiungi l'URL o Email. Digita / per cercare una pagina e # per collegarti a un'ancora.

Suggerimento: Per impostazione predefinita, il campo Stile è impostato su Link. Seleziona uno stile diverso per trasformare il link in un pulsante.

Elenchi {#lists}

Gli elenchi aiutano a organizzare i contenuti in modo chiaro, rendendo le informazioni più facili da leggere e migliorando la struttura delle pagine web. Digita /list e scegli tra tre tipi diversi di elenchi: Elenchi puntati, Elenchi numerati o Checklist.

Evidenziazioni di Testo {#text_highlights}

Le evidenziazioni possono essere aggiunte a titoli e testo utilizzando la sezione Testo Inline dell'editor del sito web. Per aggiungere un'evidenziazione:

  1. Seleziona il testo o il titolo che vuoi evidenziare.
  2. Nell'editor del sito web, clicca Evidenzia.
  3. Seleziona lo stile di evidenziazione.
  4. Modifica il suo Colore.
  5. Scegli il suo Spessore.

Animazioni {#animations}

Le animazioni vengono utilizzate per aggiungere movimento ai blocchi di costruzione e agli elementi del sito web come immagini e testo. Sono disponibili tre tipi di animazione: Allo Scroll, All'Apparizione e Al Passaggio del Mouse (solo per le immagini).

Per aggiungere un'animazione a un elemento del sito web:

  1. Clicca sull'elemento.
  2. Nell'editor del sito web, vai alla sezione pertinente per l'elemento (es. Pulsante, Colonna, Testo Inline, ecc.).
  3. Nel campo Animazione, seleziona il tipo di animazione desiderato.
  4. Personalizza le impostazioni dell'animazione secondo necessità. Le opzioni disponibili variano in base al tipo di animazione selezionato.

Animazioni allo Scroll

Per le animazioni allo scroll, è possibile:

  • Scegliere In per aggiungere l'animazione quando l'elemento entra nello schermo e Out per aggiungerla quando esce dallo schermo.
  • Selezionare un Effetto.
  • Scegliere la Direzione dell'effetto.
  • Adattare l'Intensità dell'effetto.
  • Definire la Zona di Scroll, dove il primo valore rappresenta la percentuale dello schermo mostrato quando l'effetto inizia, e il secondo valore rappresenta la sua percentuale alla fine.

Animazioni all'Apparizione

Per le animazioni all'apparizione, è possibile:

  • Scegliere tra diversi effetti.
  • Scegliere la Direzione dell'effetto.
  • Selezionare un'opzione Trigger per definire quando si verifica l'animazione: Solo la Prima Volta o Ogni Volta.
  • Adattare l'Intensità dell'effetto.
  • Se vuoi che l'animazione venga attivata dopo un certo numero di secondi, definisci questo numero nel campo Inizia Dopo.
  • Scegliere una Durata per l'animazione.

Animazioni al Passaggio del Mouse (solo per immagini)

Le animazioni Al passaggio del mouse possono essere aggiunte alle immagini. Puoi scegliere l'Effetto dell'animazione, così come il Colore e lo Spessore del Tratto.