La misión de esta entrada de blog es formarte en el uso básico del page builder o maquetador visual de la plantilla Flatsome para WordPress y Woocommerce. Flatsome, es sin duda, una de las mejores plantillas del mercado orientadas a Woocommerce
De hecho, es la plantilla más vendida para Woocommerce en Theme Forest.
El page builder de la plantilla Flatsome recibe el nombre de UX Builder.
APÚNTATE A MI PLATAFORMA DE CURSOS ONLINE. ACCEDE A TODOS LOS CURSOS POR SOLO 10€/MES
QUIERO LA PLANTILLA FLATSOME
ÍNDICE UX BUILDER
- 1.- Acceso al UX Builder
- 2.- Presentación de la interface del UX Builder
- 3.- Añadir elementos a la zona de trabajo del UX Builder.
- 4.- Estructuras o elementos estructurales del UX Builder
-
5.- Elementos o módulos finales del UX Builder de Flatsome
- 5.1.- Elementos finales del UX Builder específicos para Woocommerce
-
5.2.- Elementos o módulos finales del UX Builder generales
- 5.2.1.- Button (botón) UX Builder
- 5.2.2.- Text (texto) UX Builder de Flatsome
- 5.2.3.- Banner UX Builder
- 5.2.4.- Accordion (Acordeón) UX Builder
- 5.2.5.- Blog posts (Entradas blog) UX Builder plantilla Flatsome
- 5.2.6.- Countdown (Cuenta atrás) Flatsome
- 5.2.7.- Divider (Separador) Flatsome
- 5.2.8.- Follow icons (iconos redes sociales) UX Builder
- 5.2.9.- Form (CF7) Contact Form 7
- 5.2.10.- Gallery (Galería) UX Builder
- 5.2.11.- Gap (Espacio)
- 5.2.12.- Icon Box (Caja icono) UX Builder
- 5.2.13.- Image (Imagen) Flatsome
- 5.2.14.- Image Box (caja con imagen) Flatsome
- 5.2.15.- Instagram feed Flatsome
- 5.2.16.- Logotipo
- 5.2.17.- Map (mapa) UX Builder
- 5.2.19.- Message Box
- 5.2.20.- Page (Páginas) UX Builder
- 5.2.21.- Portfolio Flatsome
- 5.2.22.- Price table (tabla precios) Flatsome
- 5.2.23.- Scroll to Flatsome
- 5.2.24.- Search Box Flatsome
- 5.2.25.- Share Icons (iconos de compartir)
- 5.2.26.- Tabs (Pestañas)
- 5.2.27.- Team Member (miembro equipo) Flatsome
- 5.2.28.- Testimonial (recomendaciones) UX Builder
- 5.2.29.- Title (título) UX Builder
- 5.2.30.- Vídeo UX Builder
- 5.2.31.- Vídeo button
1.- Acceso al UX Builder
Para usar el page builder o maquetador visual de la plantilla Flatsome crea o edita la página en la que quieres utilizarlo.
Si la página es nueva, ponle un título y guarda como borrador.
A continuación, haz clic en la pestaña del editor con el texto “UX Builder” y se cargara el constructor o page builder.
Abrir page builder UX Builder de Flatsome
2.- Presentación de la interface del UX Builder
Al acceder al page builder o maquetador visual UX Builder, de la plantilla Flatsome, podemos distinguir 3 zonas diferente en la interface o pantalla.
Zonas de la interface o pantalla del UX Builder
i.- Zona configuración: la zona situada más a la izquierda de la interface del UX Builder, que hemos denominado Zona de Configuración y principalmente nos servirá para:
- Ver un esquema global e interactivo de la estructura y elementos de la página
- Trabajar las opciones de configuración de todos los elementos
- Seleccionar el elemento o estructura que queremos añadir a la zona de trabajo
- Guardar los cambios que vayas haciendo con el maquetador
ii.- Zona de trabajo: la zona central de la interface del maquetador visual UX Builder, que hemos denominado zona de trabajo, es la zona en la cual iremos construyendo la estructura y maquetación de la página de wordpress en la que estamos trabajando.
iii.- Zona opciones de visualización: En el lateral derecho de la interface, que hemos denominado Zona de opciones de visualización, veréis una delgada columna con varios iconos. Esta zona de la interface servirá para seleccionar la forma en la que queremos visualizar la zona de trabajo.
Podremos elegir entre visualización de escritorio, Tablet o móvil. De esta manera, en cualquier momento podremos ver como queda la página que estamos trabajando en cualquier tipo de dispositivo.
QUIERO LA PLANTILLA FLATSOME
3.- Añadir elementos a la zona de trabajo del UX Builder.
Vamos a diferenciar entre elementos o módulos estructurales y elementos finales. Los elementos estructurales sirven para crear la estructura general de la página.
Por el contrario, los elementos finales son los elementos que se colocan habitualmente dentro de las estructuras anteriores.
Cuando accedemos por primera vez al UX Builder en una página, veremos que en la zona de configuración aparece un botón con el texto: “Add to contenido” y en la zona de trabajo un enlace con el texto: “Add elements”.
Ambos sirven para lo mismo, para añadir elementos o módulos estructurales o finales a la zona de trabajo de la página.
Añadir elementos a la página con el UX Builder
Si haces clic en cualquiera de los dos elementos verás que en la parte izquierda de la pantalla (zona de configuración) aparecen una serie de elementos que podremos añadir a la zona de trabajo.
4.- Estructuras o elementos estructurales del UX Builder
Como te comentaba antes, diferenciaremos entre elementos estructurales y elementos finales. Los elementos estructurales sirven para crear la estructura general de la página.
Por el contrario, los elementos finales son los elementos que se colocan habitualmente dentro de las estructuras anteriores.
Cuando seleccionamos añadir un elemento a la zona de trabajo, en la zona que hemos llamado de configuración (zona izquierda) aparecerán una serie de posibles elementos.
Estos elementos están clasificados en:
- i.- Diseño de pantalla: son los elementos estructurales del constructor. Sirven para crear estructuras en la página, y son los que vamos a ver en este apartado.
- ii.- Contenido: son elementos finales, con funcionalidades específicas y que habitualmente se incluyen dentro de los elementos estructurales anteriores.
- iii.- Shop: son también elementos finales, pero en este caso todos con funcionalidades específicas para tienda online.
Elementos para añadir a la página
Vamos a ver ahora una descripción de los diferentes tipos de elementos estructurales que podemos utilizar con el UX Builder:
QUIERO LA PLANTILLA FLATSOME
4.1.- Section (Sección) UX Builder
Es el elemento principal de cualquier page builder. Es el contenedor más grande del constructor.
En el podremos incluir diferentes estructuras de columnas. Puede haber más de una sección en una misma página
Las secciones, con diferentes colores de fondo o imágenes de fondo, se utilizan dentro de una misma página para dividir el espacio de ésta en diferentes zonas o partes. Haciendo de esta manera más fácil, clara y agradable la lectura de una página. Las sirven para separar contenidos diferentes dentro de una misma página.
Ejemplos de Secciones UX builder
4.2.- Row (Fila) UX Builder
El elemento estructural Fila, sirve para compartimentar el espacio en columnas. Lo habitual, será añadirlas dentro de una sección, aunque también se pueden añadir fuera de una sección.
Este elemento del UX Builder permite añadir filas con distribuciones de columnas tipo:
1
1 /2 + 1 /2
1 /3 + 1 /3 + 1 /3
1/ 4 + 1 /4 + 1 /4 + 1 /4
Etc.
Aunque debemos tener muy en cuenta que podremos ensanchar o acortar la anchura de las columnas de manera individual, poniendo el cursor entre dos columnas y arrastrando.
Dentro de las columnas colocaremos los elementos finales del UX Builder.
Ejemplos Rows filas UX Builder
4.3.- Slider UX Builder
Este elemento nos permitirá añadir un slider con el UX Builder.
Gracias a este elemento podremos añadir diferentes tipos de slider: Slider tipo Banner (imagen + texto + botón), Slider tipo imagen (solo con imágenes) y Slider tipo Logotipo.
4.4.- Grid (rejilla) UX Builder
Este es un elemento estructural muy interesante para tiendas online.
El elemento Grid o rejillas del UX Builder nos permitirá añadir una retícula personalizada en la cual podremos poner imágenes, banners e incluso sliders.
Podremos elegir entre diferentes retículas prediseñadas, como punto de inicio. Pero luego las podremos modificar y personalizar para dejarlas 100% a nuestro gusto.
QUIERO LA PLANTILLA FLATSOMEEn estas estructuras podremos incluir imágenes, banners (imágenes + texto + botón) e incluso sliders.
Este elemento no es nada práctico. Sirve para añadir las páginas hijas de una página principal a modo de menú (vertical u horizontal).
Lo cierto, es que no se que para qué nos puede servir este elemento estructural del UX Builder.
4.6.- Page Header (encabezamiento de página) UX Builder de Flatsome:
Este elemento del UX Builder de Flatsome sirve para añadir un subheader o header de página.
Vaya lío ¿a qué te refieres? – Seguro, que te lo estás preguntando
Pues me refiero a una cabecera o header específico para la página que estamos creando y que aparecerá justo debajo del header o encabezamiento general del sitio web.
En este tipo de cabeceras de página se suelen mostrar elementos como: el título de la página, las migas de pan o breadcrumbs o iconos de compartir en redes sociales.
Podremos personalizar dimensiones de esta barra, color de fondo, elementos que queremos mostrar (breadcrumbs, iconos, título página), etc.
Encabezamiento de página con el UX Builder
4.7.- Widget área UX Builder
Este elemento nos permite añadir alguna de las barras de widgets que tengamos creadas en el apartado de “Apariencia > Widgets” de nuestro wordpress.
Al incluir el Widget área, tendremos que seleccionar que barra lateral o sidebar queremos añadir.
Al añadir una barra se mostrarán todos los widgets que haya incluidos en ella. También podemos añadir áreas de widgets del footer.
QUIERO LA PLANTILLA FLATSOME
5.- Elementos o módulos finales del UX Builder de Flatsome
Vamos a ver ahora los diferentes elementos finales del UX Builder de la plantilla Flatsome. Vamos a separar estos elementos según sean específicos o no para Woocommerce.
5.1.- Elementos finales del UX Builder específicos para Woocommerce
Vamos a ver en primer lugar los elementos finales del page builder de la plantilla Flatsome que son específicos para Woocommerce. Es decir, específicos para una tienda online.
5.1.1.- Product (Productos) UX Builder
Es el elemento principal entre los que ofrece el page builder de Flatsome para Woocommerce. Este elemento nos permitirá mostrar un conjunto de productos en diferentes formatos.
Podremos filtrar los productos que queremos mostrar por categorías de la tienda, los más vendidos, los destacados o seleccionándolos directamente.
Podremos mostrar un carrusel de productos con diferentes diseño (opción slider del page builder), podremos mostrar los productos en rejilla o estructura reticular (masonery style lo denominan en el UX Builder), también con el típico slider y con una estructura de tipo grid (grid style lo denominan en el constructor) personalizada como vimos con las imágenes, y que es muy interesante para la home de una tienda online.
Ejemplos elemento Products Flatsome
5.1.2.- Product list (Lista productos) Flatsome
Este elemento o módulo del UX Builder sirve para añadir una lista vertical de productos. Se mostrará una imagen en miniatura de cada producto, su nombre y precio.
Además, cada producto enlazará con su correspondiente ficha de producto.
Podremos filtrar los productos por categorías, seleccionándolos directamente, por más vendidos o por ser productos destacados.
5.1.3.- Product categories (Categorías de productos) Flatsome
Otro interesante elemento específico para Woocommerce, que permite mostrar un conjunto de categorías de la tienda.
Podremos mostrar dichas categorías del catálogo a modo de slider, carrusel, estilo Grid (estructura a medida), masonry (estructura reticular), etc.
5.1.4.- Flip Book Flatsome
Este elemento nos permitirá añadir algo interesante y novedoso, un slider con varias fichas de producto.
Podremos añadir los productos filtrándolos por categorías o añadiéndolos directamente.
Aquí tienes un ejemplo del Flip Book:
5.1.5.- Woo Products (Productos Woocommerce)
Aquí reflejamos 6 elementos diferentes. En todos ellos verás el icono de Woocommerce y sirven para mostrar un bloque de productos.
Los 6 elementos son: Product – Best selling (más vendidos), Product – custom, Product – Featured (destacados), Products – on sale (en venta), Products – recent (recientes), Products – top rated (mejor valorados).
Estos elementos no tienen apenas opciones de personalización, por lo que siempre es preferible utilizar el elemento productos del UX Builder, en vez de éstos.
QUIERO LA PLANTILLA FLATSOME
5.2.- Elementos o módulos finales del UX Builder generales
Ahora vamos a ver elementos no específicos para Woocommerce del Page builder de la plantilla Flatsome.
Típico módulo para poder añadir un botón a la página.
Disponemos algunos diseños predefinidos en la opción: “Style”. Aunque podemos personalizar la estética del botón en aspectos como: curva esquinas (Radius), sombreado (Depth), añadir icono, animación, sombreado hover.
Se echa en falta poder seleccionar fácilmente colores personalizados.
Ejemplos de diseño elemento button
5.2.2.- Text (texto) UX Builder de Flatsome
Módulo para añadir un bloque de texto que podremos formatear con el editor que viene por defecto con WordPress.
Tiene la opción de añadir bloques de texto combinado con otros elementos. Como podría ser una imagen, etc.
Hay opciones de diseño integradas en el editor por defecto de WordPress independientemente de las que trae el editor por defecto. Como tamaño del texto, animaciones, etc.
Ejemplos elemento texto
Este módulo o elemento permite añadir un bloque con imagen o vídeo de fondo, y en el cual se puede incluir o no un bloque de texto con botón en diferentes posiciones.
Podremos subir un vídeo de fondo o incluirlo directamente desde youtube a través de su ID.
Ejemplo Banner UX Builder
5.2.4.- Accordion (Acordeón) UX Builder
Un acordeón es un bloque formado por elementos desplegables que muestran un determinado contenido, con la peculiaridad de que solo puede habar un único elemento desplegado en un determinado momento.
Podemos añadir todos los elementos que queramos al acordeón duplicando sus elementos.
Este elemento se suele usar para las tradicionales “preguntas frecuentes” o FAQS.
Se echan en falta opciones de personalización de diseño del acordeón.
Ejemplo elemento acordeón
5.2.5.- Blog posts (Entradas blog) UX Builder plantilla Flatsome
Elemento con muchas opciones estructurales de personalización, que sirve para mostrar las últimas entradas del blog de variadas formas.
El elemento dispone de filtro por categorías del blog, e incluso la opción de seleccionar manualmente solo las entradas de blog que queramos mostrar.
Opciones para mostrar las entadas de blog en un slider, en modo rejilla, en modo carrusel y en modo grid personalizado.
Como digo, elemento muy completo e interesante.
Ejemplos blog posts UX Builder
5.2.6.- Countdown (Cuenta atrás) Flatsome
Este elemento sirve para añadir la típica cuenta atrás, que habitualmente se utiliza para la realización de algún tipo de lanzamiento de producto o servicio.
Aquí tienes ejemplos Countdown:
5.2.7.- Divider (Separador) Flatsome
Este elemento sirve para añadir una separación entre dos elementos. Esta separación puede ser invisible o visible a través de un divisor.
Podremos personalizar el color del divisor, anchura, altura y margen.
Este elemento sirve para añadir bloques de iconos de redes sociales en los que está presente la tienda.
Permite las redes sociales: Facebook, Instagram, Snapchat, Twitter, Linkedin, Pinterest, Google Plus, Youtube, Flickr, Vkontakte. Además, permite email, teléfono y rss.
5.2.9.- Form (CF7) Contact Form 7
Este elemento o módulo permite añadir un formulario realizado con el plugin Contact Form 7. Evidentemente, también se podría añadir a través del típico shortcode desde un elemento de texto.
Ejemplos elemento Form
5.2.10.- Gallery (Galería) UX Builder
Elemento que sirve para añadir una galería de imágenes.
Al hacer clic sobre un elemento de la galería, ésta se ampliará y aparecerán unos iconos de desplazamiento (flechas) para poder pasar de una a otra imagen. También podremos cerrar la imagen y volver a la galería.
Podremos personalizar la separación vertical y horizontal entre las diferentes imágenes que conforman la galería, el número de columnas, animación, características de las imágenes, y el texto.
Ejemplo elemento Gallery UX Builder
5.2.11.- Gap (Espacio)
Este elemento sirve para añadir un espacio en blanco o margen. Podremos personalizar la altura de ese espacio escribiendo su altura en píxeles.
5.2.12.- Icon Box (Caja icono) UX Builder
Este es el típico elemento de constructor para añadir y personalizar iconos. El problema de este builder es que no dispone de una fuente de iconos. Por lo tanto, tendrás que subir los iconos.
Eso sí, luego tendrás bastantes opciones para personalizar sobre dicho icono. También, podrás añadirle un título y subtítulo.
Ejemplos elemento Icon Box
5.2.13.- Image (Imagen) Flatsome
Este elemento o módulo permite añadir una imagen. Posteriormente podremos personalizar el tamaño de esta, enlace, opciones de movimiento al poner el ratón sobre ella, enlace, sombreado de la imagen, sombreado en posición hover, parallax, etc.
Se le pueden añadir un lightbox para que se abran en una ventana emergente. También se les puede poner un título o caption, que se muestre al poner el ratón sobre ellas.
Ejemplos elemento imagen
5.2.14.- Image Box (caja con imagen) Flatsome
Este elemento es una composición formada por una imagen y un texto. Evidentemente, esta composición también se podría crear de manera manual con un elemento imagen + un elemento texto.
Ejemplo Image Box UX Builder:
5.2.15.- Instagram feed Flatsome
Este elemento permite mostrar un conjunto de imágenes de nuestra cuenta de Instagram.
Tenemos bastantes opciones de personalización de la manera de mostrarse esas imágenes de nuestra cuenta de Instagram.
Ejemplo Instagram Feed
5.2.16.- Logotipo
Este elemento permite añadir un logotipo con un enlace
5.2.17.- Map (mapa) UX Builder
Este elemento o módulo nos permite añadir a la web un mapa de Google. Podremos personalizar diferentes opciones sobre él, como mostrar o no: zoom y el street view.
Podremos personalizar las dimensiones del mapa, posición y el zoom.
Ejemplos elemento Map.
QUIERO LA PLANTILLA FLATSOME
5.2.19.- Message Box
Este elemento está compuesto por un elemento texto y un elemento botón. Nos va a servir para añadir el típico Call to action (CTA).
Ejemplo Message box
5.2.20.- Page (Páginas) UX Builder
Nos permite añadir un conjunto de páginas.
5.2.21.- Portfolio Flatsome
Este elemento o módulo nos permite visualizar de diferentes maneras los proyectos creados con la opción Portfolio.
Los proyectos del portfolio se pueden categorizar y luego filtrar por dichas categorías.
Los proyectos se pueden mostrar más o menos del mismo número de formas estudiadas antes para el elemento producto: slider, carrusel, grid, etc.
Pero también se podrán mostrar filtros de categorías y mostrar en lightbox.
Ejemplo elemento portfolio:
5.2.22.- Price table (tabla precios) Flatsome
Este elemento sirve para mostrar una tabla de precios.
Cada elemento que generes será una de las columnas de la tabla de precios. Tendremos que añadir un elemento o modulo texto y un botón.
Elemento price Table
5.2.23.- Scroll to Flatsome
Elemento que se sitúa en el lateral derecho de la página, y que sirve para navegar rápidamente a través de las diferentes secciones o partes de la página.
La navegación se realizará a través de una serie de puntos verticales.
Al hacer clic sobre uno de ellos, el navegador se desplazará hasta la sección asociada con dicho punto.
5.2.24.- Search Box Flatsome
Este elemento nos permite reutilizar la barra de búsqueda de productos con tecnología Ajax en cualquier parte de la página.
Sin duda, lo habitual es tener la barra de búsqueda de productos en el header.
Para añadir una barra de búsqueda al header con Flatsome tienes un page builder específico para la cabecera. Aquí tienes un post sobre ello: header Flatosme
También puedes añadir alguna barra de búsqueda avanzada en alguna parte de la página, acompañando a la principal.
Similar al elemento de follow icons, con la diferencia de que ahora se mostrarán los iconos de las redes sociales más habituales, pero no para acceder a tus redes sociales sino para compartir contenidos.
Es decir, los iconos servirán para compartir la página en las principales redes sociales.
5.2.26.- Tabs (Pestañas)
Este elemento sirve para añadir contenido clasificado en pestañas.
Lo cierto es que este elemento es cada vez menos utilizado, pero la verdad es que la mayoría de page builders lo siguen incluyendo. Permite pestañas verticales y horizontales.
En la mayoría de las ocasiones prefiero el acordeón o similar para añadir contenido desplegable.
Ejemplo elemento Tabs Flatsome
5.2.27.- Team Member (miembro equipo) Flatsome
Este elemento sirve para crear una página con el equipo que conforma la empresa. El elemento o módulo Team Member permite añadir: imagen, nombre, dedicación, redes sociales en las que está presente y texto descriptivo.
Podremos mostrar los miembros del equipo según diferentes diseños.
5.2.28.- Testimonial (recomendaciones) UX Builder
Elemento muy utilizado hoy en día, y que sirve para añadir recomendaciones en nuestra página web.
Con este elemento podremos añadir en cada recomendación: imagen, nombre, dedicación, texto recomendación y valoración.
Podremos mostrar las diferentes recomendaciones según diferentes patrones de diseño: carrusel, boxed o caja, slider, etc.
Ejemplos elemento Testimonial:
5.2.29.- Title (título) UX Builder
Elemento muy interesante, que nos permite añadir a la página títulos con diferentes opciones de diseño definidas por la posición y forma de una línea divisoria.
Ejemplo elemento Ttitle UX Builder
5.2.30.- Vídeo UX Builder
Este elemento permite incrustar vídeos de YouTube o Vimeo, a partir de su URL. Podremos personalizar su altura y la sombra perimetral del marco.
Este elemento también permite añadir vídeos de YouTube o Vimeo a través de un enlace. Pero en este caso no se incrustará el vídeo.
Se mostrará un icono de reproducción, y al hacer clic sobre él, el vídeo se mostrará en una ventana emergente.
Podremos poner el icono dentro de una imagen de fondo.
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í.
Si agrego un footer en la home con UX builder como Widget, ¿como puedo ponerlo en el resto de páginas? Es que solo se ve en la home y en los productos me gustaría que saliera en todos.
Muchas gracias por esta guia y esos videos gratis!
Buenas,
Lo siento, pero Flatsome aún no tiene theme builder por lo que no permite crear diseños o plantillas con el constructor y que se muestren en todas las páginas de la web (como header, footers, etc.)
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso Blog WordPress, Curso seguridad y actualizaciones en wordpress, Curso como crear una tienda online de éxito, Curso Woocommerce, Curso seguridad y actualizaciones en WordPress, Curso Divi, Curso Flatsome, Curso Elementor, Curso Prestashop, Curso Shopify, Curso alta e indexación web en google, cursos Analytics ecommerce, Curso como gestionar un blog, SEO general, SEO tiendas online, Curso copywriting, plantillas wordpress como flatsome, etc… (Más de 30 cursos)
Hola quiero la guia!
Hola Pablo.
¿a qué te refieres con que quieres la guía?
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso como crear una tienda online de éxito, Woocommerce, Curso FLATSOME, Curso alta e indexación web en google, cursos Analytics ecommerce, SEO general, SEO tiendas online, plantillas wordpress, Divi, Astra pro, , etc. etc.
Hola, gracias por tu ayuda.
Estoy trasteando con ux builder, con una web que me hicieron en wordpress. El problema que tengo es que hay una columna (hay texto e imagen a la derecha.
El caso es que quiero mover la imagen un poco más a la derecha, pero parece que no encuentro la forma. Podría insertar una pequeña columna en medio del texto e imagen. Pero en el aspecto del móvil se ve la imagen muy desplazada ( osea desde que se lee el texto hasta que se ve la imagen) Hay algún modo de hacerlo? No encuentro ningún sitio donde expliquen esto. Gracias
Hola, Joaquín, muchas gracias por tu blog es muy bueno.
Tengo una pregunta: Cómo puedo personalizar el diseño de un solo producto y no afectar la plantilla principal product page, es decir que los demás productos sigan con la otra plantilla (ya sea la predefinida o una personalizada)? ¿Se puede hacer?
Un saludo y muchas gracias
Hola Fernando.
Flatsome permite crear un diseño personalizado de ficha de producto. Puedes ver como hacerlo en este artículo: How to create a custom product page. Pero, por el momento, que yo sepa, esto afectaría a todos los productos. No es posible la asignación a unos productos y a otros no. Esto es debido a que aún la plantilla no dispone de un theme builder o diseñador de layouts o diseñador de plantillas (Por ejemplo, la plantilla Divi, si cuenta con un theme builder).
Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, sobre Flatsome, Divi, Woocommerce, SEO para tiendas online, Analytics para ecommerce, blog wordpress… etc. etc.
Estimado Joaquin, tengo en uso la plantilla de Flatsome, pero en las paginas que incorpora necesito cambiar los enlaces, en que sección puedo hacer esas modificaciones,
quiero cambiar los http:// por https:// pero no deseo utilizar ningun plugin para realizarlo, me puede ayudar con ese tema, que tenga buen día.
Buenas,
En principio esto tiene que ver con tu wordpress y no con tu plantilla.
¿tienes instalado un certificado ssl en el hositng?
Imagino que tu wordpress tiene todas las páginas con http y no https ¿verdad?
***Me gustaría también Informarte que desde mi plataforma de formación cursotiendaonline.com puedes Acceder a TODOS mis cursos online por solo 10 €/mes + ¡¡SOPORTE!!. En la plataforma tienes cursos sobre WordPress, Cursos sobre la Plantilla FLATSOME, Cursos sobre Woocommerce, DIVI, Cursos sobre SEO, SEO Tiendas online, etc. etc.
Para ver el temario de un curso en concreto, ve a cursotiendaonline.com busca el curso cuyo temario quieras ver y haz clic en «INFO CURSO» . Además, como te decía, los cursos inclye SOPORTE!!! ****
un saludo
Hola Joaquin,
Para editar la version para móviles ¿Debo instalar un plugin o hay alguna opción de editar la apariencia para móviles solo con las herramientas de esta plantilla?
De antemano, gracias por tu respuesta.
Hola Jean.
Tienes opciones en la misma plantilla. Por ejemplo, para la configuración del header en móviles, tienes en el consturctor de header de Flatsome la opción de personalizar los elementos de manera independiente en «Desktop» y «Mobile/Tablet»
Joaquin buenos dias, cómo se coloca un video, ya que coloco el id de youtube pero no lo carga. Gracias
Hola Martin.
Depende que elemento utilices para colocarlo. El editor de wordpress, un módulo texto del page builder, ….
Aquí tienes un post que habla sobre como añadirlo con un editor de texto: Insertar vídeo youtube WordPress
Hola Joaquin.
Tengo plantilla astra child pero a ir al buscador y buscar algun articulo me salen las imagenes descuadradas.. he probado con otro tema gratuito y parece que salen bien, no con todos los temas.. el problema que con estas plantillas no me convencen del todo…
Con FLATSOME sabes si me pasaria lo mismo al buscar productos las imagenes saldrian todas del mismo tamaño?? Muchas gracias
Hola José.
Debes utilizar el mismo tamaño de imagen para todos los productos. Porque en las plantillas que te muestren todas las imágenes iguales te recortarán las imágenes, y eso también puede quedar mal.
Como te digo, independientemente de la plantilla que uses, lo que debes hacer es usar siempre el mismo tamaño para las imágenes de producto
Excelente post Joaquín, ¡como siempre!
Gracias Eduardo
un saludo
Hola Joaquín.
Me gustaría saber dónde puede cambiar el font-size de partida de los h1, h2..etc..el punto de partida es demasiado alto y solo me deja bajarlo al 75%. No quiero los h1 tan grandes y soy incapaz de cambiarlo.
Gracias
Buenas Pepa.
Mira en «Flatsome > theme options > Style > Typography»
***Me gustaría también Informarte que desde mi plataforma de formación cursotiendaonline.com puedes Acceder a TODOS mis cursos online por solo 10 €/mes + ¡¡SOPORTE!!. En la plataforma tienes cursos sobre Flatsome, Woocommerce, WordPress, Cursos sobre SEO, sobre SEO para tiendas online etc. etc.
Para ver el temario de un curso en concreto, ve a cursotiendaonline.com busca el curso cuyo temario quieras ver y haz clic en «INFO CURSO» . Además, como te decía, los cursos inclye SOPORTE!!! ****
hola Joaquin,
excelente presentación de este tema flatsome
actualmente la estoy usando, podrías ayudarme con una duda?
me gustaría tener en la pagina principal un modulo de tienda o producto tipo rejilla o cuadricula pero al mismo tiempo sea un slider , es decir una cuadricula de 4 columna y 4 filas y para visualizar el resto de productos entonces solo lo deslizo hacia los lados, es posible lograr algo asi? habrá algún plugin para esto?
gracias de antemano por el tips
saludos
Hola Enrique.
No es posible. Puedes Crear un Slider, un carrusel o una rejilla. Pero, una rejilla que se comporte como un slider, que yo sepa no es posible
Hola!
Me gustaría saber si en esta plantilla se puede poner un vídeo en la ficha final del producto y, si no es así, cómo podríamos hacerlo.
Muchas gracias
Un saludo
Buenas Pepa.
Como en cualquier plantilla de WordPress, puedes incrustar un vídeo de youtube o vimeo. En este caso podrías hacerlo en la descripcion largar del producto.
Aquí tienes info de como se incrustan vídeo de youtube en WordPress
Hola Joaquin, me podrias ayudar con una duda sobre la plantilla Flatsome, no me deja poner imagenes unas al lado de las otras osea cuando quiero insertar una imagen se pone siempre debajo no me deja moverla a donde la quiero poner que es a la derecha de la otra
Capture:
https://ibb.co/f2QgWWN
Buenas,
cuando estés en una de las pestañas añade varias columnas, una columna para cada imagen.
Yo acabo de hacer una prueba y no he tenido problema para hacerlo
Buenos días, quisiera saber si me puedes resolver una duda que tengo con la plantilla de Flatsome.
Resulta que se puede importar una demo/plantilla predefinida y de ahí hacer tu propia web. El caso es ¿Cómo se puede realizar esto?
Otra duda es ¿por qué no se me cargan las grillas con los productos y sus precios? No me sale nada ni siquiera las imágenes de ejemplo que vienen con la web ¿Por qué puede ser?
Un saludo y muchas gracias 🙂
Hola Marina.
La importación se realiza a través de Flatsome Studio: Aquí tienes la info
Para el problema de carga de los productos, mejor acude al soporte de Flatsome para que puedan analizar tu caso concreto