I 20 migliori esempi above the fold da cui ispirarsi

Pubblicato: 2022-07-05

Dato che hai da 30 a 60 secondi in un ascensore, hai 3 secondi per mantenere i tuoi visitatori sulla tua pagina di destinazione. O se ne andranno...

Ecco perché dovresti prestare la massima attenzione al tuo above the fold .

Fornisci tutti i dettagli del tuo marchio in modo completo su uno schermo contemporaneamente in modo da poter dare l'impatto che desideri ai tuoi clienti.

immagine di copertina in alto sopra la piega su sfondo rosa con una figura che indica un esempio sopra la piega e il titolo accanto

Per sapere cos'è above the fold e quanto sia importante, raccogliamo i primi 20 esempi above the fold che possono ispirarti per la tua attività o aiutarti a migliorare quella attuale.

Cos'è Above the Fold?

Above the fold si riferisce alla prima parte del sito Web o alla schermata prima di scorrere.

Questa è probabilmente la parte più eccitante della pagina di destinazione perché, poiché ne menzioniamo costantemente l'importanza, above the fold rappresenta la parte essenziale perché i visitatori interagiscono in primo luogo con essa .

above the fold vengono mostrati esempi su diversi dispositivi tecnologici con tastiera, mouse, un impianto e articoli

Nel corso dei secoli, abbiamo assistito al miglioramento di above the fold in realtà; tuttavia, il passaggio alle aree digitali dà nuova vita al concetto above the fold e vediamo i siti web above the fold.

Pertanto, ci accordiamo in base all'utilità e all'efficacia del sito Web calcolando il tempo che dedichiamo alla navigazione.

Infine, dovresti essere consapevole degli effetti above the fold.

I 20 migliori esempi above the fold

Ci sono 20 affascinanti esempi above the fold per aprire una nuova finestra sulla tua mente e creatività.

1. Ahrefs

Ahrefs è uno strumento SEO all-in-one e offre un servizio molto elevato, sia i suoi strumenti gratuiti che i suoi piani con varie funzionalità.

Pagina web di Ahrefs come esempio above the fold su sfondo blu, motto e una stella splendente

Quanto a quanto sopra la piega di Ahrefs è un esempio di un tipo semplice ma efficace. La pagina si inserisce nei bordi di un azzurro sorprendente, gli aspetti essenziali sull'intestazione e il pulsante CTA , che invita i visitatori a registrarsi in basso.

Inoltre, poiché Ahrefs è consapevole del significato delle parole, dirige l'attenzione dei visitatori dicendo: "Tutto ciò di cui hai bisogno per posizionarti più in alto e ottenere più traffico". Riassume le esigenze e i desideri dei visitatori.

Un altro dettaglio è che Ahrefs condivide la prova sociale che appartiene agli ultimi sette giorni, e l'icona della chat box situata in basso a destra porta all'Help Center per conquistare il cuore dei visitatori.

2. Allbirds

Allbirds è un marchio di scarpe e abbigliamento che trae la sua forza dalla sostenibilità e dall'uso di materiali naturali.

La pagina web di Allbirds come esempio above the fold viene fornita con contenuti visivi come gambe che camminano con l'accento sulle scarpe realizzate in modo naturale

Il above the fold di Allbirds è avvincente e quando dai una rapida occhiata all'intestazione, vedrai i pulsanti necessari che simboleggiano le categorie di Allbirds.

Inoltre, se guardi nel dettaglio sul lato destro dell'intestazione, ci sono simboli di profili, aiuto e shopping bag che i visitatori possono personalizzare da soli . Sul lato sinistro, dà l'indizio di un'altra collezione per la stagione.

L'immagine che utilizza dà la qualità e l'idea di sostenibilità con il motto che utilizza. Sotto lo slogan, ci sono due opzioni di genere che Allbirds ha e ci si aspetta che i visitatori scelgano tra loro per spostarsi tra i prodotti naturali.

