Cómo usar el constructor de header de la plantilla Woocommerce Flatsome (Header builder) + Vídeo

 

Una característica poco común en las plantillas para wordpress y Woocommerce es disponer de un constructor para el header o cabecera de la web (Header Builder).

La mayoría de las plantillas disponen de una serie de diferentes diseños de header para que podamos seleccionar el que más se aproxima a nuestras necesidades, y pare usted de contar.

 

 

Pues bien, la plantilla Flatsome, que es la más vendida para Woocommerce, dispone de un potente constructor de cabecera o header de la web (header builder).

 

MÁS INFO CURSO FLATSOME

 

Al igual que la mayoría de plantillas para wordpress, también dispone de una serie de diseños predefinidos. Pero tras seleccionar uno, podemos acabar de personalizarlo utilizando el builder del header (incluso modificarlo por completo). Pero para tener que hacer los menos cambios posibles, lo suyo es partir del que más se acerque al diseño que tenemos en mente.

QUIERO LA PLANTILLA FLATSOME

 

 

 

1.- Diseños de header de la plantilla Flatsome

 

Como antes comentaba, al igual que la mayoría de plantillas premium, la plantilla Flatsome cuenta con una serie de diseños predefinidos de header para la web.

Una vez elijamos uno de los diseños de header, podremos proseguir con la personalización de los elementos del mismo, a través del constructor del header.

Para seleccionar uno de los diseños predefinidos de header o encabezamiento iremos a las opciones del tema o personalizador de temas (theme options).

Para ir a las opciones del tema (theme options) podemos ir por varios caminos:

• i.- Menú lateral Flatsome: podemos acceder desde “Flatsome > Theme Options”
• ii.- Menú lateral Apariencia: podemos acceder también desde: “Apariencia > Personalizar”
• iii.- Menú superior: También se puede acceder desde el menú horizontal de la parte superior: “Flatsome > Theme Options”.

 

Una vez hayamos accedido a las opciones del tema Flatsome, haremos clic en la opción “Header > Presets”.

 

 

Si haces clic sobre cualquiera de los diseños de header, podrás visualizarlo en la ventana de la derecha.

Para fijar un diseño, haz clic en el botón “Publicar” que aparece en la parte superior.

Verás que los diferentes tipos de header se diferencian entre otras cosas, en el número de bloques horizontales que lo forman (1,2 o 3 bloques horizontales).

Ten en cuenta que se puede cambiar cualquier elemento que aparece en cualquiera de los diferentes diseños preestablecidos.

El único elemento fijo que depende del diseño de header elegido es el logo. Aunque en las opciones de configuración del logo, tendremos la opción de cambiarlo de posición.

Veamos los diferentes diseños:

 

i.- Diseño 1 header Flatsome: diseño de cabecera formado por dos bloques o barras horizontales. Con barra de búsqueda de productos plegada en icono con forma de lupa. Personalmente, me gusta más que la barra salga desplegada. Logo izquierda, en bloque principal.

ii.- Diseño 2 header Flatsome: diseño header formado por dos bloques o barras horizontales. Barra de búsqueda plegada en icono en forma de lupa. Menú en barra inferior. Logo centrado.

iii.- Diseño 3 header Flatsome: diseño de header formado por un único bloque o barra horizontal. Barra de búsqueda plegada en forma de icono. Menú en barra inferior. Logo izquierda.

iv.- Diseño 4 header Flatsome: diseño formado por 3 bloques o barras horizontales. Barra de búsqueda desplegada. Logo izquierda.

v.- Diseño 5 header Flatsome: diseño formado por 3 bloques o barras horizontales. Barra de búsqueda desplegada. Logo izquierda.

vi.- Diseño 6 header Flatsome: diseño de header formado por 1 solo bloque o barra horizontal. Barra de búsqueda plegada e icono de hamburguesa (menú hamburguesa) para desplegar el menú al estilo de un móvil (nav icon). Logo izquierda.

vii.- Diseño 7 header Flatsome: diseño formado por 1 solo bloque o barra horizontal. Barra de búsqueda plegada e icono de hamburguesa (menú hamburguesa) para desplegar el menú al estilo de un móvil (nav icon). Logo izquierda.

viii.- Diseño 8 header Flatsome: diseño header formado por 1 solo bloque o barra horizontal. Sin barra de búsqueda. Menú normal. Logo izquierda.

ix.- Diseño 9 header Flatsome: diseño formado por 1 solo bloque o barra horizontal. Sin barra de búsqueda. Menú normal. Logo izquierda.

x.- Diseño 10 header Flatsome: diseño de header formado por 2 bloques o barras horizontales. Barra de búsqueda desplegada y menú en barra principal. Logo izquierda.

 

