Seleccionar página

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.

Si lo que quieres es saber qué es una página web, para qué sirve y cómo funciona, aquí tienes un enlace que te puede ayudar: Qué es una página web

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

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/

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

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.

DESCUENTO WEBEMPRESA – EL MEJOR HOSTING

Cupón: horizonweb

 

 

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
Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

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.

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

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
DESCUENTO WEBEMPRESA – EL MEJOR HOSTING

Cupón: horizonweb

 

 

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
Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

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.

DESCUENTO WEBEMPRESA – EL MEJOR HOSTING

Cupón: horizonweb

 

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

Ejemplo de página de inicio con imagen sobre el header o cabecera

 

En este post tienes más información sobre este tipo de headers o cabeceras transparentes: Header o cabecera transparente

 

 

3.1.2.2.- Menú de navegación en móviles

 

Los formatos clásicos de menús de navegación no tienen cabida en móviles, ya que los elementos del menú no cabrían uno junto al otro en el espacio de header disponible en un dispositivo móvil.

En dispositivos móviles se mostrará un icono tipo hamburguesa en vez de los elementos del menú. Cuando el visitante haga clic en el icono se mostrarán los diferentes elementos del menú.

Es imprescindible que el menú en móviles no se muestre de la manera tradicional. Eso indicaría que la web no está optimizada para dispositivos móviles.

 

Más información sobre cómo Personalizar menú en móviles
Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

3.1.3.- Menús no principales

 

Es habitual usar la barra superior del menú o barra secundaria para ubicar elementos de menú no esenciales o de menor importancia que los ubicados en la barra principal del menú.

Por ejemplo, en tiendas online se suele ubicar en la barra principal del menú las categorías de la tienda online y en la barra superior pestañas como: nosotros, contacto, etc.

 

 

3.1.4.- Datos de contacto y redes sociales

 

Es habitual encontrar en la cabecera o header de la web elementos de contacto como el teléfono o el email e iconos de redes sociales.

Esta información habitualmente se sitúa en el bloque o barra superior del header, que es la barra secundaria.

Es interesante disponer de la información en el header o cabecera, ya que así, en todo momento el visitante tendrá a “tiro de piedra” los datos para contactar. La principal pega es que al tener la dirección de email tan expuesta, podemos recibir bastante correo SPAM.

También es habitual ver los iconos de las redes sociales en las que está presente la empresa. Estos iconos enlazan a la página principal de la empresa en cada red social en la que está presente. Lo cierto, es que yo no soy 100% favorable a esta opción en algunos tipos de sitios web, ya que ¿interesa que una persona que está visitando nuestra web se vaya hacia nuestras redes sociales?

DESCUENTO WEBEMPRESA – EL MEJOR HOSTING

Cupón: horizonweb

 

3.1.5.- Selector de idiomas

 

En los sitios web que están traducidos a varios idiomas, se suele colocar en el header lo que se conoce como el selector de idiomas. Habitualmente aparece una banderita junto al texto del idioma a seleccionar, aunque a veces no se muestra la bandera.

Al hacer clic sobre un idioma, el contenido se traduce al idioma seleccionado.

 

selector idiomas web

Selector de idiomas de una página web

 

 

3.1.6.- Barra de búsqueda en ecommerce

 

En las tiendas online, también se suele ubicar en la cabecera una barra de búsqueda de productos de la tienda. Aunque esta barra también puede aparecer en el sidebar o barra lateral de la web cuando el visitante está visualizando alguna categoría de la tienda online

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

3.1.7.- Carrito en tiendas online

 

También en las tiendas online, suele aparecer en el header un icono correspondiente al carrito del ecommerce.

Al hacer clic en el carrito, se mostrará una página en la que aparecerán los productos que el visitante a añadido al carrito y podrá proceder al check out o realización del pedido.

 

carrito de compra en cabecera tienda online

Carrito en el header de la web

 

 

3.2.- Elementos dentro del cuerpo de la página web

 

Aparte de contenido de texto e imágenes aisladas, en una página web se suelen ver diferentes recursos especiales. Vamos a ver algunos de los más utilizados.

 

 

3.2.1.- Contenido

 

El contenido es todo aquello incluido en cada página de la web y que está situado entre el header o cabecera y el footer o pie.

 

 

3.2.2.- Elementos de contenido web

 

