La plantilla Flatsome, es la plantilla para Woocommerce más vendida en Theme Forest, que es el mayor mercado de plantillas para WordPress.

Flatsome es una plantilla especialmente ideada y diseñada para su uso con Woocommerce.

La plantilla Flatsome te va a sorprender por la gran cantidad de opciones de personalización que tiene y por todas las interesantes opciones relacionadas directamente con Woocommerce.

 

curso plantilla flatsome ux builder

MÁS INFO CURSO FLATSOME

 

La plantilla Flatsome ha conseguido ventas superiores a las 1000 unidades en un solo mes. Muy por encima de otras plantillas para Woocommerce como ShopKeeper (700 ventas), The Retailer (menos de 100), Bazar Shop (menos de 100), etc.

En el momento de escribir este post, la plantilla Flatsome ha conseguido más de 62.000 ventas. Encabezando la lista de ventas de plantillas específicas para Woocommerce.

Nota: En el siguiente enlace puedes ver el listado ordenado por número de ventas de las todas las plantillas específicas para Woocommerce, que se comercializan en Theme Forest, que es el mayor mercado de plantillas para WordPress: Plantillas más vendidas para Woocommerce

QUIERO LA PLANTILLA FLATSOME

 

 

 

VER CURSOS

 

 

ENLACES CON MÁS INFO SOBRE LA PLANTILLA FLATSOME:

 

 

1.- La plantilla Flatsome cuenta con un Page builder visual denominado UX Builder

 

La plantilla Flatsome cuenta con un constructor o page builder de tipo visual denominado UX Builder.

Es un constructor tipo Drag & Drop (arrastra y suelta). Es decir, se utiliza para crear el contenido de las páginas y su funcionamiento es a través de bloques.

Es un constructor visual. Es decir, iremos viendo los cambios en tiempo real. Eliminando de esta manera la necesidad de realizar vistas previas de los cambios que vamos haciendo.

La interface o pantalla del constructor visual se divide en dos partes:

 

i.- barra lateral izquierda: en la barra lateral izquierda se dispondrán los elementos que podremos añadir a la página, como: estructuras de diseño como secciones o filas. Bloques de contenido como botones, textos, acordeones, blog post, Divisores, iconos, formulario, galerías, mapa Google, etc. Módulos especiales para tiendas online Woocommerce como: Categorías de productos, Productos, Flip Book, etc.

En esta barra lateral izquierda también podremos ver un esquema general de la página a través de una estructura de elementos desplegables.

También aparecerán en esta barra las diferentes opciones de configuración de cada uno de los elementos que vayamos añadiendo a la página.

 

page builder de la plantilla Flatsome para Woocommerce

El constructor de la plantilla Flatsome es conocido como UX Builder

 

ii.- pantalla central: en el centro de la pantalla se dispondrá la mesa de trabajo donde iremos construyendo y maquetando el contenido de la página. Veremos los cambios en tiempo real, por lo que no tendremos que hacer previsualizaciones.

 

iii.- barra lateral derecha: en el lateral derecho tendremos una estrecha barra de menú, en la que podremos seleccionar visualizar el resultado en diferentes dispositivos: escritorio, Tablet y móvil.

 

 

2.- Configurador de opciones del tema en tiempo real

 

La plantilla Flatsome dispone de un panel de opciones de configuración del tema en tiempo real. Es decir, que los cambios en la configuración y personalización del tema los veremos reflejados en tiempo real en la web, y, por tanto, no tendremos que realizar pre visualizaciones.

Desde el configurador de temas podremos personalizar diseños generales del sitio web, como: el header (cabecera), menú, footer, blog, tienda, etc.

Entre otras muchas características, el configurador de temas dispone de: diseño global de la web en modo anchura completa, caja (box) y framed. Establecer una anchura personalizada del sitio web. Integración con más de 700 tipos de letras de Google (Google Fonts).

También disone de un montón de opciones específicas para Woocommerce

 

configurador de temas de la plantilla woocommerce Flatsome

Pantalla del configurador de temas de Flatsome

 

 

3.- Posibilidad de Importar demos o diseños gratuitos para Flatsome

 

Al crear el contenido de una nueva página utilizando el constructor de la plantilla Flatsome, podremos empezar de cero o cargar diseños de páginas profesionales o demos ya prediseñadas.

Aquí puedes ver todas las demos de la plantilla Flatsome

VER DEMOS

 

 

4.- Page builder o constructor para el header o cabecera, que marca la diferencia

 

La plantilla Flatsome incorpora un elemento revolucionario. El tema incorpora un constructor de header o cabecera.