Elige el que más se parezca al diseño de header que tienes en mente y haz clic en el botón “Publicar”.

 

 

 

2.- Estructura del constructor del header de Flatsome

 

Una vez hayas elegido un tipo o diseño de header, éste se previsualizará en la ventana de la derecha.

En la parte inferior de la ventana derecha se mostrará el constructor o header builder, que se divide en 4 zonas fundamentales.

 

i.- Menú header builder: En este bloque tenemos un menú con diferentes opciones. Entre las que destaca la posibilidad de personalizar el menú para dispositivos móviles. Luego veremos todas las opciones.

 

ii.- Mesa de trabajo: en la mesa de trabajo iremos colocando los diferentes elementos que queremos se muestren en el header. Si te fijas, verás que la mesa de trabajo está formada por 3 filas o bloques que se corresponden con los 3 posibles bloques que como máximo puede tener cualquier tipo de header.

 

 

iii.- Elementos header: en la parte inferior de la pantalla veremos los diferentes elementos que podemos añadir a la mesa de trabajo, para que éstos se muestren en el header de la web.

Algunos elementos aparecerán ya colocados en la mesa de trabajo. Unos u otros dependiendo del diseño de header que hayamos seleccionado.

 

iv.- Previsualización: en la parte superior de la pantalla podremos ir viendo los cambios en tiempo real de los elementos que vayamos añadiendo al constructor o editando.

 

 

3.- Funcionamiento del constructor o header builder

 

El funcionamiento del constructor es muy sencillo y se basa en el conocido sistema de “Drag & Drop” (arrastra y suelta).

Seleccionaremos el elemento que queremos añadir al header. Haremos clic con el botón izquierdo del ratón, y sin soltar el botón, arrastraremos el elemento hasta la mesa de trabajo. Soltaremos el botón del ratón en el momento en que tengamos el elemento en el lugar del header donde queramos mostrarlo (En el de destino aparecerá un rectángulo gris).

 

 

Los elementos que vayamos colocando en el header tienen diferentes opciones de personalización.

Para acceder a las opciones de personalización de uno de los elementos añadidos a la mesa de trabajo, haremos clic en el “icono en forma de engranaje”. Las opciones se desplegarán en el lateral izquierdo. Si el elemento no tiene icono en forma de engranaje significa que no tiene opciones de personalización.

 

 

Recuerda hacer clic en el botón “Publicar” para guardar cambios.

 

 

4.- Menú del header builder (Opciones del constructor del header)

 

Como antes he comentado, encima de mesa de trabajo y debajo de la previsualización tenemos un menú horizontal con una serie de opciones:

 

i.- Selector Desktop | Mobile / Tablet: si hacemos clic en “Desktop” procederemos a trabajar en el diseño del header de la versión escritorio de la web. Si hacemos clic en “Mobile / Tablet”, procederemos a trabajar en el diseño del header de la versión Tablet y móvil de la web.

Podemos personalizar de manera independiente el header para la versión de escritorio y móvil de la web.

 

 

ii.- Presets: si hacemos clic en esta opción se mostrarán en el lateral izquierdo todos los posibles diseños de header preestablecidos para poder seleccionar alguno de ellos.

 

iii.- Tutorial: si hacemos clic en este elemento, el navegador nos llevará a un vídeo en inglés sobre el uso del header builder. Mejor que veas el vídeo que he creado yo (en español).

 

iv.- Clear All: si hacemos clic en este botón, todos los elementos de la mesa de trabajo se borrarán y aparecerán en la zona inferior.

Todos los elementos, menos el logo, que es “fijo” dependiendo del diseño seleccionado. Aunque como mencioné antes, en las opciones de configuración del logo tendremos la posibilidad de cambiarlo de posición (pero no arrastrando y soltando)

 

v.- Close: si hacemos clic en este botón, se ocultará el constructor o header builder. Para que se vuelva a mostrar debemos ir a: “Header”.

 

QUIERO LA PLANTILLA FLATSOME

 

 

5.- Elementos del header.

 

Vamos a ir ahora viendo los diferentes elementos que podemos ir añadiendo al header builder o constructor de header y sus principales opciones de configuración.

 

 

5.1.- Elemento Main menú (Menú principal):

 

Es el menú principal de la web. La creación y gestión de menús, se hace desde: “Apariencia > Menús”. Para asignar un menú a este elemento, lo deberemos asignar a la zona “Menú principal”, en el apartado: “Dónde se verá” (En el vídeo de uso del header builder tienes un ejemplo).

Podremos colocar el elemento “Main menú” donde queramos.

 

 

5.2.- Elemento Top bar menú (Elemento menú superior):

 

