Saltar al contenido

Tutorial Flatsome Theme

tutorial flatsome theme

Flatsome es uno de los temas de wordpress más vendidos para eCommerce.

Aunque no es nuestro favorito para montar tiendas online, ya que seguimos prefiriendo Ocean Wp para ello, sí que es muy bueno para este tipo de webs.

Sobre todo en la maquetación y en el montaje inicial de la web. Tiene un maquetardor visual propio llamado UX Builder, que es muy sencillo de usar.

Si te interesa aprender y conocer cuáles son las características, ventajas y desventajas de Flatsome, sigue leyendo…

Pros y contras

PROS

  • Muy fácil de usar.
  • Muy personalizable.
  • Demos disponibles.
  • Maquetador propio incluído.
  • Velocidad de carga muy buena.
  • Buen soporte.

CONTRAS

  • Nada para criticar

Instalación y configuración

La instalación de Flatsome es muy sencilla e intuitiva, contiene un instructivo parecido al de WooCommerce, en el que, paso a paso, comienzas la configuración incial.

Esta parte del theme es muy similar a Shopify. Su haz trabajado alguna vez en él, te recordará a su plataforma.

No solicita demasiados plugins para comenzar, eso es una buena señal.

configuración inicial flatsome theme

Personalizador

Dentro de Apariencia > Personalizar, solemos encontrar las opciones generales que se pueden modificar en la plantilla escogida.

Flatsome nos sorprende en este caso.

Desde allí, ya se puede comenzar a utilizar el maquetador visual. En la siguiente imagen, mostramos como maquetamos, en menos de un minuto, la cabecera del theme.

maquetador visual flatsome

Simplemente arrastrando y soltando los elementos que se encuentran en la parte inferior, y colocándolos donde querramos.

Incluso, decidimos modificarlo, agregando y cambiando algunos elementos para que veas lo sencillo que es:

construyendo el header en flatsome theme

Agregamos el botón de contacto, cambiamos los íconos de redes sociales por el mail y teléfono de contacto. Sólo arrastrando y soltando. Muy sencillo.

Footer

Una vez terminada la cabecera, pasamos a maquetar el footer para así, ya tener estas dos areas fundamentales terminadas.

Imaginábamos que le footer se debería de maquetar desde los widgets, y del personalizador, sólo podríamos darle algunos estilos.

Si, es así. Pero también nos encontramos con esto:

bloques personalizados flatsome

¡Bloques personalizados! Una grata sorpresa, así que allí vamos…

Cerramos el personalizador de wp, y en la barra lateral del escritorio, encontramos la opción de los bloques, asi que agregamos uno nuevo, al que llamaremos: footer.

bloques de flatsome

Para no perder demasiado tiempo, encontramos que Flatsome cuenta con una galería de secciones disponibles para los bloques, así que simplemente importamos una, y le hicimos algunas modificaciones.

Así quedó el footer:

footer flatsome theme

Puedes usar los elementos que quieras y tomarte todo tu tiempo para maquetar un footer que valga la pena.

Tienes una infinidad de opciones a disposición para poder obtener un diseño único.

También puedes hacer uso de los widgets y ampliarlo aún más.

Home page

En el caso de la home page, haremos lo mismo que con el bloque anterior, vamos a importar alguna de prueba y pasaremos la web a producción, para evaluar otros detalles técnicos más importantes.

El maquetado de cada parte del sitio, creemos que queda claro. Es muy similar a Elementor o a Divi.

home page flatsome

Importamos una demo que, incluso nos destruyó la cabecera porque funcionaba con cabecera transparente, pero quedó bastante bien.

Listo, ya tenemos lista la web, con su página de inicio, su cabecera y su footer.

Ahora queda ver qué es lo que nos ofrece Flatsome, además de su facilidad para construír la web, que no está nada mal.

Rendimiento

Al subir la web de local a un dominio de pruebas, instalamos el plugins WP Fatest caché para borrar la caché y pasarla por las herramientas que miden la velocidad.

Este fue el resultado:

velocidad de carga de flatsome

¡Sorprendente!

Aunque no tiene practicamente plugins instalados, sí que tiene WooCommerce, que es el principal culpable de todas esas peticiones y de ralentizar el sitio.

Con una buena optimización, incluso, se podría llegar a bajar a menos de un segundo, ya que ni siquiera nos molestamos en optimizar las imagenes.

Checkout y carrito

Algo que es fundamental en los themes que serán utilizados para tienda, es que puedas tener una customizción de las páginas de checkout y carrito, ya que las de Woocommerce suelen venir bastante mal optimizadas.

Flatsome nos sorprende nuevamente.

Tiene la posibilidad de eliminar la cabecera y el footer, para un checkout limpio y sin distracciones.

También se pueden editar los campos innecesario, y de hecho, ocultarlos.

También tienes la posibilidad de añadir contenido debajo del sidebar, como el siguiente:

customización del checkout flatsome

En donde puedes agregar, por ejemplo, imágenes o banners que aumenten la confianza o impulsen a finalizar la compra, ya que te permite agregar html.

Flatsome suma puntos. Otra vez.

Opciones avanzadas

En las opciones avanzadas, podemos encontrarnos que Flatsome nos ofrece algunas cosas interesantes que ayudan, como su promesa de venta dice, a tener una buena experiencia de usuario y una buena usabilidad con el theme:

Sección Custom CSS

opciones avanzadas flatsome

Adios a los media query. Flatsome nos permite añadir el CSS para mobile y para tablets en distintos lugares.

Aunque no era demasiado trabajo hacerlo desde el personalizador de WordPress en la sección clásica de CSS personalizado, ahorra algunos minutos de trabajo, y es más visual e intuitivo para su modificación.

Performance

performance flatsome

En la pestaña performance nos encontramos con las configuración típica que nos ofrecen los plugins de caché.

Recomendamos, por cuestiones de rendimiento, no usar nada de allí, si ya vas a usar un plugin de caché que las tenga. Tampoco el lazy load.

Otras opciones interesantes…

Flatsome es un theme que puede prescindir de muchos plugins. Cosas ínfimas, pero, pero ejemplo, el modo mantenimiento ya está incluído en el core, al igual Instagram y las APIS de Google que te permiten sincronizar mapas y el canal de youtube.

También tiene una pestaña de Woocommerce que te permite añadir código personalizado para darle aún mayor diseño a las páginas importantes, como el checkout y el carrito.

Íconos de medios de pago, disponibles para añadir al footer y al checkout desde el personalizador de wp.

Conclusión, ¿Vale la pena este tema para tienda online?

Si estabas pensando en comprar esta plantilla y adoptarlo como tema preferido para tus tiendas, si, vale mucho la pena.

Si lo que quieres es un thema que se adapte tanto a tiendas como a blogs, sitios de agencia o portfolios, no tanto.

Es excelente para construír tiendas rápido.

Tiene muchas opciones para personalizar Woocommerce, es fácil de usar, agiliza muchas tareas, y cuenta con galerías que te permiten inspirarte y crear sitios webs muy bonitos.

Sin duda, uno de los mejores temas de wordpress para tiendas online. De allí viene su fama y su enorme cantidad de ventas en themeforest.

¿Que te ha parecido el artículo? ¿Crees que nos olvidamos de algo? Seguramente que si.

Puedes dejarnos en los comentarios tus preguntas o sugerencias, ¡nos vemos en los próximos tutoriales!

5/5 (1 Review)