Si, has oído bien. La plantilla Flatsome no solo incluye la opción de elegir entre varios diseños de cabecera, sino que también permite su personalización con un page builder visual e intuitivo tipo drag and drop (arrastra y suelta).

Es la primera vez que veo un constructor de este tipo en una plantilla wordpress. Es cierto, que este constructor de cabecera o header viene fenomenal en el caso de la creación de una tienda online con Woocommerce para colocar elementos como la barra de búsqueda y otros, en la posición deseada.

El constructor dispone de 3 filas. Una fila central que es la principal y luego una secundaria superior y una terciaria inferior.

Cada fila está dividida en varias columnas. De esta manera se crean diferentes zonas en cada fila del header o cabecera.

Bajo las tres filas se nos mostrarán una serie de elementos que podremos colocar en fila que queramos para ir personalizando el diseño del header más de lo que cualquier plantilla permite.

Los elementos que vamos añadiendo también disponen de opciones particulares de personalización y diseño. Las podremos ver, haciendo clic sobre el icono tipo engranaje que aparecen en cada elemento del header.

Podremos personalizar de manera independiente el header cuando se visualiza en escritorio, Tablet o móvil.

QUIERO LA PLANTILLA FLATSOME

 

page builder header de flatsome

Constructor del header o cabecera de la web

 

5.- Constructor o page builder de retículas de imágenes o banners

 

El page builder de la plantilla Flatsome permite crear retículas de imágenes o banners. Algo que es muy interesante como portada de una tienda online.

 

Ejemplo de banner grid o retícula de banners

Retícula de Banners (Banner Grid)

 

Podremos elegir entre diferentes tipos de estructuras de rejillas ya prediseñadas para construir nuestra rejilla de banners o imágenes.

Aunque luego podremos modificar dicha estructura añadiendo o quitando bloques (Grid ítems) para dejar la estructura de rejilla de imágenes o banners con un diseño totalmente personalizado.

 

diseños estructuras rejillas de banners con flatsome

Diseños de rejilla prediseñados para composición de banners o imágenes

 

Los bloques de la estructura de rejilla o grid, denominados “Grid ítems” en el constructor de la plantilla Flatsome permiten establecer anchuras desde 1 hasta 1/12 de la anchura de la pantalla y las siguientes alturas: 1, 1/ 2, 1/ 3, 1 /4, 2/ 3 y 3/ 4.

Con estas opciones prácticamente podemos construir cualquier diseño de estructura de imágenes o banners que se nos pase por la cabeza.

 

anchuras y alturas de los elementos de la rejilla de banners del ux builder

Posibles anchuras y alturas para los elementos (grid item) de la estructura de banners o imágenes de Flatsome

 

También permite introducir sliders de imágenes en los elementos estructurales o grid ítems.

 

 

6.- Construcción de sliders

 

El constructor de la plantilla Flatsome denominado UX Builder, también permite añadir slider a las páginas.

A la hora de crear slides para el slider podremos elegir entre simples imágenes (sin texto), banners (imágenes + texto), texto e incluso botones y estructuras de secciones.

 

Ejemplo de slider imágenes, texto y botones con el ux builder

Ejemplo de slider con banners y botones con la plantilla Flatsome

 

Existe una gran cantidad de estructuras predefinidas para combinar una imagen de fondo, con textos e incluso imágenes.

 

sliders predefinidos para Flatsome con Woocommerce

Diseños predefinidos para el slider de la plantilla Flatsome para Woocommerce

 

 

7.- Opciones específicas de la plantilla Flatsome para Woocommerce

 

Flatsome es una plantilla especialmente diseñada para utilizarla con Woocommerce como una tienda online.

Vamos a ver ahora las diferentes opciones específicas para Woocommerce que presenta esta fabulosa plantilla ideada para construir una tienda online.

 

 

7.1.- Constructor de páginas de producto (Product page builder)

 

La plantilla Flatsome presenta 9 diferentes diseños o layouts predefinidos para la construcción de la ficha de producto.

 

diseños de página de producto con la plantilla flatsome para wordpress

Elige entre 9 diseños para la ficha de producto (página de producto), o crea un diseño personalizado con la plantilla Flatsome

 

Aunque también puedes construir la ficha de producto con un diseño totalmente personalizado desde el UX Builder (constructor de Flatsome).

 

ficha de producto a medida con la plantilla Flatsome

Diseños ficha de producto o hacer un diseño personalizado con la plantilla Flatsome

 

Posibilidad de incorporar botones de “siguiente – previo” para la navegación por las fichas de producto de una a otra dentro de la misma categoría.

La plantilla dispone de una opción para seleccionar entre varios diseños de galería de un producto (galería horizontal bajo la imagen y galería en el lateral vertical)

