Risultati ricerca
Indice
Frase completa
Cerca nella pagina
Chiudi
Indice

STYLE EDITOR (EDITING GRAFICO)

Lo Style Editor (Editing Grafico) è lo strumento attraverso cui poter intervenire in maniera semplice ed immediata sulle proprietà CSS dei vari elementi presenti all’interno delle proprie pagine web, siano essi Contenitori, Componenti o Contenuti, in modo tale da poterli stilizzare e personalizzare graficamente secondo le proprie specifiche esigenze.

Come detto nei capitoli iniziali di questo manuale per poter accedere alle proprietà grafiche di un Contenitore o di un Componente della pagina, sarà necessario per prima cosa, attivare la modalità di gestione di quello specifico elemento, selezionare quindi l’elemento desiderato (direttamente all’interno della pagina oppure dall’albero dei componenti) e cliccare, infine, sull’icona raffigurante un piccolo pennello presente nel R.O.C. di quello stesso elemento

Operando in questo modo verrà così attivato, all’interno della pagina, lo Style Editor del Contenitore / Componente selezionato, strumento questo mediante il quale l’utente avrà poi la possibilità di intervenire sulle sue caratteristiche grafiche.

Ogni Componente / Contenitore è composto a sua volta da N elementi distinti selezionabili mediante il menu a tendina posto nella parte alta dello Style Editor.

Una volta selezionato l’elemento desiderato, il form sottostante consentirà di gestire tutte le caratteristiche grafiche di quello specifico elemento

Tali caratteristiche sono raggruppate in diverse categorie logiche attivabili cliccando sulla corrispondente etichetta presente sulla sinistra della maschera.

  • Font e Stile del Testo ( )
  • Dimensioni e Posizionamento ( )
  • Allineamento e Visibilità ( )
  • Margini e Padding ( )
  • Bordi ( )
  • Sfondi ( )
  • Ombra Testo ( )
  • Ombra Oggetto ( )
  • Transizioni ( )

I pulsanti presenti nella barra degli strumenti dello Style Editor consentono rispettivamente di:

  • Minimizza ( ): consente di minimizzare lo Style Editor in maniera tale da aumentare lo spazio di lavoro senza comunque dover uscire completamente dalla modalità di “Editing Grafico”.

  • Opacità ( ): consente di abbassare l’opacità dello Style Editor lasciando quindi intravedere gli elementi della pagina web posti al di sotto di essa.

Cliccando nuovamente su questo pulsante sarà poi possibile riportare lo Style Editor alla sua opacità originale.

  • Sposta ( ): consente di spostare lo Style Editor e di posizionarlo in una qualsiasi altra posizione della pagina con una semplice operazione di Drag and Drop in maniera tale da non interferire con i contenuti che si stanno editando.

Per effettuare lo spostamento è sufficiente posizionarsi con il mouse sul pulsante in esame, tenere premuto il tasto sinistro e trascinare l’icona stessa nella posizione desiderata. Rilasciando il pulsante lo Style Editor verrà collocato nella nuova posizione.

ATTENZIONE! Passweb memorizza l’ultima posizione utile in cui è stato spostata lo Style Editor e la utilizza come posizione di visualizzazione iniziale per le successive attivazioni.

  • Allineamento Componenti Interni ( ): presente solo nel caso in cui si stia editando un componente Contenitore, una Griglia o una Colonna con all’interno altri Componenti Passweb.

Consente di gestire le impostazioni di allineamento automatico (verticale e/o orizzontale) per gli elementi di primo livello interni al componente in esame.

  • Allineamento Componente ( ): presente solo nel caso in cui si stia editando la Colonna di una Griglia, i Componenti Comuni interni ad una Colonna o ad un Contenitore o, ancora, alcuni (ma non tutti) Componenti Ecommerce inseriti anch’essi all’interno di un Componente Contenitore piuttosto che di una colonna.

Consente di gestire le opzioni di allineamento automatico del componente rispetto al suo elemento padre.