Es otro elemento de menú, que habitualmente se muestra en la barra superior, pero que en realidad al igual que sucedía con el “Main menú”, lo podemos colocar en donde queramos.

Para asignar un menú a este elemento, marcaremos el check box “Top bar menu” en el apartado “donde se verá”, en la gestión de menús (también tienes un ejemplo en el vídeo).

 

 

 

5.3.-Elemento Social Icons (Elemento Iconos redes sociales):

 

El elemento “Social Icons” muestra los iconos de redes sociales en los cuales está presente nuestra empresa.

 

Entre las opciones de configuración destacan:

i.- Icons Style (diseño iconos): aquí podremos elegir entre varios diseños para los iconos de redes sociales

ii.- Urls de las redes sociales: pondremos la correspondiente URL en las redes sociales cuyo icono queremos que se muestre. Las que no queremos que se muestren las dejaremos en blanco.

Podemos colocar este elemento en la ubicación que queramos.

 

 

 

5.4.- Elemento Account (Elemento cuenta)

 

Este elemento permitirá acceder a los clientes a la página especial de Woocommerce denominada Mi Cuenta, donde los clientes pueden ver la información de su cuenta.

En caso de no haber iniciado sesión, esta página de Mi Cuenta mostrará el formulario para acceder a la zona privada del cliente.

 

 

Entre las opciones de configuración tenemos:

i.- Icon Style (Diseño del icono): Podremos elegir si queremos que se muestre un icono o no, y el diseño del mismo.

ii.- Show label (Mostrar etiqueta): Si marcamos esta opción aparecerá el texto: “MI CUENTA”. En caso contrario no aparecerá el texto

 

 

 

5.5.- Elemento Cart (Elemento Carrito)

 

Este elemento se corresponde con el enlace al carrito, que suele disponerse en el header de cualquier tienda online.

 

En icono del carrito tiene bastantes opciones de personalización:

i.- Cart Style (diseño carrito): desde aquí podremos elegir como se muestra el contenido del carrito.

Con la opción “Dropdown (desplegable)”, cuando pongamos el ratón sobre el carrito, se desplegará una ventana que mostrará el contenido del carrito. Si hacemos clic, nos iremos a la página del carrito.

Con la opción “Off-Canvas sidebar”, si hacemos clic sobre el carrito se mostrará una barra lateral deslizante con el contenido del mismo.

Con la opción “Link Only (solo enlace)”, si hacemos clic en el carrito nos iremos a la página del carrito.

 

ii.- Cart Icon Style (diseño icono del carrito): aquí podremos elegir el diseño del icono del carrito. El primer diseño muestra el número de elementos añadidos.

 

iii.- Cart Icon (icono del carrito): aquí seleccionaremos el tipo de icono que queremos mostrar. En el apartado anterior debemos haber elegido un diseño diferente al primero.

 

iv.- Custom cart icon (icono de carrito personalizado): esta opción sirve para subir un diseño personalizado.

 

v.- Show cart totals (mostrar totales en carrito): esta opción sirve para mostrar el importe total del carrito.

 

vi.- Show Cart title (mostrar título del carrito): esta opción sirve para mostrar el texto “Carrito”

 

 

 

5.6.- Elemento Search Form (Elemento barra búsqueda):

 

Este elemento se corresponde con la barra de búsqueda de productos de la tienda online que incluye por defecto la plantilla Flatsome.

 

Entre las opciones de configuración destacan:

i.- Search Form Style (diseño de la barra de búsqueda): la opción “Normal” se corresponde con una barra de búsqueda rectangular, mientras que la opción “Flat” muestra una barra de búsqueda con esquinas curvadas.

ii.- Placeholder text: este es el texto que aparecerá dentro del buscador antes de que el cliente escriba nada en él.

iii.- Search categories (buscar categorías): esta opción sirve para mostrar y ocultar el filtro por categorías.

iv.- Header Search Form width (anchura barra de búsqueda): esta opción sirve para establecer la longitud de la barra de búsqueda.

 

 

 

5.7.- Elemento Search Icon (Elemento icono de búsqueda)

 

A diferencia del elemento “Search Form”, ahora se mostrará un icono en forma de lupa. Al hacer clic sobre el icono se mostrará la barra de búsqueda de productos.

Habitualmente se usará este elemento o el elemento “search form”, pero nunca los dos al mismo tiempo, ya que sería bastante repetitivo.

 

Los principales elementos de configuración son:

i.- Search Icon Style (diseño icono de búsqueda): Aquí podremos seleccionar el diseño del icono en forma de lupa.

