Tired of
lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
TABLE OF CONTENTS
- ¿Qué significa “Above the Fold” en los sitios web?
- 13 ejemplos de los mejores sitios web con la parte superior de la página
- ¿Por qué es importante el contenido above the fold?
- Prácticas recomendadas para optimizar la parte superior de la página
- Reflexiones finales sobre Above the Fold
- Preguntas frecuentes sobre Above the Fold
Back to Blog List
10+ mejores ejemplos de Above the Fold para inspirarte en 2024
Updated:
13
minutes read
Si su sitio web es un activo digital, la sección superior es una de las partes más valiosas de ese activo.
Es lo primero que ven los visitantes de su sitio web cuando llegan a él, por lo que tiene una importancia significativa, especialmente en los negocios de comercio electrónico.
Pero la pregunta es: ¿qué debes tener en cuenta al crear tu sección above the fold y su contenido?
En esta publicación de blog, lo guiaremos a través de algunos de los mejores ejemplos de sitios web above the fold y compartiremos los consejos y las mejores prácticas que puede implementar al crear su contenido y diseño above the fold.
¿Qué significa “Above the Fold” en los sitios web?
“Above the fold” es la sección superior de una página web que aparece inmediatamente al ingresar a ella, y antes de desplazarse hacia abajo en la página.
Una sección típica por encima del pliegue de la página de inicio de una tienda de comercio electrónico puede contener elementos como el logotipo de la marca, la barra de anuncios, el menú de encabezado, la imagen o el video principal, el texto del encabezado y el subtítulo, la oferta promocional, la barra de búsqueda y el botón CTA (llamado a la acción).
13 ejemplos de los mejores sitios web con la parte superior de la página
Ahora, revisemos los mejores ejemplos de banners above-the-fold o hero banners que hemos recopilado del mundo del comercio electrónico, después de revisar más de cien sitios web/tiendas Shopify.
1. Huel
Huel es una marca de alimentos nutricionales que elabora sus productos a partir de ingredientes de origen vegetal y sostenibles como guisantes, arroz, avena, coco, etc.
Principales conclusiones de la sección above-the-fold de Huel:
- Gran uso de los botones CTA:
La marca ha proporcionado dos botones CTA diferentes: «Comprar Huel» y «¿Qué es Huel?» — para ayudar a dos tipos diferentes de clientes: 1. Aquellos que ya conocen la marca y 2. Nuevos clientes que podrían no conocer la marca o sus productos.
- Visualización de la prueba social:
La marca destaca las numerosas plataformas de medios populares en las que apareció, como Women's Health, Men's Health, CNN, Shape, Vox, TIME, Fox y Wired. Esto ayuda a mejorar la credibilidad de la marca.
- Mención de las opiniones de clientes de terceros:
Otra gran ventaja de la marca es que ha mostrado su calificación en Trustpilot (TrustScore 4,3 de 16.454 opiniones). Esto demuestra a los clientes que miles de clientes ya han utilizado los productos de esta marca.
2. Todos los pájaros
Allbirds es una de las marcas más populares impulsadas por Shopify que ofrece una amplia gama de zapatos y prendas de vestir cómodos.
Principales conclusiones de la sección above-the-fold de Allbirds:
- Copia corta pero excelente:
- El título del anuncio de Allbirds consta de sólo dos oraciones breves, pero aún así transmite el mensaje de los beneficios que aportan sus productos.
- Avance para continuar desplazándose:
- Justo debajo de la sección de imágenes destacadas, se encuentra el encabezado “Nuestros favoritos” , que nos hace desplazarnos hacia abajo para ver cuáles son esos productos.
- Uso del menú de la barra lateral:
- Cuenta con colecciones destacadas presentadas como un menú de barra lateral, lo que hace que la navegación sea mucho más accesible para los clientes.
3. Amazfit
Amazfit es una marca de wearables inteligentes que ofrece relojes inteligentes, pulseras y accesorios.
Principales conclusiones de la sección above the fold de Amazfit:
- Barra de anuncios llamativa:
Al ingresar al sitio web de Amazfit, llama la atención su barra de anuncios, donde la marca menciona información importante, como envío gratuito, garantía de 12 meses y política de devolución de 30 días. Todos estos detalles pueden ayudar a los clientes a comprar el producto sin dudarlo.
- Gran uso de la presentación de diapositivas:
La presentación de diapositivas destaca algunos de los mejores productos que ofrece la marca. Si bien cada diapositiva tiene el botón "Más información" , los clientes pueden hacer clic en cualquier parte de la imagen y los redireccionará a la página del producto correspondiente.
- Uso de imágenes y características de productos impactantes:
La sección superior de Amazfit muestra algunas imágenes impresionantes del producto junto con sus características clave que pueden permitir que todos los compradores tomen una decisión de compra rápida.
Consejo profesional:
Al diseñar la sección superior de la página, tenga en cuenta los distintos tipos de dispositivos, especialmente los móviles. Si utiliza GemPages para diseñar su sitio web, puede cambiar fácilmente entre distintos tipos de dispositivos en el editor y crear un diseño de la sección superior de la página optimizado para dispositivos móviles y con capacidad de respuesta.
4. Cosméticos Kylie
Kylie Cosmetics , una marca de cosméticos dirigida por una celebridad famosa, Kylie Jenner, es un excelente ejemplo de una sección superior bellamente diseñada.
Principales conclusiones de la sección above-the-fold de Allbirds:
- Aprovechar una oferta interesante:
A los clientes les encanta recibir obsequios gratis, y Kylie Cosmetics lo sabe muy bien. Ha destacado una atractiva oferta de “obsequios gratis” en su sección principal, lo que la convierte en una sección que llama la atención.
- Diseño agradable y limpio:
El diseño general de la sección superior de Kylie Cosmetics luce estéticamente agradable con colores suaves y fuentes bonitas.
5. Cupshe
Cupshe es una marca de moda que ofrece ropa de playa, trajes de baño, monos y vestidos elegantes a precios asequibles para mujeres de todos los tamaños.
Principales conclusiones de la sección above-the-fold de Cupshe:
- Visualización de ofertas promocionales:
Justo debajo de la sección del menú, Cupshe destaca las ofertas promocionales con tres bloques: "MÁS RÁPIDO Y GRATIS", "10 % DE DESCUENTO | EN TODO EL SITIO" y "OBTÉN UN 15 % DE DESCUENTO ADICIONAL".
- Uso de dos CTA diferentes:
En las ofertas de descuento previas al Black Friday y de suscripción, hay dos CTA diferentes: “COMPRAR TODA LA ROPA” y “COMPRAR LIQUIDACIÓN”. Al usar CTA específicos, puede facilitarles a los clientes la exploración de ofertas promocionales específicas.
- Barra de anuncios:
Además de la sección de imágenes de héroe, Cupshe utiliza la barra de anuncios para promocionar sus diferentes ofertas de descuento y ofertas de compras gratuitas (para un determinado valor de pedido).
6. A prueba de balas
Bulletproof es una marca popular que comenzó vendiendo café y ahora ofrece una variedad de otros productos, incluidas barras de proteínas y otros suplementos.
Principales conclusiones de la sección above-the-fold de Bulletproof:
- Diseño estéticamente agradable:
La apariencia general de la página de inicio de Bulletproof se ve muy elegante gracias a su excelente combinación de colores y al uso adecuado del contraste de color.
- Uso de un widget de oferta de descuento:
La oferta del 20 % de descuento se promociona con un widget dedicado. Los clientes pueden hacer clic en ese widget y desbloquear la oferta. Otra ventaja de este widget es que es un widget fijo, por lo que, incluso si te desplazas hacia abajo, aparece en tu pantalla.
- Incitando a los clientes a explorar más:
El título del encabezado después de la imagen principal —“DESCUBRE CÓMO SE SIENTE UNA MEJOR SENSACIÓN CON BULLETPROOF FUNCTIONAL NUTRITION”— también es una excelente manera de intrigar a los visitantes para que exploren más en el sitio web.
7. Diseño de picos
Peak Design ofrece una amplia gama de productos que incluye bolsos de uso diario, accesorios para bolsos, fundas y accesorios para móviles, equipos para cámaras y trípodes.
Principales conclusiones de la sección above-the-fold de Peak Design:
- Mostrando las diferentes colecciones:
Peak Design utiliza de forma inteligente la sección de imágenes destacadas, destacando tres colecciones diferentes con botones de llamada a la acción individuales para cada una. Esto también puede ayudar a los clientes a explorar rápidamente lo que les interesa.
- Concientizando sobre la causa:
Peak Design dona una pequeña parte de sus ventas a organizaciones sin fines de lucro y hace que los clientes conozcan este caso a través de la barra de anuncios en la parte superior del sitio web que dice: "EL 1% DE CADA VENTA SE DESTINA A ORGANIZACIONES AMBIENTALES SIN FINES DE LUCRO".
- Uso de la pestaña Acerca de:
Otra característica interesante de la sección above the fold de Peak Design es la pestaña Acerca de, en la esquina superior derecha del sitio web. Cuando se expande esa pestaña, se proporcionan enlaces a todos los recursos de la empresa.
8. Guillermo Pintor
William Painter ofrece gafas de sol con material duradero y de alta calidad para un "estilo de vida aventurero".
Principales conclusiones de la sección above-the-fold de William Painter:
- Uso de un vídeo en la sección del héroe:
El vídeo de la sección principal muestra los beneficios del producto (gafas de sol) y cómo se puede utilizar para distintos tipos de aventuras.
- Widget de ajustes de accesibilidad:
Uno de los aspectos únicos que observamos en la sección above the fold de esta marca fue el widget que se ofrece para realizar ajustes de accesibilidad. Este proporciona diferentes configuraciones para ajustar la accesibilidad del sitio web según las necesidades individuales.
- Oferta de envío gratuito:
La marca ofrece envío gratuito en todos los pedidos en EE. UU. superiores a $100 y ha destacado esta oferta en la barra de anuncios.
Más información: ¿Cómo hacer envíos gratis en Shopify? (+Consejos de Evergreen)
9. Bombas
Bombas es una marca de calcetines y ropa que tiene como gran misión ayudar a quienes lo necesitan. La marca crea calcetines cómodos para hombres y mujeres.
Principales conclusiones de la sección above-the-fold de Bombas:
- Visualización de colecciones destacadas:
Bombas tiene un diseño exclusivo que muestra sus principales colecciones justo debajo de la barra de menú. Esto puede ayudar a los clientes a encontrar fácilmente lo que buscan.
- Destacando la noble causa:
En la sección above the fold, las marcas suelen utilizar textos que promocionan los beneficios de sus productos o sus ofertas de descuento; sin embargo, Bombas es diferente. Ha mencionado su iniciativa "One Purchased = One Donated" y que la marca ya ha completado 100 millones de donaciones.
10. Depilado
Manscaped es una marca de consumo de estilo de vida para hombres que ofrece productos de cuidado personal esenciales, como kits para el cuidado de la barba, recortadoras de cabello, kits para el cuidado corporal, desodorantes y prendas de vestir como camisetas y boxers.
Principales conclusiones de la sección above-the-fold de Manscaped:
- Gran exhibición de los productos:
Manscaped ha puesto sus productos en el centro de atención en la sección de imágenes destacadas. Con un gran contraste de colores, el atractivo visual general de su sección superior es bastante impresionante.
- Uso de una barra de anuncios expandible:
A veces, es posible que tengas demasiado para compartir en la barra de anuncios pero muy poco espacio. Manscaped ha creado una barra de anuncios que se puede expandir para revisar más detalles. En esta sección, la marca promociona sus ofertas, como obsequios gratuitos, envío gratuito, el plan de higiene máxima, etc.
11. Higos
Figs es una marca de uniformes y ropa médica que ofrece uniformes médicos cómodos y elegantes, ropa de abrigo, ropa informal, capas esenciales y más.
Principales conclusiones de la sección above-the-fold de Manscaped:
- Menú “Comprar por color”:
El menú de encabezado es uno de los elementos cruciales de la sección above the fold. Ayuda a los visitantes a navegar por el sitio web fácilmente al encontrar diferentes colecciones. Sin embargo, Figs lo ha llevado al siguiente nivel.
Permite a los visitantes explorar los productos por color. Hay muchos clientes que son muy específicos en cuanto a su elección de color, y esta sección podría resultarles increíblemente útil.
- Uso de imágenes de estilo de vida:
Figs muestra cómo lucen sus diferentes productos en las personas mostrando imágenes de estilos de vida con diferentes modelos. Esto hace que el aspecto general del sitio web sea estético y auténtico.
12. Compañía de zapatos teñidos a mano.
Como sugiere el nombre, Hand Dyed Shoe Co. ofrece zapatos hechos a mano y personalizados. Esta marca utiliza GemPages para diseñar su tienda.
Principales conclusiones de la sección above the fold:
- Uso de vídeo de producto de alta calidad:
Hand Dyed Shoe Co. muestra el aspecto elegante y de primera calidad de su producto terminado a través de un video de alta calidad. Debemos decir que el video se roba el espectáculo en esta sección superior.
- Filosofía de la marca:
En lugar de utilizar un texto que explique el producto y sus características/beneficios, esta marca se ha centrado en la filosofía de la marca. Puedes ver la cita del fundador que dice: "No se trata de lo que haces con tus zapatos únicos, se trata de cómo te sientes cuando lo haces" .
- Botones CTA personalizados:
Hay dos CTA diferentes: “Diseña el tuyo ahora” y “Reserva una prueba” , y esto hace que sea fácil para los clientes elegir el CTA específico según sus requisitos.
13. Ropa de cama de Brookline
Brooklinen se fundó con la misión de ofrecer artículos básicos para el hogar de alta calidad a precios accesibles. La marca vende productos como sábanas, toallas, mantas, fragancias para el hogar, arte mural y mucho más.
Principales conclusiones de la sección above-the-fold de Brooklinen:
- Promoción de puntos de recompensa:
Brooklinen promueve una oferta interesante para sus clientes brindándoles la oportunidad de ganar cuatro veces más puntos en cada compra de la guía de regalos.
- Una forma creativa de promocionar el boletín informativo por correo electrónico:
En la sección de encabezado, tiene un icono de mensaje que nos incita a hacer clic en él. Al hacer clic en ese icono, aparece una ventana emergente que ofrece un descuento del 15% por suscribirse a la newsletter. Esta es una forma creativa de captar suscriptores de correo electrónico.
¿Quieres convertir tu tienda en una máquina de hacer dinero?
Con el generador de páginas GemPages, puede crear páginas de tienda atractivas que sorprendan a los visitantes y los conviertan en compradores.
¿Por qué es importante el contenido above the fold?
-
Impresión de marca:
La primera impresión es fundamental y esto también se aplica al diseño web. Lo primero que los visitantes ven al ingresar a su sitio web es la sección superior de la página.
Y es por eso que es tan crucial crear una excelente primera impresión con tu contenido encima del pliegue.
Consejo profesional:
Utilice GemPages para crear toda su página web y no solo la sección que aparece sobre el campo. Puede crear distintas páginas, como la página Acerca de, la página de Contacto y la página de Blog, con un diseño y un estilo similares a los de su página de inicio.
-
Optimización de motores de búsqueda (SEO):
¡Quizás te preguntes cómo el contenido que se muestra arriba del pliegue puede afectar el SEO!
Si bien no es un factor directo en el SEO, es importante tenerlo en cuenta. Si el contenido de la mitad superior de la página es deficiente, el visitante puede abandonar el sitio web inmediatamente. Esto puede aumentar la tasa de rebote y, con el tiempo, puede afectar el SEO de su sitio web.
Un buen contenido en la mitad superior de la página hace que el usuario permanezca en su sitio web y explore más contenido. Como resultado, no solo reducirá la tasa de rebote, sino que también ayudará a mejorar su clasificación.
-
Optimización de conversión:
El contenido que se encuentra en la mitad superior de la página de su sitio web desempeña un papel fundamental a la hora de influir en los visitantes de su sitio web. Puede mejorar o empeorar la percepción que los clientes tienen de su marca.
Un texto atractivo en la mitad superior de la página junto con un CTA pueden incitar a los visitantes a convertirse en compradores. Algunas marcas también utilizan esta sección para destacar y promocionar sus mejores ofertas.
Prácticas recomendadas para optimizar la parte superior de la página
Utilice una aplicación de creación de páginas
El diseño es uno de los aspectos más importantes de la sección above the fold. Si usas Shopify y te preguntas cómo lograr un diseño perfecto para tu sitio web, GemPages puede ayudarte a lograrlo.
GemPages te permite diseñar tu sitio web con un editor intuitivo de arrastrar y soltar, y puedes personalizar el diseño como desees.
GemPages es una de las aplicaciones de creación de páginas más populares en la tienda de aplicaciones de Shopify. Lo más interesante es que GemPages también tiene una función de conversión de imágenes en diseños impulsada por IA que hace que el proceso de diseño sea más inteligente y rápido.
Mantenga el tamaño correcto para la sección del encabezado
Uno de los errores más comunes que vemos que cometen muchas tiendas es que mantienen una sección de encabezado demasiado larga. Como resultado, la sección principal tiene muy poco espacio para crear la impresión necesaria.
Intente que la sección del encabezado sea lo suficientemente corta en cuanto a su altura. Además, le recomendamos que utilice un logotipo con forma rectangular en lugar de un logotipo cuadrado. Un logotipo cuadrado ocupa demasiado espacio.
Tus páginas de destino podrían verse así
Pruebe GemPages de forma gratuita para crear páginas de destino de alta conversión para cualquier campaña de marketing. No se requiere codificación.
Utilice un eslogan que represente su marca
El texto del encabezado o eslogan se puede utilizar de distintas maneras. Muchas marcas lo utilizan para destacar el beneficio clave o la USP (propuesta única de venta) de su negocio.
Algunas marcas prefieren utilizar el texto principal para expresar la misión de la marca. Esto crea un vínculo sólido entre la marca y sus clientes.
En definitiva, asegúrate de utilizar un eslogan que esté alineado con lo que hace tu marca y lo que te distingue de la competencia.
Sea conciso con su copia
Piensa en el texto que aparece en la parte superior de la página como una breve introducción a tu marca. No tiene que ser demasiado extenso. Lo ideal es que escribas un texto de encabezado con una sola línea de no más de 5 o 7 palabras.
Luego, para el subtítulo, solo un par de líneas para ampliar brevemente el título principal. Sea creativo, pero vaya directo al grano.
Utilice CTA personalizados
Los CTA personalizados tienen un 202% más de conversión que los CTA básicos.
Por lo general, la mayoría de las tiendas en línea tienen un botón CTA de uso común: “ Comprar ahora” . Sin embargo, puedes ser más específico y crear CTA más personalizados según tus productos y clientes.
Ajustar el nivel de contraste
Otro error común que hemos detectado en muchos sitios web es que el fondo es demasiado recargado y dificulta la lectura del texto. Esto puede eliminar por completo el impacto positivo que podría tener el texto.
Por lo tanto, asegúrese de que los textos sean claramente visibles ajustando el nivel de contraste de la imagen o el video de fondo y el texto. Utilice la superposición de imágenes si el fondo está demasiado recargado.
¿Quieres convertir tu tienda en una máquina de hacer dinero?
Con el generador de páginas GemPages, puede crear páginas de tienda atractivas que sorprendan a los visitantes y los conviertan en compradores.
Reflexiones finales sobre Above the Fold
El contenido que se muestra en la parte superior de la página es una gran oportunidad para crear una buena primera impresión. No desaproveches esa oportunidad. Crea un diseño único y atractivo para mostrarles a los clientes por qué deberían comprar productos de tu marca.
Además, debes actualizar y cambiar el contenido que se encuentra en la parte superior de la página a intervalos regulares. Por eso, usar una aplicación de creación de páginas como GemPages puede hacer que tu trabajo sea mucho más fácil y rápido.
Por último, cada vez que hayas creado o cambiado el diseño de tu sección superior, asegúrate de revisarlo en diferentes dispositivos para garantizar que todo se vea perfecto en todos los tipos de dispositivos.
Preguntas frecuentes sobre Above the Fold
What is considered above the fold on a website?
“Above the fold” is the content that you see on a website before scrolling down. Elements like an announcement bar, header menu, hero image or video, heading and subheading copy, and CTA button are different elements of an above-the-fold section on a website.
Does the above-the-fold matter for SEO?
The short answer is, yes, it does matter for SEO. However, it’s not like a direct ranking factor. If your website has great above-the-fold content, it may help prevent the website visitors from immediately exiting the website, and thus, it could help SEO by reducing the bounce rate.
What is the difference between “above the fold” and the hero section?
The hero section is one of the sections within the above-the-fold content elements. “Above the fold” is a broader term and covers all sections that you see at the top of the website before scrolling down.
How do you optimize above the fold?
To optimize your website’s above-the-fold section, you need to ensure that it fits perfectly well on smaller as well as bigger screens. Create a mobile-friendly design. Make sure it has a great copy, color scheme, image/video, and CTA button(s).
Why should CTA be above the fold?
The web pages on your website may have different sections from top to bottom, but many visitors may not even pay attention to all those sections. However, all visitors see the above-the-fold section by default when they land on the page. So, it gets more eyeballs, and thus, more chances of conversion. That’s why CTA should be above the fold.
- ¿Qué significa “Above the Fold” en los sitios web?
- 13 ejemplos de los mejores sitios web con la parte superior de la página
- ¿Por qué es importante el contenido above the fold?
- Prácticas recomendadas para optimizar la parte superior de la página
- Reflexiones finales sobre Above the Fold
- Preguntas frecuentes sobre Above the Fold