Diferentes diseños de pestañas para mostrar el contenido de la ficha de producto (secciones, pestañas, acordeón, pestañas verticales, etc.)

Diferentes opciones de encabezamiento en la ficha de producto.

 

 

7.2.- Barra de búsqueda de productos por palabras incluida en el header

 

Algo que he echado en falta en la plantilla Divi. Incluir un buscador avanzado de productos en el header.

La plantilla Flatsome está especialmente diseñada para Woocommerce, por lo que no podía faltar un buscador de productos con tecnología Ajax en el header (opcionalmente se pueden ocultar del header, o mostrarlo con un icono en forma de lupa).

Conforme vamos introduciendo letras el buscador nos va dando resultados que concuerden con lo términos de búsqueda, en tiempo real (en inglés se conoce como “Live search”).

En los resultados que el buscador va mostrando en tiempo real se muestra: una imagen en miniatura del producto, el nombre y el precio de éste.

Puedes configurar algunas opciones de la barra de búsqueda como:

 

i.- Live Search: podemos activar o desactivar la búsqueda AJAX. Es decir, el que se vayan mostrando resultados conforme escribimos el buscador.

ii.- Texto: Personalizar el texto que aparece dentro del buscador (Placeholder)

iii.- Búsqueda de entradas y páginas: podemos activar o desactivar la capacidad del buscador de encontrar entradas de blog y páginas. Por defecto, buscará productos solo.

iv.- Buscar por referencia: Podemos activar o desactivar la opción de que el buscador sea capaz de encontrar productos por su referencia o SKU.

 

En la siguiente imagen puedes ver el buscador a través de un icono en forma de lupa. Pero también tenemos la opción de mostrar la barra de búsqueda directamente en el header

 

barra de búsqueda de productos con la plantilla Flatsome

Barra de búsqueda que se despliega desde un icono en forma de lupa (también se puede poner la barra directamente en el header)

 

 

7.3.- Diseño elaborado para la página de mi cuenta de Woocommerce

 

La página de “mi cuenta”, es aquella donde el cliente que ha iniciado sesión en la tienda online puede ver toda su información y la de sus pedidos.

Las plantillas que están especialmente diseñadas para Woocommerce (aunque sean compatibles), muestran una pantalla de “Mi cuenta” bastante pobre e insulsa.

La plantilla Flatsome muestra una pantalla de “mi cuenta” muy elaborada e intuitiva.

 

diseño página de mi cuenta con la plantilla flatsome para woocommerce

Página de cuenta de cliente con la plantilla Flatsome

 

 

7.4.- Un montón de opciones de diseño para mostrar productos Woocommerce en rejilla

 

Con el bloque o módulo “Products” del UX Builder podremos mostrar bloques de productos en la home o página interiores de casi cualquier manera:

 

i.- Rejilla: mostraremos los productos en columnas y filas. Es la forma tradicional y más vista para mostrar bloques de productos.

ii.- Slider: podremos mostrar los productos a través de un slider tradicional.

iii.- Carrusel: también podremos mostrar los productos a través de un carrusel.

 

carrusel de productos con Flatsome

Ejemplo carrusel de productos con la plantilla Flatsome

 

iv.- Composición (Grid Style): podremos mostrar también los productos a través de una composición. En esta composición aparecerán productos de tamaños más grandes combinados con otros más pequeños. Opción super original de esta plantilla.

 

mostrar productos en una composición o grid style con Flatsome

Mostrar productos en una composición (grid style) de difernetes tamaños con la plantilla Flatsome para Woocommerce

 

 

7.5.- Personalización del diseño de las páginas de categorías de productos Woocommerce

 

Un aspecto del que adolecen muchas plantillas es la posibilidad de personalizar las páginas de categorías generadas por Woocommerce.

Con la plantilla Flatsome podremos elegir el diseño o estilo en el que se muestran los productos de las categorías de la tienda: retícula, lista o retícula quebrada.

También podremos seleccionar el diseño de la página de categorías: sin barra lateral, con barra lateral izquierda, o barra lateral derecha.

Podremos establecer el número de productos que deben aparecer en cada fila. Es decir, el número de columnas. Y podremos personalizarlo de manera independiente para Escritorio, Tablet o móviles.

Algo que he visto bastante demandado de un tiempo atrás hasta ahora, es la posibilidad de que en Tablet o móvil se muestren más de un producto en la misma fila. Con las opciones anteriores se podría personalizar este diseño.

Podemos también personalizar también la posición del título y precio del producto.

Y un montón de opciones más que iremos viendo en próximos posts.

 

 

7.6.- La plantilla Flatsome incluye la funcionalidad de lista de deseos o wishlist

 

