Intestazione del sito web – Design

Migliori testata contiene il primo set di elementi visibili al caricamento del tuo sito web. Puoi disporre gli elementi come il logo, il menu di navigazione e le icone social nel modo in cui preferisci che appaiano nell'intestazione.

In questo articolo:


Puoi gestire lo stile dell'intestazione (sia per desktop che per dispositivi mobili) da Design (1) sezione.

Una volta entrato nella sezione Design, fai clic su testata (2) scheda.

In alternativa puoi anche utilizzare l'opzione di ricerca dello studio.

  • entra testata (1) nella barra di ricerca.
  • Dai risultati correlati, fare clic su Design: intestazione del sito Web opzione 2).


Intestazione per desktop

  1. Layout dell'intestazione – Controllare il layout dell'intestazione attualmente applicato per il file tavolo versione. Clicca sul Cambia layout pulsante per scegliere tra le opzioni di layout dell'intestazione disponibili e applicare al tuo sito web.
    Forniamo due tipi di layout di intestazione: layout di intestazione superiorie layout di intestazione a due colonne. I layout di intestazione a due colonne esistono in temi come Burst e Isle. 
  2. Larghezza – Specificare la larghezza dell'intestazione come Larghezza completo or Larghezza del sito.
    'Intera larghezza' visualizzerà l'intestazione coprendo l'intera larghezza senza lasciare alcun margine.
    'Larghezza del sito' può essere specificato nel file Design sezione. È possibile specificare una larghezza fissa qui.
    Visualizzerà l'intestazione aderendo alla larghezza fissa specificata. Saperne di più.
  3. Imbottitura verticale – Aggiungi spazio (in alto e in basso) all'intestazione del tuo sito web (specificato in vh). Vedi qui per saperne di più .
  4. Comportamento – È possibile impostare la posizione dell'intestazione del desktop Ffisso (qui l'intestazione sarà fissata in alto, cioè, anche se la pagina scorre, l'intestazione sarà visibile) o Scorri con il sito (qui l'intestazione scorrerà insieme alla pagina). 
  5. Navigazione appiccicosa – Abilitare o disabilitare la navigazione appiccicosa in caso di Sscorrere con il sito posizione della testata. 
  6. Sticky Menu – Imposta la posizione del menu fisso quando la pagina viene spostata verso sinistra o al centro dello schermo.

Note:

Per la navigazione fissa, l'intestazione verrà visualizzata dopo aver fatto scorrere la sezione iniziale per metà sullo schermo

Dai un'occhiata al riempimento dell'intestazione in azione:

Date un'occhiata a un Intestazione su un sito live.


Visualizza diversi layout di intestazione del desktop 

Visualizza diversi layout di intestazione del desktop a 2 colonne

Layout di intestazione basati sulla ricerca incentrati sulla ricerca nel sito web


Intestazione – Bordo

  1. Confine: Abilita o disabilita il bordo per l'intestazione.
  2. Spessore: Specificare la larghezza delle linee del bordo per l'intestazione.
  3. Posizione: Imposta la posizione del bordo dell'intestazione. Sono disponibili quattro opzioni: Tutti i lati, Superiore e inferiore, Solo superiore e Solo inferiore.


Intestazione – Pillola

Migliori Intestazione a forma di pillola in Pixpa aggiunge un aspetto elegante e moderno all'intestazione del tuo sito web con angoli arrotondati e flessibilità di spaziatura. Questo design è ideale per creativi e professionisti che desiderano un'intestazione visivamente distintiva ed elegante.

Puoi applicare questo stile a qualsiasi layout di intestazione, offrendoti la massima libertà di progettazione per diversi tipi di intestazione.

  1. Intestazione – Pillola: Attiva l'opzione Intestazione – Pillola per attivare lo stile pillola per l'intestazione.
  2. Raggio dell'angolo: Regola la rotondità degli angoli dell'intestazione utilizzando il cursore o il campo Raggio angolo. Valori più alti renderanno gli angoli più arrotondati.
  3. Imbottitura superiore: Specificare lo spazio sopra il contenuto nell'intestazione della pillola per controllare la spaziatura verticale.
  4. Imbottitura inferiore: Definisci lo spazio sotto il contenuto per garantire un aspetto equilibrato.
  5. Larghezza compatta: Questo ti consente di scegliere la larghezza dell'intestazione della tua pillola:
    • Intera larghezza: Allunga l'intestazione su tutta la larghezza dello schermo.
    • Larghezza del sito: Allinea l'intestazione alla larghezza complessiva del contenuto del sito.
    • Compact: Riduce l'intestazione a un blocco più stretto e centrato, ideale per design minimalisti.


