Si tratta di una sezione dedicata in cui è possibile visualizzare una serie di loghi e testi pertinenti aggiungendo elementi all'elenco.
L'ideale sarebbe utilizzare questa sezione nel pre-footer del tuo sito web per mostrare i tuoi affiliati, marchi, premi e riconoscimenti, ecc.
In questo articolo:
- Aggiungi sezione logo
- Modifica sezione logo
- Aggiungi e modifica elementi dell'elenco
- Elementi dell'elenco di sequenziamento
- Gestisci elementi
- Gestisci disposizione
- Sezione Logo Stile
Aggiungi sezione logo
- Per aggiungere una sezione, è necessario aggiungi una pagina prima al tuo sito web.
- Sulla tua pagina, Fare clic sul blu + icona per aggiungere una nuova sezione.
- Ora vedrai il categorie di sezione sul lato sinistro.
- Scorrere fino a Logo (1) sezione e fare clic su di essa. Apparirà una schermata che ti consentirà di scegliere tra diversi layout (2) della Sezione Logo.
- Scegli qualsiasi layout di sezione e fai clic su di esso per aggiungerlo alla tua pagina.
Modifica sezione logo
Dopo aver aggiunto la sezione:
- Clicca sul Modifica logo (1) pulsante per aprire le impostazioni della sezione.
Aggiungi e modifica elementi dell'elenco
Aggiungi un elemento all'elenco
- Clicca sul Aggiungi articolo (1) pulsante per aggiungere un nuovo elemento all'elenco.
- duplicare or Elimina (2) le voci dell'elenco.
- Modificare il Titolo della sezione (3) della sezione.
Modifica voce elenco
Fai clic sulla voce dell'elenco che desideri modificare. Si apriranno le opzioni di modifica di quella specifica voce dell'elenco. Da qui puoi:
- Carica/Rimuovi Immagine Primaria e Secondaria (1)
Puoi caricare un file Immagine secondaria insieme a Immagine primaria per ogni elemento dell'elenco. Quando un utente passa il mouse sull'elemento, verrà visualizzata l'immagine secondaria, che sostituirà l'immagine primaria. Inoltre, puoi impostare Colore dell'accento dell'immagine, che verrà visualizzato passando il mouse sull'immagine. - Aggiungere un Titolo (2), Sottotitolo (3)e Descrizione (4) della voce di elenco.
- Potresti non trovare l'opzione del sottotitolo e della descrizione in particolari elementi dell'elenco a seconda del layout scelto.
Prima di aggiungere la descrizione, controlla questo articolo.
5. Azione al clic – Titolo e immagine
È possibile personalizzare il comportamento del clic sui singoli elementi in Logo sezione. Di seguito sono riportate le opzioni disponibili:
- Vai a un collegamento
Selezionando questa opzione si apre la Generatore di link, consentendoti di aggiungere un collegamento ipertestuale a questo elemento. Il collegamento può indirizzare gli utenti a un'altra pagina all'interno del tuo sito Web o a un URL esterno. Vedi qui per saperne di più informazioni Generatore di link. - Apri in Lightbox
Questa opzione visualizza l'elemento in una versione ingrandita Lightbox visualizza quando cliccato. In questa modalità, il Sottotitolo and Descrizione associati all'elemento non appariranno nella vista griglia ma saranno visibili in modalità Lightbox. - Nessuna azione
Scegli questa opzione per rendere l'elemento non cliccabile. Quando è selezionata, cliccare sull'elemento non attiverà alcuna azione.
6. Apri collegamento in una nuova finestra: Impostare il collegamento in modo che si apra in a nuova scheda o nella stessa scheda. Questo sarà visibile solo quando Vai a un collegamento l'opzione è selezionata sotto Azione al clic menu.
7. Pulsanti e collegamenti: Aggiungi qualsiasi tipo di vetro all'elemento della lista. Puoi aggiungere un Pulsante/Link Immagine/Icona Social/Link di Testo. Scopri di più.
8. Sostituzione dello stile della carta
È possibile sovrascrivere le impostazioni globali dello stile della scheda dalla sezione Impostazioni di stile e personalizza individualmente la scheda di ogni articolo nella sezione Prezzi. Questo ti consente di applicare stili unici a diversi articoli dell'elenco per una migliore personalizzazione.
Scopri di più Informazioni sull'opzione Carte nella sezione dinamica.
9. Sostituzione dello stile della forma
Utilizza l'opzione Sostituisci per assegnare una forma diversa a ciascuna immagine singolarmente nella sezione Logo, ottenendo così un maggiore controllo sullo stile visivo di ogni elemento. Scopri di più Informazioni su Shape Mask.
10. Salva: Dopo aver effettuato le personalizzazioni, salvare le modifiche.
Elementi dell'elenco di sequenziamento
È possibile modificare facilmente la sequenza degli elementi dell'elenco tramite Trascinamento e rilascio Loro. Guarda come sequenziare l'elenco degli elementi del logo in azione:
Gestisci gli elementi della sezione Logo
La sezione Logo include un Scheda Elementi che ti consente di gestire la visibilità di vari elementi all'interno della sezione con facilità. Utilizzando semplici interruttori a levetta, puoi abilitare o disabilitare elementi specifici senza dover eliminare o modificare gli elementi stessi.
- Clicca sul Modifica logo Pulsante (1).
- Scegliere il Elementi (2) scheda.
- Dopo aver apportato le modifiche, premi il pulsante Salva Pulsante (3).
- Mostra titolo: Abilita o disabilita la visibilità del titolo per la sezione Logo.
- Mostra i pulsanti: Controlla se i pulsanti vengono visualizzati a livello di sezione.
Opzioni degli elementi
- Mostra immagine: Attiva/disattiva la visibilità delle immagini.
- Mostra Titolo: Controlla se il titolo viene visualizzato.
- Mostra Sottotitolo: Abilita o disabilita i sottotitoli.
- Mostra descrizione: Gestisci la visibilità delle descrizioni degli articoli.
- Mostra i pulsanti: Decidere se visualizzare i pulsanti per i singoli elementi.
Gestisci disposizione
- Clicca sul Modifica logo pulsante per aprire il pannello di modifica della sezione.
- Scegliere il disposizione scheda.
- Da qui puoi facilmente modificare il layout della sezione anche dopo averla aggiunta alla pagina.
Mentre modifichi il layout, vedrai i layout relativi alle sezioni in alto.
Oltre a questi, hai anche la possibilità di scegliere un layout da altre sezioni sotto il Più layout intestazione.
Sezione Logo Stile
È possibile personalizzare diversi aspetti della sezione Logo utilizzando diverse opzioni di stile. Per accedere alle opzioni di stile, fare clic su Modifica logo Pulsante (1).
- Scegliere il Stile (2) scheda.
- Cambia lo stile per gli elementi della sezione e Salva (3) le tue modifiche.
Avrai più opzioni di stile per la sezione:
- Opzioni di visualizzazione
- Display mobile
- allineamento
- Dimensione del testo
- Spaziatura
- Titolo della sezione
- Opzioni immagini
- Maschera di forma
- Opzioni al passaggio del mouse sull'immagine
- Bordo dell'immagine
- Opzioni della carta
- Opzioni ombra
- Pulsanti e collegamenti
Opzioni di visualizzazione
- Scegli Mostra articoli in righe e colonne / carosello / vetrina
- Se hai scelto il file righe e colonne opzione, gli elementi dell'elenco verranno disposti in righe e colonne. In questo caso, è necessario specificare il numero di righe e colonne.
- Se hai scelto il file carosello opzione, gli elementi dell'elenco verranno presentati come una presentazione. Vedi qui per saperne di più .
-
Galleria Offre un layout elegante e interattivo in stile carosello per visualizzare le immagini una alla volta con transizioni ed effetti fluidi. Questo layout aggiunge un'esperienza moderna e immersiva al tuo sito. Scopri di più.
- Impostare il Numero di colonne per l'elenco delle immagini. Puoi scegliere da 1 a 10 colonne.
- specificare la Spazio tra le colonne degli elementi della lista.
- specificare la Spazio tra le righe degli elementi della lista.
Se l'opzione Carosello è selezionata nel passaggio 1, verranno visualizzate le seguenti opzioni aggiuntive:
- Abilita scorrimento fluido: Consente lo scorrimento continuo degli elementi all'interno del carosello per un'esperienza fluida e visivamente accattivante.
- Scorrimento automatico: Ruota automaticamente le diapositive senza interazione da parte dell'utente.
- Mostra avanzamento riproduzione automatica: Visualizza un indicatore di avanzamento mentre la riproduzione automatica è attiva per una migliore visibilità.
- Ritardo di riproduzione automatica: Imposta l'intervallo di tempo tra ogni transizione di diapositiva quando è abilitata la riproduzione automatica.
- Carosello in loop: Abilita il ciclo continuo delle diapositive, in modo che il carosello si riavvii senza interruzioni dopo l'ultima diapositiva.
- Controlli del carosello: Scegli il Controlli di navigazionePuoi scegliere tra Nessun controllo, Frecce - In basso al centro/In alto a destra/In basso a destra, Chevron, Punti e Scorrimento orizzontale.
- Sfumatura bordi: Applica un effetto di dissolvenza sottile ai bordi del carosello. Migliora l'esperienza utente miscelando delicatamente le immagini mentre entrano o escono dalla vista.
Se nel passaggio 1 è stata selezionata l'opzione Showcase, verranno visualizzate le seguenti opzioni aggiuntive:
- Effetti: Scegli tra cinque effetti di animazione: Dissolvenza, Capovolgimento, Carte, Coverflow (inclinato) o Coverflow (piatto) per controllare la transizione delle immagini.
- Abilita scorrimento fluido: Consente lo scorrimento continuo degli elementi all'interno della Vetrina, per un'esperienza fluida e visivamente accattivante.
- Scorrimento automatico: Passa automaticamente da un'immagine all'altra senza l'intervento dell'utente.
- Mostra avanzamento riproduzione automatica: Visualizza un indicatore di avanzamento mentre la riproduzione automatica è attiva per una migliore visibilità.
- Ritardo di riproduzione automatica: Imposta l'intervallo di tempo tra le diapositive quando la riproduzione automatica è attiva. Puoi scegliere un valore compreso tra 1 e 10 secondi.
- Carosello in loop: Abilitando questa opzione, il carosello verrà riprodotto in loop all'infinito, consentendone la riproduzione continua.
- Controlli carosello: L'impostazione Controlli carosello consente di scegliere come gli utenti navigano tra le diapositive, con opzioni come frecce (in basso al centro, in alto a destra, in basso a destra), punti o nessun controllo.
Display mobile
- Imposta il numero di Colonne della griglia per dispositivi mobili. Puoi impostarlo su un massimo di 3 colonne.
- Definire il Spaziatura tra le griglie (in pixel).
allineamento
- Allineare l'immagine orizzontalmente nella sezione. Puoi impostarli per l'allineamento a sinistra, a destra o al centro.
- Allineare il testo orizzontalmente nella sezione. Puoi impostarli per l'allineamento a sinistra, a destra o al centro.
- Allineare il contenuto in verticale nella sezione. Puoi impostarli in modo che siano allineati in alto, al centro e in basso.
- Scegliere il Ordine dei contenuti cioè le immagini degli elementi dell'elenco da visualizzare per primi o il testo associato.
Dimensione del testo
- Clicca sul Cambia stile di testo pulsante per visitare il Design sezione e gestire le dimensioni e gli stili dei caratteri.
- Impostare il Titolo stile del carattere per gli elementi dell'elenco della sezione.
- Impostare il Sottotitolo stile del carattere per gli elementi dell'elenco della sezione.
- Imposta l'impostazione predefinita Descrizione stile del carattere per gli elementi dell'elenco della sezione.
- Abilita questa opzione per animare qualsiasi numero presente nel Titolo and Sottotitolo campi. Quando attivata, i valori numerici appariranno con un'animazione di conteggio dinamica, rendendoli più accattivanti dal punto di vista visivo.
Spaziatura
- specificare la Larghezza immagine per le voci dell'elenco.
- specificare la Larghezza contenuto per le voci dell'elenco.
- specificare la Spazio sotto il titolo della sezione nel px.
- specificare la Spazio sotto le immagini delle voci dell'elenco (in %).
- specificare la Spazio sotto i titoli delle voci dell'elenco (in %).
- specificare la Spazio sotto i sottotitoli delle voci dell'elenco (in %).
Titolo della sezione
- Allinea orizzontalmente il testo del titolo della sezione. Puoi impostarlo su Sinistra, Centro e Destra.
- Abilita/Disabilita il Divider tra il titolo della sezione e il contenuto della sezione.
- Impostare il spessore del divisore (in px).
- specificare la Colore del divisore dal selettore colori.
- Scegli un Stile divisorio dal menu a discesa.
- Impostare il Larghezza del titolo per definire la larghezza del titolo della sezione, partendo da un minimo del 50%.
Immagini
- Scegliere il Imago Ritaglia per le voci dell'elenco. È possibile impostare le immagini come Quadrato, Cerchio, Orizzontale, Ritratto e Originale.
- Scegliere di avere un raggio d'angolo comune o un raggio d'angolo diverso per ciascun lato degli elementi dell'elenco e impostare un numero (in px) per il Craggio orner delle immagini delle voci dell'elenco. Vedi qui per saperne di più .
Usando il raggio dell'angolo campo, è possibile creare diverse forme delle immagini degli elementi dell'elenco. Nel caso in cui specifichi 500 px qui, le immagini verranno visualizzate a forma di cerchio.
- Nel caso in cui tu abbia scelto gli angoli divisi, puoi impostare un raggio dell'angolo diverso per ogni angolo.
Maschera di forma
- Maschera di forma: Abilita questa opzione per applicare una maschera di forma alle immagini nella sezione Logo. Una volta abilitata, la forma selezionata ritaglierà visivamente l'immagine in quella forma.
- Seleziona forma: Scegli tra varie forme predefinite da applicare alle tue immagini. Ciò ti consente di dare uno stile creativo al tuo contenuto visualizzando le immagini in forme uniche come arrotondate, a diamante, a goccia, ecc.
- Allungare: Abilita questa opzione per allungare la forma selezionata per adattarla meglio al contenitore dell'immagine. Ciò assicura che la forma riempia proporzionalmente lo spazio disponibile, migliorando l'allineamento visivo su diverse dimensioni dello schermo.
- L'opzione Stretch dipende dal layout – Potrebbe non apparire in alcuni layout. Nei layout in cui il testo come titolo o sottotitolo viene visualizzato sopra l'immagine, il l'intera opzione Maschera forma potrebbe non essere disponibile.
- L'impostazione Stretch dipende da più fattori - Compresi dimensione dell'immagine, allineamentoe impostazioni di ritaglio definito nella scheda Stile.
- Se Ritaglia immagine è impostato su Originalele dimensioni effettive dell'immagine determineranno se verrà allungata verticalmente o orizzontalmente.
Hover immagine
- Scegliere il Colore al passaggio del mouse dell'immagine essere la colore di accento o essere specificato. Se hai scelto il colore di accento, quindi specifica il file opacitàPuoi specificare il colore di accento per ogni elemento da Modifica elemento pannello.
- Se hai scelto il file specificare il colore opzione quindi impostare l' Sovrapposizione di colore e opacità.
- Impostare il Colore del testo sovrapposto che appare quando si passa il mouse sopra.
- Scegli Animare le immagini degli elementi dell'elenco al passaggio del mouse facendo clic su Sì. Controlla questa funzione su una pagina live.
- Scegli un Stile di animazione per le immagini quando il cursore passa sopra di esse.
- Scegli se vuoi consentire il transizione delle immagini con o senza passaggio del mouse.
- Selezionare un Stile di transizione per la transizione hover. Le opzioni disponibili sono Fade e Flip.
Bordo dell'immagine
- Abilita/Disabilita bordo intorno alle immagini spostando l'interruttore.
- Scegli di avere a confine comune su tutti i lati delle immagini oppure è possibile specificare il confini separatamente per ogni lato.
- specificare la larghezza del confine. Se è impostato su 0, il bordo non verrà visualizzato. Hai anche la possibilità di impostare la larghezza del bordo individualmente per ciascun lato dell'immagine.
- Seleziona il Colore bordo dal selettore colori.
- Seleziona un preferito Border Style dal menu a discesa.
- Determina il larghezza del bordo per dispositivi mobili dispositivi, allineandolo alla larghezza scelta per il desktop.
Carte
- Scopri come per gestire le carte.
Shadow
- Display – Scegli di mostrare l'ombra dietro gli elementi dell'elenco sempre o solo al passaggio del mouse.
- Style - Scegli tra i preset esistenti o crea un'ombra personalizzata.
Se hai scelto l'opzione Personalizzato, visita questo Generatore di ombre a scatola per creare un'ombra personalizzata. Infine, copia e incolla il file scatola ombra CSS. - Nel caso in cui tu abbia scelto l'opzione dei preset, allora Scegli Stili ombra dal menu a discesa.
Pulsanti e collegamenti
- Scopri come per gestire lo stile di Pulsanti e collegamenti.
- Salva tutto lo stile cambia.
