Personalizza le pagine portfolio e le pagine secondarie del tuo sito.
Le pagine portfolio sono pagine di destinazione stilizzate che collegano i visitatori alle pagine secondarie. Puoi personalizzare le pagine portfolio per adattarle al tuo brand e al tuo stile. Utilizza questa guida per trovare le opzioni di stile per le pagine portfolio e le singole pagine secondarie. Per creare una pagina portfolio e aggiungere contenuti, visita Pagine portfolio.
Differenza tra pagine portfolio e pagine secondarie del portfolio
Le pagine portfolio sono organizzate in due parti: la pagina portfolio principale, che crea una griglia di immagini in evidenza o un elenco di link su cui i visitatori cliccano per esplorare il tuo portfolio, e le singole pagine secondarie a cui questi link conducono, dove aggiungi contenuti per diversi progetti, gallerie o altro.
Apri le opzioni di stile
Definirai lo stile della pagina portfolio e delle pagine secondarie in due punti:
- Pagina portfolio - Clicca su Modifica nella pagina portfolio, quindi clicca sull'icona della matita nella sezione portfolio.
- Pagine secondarie - Clicca sulla pagina secondaria nella pagina portfolio per aprirla, clicca su Modifica, quindi clicca sull'icona della matita nella sezione che desideri modificare. Ogni pagina secondaria è composta da sezioni e ogni sezione ha le proprie opzioni di stile.
Pagina Portfolio
La pagina portfolio mostra tutte le pagine secondarie come immagini in evidenza o link di testo, su cui i visitatori cliccano per aprire le singole pagine secondarie.
Negli stili della sezione portfolio, puoi personalizzare i seguenti dettagli:
- Formato - Imposta il layout della pagina portfolio. Ogni layout a griglia e layout al passaggio del mouse ha opzioni di formattazione uniche.
- Sfondo - Aggiungi un'immagine di sfondo, un video di sfondo o uno sfondo Scenographik dietro i link alle pagine secondarie.
- Colori - Imposta i colori del sito o cambia il tema sezione del portfolio.
Ricorda:
- Queste modifiche si applicano a tutte le Pagine portfolio che utilizzano lo stesso layout.
- Le modifiche apportate a un layout specifico vengono salvate anche se passi a un nuovo layout, quindi se ritorni a un layout precedente, le impostazioni verranno ripristinate.
- A seconda del numero di pagine secondarie della Pagina portfolio, alcuni tweak di stile potrebbero non influire sul layout. Ad esempio, se hai un layout Passaggio del mouse: sfondo con un numero elevato di pagine secondarie, il tweak Altezza potrebbe non avere un effetto visibile perché la sezione deve avere una certa altezza per mostrare tutti i link alle pagine secondarie. In alternativa, utilizza il tweak Spaziatura link verticale.
Formatta i layout a griglia
I layout a griglia mostrano le pagine secondarie in una griglia di immagini in evidenza. I visitatori cliccano sull'immagine o sul testo del titolo per aprire la pagina secondaria. Le opzioni disponibili nella scheda Formato degli stili di sezione variano a seconda del layout a griglia scelto.
Il layout Griglia: semplice mostra le immagini in evidenza in una griglia con il testo del titolo della pagina secondaria sovrapposto alle immagini. Dopo aver selezionato questo layout, puoi modificare questi tweak di stile:
- Larghezza - Seleziona Massima per far sì che il contenuto copra la larghezza della sezione o Inset per aumentare il padding a sinistra e a destra del contenuto.
- Altezza - Imposta l'altezza della sezione da Piccola, Media, Grande o Personalizzata. Tieni presente che l'altezza della sezione è influenzata anche dalla quantità di contenuto presente.
- Colonne - Imposta la griglia in modo che abbia 2, 3 o 4 colonne.
- Spaziatura orizzontale
- Spaziatura verticale
- Rapporto dimensionale - Imposta il rapporto dimensionale delle immagini.
- Allineamento testo - Allinea il testo A sinistra o Al centro sotto le immagini.
- Effetto al passaggio del mouse - Aggiungi un effetto Dissolvenza o Zoom quando il cursore passa sopra un'immagine.
- Opacità al passaggio del mouse - Se utilizzi l'effetto Dissolvenza al passaggio del mouse, imposta un'opacità al passaggio del mouse più bassa per creare una sovrapposizione più opaca o più alta per creare una sovrapposizione più trasparente.
- Spaziatura testo
Il layout Griglia: sovrapposizione mostra le immagini in evidenza in una griglia con il testo del titolo della pagina secondaria sovrapposto alle immagini. Dopo aver selezionato questo layout, puoi modificare questi tweak di stile:
- Larghezza - Seleziona Massima per far sì che il contenuto copra la larghezza della sezione o Inset per aumentare il padding a sinistra e a destra del contenuto.
- Altezza - Imposta l'altezza della sezione da Piccola, Media, Grande o Personalizzata. Tieni presente che l'altezza della sezione è influenzata anche dalla quantità di contenuto presente.
- Colonne - Imposta la griglia in modo che abbia 2, 3 o 4 colonne.
- Spaziatura orizzontale
- Spaziatura verticale
- Rapporto dimensionale - Imposta il rapporto dimensionale delle immagini.
- Posizionamento testo - Imposta la posizione in cui il testo viene visualizzato sull'immagine.
- Mostra testo - Scegli di mostrare il testo Prima del passaggio del mouse o Dopo il passaggio del mouse. Rivedi i nostri suggerimenti per dispositivi mobili per scoprire come ciò influisce sulla visualizzazione dei titoli sui dispositivi mobili.
- Opacità sovrapposizione - Imposta un'opacità della sovrapposizione più bassa per creare una sovrapposizione più opaca o più alta per creare una sovrapposizione più trasparente.
Formatta i layout al passaggio del mouse
I layout al passaggio del mouse mostrano le pagine secondarie come un elenco di link, con le relative immagini in evidenza che appaiono al passaggio del mouse. I visitatori cliccano sul link per aprire la pagina secondaria. Le opzioni disponibili nella scheda Formato degli stili di sezione variano a seconda del layout al passaggio del mouse scelto. I layout al passaggio del mouse hanno una sovrapposizione semitrasparente sulle immagini in evidenza delle pagine secondarie. Non è possibile aumentare o rimuovere questo effetto:
Il layout Al passaggio del mouse: fisso mostra i titoli delle pagine secondarie come link. Quando i visitatori passano il mouse su un link, l'immagine in evidenza della pagina secondaria appare in una posizione fissa sulla pagina. Dopo aver selezionato questo layout, puoi modificare questi tweak di stile:
- Formato link - Scegli tra In linea, dove i link appaiono uno accanto all'altro, o A colonna, dove ogni link appare sulla propria riga.
- Selezione davanti - Se l'opzione è abilitata, il testo del link su cui il cliente passa il mouse appare davanti all'immagine in evidenza.
- Spaziatura link verticale
- Delimitatore - Seleziona come dividere i link nel formato In linea . Per maggiori informazioni, consulta Delimitatori.
- Tipo di animazione - Imposta un'animazione per l'immagine in evidenza.
- Durata animazione - Imposta la velocità dell'animazione dell'immagine in evidenza.
- Dimensioni immagine
Il layout Al passaggio del mouse: segui cursore mostra i titoli delle pagine secondarie come link. Quando i visitatori passano il mouse su un link, l'immagine in evidenza della pagina secondaria appare e segue il cursore finché il mouse non viene passato su un altro link. Dopo aver selezionato questo layout, puoi modificare questi tweak di stile:
- Formato link - Scegli tra In linea, dove i link appaiono uno accanto all'altro, o A colonna, dove ogni link appare sulla propria riga.
- Selezione davanti - Se l'opzione è abilitata, il testo del link su cui il cliente passa il mouse appare davanti all'immagine in evidenza.
- Spaziatura link verticale
- Delimitatore - Seleziona come dividere i link nel formato In linea . Per maggiori informazioni, consulta Delimitatori.
- Tipo di animazione - Imposta un'animazione per l'immagine in evidenza.
- Durata animazione - Imposta la velocità dell'animazione dell'immagine in evidenza.
- Dimensioni immagine
- Segui velocità - Imposta la velocità con cui l'immagine segue il cursore. Impostando a 0%, l'immagine non seguirà il cursore.
Il layout Al passaggio del mouse: sfondo mostra i titoli delle pagine secondarie come link. Quando i visitatori passano il mouse su un link, l'immagine in evidenza della pagina secondaria appare come immagine di sfondo della sezione e rimane finché il mouse non viene passato su un altro link. Dopo aver selezionato questo layout, puoi modificare questi tweak di stile:
- Larghezza - Imposta l'immagine di sfondo su Smarginatura completa o Massima.
- Altezza - Imposta l'altezza della sezione da Piccola, Media, Grande o Personalizzata. Tieni presente che l'altezza della sezione è influenzata anche dalla quantità di contenuto presente.
- Allineamento verticale - Imposta l'allineamento verticale dei link.
- Allineamento orizzontale - Imposta l'allineamento orizzontale dei link.
- Formato link - Scegli tra In linea, dove i link appaiono uno accanto all'altro, o A colonna, dove ogni link appare sulla propria riga.
- Spaziatura link verticale
- Delimitatore - Seleziona come dividere i link nel formato In linea . Per maggiori informazioni, consulta Delimitatori.
- Tipo di animazione - Imposta un'animazione per l'immagine in evidenza.
- Durata animazione - Imposta la velocità dell'animazione dell'immagine in evidenza.
- Mantieni ultima selezione - Abilita questa opzione per visualizzare l'immagine in evidenza dell'ultimo link su cui il visitatore ha passato il mouse finché non lo passa su un altro link. Quando l'opzione è disabilitata, lo sfondo della sezione viene visualizzato solo quando il visitatore passa il mouse su un link.
- Delimitatore - Seleziona un tipo di delimitatore per dividere i link nel formato In linea. Per maggiori informazioni, consulta Delimitatori.
Testo del titolo della pagina secondaria
Il titolo di ogni pagina secondaria appare nella pagina portfolio principale, sotto l'immagine in evidenza, sovrapposto all'immagine in evidenza o in un elenco di link, a seconda del layout. Puoi modificare il testo del titolo nelle impostazioni della pagina secondaria. Il testo del titolo segue gli stili del tipo di carattere e del colore dell'intero sito.
Tipo di carattere titolo
Per applicare uno stile al tipo di carattere del titolo della pagina secondaria:
- Durante la modifica di una pagina, apri Stili sito, quindi clicca su Tipi di carattere.
- Clicca su Intestazioni.
- Scegli una famiglia di tipi di carattere e modifica altre impostazioni di stile.
- In Dimensioni, utilizza il cursore dell'intestazione corrispondente per regolare la dimensione del titolo.
Il cursore utilizzato dipende dal layout della pagina del portfolio:
- Griglia: semplice - Intestazione 4
- Griglia: sovrapposizione - Intestazione 3
- Layout al passaggio del mouse - Intestazione 1
Tieni presente che la modifica del formato intestazione incide su tutto il testo del sito con tale formattazione. Per modificare individualmente il tipo di carattere e la dimensione del testo del titolo, clicca su Assegna stili, trova il tweak Titolo per il tuo layout e cambia lo stile e la dimensione in Personalizzato.
Dopo aver apportato le modifiche, clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.
Colore titolo
Per dare uno stile al colore del titolo della pagina secondaria:
- Durante la modifica di una pagina, apri Stili sito, quindi clicca su Colori.
- Clicca sull'icona della matita sul tema cromatico della sezione portfolio.
- Scorri verso il basso e trova la sezione Portfolio che corrisponde al tuo layout.
- Modifica il colore tramite il tweak Titolo progetto. Ciascun layout di portfolio ha un tweak Titolo progetto.
- Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.
Delimitatori
Per i layout Al passaggio del mouse che si servono di link ipertestuali in linea, è possibile aggiungere "delimitatori" o punteggiatura per separare visivamente i link delle pagine secondarie.
Per selezionare o nascondere i delimitatori:
- Clicca su Modifica nella Pagina portfolio.
- Passa il mouse sopra la sezione Portfolio e clicca sull'icona della matita.
- Nella scheda Formato, imposta Formato link su In linea.
- Scorri verso il basso, clicca su Delimitatore e seleziona una delle opzioni oppure scegli Nessuno per nasconderlo.
- Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.
Pagine secondarie
Le pagine secondarie vengono create a partire da sezioni di pagina, quindi le opzioni di stile dipendono dalle sezioni aggiunte. Puoi aggiungere sezioni blocco, sezioni galleria o layout intelligenti.
Definisci lo stile di qualsiasi sezione cliccando sull'icona della matita visualizzata al passaggio del mouse. Per maggiori informazioni, visita Apportare modifiche di stile.
Impaginazione delle pagine secondarie
I link alle pagine secondarie successive e precedenti di un portfolio appaiono in fondo a ciascuna pagina secondaria. Tutte le pagine portfolio condividono gli stessi stili di impaginazione, anche se utilizzano layout diversi.
Tipo di carattere dell'impaginazione
Per definire il tipo di carattere dell'impaginazione:
- Durante la modifica di una pagina, apri Stili sito, quindi clicca su Tipi di carattere.
- Clicca su Intestazioni.
- Scegli una famiglia di tipi di carattere e modifica altre impostazioni di stile.
- In Dimensioni, utilizza il cursore Intestazione 3 per regolare la dimensione del titolo.
Tieni presente che la modifica del formato intestazione incide su tutto il testo del sito con tale formattazione. Per modificare individualmente il tipo di carattere e la dimensione del testo del titolo, clicca su Assegna stili, trova il tweak Impaginazione sotto Portfolio: elemento e cambia lo stile e la dimensione in Personalizzato.
Dopo aver apportato le modifiche, clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.
Colore dell'impaginazione
Il colore dell'impaginazione segue il tema cromatico della sezione inferiore di ogni pagina secondaria. Se le pagine secondarie utilizzano temi cromatici diversi nelle loro sezioni inferiori, il colore dell'impaginazione può variare da una pagina secondaria all'altra.
Per definire il colore dell'impaginazione:
- Durante la modifica di una pagina, apri Stili sito, quindi clicca su Colori.
- Clicca sull'icona della matita sul tema cromatico della sezione portfolio.
- Scorri verso il basso e trova i tweak Portfolio: elemento.
- Modifica il testo del titolo con il tweak Titolo impaginazione progetto e modifica l'icona dell'impaginazione con il tweak Icona impaginazione progetto.
- Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.
Le modifiche riguardano tutte le sezioni che utilizzano lo stesso tema cromatico.
Tipi di carattere e colori
I colori e i tipi di carattere della pagina portfolio e delle relative pagine secondarie seguono i tweak tipo di carattere e colore a livello di sito. Puoi inoltre modificare il tema cromatico della sezione pagina portfolio e delle sezioni delle pagine secondarie nei relativi editor di stile delle sezioni.
Nel tema cromatico del tuo portfolio, utilizza i tweak di colore Portfolio che si adattano al tuo layout. Nel tema cromatico dell'ultima sezione di ogni pagina secondaria, utilizza i tweak Portfolio: elemento per definire lo stile dell'impaginazione in fondo a ogni pagina secondaria. Questo può variare da una pagina secondaria all'altra, in base al tema cromatico utilizzato dalla sezione inferiore.
Mobile
Sui dispositivi mobili o sui tablet, i layout del portfolio si impilano verticalmente in un'unica colonna, indipendentemente dal numero di colonne o dal formato dei link sui browser più grandi.
Gli effetti al passaggio del mouse non sono supportati nella maggior parte dei browser mobili, quindi se stai utilizzando il layout Griglia: sovrapposizione con i titoli impostati per apparire Dopo il passaggio del mouse, i titoli potrebbero non essere visualizzati dai visitatori che utilizzano dispositivi mobili.
Per assicurarsi che i titoli vengano visualizzati su tutti i dispositivi per il layout Griglia: sovrapposizione:
- Clicca su Modifica nella pagina del portfolio, quindi passa il mouse sulla sezione del portfolio e clicca sull'icona a forma di matita.
- Nella scheda Formato, seleziona Prima del passaggio del mouse dal menu a discesa Mostra testo.
- Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.