Vamos a ver en este post la estructura general de una página web y los elementos específicos que habitualmente se encuentran según la zona de la página de la que estemos hablando.

Con este post vas a tener una idea global de los elementos y estructuras que debes tener en cuenta a la hora de crear las diferentes páginas de tu sitio web. Vamos a analizar también los recursos más habituales que se utilizan en páginas web corporativas y tiendas online.

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

ÍNDICE ESTRUCTURA Y ELEMENTOS DE UNA WEB

 

 

1.- Diferencia entre sitio web y página web

 

La primera cuestión que debemos tener presente es que no es lo mismo un sitio web que una página web.

Un sitio web está formado por muchas páginas web. Un sitio web es la manera que debemos utilizar para referirnos a una web completa. Es decir, mi sitio web tiendaonlinemurcia.es está formado por la página web de inicio, la de contacto, servicios, etc.

Cada página web tendrá una URL diferente, que siempre comenzará con el nombre de dominio.

La página de contacto tiene la URL: https://www.tiendaonlinemurcia.es/contacto-joaquin-barbera-diseno-tienda-online/

 

 

2.- Partes o estructura de una página web

 

Todas las páginas de la web se dividen o estructuran en 3 partes fundamentales. La cabecera o header, el cuerpo y el pie o footer

Aunque, también es cierto que hay excepciones. Existen páginas especiales en las cuales no se muestra la cabecera o el footer, como suele ocurrir en las conocidas como landing pages o páginas de aterrizaje.

 

partes y estructura de una página web

Estructura de una página web

 

Para hacer un sitio web, yo recomiendo utilizar WordPress y la plantilla Divi
MEGA GUÍA PLANTILLA DIVI SUPER DESCUENTO DIVI

 

 

2.1.- Cabecera o header

 

La cabecera o header de una página web se sitúa en su parte superior y se muestra en todas las páginas web del sitio. Cómo antes he comentado, puede haber algunas excepciones, como suele ocurrir con las landing pages o páginas de desembarco.

El header o cabecera suele tener anchura completa. Es decir, que siempre ocupa el ancho completo de la pantalla en la cual se está visualizando. A excepción de las páginas web tipo box o caja. Por el contrario el contenido de la página no suele tener anchura completa, aunque puede haber algunos elementos en su interior que si la tengan.

En el header o cabecera encontraremos varios elementos. Pero uno, fundamental, que es el menú de navegación de la web. A través de este elemento podremos acceder a todas las páginas del sitio web.

Más adelante veremos detenidamente otros elementos que suelen mostrarse en el header o cabecera de la web como son el logo, datos de contacto, iconos de redes sociales, etc.

 

 

2.1.1.- Tipos de cabeceras según su visibilidad

 

En cuanto a su visibilidad, existen 2 tipos fundamentales de header o cabeceras:

 

i.- Cabecera o header estándar: en una página web con header o cabecera estándar, cuando hacemos scroll hacia abajo para ir viendo el contenido de la página la cabecera desaparecerá.

ii.- Cabecera o header flotante: hoy en día es muy habitual ver cabeceras o header que no desaparecen aunque hagamos scroll hacia abajo en la página. Este tipo de headers o cabeceras se denominan flotantes, fijos, pegajosos o sticky.

El motivo de estos headers flotantes es que van a permitir que el menú de navegación, incluido dentro de dicho header, siempre esté visible. A pesar, de hacer scroll hacia abajo.

Yo recomiendo este tipo de headers flotantes ya que el menú de navegación es tal vez la parte más importante de la web, ya que a través de éste, el usuario puede acceder a todas las páginas de la web y tener el menú de navegación siempre visible es algo muy positivo para mejorar la experiencia de usuario.

 

En este post puedes ampliar información sobre los tipos y diseños de header o cabeceras en una página web: Diseños de Header o cabeceras web

 

 

2.1.2.- Tipos de cabecera según los bloques que la conforman

 

Existen diferentes tipos de cabeceras o headers atendiendo al número de bloques que lo conforman.

 