3. Mela

Sebbene tutti abbiano molta familiarità con Apple, è una famosa azienda tecnologica che produce vari prodotti elettronici, servizi online e software.

La pagina Web di Apple come esempio above the fold viene fornita con un'immagine di Macbook Pro 13 su sfondo nero

Quando gli utenti cliccano per la prima volta sulla pagina di Apple, l'immagine al centro attira la loro attenzione. Viene fatto apposta dal marchio per introdurre e promuovere il nuovo prodotto.

Inoltre, incoraggia la promozione con i pulsanti "Ulteriori informazioni" se ci si chiede informazioni sul nuovo dispositivo e "Acquista" se si è disposti ad acquistare.

Nell'intestazione della pagina ci sono molte opzioni relative alle funzionalità di Apple, il che è abbastanza utile per i visitatori per agire.

Sotto l'intestazione, vediamo la collaborazione fatta con l'UNICEF per le vittime della guerra. L'azienda vuole enfatizzarlo inserendo la dichiarazione nella parte above the fold per dimostrare che è un marchio socialmente orientato.

4. Bobo

Bobo's è un marchio alimentare che produce barrette di avena vegane e sane, organiche, senza glutine, certificate non OGM.

L'esempio above the fold di Bobo include un motto cta, una parte della tastiera, un taccuino, una tazza di caffè, un Bobo e una mano che lo indica

Il sopra la piega di Bobo's dona vivacità per via del colore arancione. I designer scelgono sapientemente gli articoli per sottolineare la salubrità delle barre.

Accanto agli articoli, gli utenti vengono informati e messi al centro dell'azione con il pulsante "Acquista ora".

Nella parte superiore, esaminiamo quattro categorie: 'Shop', per l'acquisto dei prodotti; "Chi siamo", che fornisce i dettagli sul marchio e la sua avventura, "Cosa c'è dentro", che mostra gli ingredienti di Bobo's e Blog che fornisce gli scritti informativi utili per i consumatori.

Sopra l'intestazione, possiamo vedere una campagna che suggerisce la spedizione gratuita se i visitatori decidono di acquistare alcuni prodotti.

Inoltre, il dettaglio leggero ma efficace è il pulsante Bobo's Rewards situato in basso a destra. Porta a premi quando effettui un acquisto e hai vari vantaggi. Può essere commentata come una mossa strategica, ma è assolutamente potente.

5. Calvin Klein

Calvin Klein è famoso per la sua biancheria intima, borse, abbigliamento e arredi per la casa considerati contemporanei.

due figure che indossano al centro prodotti Calvin Klein e scritte a scoprire la vendita su sfondo arancione

Calvin Klein preferisce anche una pagina differenziale ma diretta above the fold. La separazione della pagina è la prima cosa che attrae, e in cima alla pagina, Calvin Klein annuncia l'opportunità di vendita.

Sulla stessa riga con il logo di Calvin Klein, ci sono le categorie, una barra di ricerca e le opzioni da personalizzare per ogni utente.

In tutto il centro, due figure che indossano il marchio promuovono i prodotti. Accanto alle cifre, la pagina offre tre opzioni per lo shopping come un altro passo intelligente.

Alla fine, c'è una barra che conduce a un'altra pagina, ma chiamare i visitatori è una scelta interattiva per il above the fold quando sottolineiamo che è lo strumento più potente per impressionare.

6. Dyson

Dyson è una multinazionale che si occupa di diversi dispositivi tecnologici abitativi e innovazioni per il futuro.

un'illustrazione di un uomo che produce Dyson e le spiegazioni dei cta su una pagina di atmosfera oscura

Sebbene il nero non sia un colore brillante, sappiamo che è assertivo, come Dyson. Pertanto, l'intestazione e i titoli sono abbastanza belli e intriganti se una persona fa clic sulla pagina di proposito.

