Flatesome tema
Flatsome es un poderoso tema de WordPress diseñado para sitios web de comercio electrónico y viene con la integración de WooCommerce.
Es uno de los temas de WooCommerce más populares en ThemeForest. En el momento de escribir este tutorial, tenía más de 174.500 ventas y una impresionante calificación de 4.8 estrellas proveniente de más de 6.600 reseñas.
Flatsome está diseñado principalmente para usuarios principiantes y no expertos en tecnología.
Esto es ideal 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á crear un sitio web de aspecto profesional utilizando herramientas sencillas e intuitivas.
Ahora, Flatsome viene repleto de toneladas de características y funcionalidades asombrosas. 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 de WooCommerce usando Flatsome.
Entonces, sin más preámbulos, comencemos:
Tabla de contenidos:
- Flatesome tema
- Diferencia entre Flatsome, WooCommerce y WordPress
- Cree una página de producto de WooCommerce utilizando el tema Flatsome
- Paso 1: seleccione un diseño para la página del producto
- (Opcional) Paso 2: Cree la página del producto manualmente
- Paso 3: personalice la página del producto
- Terminando
Diferencia entre Flatsome, WooCommerce y WordPress
A medida que damos la bienvenida a nuestros nuevos lectores, debemos incluir la información necesaria para asegurarnos de 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.
Empecemos con WordPress. Es una plataforma donde instalas diferentes temas y plugin para crear tu sitio web. Hay miles de plugin y temas disponibles para cumplir con otras tareas según sus requisitos.
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 podemos hacer nuestro sitio web y tienda online con funcionalidades adicionales como carrito de la compra, procesamiento de pagos, gestión de productos, etc.
Por último, pero ciertamente, uno de los elementos más críticos es la perspectiva de nuestro sitio web. Flatsome es un tema que nos permite personalizar la perspectiva de nuestro sitio web de acuerdo con nuestros deseos. Por ejemplo, si el logotipo de su empresa es naranja, querrá reflejar el color de su sitio web. Es lo que Flatsome puede ofrecerle.
Cree una página de producto de WooCommerce utilizando el tema Flatsome
Dado que todos nuestros lectores tienen conocimientos sobre WordPress, WoCommerce y Flatsome, es hora de que avancemos a la personalización de nuestra página de productos con el fantástico creador de UX que viene con el tema Flatsome. Es una función de arrastrar y soltar que facilita enormemente la vida del diseñador.
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 el hecho de 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 fácil. Debe sentarse y planificar cómo se verá su sitio web, y eso es todo. WooCommerce estará allí para ayudarlo con sus opciones de creación. Puede crear una tienda en línea que funcione en toda regla 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 sus problemas, así que descárguelo desde aquí y comencemos.
Flatsome tiene algunas características fantásticas, pero una de las partes es que se ha convertido en una de las mejores opciones 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 algunas tiendas en línea muy creativas y únicas lo hace aún más valioso.
Entonces, sin perder más tiempo, vayamos 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 ex amp le, vamos a continuar con la opción Classic Shop. Sin embargo, no hay ninguna restricción para ti. 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 a la otra.
Continuando con el personalizador de productos, le dimos el nombre Barra lateral izquierda de altura completa.
Hay dos opciones disponibles para personalizar la página de productos. El primero se debe hacer con el constructor de UX, mientras que el otro es construir la página manualmente. Si selecciona la segunda opción, deberá dirigirse a la documentación oficial y localizar los códigos cortos. Si eres principiante y esta es tu primera experiencia construyendo una tienda online, te recomiendo que vayas por esta primera opción.
(Opcional) Paso 2: Cree la página del producto manualmente
Aquí hay una captura de pantalla de la página de documentación oficial de Flatsome. Puede escribir la palabra códigos cortos y buscarlos.
Una vez que presiones buscar, aparecerá una lista de códigos cortos en la pantalla. Puede elegir los códigos cortos que son importantes para la página del producto. El uso de códigos cortos requiere menos esfuerzo, pero es esencial que tenga 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 ex amp le, estaremos personalización de toda la altura dejó trazado barra lateral; por lo tanto, estaremos copiando el código del diseño. A continuación se muestra una imagen de la aplicación, pero puede copiarla fácilmente de la estructura.
Comience creando un bloque con un título. Si desea desarrollar la cabeza, debe hacer clic en "Agregar nuevo" disponible en los bloques de UX colocados en su tablero.
Puede nombrar el bloque según sus deseos. Aquí, en esta ex amp le hemos llamado la unión como el "diseño lleno de la altura a la izquierda de la barra lateral. A continuación, puede ver los códigos cortos dentro del editor de bloques. Una vez que termine de copiar los códigos cortos deseados, puede presionar publicar.
Estaremos a la par después de este pequeño paso en el que podemos personalizar nuestra página de acuerdo con nuestros deseos. Ahora navegue hasta la opción de tema de la página del producto y presione el icono 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 ex amp le, la altura total hacia la izquierda trazado barra lateral es el bloque, mientras que en su extremo, que será como lo han llamado.
Una vez completado, simplemente presione el botón Publicar; guardará la configuración.
Paso 3: personalice 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 establecimos anteriormente en los pasos.
Es importante que seleccione un producto en particular que necesitemos configurar. Debes 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 página que creará.
La opción del constructor de UX está visible. Simplemente presione el botón para iniciar la personalización.
Una vez que se abre el creador 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 sus productos.
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 del lado izquierdo y cambiar la configuración de la opción de elemento. En este ex amp le, vamos a reordenar 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 de 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, puede 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 a salvo. Así que comience a construir su primera tienda en línea con Flatsome y cautive a sus clientes con su singularidad y creatividad. Además, no hay ningún lío de código en el editor de contenido, solo unas pocas líneas de código corto. Flatsome es sin duda el mejor tema con el que me he encontrado. Por lo tanto, no es necesario buscar ningún otro tema, solo presione el botón de descarga y comience a construir su tienda en línea personalizada de inmediato.