Además, de texto e imágenes, en los sitios web de hoy en día se suelen encontrar muchos elementos especiales en el contenido de cada página.

Habitualmente, este tipo de recursos se generan en la web con la ayuda de un page builder o constructor de páginas.

En mi caso, yo utilizo el Divi builder, que vienen incluido en la plantilla Divi, sin duda, mi constructor preferido para WordPress.

 


Para hacer un sitio web, yo recomiendo utilizar WordPress y la plantilla Divi

MEGA GUÍA PLANTILLA DIVI SUPER DESCUENTO DIVI

 

Vamos a ver los recursos más importantes

 

 

3.2.2.1.- Breadcrumbs o migas de pan

 

El breadcrumbs se suele situar en la parte superior del contenido de cada página e indica al visitante su posición exacta en la navegación del sitio web.

Por ejemplo, un breadcrumbs como este:

Servicios > tiendas online > Woocommerce

Indicaría al visitante que está en la página de “Woocommerce” dentro de “tiendas online” y a su vez dentro de “Servicios”.

También es habitual que cada uno de los elementos del breadcrumb enlace con la página respectiva

Es cierto, que en sitios web pequeños, donde hay un menú muy sencillo, no se hace necesario disponer de este recurso. Pero, en sitios web con una estructura de menú complejo, se hace casi imprescindible.

 

breadcrumbs o migas de pan en una página web

Ejemplo de migas de pan en una web

 

 

3.2.2.2.- Slider

 

Un slider es un visor en el cual se van mostrando los diferentes slides. Los slides habitualmente son imágenes y texto, aunque también podrían ser vídeos.

Los diferentes slides van alternándose en el slider según el tiempo configurado en las opciones del slider.

También es habitual ver elementos de navegación como flechas en los extremos del slider y puntos en la parte inferior de éste. Al hacer clic en una flecha se mostrará el siguiente slide. Cada punto representa a un slide, y al hacer clic en un punto se mostrará el slide correspondiente.

Es muy habitual el uso de este recurso en tiendas online.

Hoy en día, se suelen configurar los sliders para que no se muestren en dispositivos móviles, ya que éstos provocan una carga más lenta de la página en la que éste está incluido.

No recomiendo poner más de 3 o 4 slides en un slider, ya que cuantos más slides tenga el slider más tardará en cargar la página. Además, el visitante no suele ver más de 2 o 3 slides.

Aquí tienes varios ejemplos de slider

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

3.2.2.3.- Carrusel de imágenes

 

Un carrusel de imágenes es algo similar a un slider, pero con la diferencia de que en cada slide o elemento que muestra el carrusel se muestran varias imágenes y no solo una como sucedía en el slider.

Los elementos de navegación del carrusel de imágenes suelen ser los mismos que los del slider.

Este recurso se utiliza mucho en tiendas online para mostrar productos de una tipología, marcas de productos, etc.

 

 

3.2.2.4.- Iconos

 

Sin duda, los iconos son un recurso muy utilizado en los sitios web. Es una forma sencilla, limpia, ilustrativa y visual de mostrar características y servicios en una página.

Además, los iconos cargan mucho más rápido que las imágenes, por lo que desde hace mucho han sido unos recursos muy adecuados para crear contenido en sitios web.

Aquí tienes ejemplos de iconos

 

 

3.2.2.5.- Botones

 

Los botones son al fin y al cabo enlaces, pero con un diseño atractivo que llame a la acción al visitante. Los botones son elementos de interacción con el visitante.

Los botones son elementos imprescindibles, hoy en día, en un sitio web. Con los botones llamamos la atención sobre las acciones que queremos que el visitante realice en nuestro sitio web.

Habitualmente se incluyen opciones de diseño tipo “hover”. Es decir, acciones en el diseño que se producen en el botón cuando el visitante coloca el puntero del ratón sobre el botón. Puede ser un cambio de tamaño en el botón, un cambio de color, etc.

Aquí tiene ejemplos de botones

DESCUENTO WEBEMPRESA – EL MEJOR HOSTING

Cupón: horizonweb

 

3.2.2.6.- Conmutadores o botones desplegables

 

Los conmutadores o botones desplegables son un elemento muy interesante en diseño web. En el conmutador solo se muestra un título. Pero cuando se hace clic sobre éste, se despliega el contenido de este.