Il sito web che organizza i prodotti in base alla posizione presenta un contenuto visivo animato perché il suo scopo principale è quello di mostrare il miglioramento e il modo in cui è passato.

La pagina above the fold mostra anche la barra di ricerca e l'opportunità preparata da Dyson ai clienti con un pulsante CTA poiché è un marchio che attira la folla.

7. EyeBuyDirect

EyeBuyDirect è un'azienda di occhiali che produce molti tipi di occhiali, anche da vista e senza prescrizione.

un uomo e una donna che indossano occhiali EyeBuyDirect e un'offerta di sconto accanto a loro

Influire sui clienti con consegne rapide e CTA è fondamentale, e supportarli con popup e finestre di notifica dà l'idea di coinvolgere i visitatori nella pagina.

EyeBuyDirect ha un'intestazione intuitiva come i nomi precedenti e utilizza l'aiuto visivo al centro. Le figure nell'immagine indossano gli occhiali di EyeBuyDirect, mostrando una è seria e l'altra abbastanza felice; il marchio fa riferimento alla disponibilità di mood con EyeBuyDirect.

Il marchio supporta la visualizzazione con un codice campagna specializzato per un periodo di tempo.

Sulla sinistra sotto lo schermo, vediamo un'offerta di benvenuto per coloro che sono venuti a trovarci per la prima volta, e c'è una dichiarazione sui prodotti del marchio.

L'affermazione può essere considerata sufficiente in un primo momento perché coloro che vogliono imparare l'utilità del marchio possono avere il succo da qui.

8. FOMO

FOMO è uno degli strumenti di prova sociale più famosi e preziosi da utilizzare per le aziende per attirare visitatori e avere un tasso di conversione più elevato.

due figure che parlano e indicano la folla con l'obiettivo di aumentare le vendite

FOMO posiziona il logo in alto a sinistra come al solito e aggiunge una spiegazione per essere più precisi perché FOMO stesso ha un significato 'paura di perdere', come forse avrai familiarità.

L'intestazione è per le categorie in cui FOMO può essere in testa, e queste sono le più importanti quando un'azienda viene a vedere cosa ha FOMO.

Se hai un profilo per accedere, puoi accedere; tuttavia, FOMO non ti obbliga a farlo perché puoi comprendere i caratteri e lo stile è molto casual e persino cool.

Al centro, c'è un'immagine di cosa sia la prova sociale con una prova :) La pagina spiega cosa sta facendo e invita i visitatori ad agire con l'opportunità di avere una prova gratuita.

9. Fossile

Fossil è un marchio di moda con molti articoli legati agli accessori e ha molti sottomarchi.

una donna che indossa un orologio da polso che guarda la telecamera e un copione

Fossil presenta un above the fold interattivo con uno spot pubblicitario per mostrare la vivacità del marchio. Inoltre, introduce la Gen 6 Hybrid, appena lanciata sul mercato, offrendo due opzioni per saperne di più e acquistandola con i pulsanti al centro.

Un altro dettaglio da sottolineare è che la pagina mette in evidenza le campagne in modo profondo per motivi stagionali, e hanno molto da offrire in questo senso.

L'intestazione può essere una delle intestazioni più utili tra tutte queste intestazioni above the fold perché mostra le opzioni prima di fare clic e i visitatori possono scegliere quella desiderata.

PS : Fossil guadagna un altro punto con la parte sopra l'intestazione perché mostra la responsabilità dell'azienda, lo stato dell'ordine dei clienti, le pagine del profilo e, soprattutto, l'opzione delle località di spedizione.

10. HubSpot

HubSpot è una società di software di successo nel marketing inbound, nelle vendite e nel software di servizio di per sé. In un certo senso è il tuttofare.

una tabella delle statistiche e un testo di chiamata su sfondo arancione

Quando visiti HubSpot, la chat box ti dà il benvenuto all'inizio e ti offre aiuto se ne hai bisogno. La visualizzazione generale della pagina è costituita dal colore rosso, quindi ti ispira ad agire per la tua attività.

