Shapes and Elements

In questo articolo, esploreremo tutte le opzioni per creare e aggiungere Forme ed Elementi in Designer.

• Aggiungere Forme ed Elementi
• Opzioni per Forme ed Elementi
  • Colori
  • Sfondo
  • Link
  • Impostazioni
  • Effetti
  • Animazioni
  • Posizione
  • Blocca e Copia Stile

Aggiungere forme ed elementi a un design è molto semplice, ma con Designer ci sono tantissime opzioni per far risaltare davvero le vostre parole. Da

Per maggiori informazioni sugli elementi base di Designer, consultate la nostra guida Iniziare con Designer.

Aggiungere Forme ed Elementi

L'opzione Forme consente di aggiungere forme o elementi predefiniti al design.

Selezionando Forme dal Menu Principale si aprirà la scheda Elementi nel Menu Laterale:

Qui potete scegliere tra Forme ed Elementi da aggiungere al design. Ce ne sono moltissimi, quindi scegliete quelli che soddisfano le vostre esigenze.

Cliccando su una Forma o un Elemento verrà aggiunto al design:

Le Forme sono reattive e possono essere ridimensionate o ruotate a piacere:

Opzioni per Forme ed Elementi

La Forma o l'Elemento stesso ha un set completo di opzioni:

• Duplica - Crea una copia esatta della forma o dell'elemento selezionato
• Elimina - Rimuove la forma o l'elemento selezionato dal design
• Altro
  • Copia - Copia la forma o l'elemento selezionato per essere incollato successivamente
  • Copia Stile - Copia lo stile della forma o dell'elemento selezionato per trasferirlo a un'altra forma o elemento
  • Incolla - Incolla l'elemento dagli appunti sopra la forma o l'elemento selezionato
  • Duplica - Crea una copia esatta della forma o dell'elemento selezionato
  • Aggiungi Componente -
  • Elimina - Rimuove la forma o l'elemento selezionato dal design
  • Livello - Opzioni per cambiare il livello della forma o dell'elemento selezionato
    • Porta Avanti - Porta la forma o l'elemento selezionato su di un livello
    • Porta in Primo Piano - Porta la forma o l'elemento selezionato al livello superiore
    • Porta Indietro - Porta la forma o l'elemento selezionato giù di un livello
    • Porta in Fondo - Porta la forma o l'elemento selezionato al livello inferiore
  • Allinea Elementi - Opzioni per cambiare l'allineamento della forma o dell'elemento selezionato
    • Sinistra
    • Centro
    • Destra
    • Alto
    • Mezzo
    • Basso
  • Link - Aggiungi un URL alla forma o all'elemento selezionato.
  • Anima - Aggiungi un'animazione alla forma o all'elemento selezionato.

Cliccando sulla Forma o sull'Elemento cambierà il Menu Principale e si applicherà direttamente alla selezione:

Colori

Selezionando l'opzione Colori si aprirà la sezione Colori nel Menu Laterale. Selezionando uno qualsiasi di questi colori lo applicherà alla forma o all'elemento selezionato:

Qui, scegliete tra colori predefiniti, colori già utilizzati in questo design, o attraverso l'opzione Selettore Colore.

Selettore Colore

1. Selettore Colore
2. Colore Attualmente Selezionato
3. Cursore Colore
4. Cursore Opacità/Trasparenza
5. Input Codice Colore
6. Cambio Codice - Passa tra codici colore esadecimali, RGB e HSLA
7. Colori Precedentemente Utilizzati

Lo Strumento Contagocce ti permette di scegliere facilmente qualsiasi colore.

Sfondo

Selezionando l'opzione Sfondo si aprirà la sezione Sfondo nel Menu Laterale. Selezionando uno qualsiasi di questi colori lo applicherà allo sfondo della vostra forma o elemento:

Qui, scegliete tra colori predefiniti, colori già utilizzati in questo design, o attraverso l'opzione Selettore Colore.

Link

Selezionando l'opzione Link vi permetterà di trasformare la vostra forma o elemento in un collegamento ipertestuale. Aprirà la sezione Opzioni Link nel Menu Laterale:

Cliccando Aggiungi Link vi verrà richiesto di inserire un URL o selezionare una risorsa:

Una volta scelto un link o una risorsa, appariranno più opzioni nella sezione Opzioni Link:

Espandendo la sezione Scala fornirà questa opzione per la vostra risorsa:

Qui, scegliete come verrà ridimensionata l'immagine. Ci sono tre opzioni:

• Adatta (predefinito) - Adatta l'immagine allo schermo.
• Allunga - Allunga l'immagine per riempire l'intero schermo.
• Zoom - Ingrandisce l'immagine per riempire l'intero schermo. Non consigliato per immagini piccole su display grandi, poiché ciò creerà sfocatura.

Espandendo la sezione Impostazioni fornirà queste opzioni per il vostro URL o Risorsa:

• Durata (secondi) - Quando il link viene cliccato o toccato, per quanto tempo il link o la risorsa verrà visualizzata prima di tornare al design principale.
• Precarica - Quando selezionato, il sito web o l'immagine si caricherà quando si carica il design. Questo riduce il tempo necessario per la visualizzazione del sito web quando viene cliccato il link. Tuttavia, avere numerosi link che devono essere caricati potrebbe causare rallentamenti.

Espandendo la sezione Stile Chiudi e Barra di Navigazione fornirà queste opzioni per il vostro URL o Risorsa:

Questa sezione si riferisce al pulsante che apparirà sui vostri schermi quando viene inviato ad essi. Cliccando o toccando questo pulsante tornerete al design originale.