ATTENZIONE! Per maggiori informazioni relativamente alle opzioni di allineamento automatico dei componenti si veda anche la relativa sezione di questo manuale (“Live Editing per varianti responsive – Componenti – Azioni Componente – Allineamento Componenti Interni / Allineamento Componente”)

  • Chiudi ( ): consente di chiudere lo style editor e, conseguentemente, di uscire dalla modalità di “Editing Grafico” dello specifico componente

Una volta impostati i valori desiderati per una o più proprietà CSS presenti all’interno dello Style Editor, sarà necessario per prima cosa confermarli cliccando per questo sul corrispondente check posto immediatamente a fianco di queste stesse proprietà e, successivamente, salvarli in maniera definitiva cliccando sull’icona raffigurante un piccolo dischetto posta nella parte alta dello Style Editor.

Prima di salvare in maniera definitiva le modifiche apportate ad un certo elemento, Passweb chiederà all’utente un’ulteriore conferma relativamente al fatto di dover salvare tutte queste modifiche oppure solo ed esclusivamente quelle appositamente confermate:

  • Salva solo le modifiche confermate: consente di salvare solo ed esclusivamente le variazioni appositamente confermate attraverso l’apposita spunta.
  • Salva e conferma tutte le modifiche: consente di salvare tutte le modifiche apportate durante l’attuale sessione di lavoro, indipendentemente dal fatto che queste siano state confermate o meno attraverso l’apposita spunta.

NOTA BENE: è comunque possibile annullare in un qualsiasi momento (prima ovviamente della conferma definitiva) le modifiche apportate, utilizzando anche il tasto ESC

Una volta modificata una qualsiasi proprietà grafica per l’elemento selezionato, la corrispondente riga all’interno dello Style Editor verrà visualizzata con uno sfondo azzurrino in maniera tale da evidenziare che per quella specifica proprietà sono stati modificati i valori di default.

A fianco delle proprietà modificate rispetto al valore di default comparirà, inoltre, anche un’icona raffigurante una piccola X attraverso cui poter resettare le impostazioni della corrispondente proprietà CSS tornando così al suo valore di default.

In particolare resettando le impostazioni grafiche di una proprietà CSS per un contenitore strutturale, potrà comparire, nella parte alta dello Style Editor, un’ulteriore finestrella all’interno della quale verranno visualizzati, nei tre diversi livelli di profondità gestibili su di una singola pagina, i valori che assume attualmente la specifica proprietà CSS

NOTA BENE: secondo la logica propria dei fogli di stile la priorità più alta viene assegnata all’elemento più interno della struttura. In questo senso occorre quindi considerare che l’elemento “Pagina Corrente” ha una priorità più elevata rispetto all’elemento “Layout Corrente” che a sua volta ha una priorità più elevata dell’elemento “Tutte le pagine”.

Il valore correntemente applicato per la specifica proprietà CSS sarà quello non barrato (sempre l’ultimo dell’elenco).

Cliccando sulla piccola X a fianco dei tre diversi livelli verrà quindi eliminato il relativo valore e contemporaneamente verrà applicato quello immediatamente precedente fino ad arrivare all’eliminazione dei valori impostati su tutti e tre i livelli gestibili e al ripristino, per la proprietà CSS, del valore di default.

Il pulsante Reset Modifiche ( ) presente nella parte alta dello style editor consente, infine, di eliminare in blocco tutte le modifiche eventualmente apportate all’elemento del Contenitore / Componente su cui si sta lavorando

ATTENZIONE! il pulsante Reset Modifiche consente di eliminare unicamente le modifiche grafiche dell’elemento selezionato mediante il relativo menu a tendina

Nel momento in cui l’esigenza dovesse essere dunque quella di resettare interamente tutto il Componente / Contenitore, cancellando di fatto le modifiche grafiche apportate ad ogni suo elemento sarà necessario utilizzare il pulsante “Reset Modifiche” per ciascuno di essi.

ATTENZIONE! Nel caso in cui la proprietà CSS su cui si desidera intervenire non dovesse essere presente all’interno dello Style Editor è comunque possibile applicarla allo specifico elemento agendo direttamente a livello di codice e utilizzando per questo la sezione CSS del Layout associato alla pagina.