Offrendo opzioni gratuite e premium, HubSpot fornisce ai visitatori i dettagli su se stesso per chiarire le cose e li invita per ulteriori informazioni.

La parte dell'intestazione ospita molte scelte, comprese le opzioni della lingua, contattare le vendite e l'assistenza clienti, il profilo e le pagine.

Inoltre, puoi facilmente raggiungere i dettagli del software e le opzioni di prezzo, il che aumenta la qualità dell'esperienza utente.

11. Stato

Instatus è un valido strumento per la pagina di stato con un intrigante above the fold e altre pratiche funzionalità per prevenire i tempi di inattività.

una pagina nera con diverse analisi di stato e una scritta da gigante per le pagine di stato

Above the fold di Instatus può sembrare scuro quando si confronta l'altro above the folds. Tuttavia, la cosa importante qui è la facilità d'uso della pagina. Pertanto, possiamo dedurre che Instatus fornisce gli elementi necessari sullo schermo.

È impossibile realizzare il suo motto e vedere le scatole interattive utilizzate per avere idee sull'azienda. Dopo aver visto le funzionalità, puoi ottenere una pagina di stato istantanea a un prezzo accessibile.

L'intestazione è semplicemente progettata per il motivo per cui si dovrebbe usarla, come funziona per mostrare sulle foto, quanto deve essere pagata e altro ancora. Se segui la linea, puoi comunque assistere allo sforzo di Instatus di includere i visitatori chiamandoli per iniziare gratuitamente.

12. Kylie Cosmetics

Il marchio di cosmetici creato dalla famosa figura Kylie Jenner produce cosmetici e prodotti per la cura della pelle puliti e vegani.

Kylie con i capelli rosa e Stassie con i capelli blu che si abbracciano promuovendo i Kylie Cosmetics con l'annuncio spiegazioni della collaborazione

In cima al above the fold di Kylie Cosmetics, ci sono sezioni trattate dal marchio per scegliere i campi che ti interessano. A seconda della tua scelta, le sottosezioni variano e solo la barra di ricerca e i profili rimangono gli stessi .

Dal momento che l'azienda svolge una collaborazione con Stassie Karanikolaou in questi giorni, l'attenzione principale è rivolta a questo e una parte considerevole della pagina è organizzata per le caratteristiche di questa cooperazione con un pulsante CTA.

Inoltre, come volti di questo marchio e della collaborazione, la proprietaria, Kylie, e il suo partner in collaborazione, Stassie, hanno una foto above the fold.

13. Piccoli Cesari

Little Caesars è un famoso marchio di pizze che offre ai clienti varie opzioni di fritti oltre alla pizza.

una pizza e la sua promozione con il suo prezzo con l'offerta degli ordini

Quando hai fame, niente può fermarti o distrarre la tua attenzione, supponiamo, e considerare above the fold di Little Caesars è piuttosto semplicistico poiché utilizza i dettagli necessari ma nient'altro. È così probabile valutarlo come molto maneggevole.

La pagina ti dà il benvenuto con "Ciao, ospite" e mostra cosa c'è nella tua shopping bag. Tuttavia, ciò che è più significativo qui sono le campagne che offre e Little Caesars mostra quelle più convenienti e accattivanti al centro.

Iniziare il tuo ordine è più semplice di tutti questi e puoi scegliere le opzioni che si adattano meglio a te. Preferisci il ritiro o la consegna? Scegli di mangiare subito!

14. Melula

Melula è un marchio di moda per bambini che si concentra su scarpe e accessori per scarpe.

un tessuto colorato e tre bastoncini di legno su sfondo blu

Il above the fold di Melula è il più semplicistico e colorato che abbiamo inserito in questo elenco. Come l'innocenza dell'infanzia, il marchio utilizza toni delicati e gli articoli per farsi capire.