Intestazione per dispositivi mobili

Queste impostazioni ti consentono di controllare l'aspetto dell'intestazione del tuo sito sui dispositivi mobili. Ciò garantisce un layout pulito e ottimizzato per gli schermi più piccoli.

  1. disposizione – Controllare il layout dell'intestazione attualmente applicato per il file mobile versione. Clicca sul Cambia layout pulsante per scegliere tra le opzioni di layout dell'intestazione disponibili e applicare al tuo sito web.
  2. Imbottitura verticale – Aggiungi Spazio verticale (in alto e in basso) nell'intestazione del tuo sito web sui dispositivi mobili (specificato in vh).
  3. Intestazione mobile – Specifica se desideri che l'intestazione mobile venga visualizzata solo sui dispositivi mobili (fino a 768 px) o che venga estesa anche ai dispositivi tablet (fino a 1199 px).

Assicurati di fare clic su Pubblica dopo aver apportato le modifiche per assicurarti che siano attive sul tuo sito web.

Visualizza diversi layout di intestazione per dispositivi mobili 

Note:

  • Il simbolo del punto nell'intestazione mobile si riferisce ai conti cliente.
  • Apparirà solo che l'opzione Account cliente è abilitata nel negozio. Scopri di più.


Tipi di intestazione

Puoi scegliere tra quattro diversi tipi di intestazioni:

    1. Intestazione normale
    2. Intestazione a due colonne
    3. Intestazione basata sulla ricerca

 

Intestazione normale

Il layout dell'intestazione normale presenta un design pulito e diretto con logo, collegamenti di navigazione, icone social e pulsante del menu visualizzati orizzontalmente. È ideale per fornire un'esperienza di navigazione classica e user-friendly.


Intestazione a due colonne

Il layout dell'intestazione a due colonne divide l'intestazione in due sezioni distinte, consentendo un logo e icone social a sinistra o al centro e il menu di navigazione e altri elementi dell'intestazione a destra come barra laterale cliccabile.

Questo layout è perfetto per i siti Web che devono enfatizzare contemporaneamente sia il proprio marchio che le azioni importanti.


Il layout dell'intestazione basato sulla ricerca include in primo piano una barra di ricerca, che consente agli utenti di trovare rapidamente contenuti specifici. Questo design è particolarmente utile per i siti Web ricchi di contenuti in cui la funzionalità di ricerca è l'obiettivo principale.


Elementi di intestazione

  1. Logo/Titolo del sito – Il primo elemento dell'intestazione del sito è il logo/titolo del sito. Imposta il titolo del sito/carica il logo del sito per il tuo sito.
    Nota: Se non hai caricato il logo del sito, il titolo del sito apparirà nell'intestazione del tuo sito. Inoltre, se hai fornito entrambi, il logo del sito sarà visibile sull'intestazione del tuo sito.
  2. Menu – Un altro elemento dell'intestazione del sito è il menu (link di menu). Puoi sequenziare i link di navigazione del sito, or eliminare/nascondere qualsiasi voce di menu dal tuo sito
  3. Icone sociali – Puoi aggiungere il Icone sociali che sono collegati ai tuoi profili di social media all'intestazione del tuo sito. Puoi caricare un file immagine di condivisione sociale che verrà utilizzato come miniatura quando il sito Web o qualsiasi pagina del sito Web viene condivisa sui social media. Inoltre, scegli dove il icone social media apparirebbe sul tuo sito web. Le posizioni disponibili sono intestazione, piè di pagina, entrambe o nessuna.
  4. Casella di ricerca - Aggiungere un casella di ricerca che consente ai visitatori del tuo sito di cercare qualsiasi contenuto in Prodotti (se hai abilitato uno Store sul tuo sito Web), Immagini, Post di blog e Pagine (Gallerie, Cartelle e altre pagine) nell'intestazione del tuo sito.
  5. Icona carrello – Aggiungi un galleggiante icona del carrello che è facile da raggiungere e sempre visibile senza interferire con il tuo sito web all'intestazione del tuo sito.
  6. Pulsante Menu - Aggiungere un pulsante del menu all'intestazione del tuo sito, ad esempio un pulsante di invito all'azione che reindirizza a un URL specificato. Puoi specificare il etichetta e URL per il pulsante Menu. Inoltre, scegli il Dimensione del bottone essere Piccolo, medio o grande.

Non trovi quello che cerchi?

Mettiti in contatto con un esperto Pixpa.