Son elementos muy interesantes, porque nos permiten añadir mucho contenido, pero que este quede limpio y visual.

Google leerá el contenido del botón desplegable aunque esté cerrado. Por lo que es un recurso muy interesante para aunar SEO (que implica una cantidad significativa de texto) con limpieza visual, ya que el texto no se muestra en primera instancia.

Aquí tienes ejemplos de conmutadores

 

 

3.2.2.7.- Acordeón

 

El acordeón está formado por un conjunto de botones desplegables o conmutadores, con la peculiaridad de que entre los conmutadores que forman el acordeón solo puede haber uno desplegado.

Cuando desplegamos un elemento del acordeón se cerrará el que esté desplegado en ese momento. Por lo que solo se mostrará un elemento del acordeón desplegado.

Este recurso se suele utilizar mucho para la sección de preguntas frecuentes o FAQs del sitio web.

Aquí tienes ejemplos de acordeón

 

 

3.2.2.8.- Contadores

 

Los contadores son elementos visuales dinámicos, que muestran valores en movimiento y aportan dinamismo a la web. Existen muchos tipos de contadores diferentes.

Hay algunos que muestran barras horizontales dinámicas, otros están formados por círculos dinámicos. También existen contadores que solo muestran dígitos en movimiento, sin barras ni círculos.

Los contadores pueden representar valores porcentuales, valores monetarios, cantidades, etc.

Ejemplos de contadores de barras

Ejemplos de contadores numéricos

Ejemplos de contadores circulares

DESCUENTO DIVI + REGALO
Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

3.2.2.9.- Formulario de contacto

 

El formulario de contacto es un elemento clave en cualquier sitio web. El formulario permite una comunicación vía email entre el visitante y la persona que gestiona el sitio web.

El formulario está formado por una serie de campos, que el visitante ha de rellenar. Cuando se envía el formulario, se enviará un email a la persona que gestiona la web con todos los datos rellenados por el visitante del sitio.

Los campos del formulario pueden ser obligatorios de rellenar o no. Esto va a depender de la configuración que realicemos en el formulario.

Existen muchos tipos de campos diferentes, como: campos de texto, checkbox, radio button, campos de fecha, áreas de texto, etc.

Si disponemos de certificado SSL en nuestro sitio web, estos datos viajarán por internet codificados y por tanto no podrán ser descifrados por ninguna persona que los pudiera interceptar.

En el formulario se suele incluir un elemento denominado Captcha, que sirve para evitar recibir correos tipo SPAM.

No solo se utiliza el formulario de contacto en la página de contacto. Dependiendo del sitio web, puede ser necesario incluir formularios personalizados en varias páginas del sitio web.

 

ejemplo formulario de contacto web con captcha

Formulario de contacto con Captcha

 

 

3.2.2.10.- Galería de imágenes

 

Una galería de imágenes está formada por un conjunto de imágenes, en general, de pequeño tamaño, ampliables a través de una capa emergente u overlay. Cuando hacemos clic en una imagen esta se amplía en una capa emergente junto a unos elementos de navegación como:

i.- flechas de navegación: las flechas sirven para ir navegando por las diferentes imágenes que conforman la galería, sin salir de la capa superpuesta u overlay.

ii.- Aspa: el aspa suele aparecer en la parte superior derecha de la capa emergente y sirve para cerrar la capa y volver a la visión normal de la galería.

Este recurso se utiliza mucho para presentar imágenes relacionadas entre sí.

Ejemplo de galería de imágenes

 

 

3.2.2.11.- Recomendaciones

 

Éste es un recurso ampliamente utilizado en blogs, tiendas online y webs corporativas de hoy en día.

Una recomendación es un bloque, en el cual un cliente que ha probado un determinado servicio o producto que se ofrece en la web, hace una recomendación positiva de su experiencia.

Habitualmente en el bloque de recomendación se muestra la imagen de la persona que realiza la recomendación, el texto propio de la recomendación y su nombre. En algunas ocasiones, también se muestra un enlace a su sitio web e incluso su puesto de trabajo.

Las recomendaciones sirven para reforzar la confianza del cliente hacia los servicios o productos que ofrecemos a través de nuestro sitio web.

 

recomendación en una página web

Ejemplo de recomendación en una web

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

3.2.3.- Barra lateral o sidebar

 