i.- Cabecera de un solo bloque: en este tipo de cabecera el header solo dispone de un bloque, que contiene el menú y el logo.

ii.- Cabecera de dos bloques: en este tipo de cabecera el header está formado por dos bloque. Uno principal, con una dimensión en alto mayor y habitualmente situado más abajo. Uno secundario, con una dimensión en altura menor y habitualmente situado en la parte superior.

El bloque principal, habitualmente se sitúan logo, menú y barra de búsqueda (en caso de tienda online) y en el bloque secundario se suelen poner iconos de redes sociales, datos de contacto como email y teléfono e ítems de menú menos relevantes.

 

header o cabecera de página web de dos bloques

Ejemplo de header formado por dos bloques. El bloque superior o secundario tiene color de fondo azul. El bloque inferior o principal tiene color de fondo blanco

 

 

2.2.- Cuerpo

 

El cuerpo de la página está limitado en la parte superior con el header o cabecera  y en la parte inferior con el footer o pie.

Cada página del sitio web tiene un contenido diferente. A diferencia del header y footer, cuyo contenido se repite en todas las páginas de la web.

En el cuerpo se incluye el contenido específico de la página del sitio cuya url se muestra en la barra de direcciones del navegador.

 

 

2.2.1.- Secciones

 

Las secciones son las diferentes partes en que se puede dividir el contenido incluido en el cuerpo de una página.

Las secciones se caracterizan por tener un determinado fondo (color de fondo, imagen de fondo, etc.) que las diferencia unas de otras.

Las secciones se utilizan para separar visualmente diferentes contenidos de una misma página. Además, servirá al visitante para mejorar su experiencia de usuario en páginas de mucho contenido.

 

secciones de una página web

Ejemplo de 2 secciones de una página web

 

SUPER DESCUENTO DIVI

 

 

2.3.- Pie o footer

 

El pie o footer es la parte inferior de una página web. Se sitúa bajo el cuerpo y su contenido se repite en todas las páginas del sitio web. Es decir, que todas las páginas de la web tienen el mismo footer o pie, salvo algunas excepciones como landing pages o páginas por el estilo donde específicamente se elimina el header y footer.

 

El pie o footer puede estar formado por uno o dos bloques.

 

i.- Bloque superior: bloque situado en la parte superior del footer y habitualmente con una dimensión en altura superior al de la barra inferior o créditos de la web.

En este bloque se suele poner información relevante como información de contacto, enlaces a información legal, enlaces a páginas de cuenta de usuario (en tiendas online), logos de certificados de seguridad o formas de pago, iconos redes sociales, etc.

 

ii.- Barra inferior / créditos web: bloque de menor dimensión en altura que el bloque superior. En esta barra se suele poner el autor del diseño de la web o el nombre de la web. En algunos casos también se incluyen los iconos de redes sociales en que está presente la empresa.

 

Footer dividido en dos bloques

Ejemplo de pie o footer de una página web

 

En este post tienes más info sobre el footer de una página web: Diseño footer web

 

 

3.- Elementos de una página web

 

Vamos a ver ahora una serie de elementos habituales en una página web. Iremos viendo dichos elementos clasificados por zonas en las que están ubicados. Es decir, según estén en header, cuerpo o footer.

 

 

3.1.- Elementos dentro de la cabecera o header de la web

 

En primer lugar, veremos los elementos que se suelen encontrar en la cabecera o header de la página web.

 

 

 

El logo es un elemento importante en varios sentidos. En primer lugar representa nuestra marca personal o de empresa.

El logo se mostrará en todas las páginas del sitio web y por tanto permitirá saber al usuario cuando ha abandonado el sitio web. Por este motivo, es un elemento importante en la experiencia de usuario en cuanto a la navegación.

Además, el logo ha de estar enlazado con la página de inicio o home del sitio web. Es decir, cada vez que un usuario haga clic en el logo, le navegador lo debe dirigir a la home o página inicial de nuestro sitio web.

 

 

 