ii.- Search Icon Type (tipo icono búsqueda): Si elegimos la opción “Dropdown”, la barra de búsqueda se mostrará bajo el icono. Si por el contrario elegimos la opción “Lightbox”, la barra de menú aparecerá en una capa emergente.

 

 

 

5.8.- Elemento Nav Icon (Menú hamburguesa)

 

Este elemento nos permitirá añadir un icono tipo hamburguesa, del que se desplegarán los elementos que queramos.

Este elemento sirve para mostrar el icono del menú tipo hamburguesa en el header cuando se está viendo en modo dispositivo móvil. Pero también lo podemos mostrar en el header cuando la web se visualiza en modo escritorio.

 

Este elemento del header builder dispone de bastantes opciones de personalización:

i.- Mobile header Height (altura header en móviles): sirve para personalizar la altura del header en la versión móvil

ii.- Logo position (posición del logo): sirve para establecer la posición del logo, pero en la versión móvil.

iii.- Menú Icon style (diseño icono de menú): diseño del icono tipo hamburguesa

iv.- Show menú title (mostrar título menú): si marcamos esta opción se mostrará el texto “MENU” junto al icono tipo hamburguesa.

v.- Menu Overlay: en este apartado estableceremos como queremos que se despliegue el menú al hacer clic sobre el icono.

vi.- Menú elements (elementos del menú): aquí estableceremos los elementos que queremos que muestre el menú cuando se despliegue.

 

 

 

5.9.- Elemento Contact (contacto)

 

Con este elemento podremos mostrar diferentes medios de contacto. Podremos mostrar email, teléfono, horario de apertura y localización. Tienes un ejemplo de las opciones en el vídeo.

 

 

 

5.10.- Elemento Button (Elemento botón)

 

Un elemento muy interesante, ya que a veces nos interesa establecer algún item del menú del header como destacado. Esto es precisamente lo que podemos conseguir con el elemento Button.

Disponemos de 2 elementos tipo botón (Button 1 y Button 2)

Desde las opciones de configuración podremos personalizar el texto que aparece en el interior del botón (text), el enlace de destino (link), el radio de curvatura de las esquinas del botón (Radius), y otros.

 

 

 

5.11.- Elemento checkout button (botón pago)

 

Este elemento consiste en un botón que nos conduce directamente al comienzo del proceso de pago en la tienda online.

Este elemento no tiene opciones de personalización.

 

 

5.12.- Elemento Newsletter (botón suscribirse)

 

Este elemento mostrará un enlace para suscribirse a la newsletter de la web. El elemento dispone de varias opciones de personalización.

 

 

 

5.13.- Elemento Wishlist (Lista de deseos)

 

Una lista de deseos es un elemento fundamental hoy en día en una tienda online para facilitar la tarea de selección de productos al cliente. La plantilla Flatsome incluye esta funcionalidad (a través de un plugin) y con este elemento podremos mostrar el correspondiente icono en el lugar que queramos del header y con un diseño personalizado.

 

Entre las opciones de personalización destacan:

i.- Whishlist Icon (icono lista de deseos): aquí podremos seleccionar el tipo de icono asociado a la lista de deseos.

ii.- Whishlist Icon Style (diseño icono lista de deseos): aquí podremos elegir el diseño del icono que hemos elegido en el apartado anterior.

iii.- Show Wishlist Title (mostrar nombre): si lo marcamos mostrará un texto junto al icono.

iv.- Custom title (título personalizado): este será el texto que mostrará junto al icono, si así lo tenemos seleccionado en el apartado anterior. El texto que pondremos será o “Lista de deseos” o “Wishlist”.

 

 

 

5.14.- Elemento Languages (idiomas)

 

Este elemento mostrará un selector de idiomas, en caso de que estemos utilizando varios idiomas en la web.

Para que este elemento funcione correctamente se ha de instalar en wordpress el plugin WPML o el plugin Polylang.

 

 

5.15.- Elemento HTML y Block

 

Para introducir texto personalizado en el header disponemos de los elementos HTML y los elementos Block.
Los elementos HTML nos permiten añadir texto normal o código HTML (también podemos introducir shortcodes). Disponemos de hasta 5 elementos HTML.

 

Los Blocks (bloques) son elementos que debemos crear previamente en el apartado “Blocks” del menú lateral del panel de administración de wordpress. Para la construcción de un bloque podremos utilizar el editor por defecto de wordpress o el page builder de Flatsome.

Disponemos de 2 elementos blocks.

 

Cuando hacemos clic en la configuración de cualquiera de estos elementos nos aparecen las opciones para todos ellos.

 

 

 

5.16.- Elemento divisor vertical

 

También disponemos de un elemento tipo separador vertical que nos servirá para separar diferentes elementos situados uno junto a otro.

Este elemento no dispone de opciones de personalización.