• Posizione Icona - Mostra dove apparirà questa icona. Predefinito in Centro Inferiore, ma può essere posizionata ovunque lungo la parte superiore o inferiore, o disattivata completamente.
• Stile Icona - Permette di impostare lo stile dell'icona. Scegli tra Etichetta, Solido, Rotondo o Predefinito (vedi sopra)
• Dimensione Icona - Permette di cambiare la dimensione dell'icona. Scegli tra Piccolo, Medio, Grande o Predefinito (vedi sopra)
• Colore Icona - Cambia il colore HTML esadecimale dell'icona per adattarla meglio al vostro design.
• Colore Sfondo - Cambia il colore HTML esadecimale dello sfondo dell'icona per adattarlo meglio al vostro design.
• Opacità - Il cursore permette di cambiare quanto opaco o trasparente è lo sfondo dell'icona.
• Mostra Barra di Navigazione - Quando selezionato, aggiunge piccole frecce di navigazione all'icona. Permette di navigare rapidamente attraverso più link. Appare così:

Impostazioni

Selezionando il pulsante Impostazioni si aprirà la sezione Mappatura Dati nel Menu Laterale:

Premendo Crea Mappatura Dati vi permette di rendere dinamica la forma o l'elemento selezionato, mappato a uno dei vostri DataSource esistenti. Consultate il nostro articolo su DataSource Dinamiche con OptiSync per maggiori informazioni.

Effetti

Selezionando l'opzione Effetti vi permette di cambiare diversi aspetti della vostra forma o elemento. Aprirà la sezione Effetti nel Menu Laterale:

Qui avete numerose opzioni. Le esamineremo una per una.

Espandendo la sezione Colore permette di aggiungere colore alla forma o all'elemento.

Questo è funzionalmente lo stesso dell'opzione Colori nel Menu Principale Forme ed Elementi. Qui, scegliete tra colori predefiniti, colori già utilizzati in questo design, o attraverso l'opzione Selettore Colore.

Espandendo la sezione Sfondo permette di impostare un colore di sfondo specifico su cui far sedere la Forma o l'Elemento.

Anche questo è funzionalmente lo stesso dell'opzione Sfondo nel Menu Principale Forme ed Elementi. Qui, scegliete tra colori predefiniti, colori già utilizzati in questo design, o attraverso l'opzione Selettore Colore:

Espandendo la sezione Opacità permette di variare l'opacità dell'area selezionata - sfondo e forma/elemento.

Questo può essere regolato con un cursore. Sotto è mostrata l'opacità a metà:

Espandendo la sezione Contorno permette di aggiungere un contorno alla forma o all'elemento, ma non allo sfondo.

Potete selezionare un colore da un menu a discesa o usare HTML esadecimale, e usare il cursore per cambiarne lo spessore:

Espandendo la sezione Ombra permette di creare un'ombra sulla vostra forma o elemento. Per impostazione predefinita, tutti i cursori saranno bianchi.

Applicando un colore si creerà un'ombra:

Cambiando i cursori potete modificare la sfocatura e spostare l'ombra lungo l'asse X o Y.

Con uno sfondo trasparente, l'ombra si applica solo alla forma o all'elemento stesso:

Espandendo la sezione Gradiente presenterà diverse opzioni di gradiente per la vostra forma o elemento. Cliccando su una qualsiasi di queste opzioni di Gradiente la applicherà alla vostra forma o elemento.

Espandendo la sezione Texture presenterà diverse opzioni di texture per la vostra forma o elemento. Cliccando su una qualsiasi di queste opzioni di texture le applicherà alla vostra forma o elemento.

Animazioni

Cliccando il pulsante Anima si aprirà la sezione Animazioni del Menu Laterale:

Per maggiori informazioni sulle capacità di Animazione di Designer, consultate il nostro articolo sull'Animazione.

Posizione

Selezionando il pulsante Posizione si aprirà la sezione Posizione del Menu Laterale.

• Porta in Primo Piano - Porta la forma o l'elemento selezionato al livello superiore
• Porta Avanti - Porta la forma o l'elemento selezionato su di un livello
• Porta in Fondo - Porta la forma o l'elemento selezionato al livello inferiore
• Porta Indietro - Porta la forma o l'elemento selezionato giù di un livello
• Allinea alla Pagina - Opzioni per cambiare l'allineamento della forma o dell'elemento selezionato
  • Sinistra
  • Centro
  • Destra
  • Alto
  • Mezzo
  • Basso
• Spazia Uniformemente - Allinea la forma o l'elemento all'interno del riquadro più grande
  • Verticalmente
  • Orizzontalmente
• Capovolgi - Capovolge la forma o l'elemento selezionato
  • Orizzontale
  • Verticale
• Posizione - Permette il posizionamento specifico della forma o dell'elemento nel design
• Ridimensiona - Permette il ridimensionamento preciso della forma o dell'elemento selezionato

Blocca e Copia Stile

Premendo il pulsante Blocca bloccherà la forma o l'elemento selezionato in posizione, impedendo che vengano apportate modifiche.

Questo è utile quando si gestiscono molti elementi dopo aver posizionato la forma o l'elemento esattamente dove lo si desidera.

Il pulsante Copia Stile permette di applicare rapidamente lo stile della forma o dell'elemento selezionato a un altro.

Questo è utile per formattare rapidamente numerosi elementi.

Questo è tutto!

OptiSigns è leader nel software di digital signage. Se avete domande aggiuntive, dubbi o feedback su OptiSigns, non esitate a contattare il nostro team di supporto all'indirizzo support@optisigns.com.