El logo se puede encontrar situado en diferentes posiciones dentro del header o cabecera de la web. Casi siempre se suele colocar en el mismo bloque en el que se sitúa el menú de navegación principal del sitio web.

 

i.- logo izquierda: la forma más habitual es encontrar el logo situado en la parte izquierda del header y el menú de navegación a la derecha. Es la forma clásica.

ii.- logo centrado: también es frecuente encontrar el logo, centrado y justo encima del menú de navegación. Este sistema se utiliza mucho cuando tenemos muchos elementos o ítems de menú y el logo situado a la izquierda pudiera provocar la generación de 2 líneas de menú.

 

header web con logo centrado

Ejemplo de página web con el logo centrado

 

NOTA: Situar el logo encima de la barra de menú provaca que el espacio de visualización de contenido se más pequeño que si el logo se situara a la izquierda el menú. Por este motivo, si utilizas un logo centrado, te recomiendo que configures tu plantilla para que al hacer scroll hacia abajo, el logo desaparezca.

 

iii.- logo en línea: el logo en línea también es un logo centrado, pero que en vez de situarse encima del menú, se sitúa en la misma línea del menú y centrado horizontalmente. Es decir, el logo quedaría entre dos ítems de menú y en la misma línea.

 

En este post tienes más información sobre diferentes diseños de header: Tipos de header web

 

 

3.1.2.- El menú de navegación

 

El menú de navegación es sin duda uno de los principales elementos de un sitio web.  Si un sitio web fuera un libro, el menú de navegación sería el índice.

A través del menú de navegación el usuario podrá acceder a todas la páginas disponibles que nos interesa pueda visitar.

El menú de navegación debe mostrarse en todas las páginas del sitio web, para mejorar la experiencia de usuario.

El menú está formado por ítems o elementos de menú, que son enlaces a las páginas del sitio web que nos interesa que el usuario pueda visitar.

 

En este post puedes ampliar información sobre cómo gsetionar el menú en una web: Menú WordPress

 

 

3.1.2.1.- Diferentes tipos de menú de navegación

 

Hoy en día nos encontramos dos principales tipologías diferentes de menús de navegación, en lo que se refiere a su estructura visual.

 

 

3.1.2.1.1.- Formato clásico del menú de navegación

 

Antiguamente solo había un formato de menú de navegación, pero la irrupción de los dispositivos móviles está abriendo nuevas opciones.

El formato habitual para un menú de navegación es el que incluye los diferentes elementos o ítems de menú en la barra principal del header.

 

 

3.1.2.1.2.- Nuevos formatos del menú de navegación

 

Hoy en día solemos ver por internet otros formatos de menú de navegación diferentes para las webs.

Seguramente habrás visto en algunos sitios web (en modo escritorio, no en móviles) que en vez de mostrarse los elementos del menú se muestra un icono formado por varias líneas horizontales, conocido como icono tipo hamburguer o hamburguesa. Si haces clic en dicho icono se muestran los diferentes elementos o ítems del menú.

 

Para hacer un sitio web, yo recomiendo utilizar WordPress y la plantilla Divi
MEGA GUÍA PLANTILLA DIVI SUPER DESCUENTO DIVI

 

Estos elementos del menú se pueden mostrar de diferentes formas. Por ejemplo, hay un formato donde al hacer clic en el icono tipo hamburguesa se muestran los elementos del menú en una barra lateral deslizante. Existe otro formato donde al hacer clic en el icono tipo hamburguesa, se muestran todos los elementos del menú a pantalla completa en una capa superpuesta.

 

Aquí tienes más info sobre los diferentes diseños de menú de navegación web: Diseños menú navegación

 

Hoy en día también se suelen ver páginas de inicio o home con una gran imagen que invade todo el header o cabecera de la web. Los items o elementos del menú son la única parte de la cabecera que se muestra sobre la imagen. De esta manera conseguimos una primera imagen de la web tremendamente impactante

 

header transparente