Skip to main content

Branzino - User Manual

Interface Overview

The builder interface is organized into three main areas: the sidebar toolbar, the central canvas, and the properties panel. The toolbar contains the **Components** and **Sections** tabs, from which users can select the elements to be added to the email. The central canvas represents the workspace where the newsletter content is created. Here, users can view the email structure in real time and modify its content. On the right side, the **Properties Panel** displays the email settings and the options related to the currently selected element. The interface is completed by the **Action Bar**, which provides access to template management, undo and redo functions, preview options, email export, and email sending features.

Creating a New Email

To start designing a new email, users can choose between two operating modes. The first option is to use one of the predefined templates available in the library, accessible through the **Templates** button. Templates are available for newsletters, promotions, events, and other common use cases. Alternatively, users can select the **Start from Scratch** option, which opens an empty canvas where the email content can be built freely from the ground up.

image.png

Content and Layout Management

Email composition is performed by adding blocks and sections available in the toolbar. The available content blocks include:

  • Text
  • Heading
  • Button
  • Image
  • HTML
  • Divider
  • Spacer
  • Social

Several preconfigured sections are available to structure the email layout:

Elements can be added either by using drag-and-drop or by simply clicking the corresponding buttons. Each block also includes quick controls that allow users to:

  • Move the block up or down
  • Duplicate the block
  • Delete the block
  • Drag and reposition it within the layout

For multi-column layouts, column widths can be adjusted using the dedicated resize handle, allowing greater flexibility in the design of the email structure.

image.png

ModificaText delEditing testoand eVisual personalizzazione graficaCustomization

IText blocchiblocks testualisupport supportanodirect lacontent modificaediting direttawithin del contenuto all'interno delthe canvas. PerFor ciascuneach elementotext dielement, testousers ècan possibilecustomize intervenirekey sulletypography principalisettings, impostazioni tipografiche, tra cui colore, dimensione del carattere, interlinea e allineamento. Nel caso dei titoli, è inoltre disponibile la selezione del tag heading appropriato. Le modifiche vengono applicate attraverso il pannello delle proprietà, che aggiorna automaticamente le opzioni disponibili in base all'elemento selezionato.

Gestione delle immagini e contenuti dinamici

Le immagini possono essere aggiunte ai contenuti utilizzando il pulsante dedicato presente nel blocco immagine. Oltre al caricamento diretto, il sistema consente di effettuare ricerche all'interno dei provider di immagini stock configurati. Per ogni immagine è possibile definire:including:

  • TestoText alternativo (alt text)color

  • AllineamentoFont size

  • RaggioLine dei bordiheight

  • MarginiText alignment

IlFor heading elements, users can also select the appropriate heading tag (for example, H1, H2, H3, and so on). All modifications are managed through the Properties Panel, which automatically updates the available options according to the currently selected element.

Image Management and Dynamic Content

Images can be added to the email content using the dedicated button available within the Image block. In addition to direct uploads, the system allows users to search and select images from configured stock image providers. For each image, the following settings can be configured:

    Alternative text (Alt Text)

    Alignment

    Border radius

    Margins

    The builder supportaalso inoltresupports l'utilizzothe diuse campiof dinamicidynamic fields (merge fields) perfor lamanaging gestionepersonalized dicontent contenutiand elinks. collegamenti.Links Iassociated linkwith associatiimages alleand immaginibuttons ecan aibe pulsanticonfigured possonoby essereselecting configuratia mediantespecific lamodule selezioneand difield, moduloenabling ethe campo,use permettendoof l'utilizzodynamic divariables variabiliwithin dinamicheemail all'internocontent. delleThis email.functionality allows email elements to automatically display personalized information based on the recipient's data.

    image.png

    image.png

    image.png

    image.png

    Salvataggio e riutilizzo dei template

    Una volta completato il lavoro, il template può essere salvato per un utilizzo futuro. Durante il salvataggio è possibile assegnare un nome e una descrizione al modello. I template salvati vengono archiviati in un elenco dedicato che include anche un'anteprima HTML. Dall'archivio è possibile:

    • Caricare un template esistente nel canvas

    • Riutilizzare modelli precedentemente creati

    • Eliminare template non più necessari

    image.png

    image.png

    Esportazione, anteprima e invio

    Il builder mette a disposizione diverse funzionalità per la verifica e la distribuzione del contenuto creato. Quando previsto dall'integrazione utilizzata, è possibile esportare il risultato nei formati HTML e JSON. L'applicazione consente inoltre di visualizzare un'anteprima sia in modalità desktop sia in modalità mobile direttamente dalla barra delle azioni. Se configurato un endpoint dedicato all'invio delle email, il builder permette anche l'invio diretto dei messaggi.

    image.png

    Cronologia delle modifiche e salvataggio automatico

    Durante la composizione dell'email, il sistema mantiene una cronologia delle operazioni eseguite. Le funzioni Undo e Redo consentono rispettivamente di annullare o ripristinare le modifiche effettuate. È inoltre disponibile un sistema di salvataggio automatico della bozza locale. In caso di riavvio dell'applicazione, il builder può proporre il ripristino del lavoro precedentemente salvato.

    Scorciatoie da tastiera

    Per velocizzare il lavoro sono disponibili alcune scorciatoie operative:

    • Ctrl/Cmd + Z per eseguire Undo.

    • Ctrl/Cmd + Shift + Z oppure Ctrl/Cmd + Y per eseguire Redo.

    • Delete o Backspace per eliminare il blocco selezionato quando il cursore non si trova all'interno di un campo editabile.

    • Escape per chiudere eventuali finestre modali aperte.

    Procedura operativa consigliata

    Per realizzare una nuova email si consiglia di seguire il seguente flusso operativo:

    1. Scegliere se partire da un template predefinito oppure da un canvas vuoto.

    2. Aggiungere blocchi e sezioni dalla toolbar laterale.

    3. Selezionare gli elementi inseriti e personalizzarli tramite il pannello delle proprietà.

    4. Utilizzare Undo e Redo durante la composizione quando necessario.

    5. Salvare il template qualora si desideri riutilizzarlo in futuro.

    6. Verificare il risultato tramite le anteprime desktop e mobile.

    7. Esportare il contenuto in HTML o JSON oppure inviare una mail di test, se consentito dall'integrazione utilizzata.

    Note operative

    La funzione di ricerca delle immagini stock è disponibile solo quando è stato configurato almeno un provider dedicato. Le funzioni Salva, Carica, Export HTML, Export JSON e Invia mail possono essere abilitate o disabilitate dall'integrazione host. Il builder salva automaticamente una bozza locale e può proporne il ripristino al successivo avvio dell'applicazione.