La plantilla Flatsome trabaja junto a un plugin de lista de deseos (plugin asociado a la plantilla que se instala tras ella). Es decir, podrás disfrutar fácilmente de esta interesante funcionalidad que no debería faltar en ninguna tienda online.

La incorporación de una lista de deseos o wishlist mejora la usabilidad de la tienda y aumenta las conversiones.

 

En este post puedes ver como puedes añadir una lista de deseos a tu Woocommerce, si usas otra plantilla diferente: Lista de deseos Woocommmerce

 

 

7.7.- Funcionalidad de vista rápida o quick View con Flatsome

 

La plantilla Flatsome incorpora por defecto la funcionalidad de vista rápida o quick view, que incorporan por defecto otros ecommerce como Prestashop.

Woocommerce por el contrario no incorpora por defecto esta funcionalidad.

Con esta funcionalidad, cuando estás viendo los productos de una categoría, se muestra un botón de vista rápida. Al pulsarlo, en vez de llevarte a la ficha de producto (cargando una nueva url), se abre una ventana emergente con un resumen de la ficha de producto. Desde la vista rápida podemos añadir el producto al carrito, volver a la categoría o ir a la ficha de producto.

 

vista rápida o quick view en la plantilla Flatsome

La plantilla Flatsome incorpora la funcionalidad de vista rápida de productos o quick view

 

 

7.8.- Opción de modo catálogo incluido con la plantilla Flatsome

 

La plantilla Flatsome incorpora la opción para poner la tienda en modo catálogo. Es decir, se mostrarán los productos de la tienda, pero no podrán ser comprados.

Con esta opción, la tienda online se transforma en un catálogo de productos.

Esta opción se puede cambiar en cualquier momento y transformar el catálogo otra vez en una tienda online.

Esta opción viene muy bien cuando nos vamos de vacaciones y queremos que se sigan mostrando todos los productos, pero que no se puedan realizar compras.

 

En este post puedes ver cómo poner Woocommerce en modo mantenimiento en caso de no tener la plantilla Flatsome: Modo catálogo Woocommerce

 

 

7.9.- Widgets de Woocommerce

 

La plantilla Flatsome incorpora algunos widgets específicos. Pero también lo que hace es crear un diseño atractivo para los típicos widgets específicos de Woocommerce.

 

diseño widgets woocommerce con flatsome

La plantilla Flatsome incorpora diseños atractivos para los widgets de Woocommerce e incorpora alguno nuevo

 

 

7.10 Más características de Flatsome específicas para Woocommerce

 

i.- Sidebar tienda: la plantilla Flatsome permite tener dos sidebars diferentes. Uno para la tienda online y otro para el blog. Algo muy demandado por los usuarios de tiendas realizadas con Woocommerce.

ii.- Contenido personalizado en categorías: podrás añadir contenido personalizado en la parte superior de las categorías de productos.

iii.- Diseños avisos: podrás elegir el diseño de los avisos de Woocommerce, que se muestran sobre las imágenes. Estos avisos se muestran en los productos nuevos, rebajados, etc.

iv.- botón de añadir al carrito rápido: opción de añadir un botón en las imágenes de los productos que se muestran en las categorías.

v.- Navegación móvil: especial cuidado muestra la plantilla Flatsome en la navegación en la versión móvil.

Conforme vayas haciendo clic en las categorías se irán desplegando las subcategorías, haciendo una navegación móvil ideal para tiendas online, donde no aparecen de golpe todas las categorías y subcategorías.

 

 

8.- Varios

 

i.- Velocidad de carga: Código optimizado para hacer a Flatsome una de las plantillas para WordPress/Woocommerce más rápidas.

ii.- la plantilla incluye un sistema de “Lazy loading” y “adaptative image” con la finalidad de mejorar la velocidad de carga de la web.

iii.- Diseños que venden: Los diseños de Flatsome ponen el foco en la experiencia de usuario para que la tienda online tenga un alto porcentaje de conversiones.

iv.- Actualizaciones: La plantilla Flatsome está en continua actualización y mejora para adaptarse a las nuevas versiones de WordPress y Woocommerce

v.- Móviles: Como no podía ser de otra manera el diseño de la plantilla Flatsome está optimizado para dispositivos móviles.

vi.- Slider: El page builder incluye sliders por lo que no es necesario instalar plugins externos para implementar esta funcionalidad.

vii.- Fuentes de texto: la plantilla incluye más de 700 fuentes de Google (+ 700 Google Fonts).

viii.- Actualizaciones automáticas: posibilidad de actualizar la plantilla de manera automática a próximas versiones. Es decir, opción de actualizar la plantilla con un clic desde el panel de administración de WordPress.

 

 

Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.