Tema adulador
Flatsome es un poderoso tema de WordPress diseñado para sitios web de comercio electrónico y viene con integración de WooCommerce.
Es uno de los temas de WooCommerce más populares en ThemeForest. Al momento de escribir este tutorial, había más de 174,500 ventas y una increíble calificación de 4.8 estrellas proveniente de más de 6,600 reseñas.
Flatsome está diseñado principalmente pensando en principiantes y usuarios no expertos en tecnología.
Esto es excelente para las personas que desean comenzar con un negocio en línea pero no saben cómo codificar o no tienen el presupuesto para contratar a un codificador profesional. Con Flatsome, podrás crear un sitio web de aspecto profesional utilizando herramientas sencillas e intuitivas.
Ahora, Flatsome viene repleto de toneladas de características y funcionalidades increíbles. Para mostrar lo que está disponible y cómo funciona, tenemos un tutorial rápido que le muestra cómo crear una página de producto WooCommerce usando Flatsome.
Entonces, sin más preámbulos, comencemos:
Tabla de contenido:
- Tema adulador
- Diferencia entre Flatsome, WooCommerce y WordPress
- Cree una página de producto WooCommerce usando el tema Flatsome
- Paso 1: seleccione un diseño para la página del producto
- (Opcional) Paso 2: crear la página del producto manualmente
- Paso 3: personaliza la página del producto
- Terminando
Diferencia entre Flatsome, WooCommerce y WordPress
Al dar la bienvenida a nuestros nuevos lectores, debemos incluir la información necesaria para garantizar que todos nuestros lectores estén en la misma página. Aquí discutiremos la diferencia en las tres terminologías que usaremos a lo largo de este artículo.
Comencemos con WordPress. Es una plataforma donde instalas diferentes temas y plugin para crear tu sitio web. Hay miles de plugin y temas disponibles para realizar otras tareas según sus necesidades.
WooCommerce es un plugin que instalamos en WordPress que le permite agregar diferentes funciones a nuestro sitio web. Con la instalación de este plugin podremos dotar a nuestra web y tienda online de funcionalidades adicionales como carrito de compra, procesamiento de pagos, gestión de productos, etc.
Por último, pero sin duda, uno de los elementos más críticos es el aspecto de nuestro sitio web. Flatsome es un tema que nos permite personalizar la perspectiva de nuestro sitio web según nuestros deseos. Por ejemplo, si el logotipo de su empresa es naranja, querrá reflejarlo en el color de su sitio web. Es lo que Flatsome puede ofrecerle.
Cree una página de producto WooCommerce usando el tema Flatsome
Dado que todos nuestros lectores tienen conocimientos sobre WordPress, WoCommerce y Flatsome, es hora de que avancemos hacia la personalización de la página de nuestro producto con el fantástico creador de UX que viene con el tema Flatsome. Es una función de arrastrar y soltar que hace que la vida del diseñador sea extremadamente fácil.
Casi todo el mundo ha comprado online, probablemente debido a los tiempos difíciles que hemos enfrentado en los últimos meses. Quedarnos en casa fue la solución más segura para todos nosotros. Es la razón por la que todos nuestros lectores estarán de acuerdo en que una tienda en línea es mucho más complicada en comparación con un sitio web estándar.
Sin embargo, con la ayuda de WooCommerce y Flatsome, esta tarea se ha vuelto extremadamente sencilla. Debes sentarte y planificar cómo se verá tu sitio web, y eso es todo. WooCommerce estará ahí para ayudarte con sus opciones de creación. Puede crear una tienda en línea funcional y completa en solo unos minutos con solo arrastrar y soltar.
Con WooCommerce y Flatsome podrás darle una nueva vida a tus ideas de tener una tienda online. Su sitio web debe tener un aspecto moderno y hermoso para que pueda atraer clientes. Por lo tanto, Flatsome es la mejor solución para todos tus problemas, así que descárgalo desde aquí y comencemos.
Flatsome tiene algunas características fantásticas, pero una de ellas es que se ha convertido en la mejor opción de más de 300.000 usuarios. Una herramienta definitiva ayuda a crear sitios web tremendamente receptivos sin tener que codificar una sola línea. Además, su capacidad para crear tiendas en línea únicas y altamente creativas lo hace aún más valioso.
Así que sin perder más tiempo pasemos al tutorial. Este tutorial lo lleva a través del proceso completo de diseño de la página de productos. Las imágenes le ayudarán a tener una mejor idea de cómo se desarrollará la tarea durante el proceso.
Paso 1: seleccione un diseño para la página del producto
Primero, comenzaremos seleccionando un diseño de la página de productos. Esta selección creará una página básica para nuestra tienda online, que personalizaremos según nuestros deseos más adelante. Esta guía paso a paso lo guiará a través del proceso de personalización de la página.
Para este amp , continuaremos con la opción Tienda Clásica. Sin embargo, no hay ninguna restricción para usted. El proceso de personalización será similar para cada diseño que seleccione. La única diferencia sería que la estructura básica de la página será diferente de la otra.
Pasando al personalizador de productos, le dimos el nombre de Barra lateral izquierda de altura completa.
Hay dos opciones disponibles para personalizar la página de productos. El primero se debe realizar con el generador de UX, mientras que el otro consiste en crear la página manualmente. Si seleccionas la segunda opción, tendrás que dirigirte a la documentación oficial y localizar códigos cortos. Si eres principiante y esta es tu primera experiencia construyendo una tienda online, te recomiendo optar por esta primera opción.
(Opcional) Paso 2: crear la página del producto manualmente
Aquí hay una captura de pantalla de la página de documentación oficial de Flatsome. Puede escribir los códigos cortos de palabras y buscarlos.
Una vez que presione buscar, se mostrará una lista de códigos cortos en la pantalla. Puede elegir los códigos cortos que sean importantes para la página del producto. Usar códigos cortos requiere menos esfuerzo, pero es esencial que tengas un poco de experiencia práctica con WordPress y el uso de códigos cortos.
Aquí está la lista de códigos cortos que puede usar en el sitio web para crear páginas.
En este amp , personalizaremos el diseño de la barra lateral izquierda de altura completa; así, estaremos copiando el código para el diseño. A continuación se muestra una imagen de la aplicación, pero puede copiarla fácilmente desde la estructura.
Comience creando un bloque con un título. Si desea desarrollar head, debe hacer clic en "Agregar nuevo" disponible en los bloques UX ubicados en su panel.
Puede nombrar el bloque según sus deseos. Aquí, en este amp , hemos denominado a la unión "Diseño de barra lateral izquierda de altura completa". A continuación, puedes ver los códigos cortos dentro del editor de bloques. Una vez que complete la copia de los códigos cortos deseados, puede presionar publicar.
Estaremos a la par después de este pequeño paso en el que podremos personalizar nuestra página según nuestros deseos. Ahora navegue hasta la opción de tema de la página del producto y presione el ícono de diseño personalizado.
Una vez completado, ahora podrá crear bloques desde el menú desplegable Diseño de producto personalizado.
Elija el bloque que acabamos de crear. Nuestro principal objetivo al crear ese bloque era crear una página de producto a partir de él. Según este amp , el diseño de la barra lateral izquierda de altura completa es el bloque, mientras que al final será como lo nombró.
Una vez completado, simplemente presione el botón Publicar; guardará la configuración.
Paso 3: personaliza la página del producto
Es hora de que comencemos a personalizar. Primero, navegaremos por la página de productos existentes desde la interfaz que configuramos anteriormente en los pasos.
Es importante que seleccione un producto en particular que necesitemos configurar. Debe tener detalles completos, imágenes del trabajo que necesitamos personalizar. De esta manera, el proceso se vuelve más cómodo para visualizar la sección de la página que crearás.
La opción del generador de UX está visible. Simplemente presione el botón para iniciar la personalización.
Una vez abierto el generador de UX, puede ver en la imagen que los elementos de la página del producto están disponibles en el panel lateral izquierdo de la página de su producto.
El panel lateral izquierdo es el bloque que creamos inicialmente. Lo creamos con la ayuda de los códigos cortos tomados de la documentación.
Tiene opciones para reordenar los elementos desde el panel lateral izquierdo y cambiar la configuración desde la opción de elemento. En este amp , reordenaremos el Precio disponible en el menú de la izquierda.
Además, también le permite reorganizar elementos de la vista previa del constructor y colocar componentes adicionales en la página del producto del constructor. En esta demostración, la sección Pestañas de Productos y el Producto Relacionado se han reorganizado con solo arrastrar y soltar.
Con la importante funcionalidad de arrastrar y soltar, Flatsome está listo para brindarle lo que busca en su sitio web. Con módulos altamente personalizables, puedes crear páginas fantásticas con facilidad. La función de arrastrar y soltar hace la vida aún más cómoda.
Terminando
Es imperativo tener un negocio en línea en esta era moderna porque la gente prefiere quedarse en casa para mantenerse segura. Así que comience a construir la primera tienda en línea de su negocio con Flatsome y cautive a sus clientes con su singularidad y creatividad. Además, no hay ningún desorden de código en el editor de contenido, solo unas pocas líneas de código corto. Flatsome es sin duda el mejor tema que he encontrado. Por lo tanto, no es necesario buscar ningún otro tema, simplemente presione el de descarga y comience a crear su tienda en línea personalizada de inmediato.