La barra lateral o sidebar, desde hace mucho tiempo, ha sido un recurso propio de los blogs en internet. Aunque, también es cierto, que hay algunos bloggers que en la actualidad no usan este tipo de barras en sus blogs.

También es muy utilizado en tiendas online.

En la barra lateral se incluyen elementos que sirve para ayudar al visitante a encontrar lo que está buscando.

Si hablamos de una tienda online, pues, se suelen colocar filtros de atributos, filtros de precios, barras de búsqueda y otros elementos que ayuden al cliente a encontrar el producto que buscan.

En el caso de los blogs, se suele utilizar una barra de búsqueda de artículos, filtros de categorías, últimos posts y otros elementos que ayuden al visitante a encontrar la entrada de blog que están buscando.

En el caso de wordpress, estos elementos que se añaden a la barra lateral se denominan Widgets.

 

sidebar o barra lateral

Ejemplo de barra lateral o Sidebar en página web

 

 

3.2.4.- Botón de volver arriba

 

Cuando hacemos scroll hacia abajo en el contenido de una página, en algunos sitios webs, se muestra una flecha apuntando a la cabecera o header de la página.

Si hacemos clic en el botón, el contenido que se visualiza en el navegador se desplazará hasta la parte superior y se nos mostrará la parte superior de la página, como si volviéramos a acceder a ella.

Este tipo de recurso es muy interesante en sitios web que tienen páginas con mucho contenido, ya que evitan que el usuario tenga que volver a la posición en la página a través del scroll del navegador o la ruleta del ratón.

 

boton en página web de volver arriba

Botón de volver arriba

 

 

3.3.- Elementos dentro del footer o pie

 

En el footer o pie de una página web también hay una serie de elementos característicos que habitualmente se suelen utilizar.

El footer se suele dividir en dos bloques, uno de más altura situado en la parte superior del footer y otro más estrecho situado debajo.

 

 

3.3.1.- Bloques footer o widgets

 

En la partes superior del footer se suelen ubicar diferentes bloques informativos. Esta parte superior del footer se suele dividir en 2, 3 o incluso 4 columnas.

En cada columna se suele colocar un bloque informativo, que en el caso de utilizar WordPress se denominan Widgets.

 

 

3.3.2.- Información legal

 

Uno de los bloques habituales que se sitúan en la partes superior del footer, es un bloque con enlaces a la información legal de la web.

Habitualmente se colocan aquí, enlaces al Aviso Legal, Política de Privacidad y Política de cookies. Si se trata de una tienda online, también se suele ubicar aquí un enlace a las condiciones de compra.

 

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

3.3.3.- Datos de contacto

 

También se suele utilizar en la parte superior del footer un bloque informativo con los datos de contacto de la empresa, como el teléfono, email y dirección.

En muchas ocasiones se recurre a pequeños iconos que se sitúan a la izquierda de cada dato de contacto.

 

 

3.3.4.- Iconos redes sociales

 

También es habitual encontrar en el footer enlaces a las redes sociales en que está presente la empresa.

Se suelen colocar iconos con un enlace que dirigen al cliente a la página de la empresa de cada una de las redes sociales.

 

 

3.3.5- Los créditos de la página

 

Se denomina créditos a la barra inferior del footer, donde se suele ubicar el nombre de la empresa que ha desarrollado la web.

También es habitual encontrar simplemente el nombre de la empresa.

 

Si quieres MÁS sobre DISEÑO WEB, WORDPRESS, SEO… APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO SEGURIDAD Y ACTUALIZACIONES WORDPRESS (9 Clases)
3.- CURSO DIVI (33 Clases)
4.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
5.- CURSO MEMBERSHIP SITE (14 Clases)
6.- CURSO ELEMENTOR (14 Clases)
7.- CURSO ASTRA PRO (17 Clases)
8.- CURSO BLOOM + MAILCHIMP (7 Clases)
9.- CURSO SEO (19 Clases)
10.- CURSO BLOG WORDPRESS (32 Clases)
11.- CURSO WOOCOMMERCE (39 Clases)
12.- CURSO FLATSOME WORDPRESS (36 Clases)
13.- CURSO COLORES WEB (9 Clases)
14.- CURSO ANALYTICS (10 Clases)
15.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
16.- ETC. ETC...(Más de 30 cursos)
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com