Il suo messaggio è genuinamente esplicito e per far fare un passo ai visitatori sulla pagina può essere fornito il breve pulsante CTA.

La possibilità di spedizione gratuita in tutto il mondo è sottolineata nella parte superiore del negozio e nelle pagine sottostanti.

15. Oskar Gydell

Oskar Gydell è un'azienda di gioielli fondata in Svezia che lavora per produrre gioielli unici e fatti a mano.

una mano che indossa braccialetti Oskar Gydell che tocca la sabbia

Diversamente dagli altri above the fold, Oskar Gydell offre le opzioni di valuta in base alla tua posizione e fornisce questi dettagli sull'intestazione.

Offre la spedizione gratuita se è superiore a $ 86 USD. Inoltre, puoi vedere cosa offre il negozio online prima di fare clic e scegliere di continuare lo shopping accanto ai contatti e alla pagina "Chi siamo".

Dato che siamo in estate, non cadiamo nella tristezza e vediamo la promozione di Oskar Gydell con i suoi gioielli perché above the fold lo mostra con un'immagine purista e un invito all'azione.

16. Popup intelligente

Popupsmart è uno strumento senza codice facile da usare per creare popup e aumentare la generazione di lead delle aziende che utilizzano.

un esempio di popup con l'introduzione di Popupsmart e uno script invitante

Il above the fold è progettato come orientato all'obiettivo perché più dettagli fornisce il marchio, peggiore può peggiorare la situazione.

Quindi, Popupsmart condivide le funzionalità necessarie e le promesse a un utente con nomi come Greenpeace, UNICEF, Rakuten e Wienerberger, usandole come prove sociali.

Accanto alle informazioni necessarie per familiarizzare con Popupsmart, vediamo la promozione dei saldi estivi con un esempio di popup che mira a generare lead perché i visitatori dovrebbero sapere con cosa si occuperanno.

Per quanto riguarda l'intestazione, anche la semplicità si ottiene solo con le informazioni necessarie come le soluzioni, il tour del prodotto per semplificare le cose, alcune vetrine da guidare e il prezzo. Successivamente, vedrai i pulsanti "Inizia" per far parte dell'azione.

17. Shopify

Shopify è uno dei software di e-commerce più famosi e una piattaforma di shopping per molti nomi distinti.

viene visualizzato un prodotto con la spiegazione di Shopify e una barra di posta elettronica

Non è stato possibile mostrare più di questo per Shopify. E sì, stiamo parlando della shopping bag. È il riassunto completo del marchio perché, come piattaforma di e-commerce, mostra sia i prodotti che i dettagli e le problematiche che Shopify è in grado di fare.

L'intestazione di Shopify è abbastanza per coloro che visitano il sito Web con uno scopo e li porta a sezioni dirette.

Per quanto riguarda le spiegazioni, vediamo un metodo simile con HubSpot e Popupsmart come un modo efficace per presentarsi ai visitatori e invitarli a condividere i propri indirizzi email per iniziare una prova gratuita.

18. Tesla

Tesla è una società fondata da Elon Musk, e si occupa di industria automobilistica ed energia pulita.

una nuova Tesla Model 3 sulla strada

Possiamo dire che Tesla e Apple condividono lo stesso metodo di introduzione perché il nuovo modello di Tesla, Model 3, è promosso al centro della pagina. Inoltre, è possibile personalizzare l'ordine come preferisci o vedere l'inventario esistente.

Quando ci spostiamo all'inizio della pagina, vediamo un'intestazione molto utile con diverse opzioni in above the fold poiché introduce altri modelli e qualità.

Per mostrare la sua coscienza ambientale, Tesla condivide con i suoi visitatori l'Impact Report 2021, che riteniamo assertivo ed equo.

19. Walmart

Walmart è una società di vendita al dettaglio composta da diversi tipi di negozi per i consumatori, con sede in Arkansas.

due e più borse della spesa Walmart e box con diverse sezioni di e-commerce

Uno dei più affollati above the folds è quello di Walmart. Tuttavia, non è una brutta cosa se gestisci una società di vendita al dettaglio perché devi mostrare ai visitatori quello che hai.

Offre categorie nell'intestazione e ti consente di elaborarla in base alla tua posizione, alle tue esigenze e alle date.

Walmart presenta anche una parte interattiva al centro perché col passare del tempo esistono nuove opportunità, vendite e sconti per i consumatori.

Può essere considerata una delle pagine above the fold più facili da usare nonostante la sua affollata poiché tutto è dove deve essere.

20. Zapier

Zapier è famoso per l'automazione e l'integrazione, che molti marchi desiderano avere per una migliore gestione delle proprie attività.

due schermi separati con un uomo seduto su una scrivania che studia da un lato e un invito all'azione con funzionalità sull'altro lato

Above the fold di Zapier individua anche la visualizzazione sulla parte destra e la supporta con spiegazioni proprio accanto ad essa per mantenere l'attenzione dei visitatori al centro.

Inoltre, con una parte animata di automazione, Zapier mostra di avere autorità nel campo dell'automazione. Offre promesse di automazione chiamando i visitatori all'azione con un pulsante come sempre.

L'intestazione si adatta al resto della pagina poiché l'azienda segue un modo semplice ed efficace per mantenere i visitatori e mantenere un'atmosfera utile che si sposta attraverso la pagina.

FAQ

Avete domande? Rispondiamo!

Come dovrebbe essere un esempio above the fold?

Ci sono alcuni criteri a cui dovresti prestare attenzione come segue:

  • La semplicità è la cosa migliore, non creare alcuna complessità.
  • Sii cristallino, non perdere tempo.
  • Evita di usare virgolette e testi lunghi.
  • Usa immagini e aiuto visivo.
  • CTA aiuterà i tuoi visitatori ad agire e ad organizzare i tuoi pulsanti di conseguenza.
  • Crea un above the fold facile da usare e coinvolgente.

Perché hai bisogno di una buona above the fold?

Perché se non ti interessa above the fold, dovrai aumentare il tasso di conversione e il coinvolgimento degli utenti.

Dà anche l'idea di quanto tieni al tuo prodotto e alla sua promozione presso i visitatori.

Sarebbe meglio se ti ricordassi che i visitatori vogliono sentirsi affascinati e preziosi. Se salti questo dettaglio above the fold , creerai un'impressione sbagliata su di te.

Perché Above the Fold è più importante di Below the Fold?

Perché above the fold saluta prima di tutto i visitatori e crea l'impatto reale. Below the fold, che si riferisce alla parte successiva della pagina, è il secondo passaggio durante il processo di navigazione. Cioè, below the fold è il secondo rango per importanza e lo vedi quando scorri verso il basso. Puoi anche dire che il below the fold non è un fattore causale per i visitatori dopo che sono convinti che sei un professionista.

Incartare

Sebbene ci occupiamo dell'intera pagina, above the fold è la prima cosa che attira l'attenzione.

Pertanto, è davvero importante dare importanza ad avere una pagina above the fold efficace.

Ci auguriamo che gli esempi ti piacciano e che possano essere l'ispirazione che stai cercando per il tuo sito web.

Altri blog di ispirazione

Se vuoi ispirazione per la tua attività, puoi dare un'occhiata anche a questi.

  • I migliori esempi di call to action (CTA) che aumentano le vendite 2022
  • 17 migliori esempi di pagine di destinazione SaaS e perché funzionano
  • Aumenta i tassi di conversione dei moduli con 10 modi semplici ma potenti
  • Ottimizzazione della pagina del prodotto 101: i migliori suggerimenti ed esempi
  • Creazione di elenchi di e-mail: 13 metodi collaudati per far crescere la tua lista di e-mail nel 2022