Cómo crear una tabla de comparación en WordPress

Una tabla de comparación proporciona a los usuarios detalles rápidos sobre productos similares o diferentes, mostrándolos uno al lado del otro. Ayuda a los clientes a tomar decisiones y mejorar la experiencia del cliente en su sitio. Sin embargo, podría ser un poco complicado si desea agregar funciones personalizadas a su tabla de comparación. Afortunadamente, Elementor facilita el proceso, ofreciendo una amplia gama de suplementos útiles, como complementos felices. Con los complementos felices de la “tabla de comparación” del widget, puede mostrar fácilmente las funciones de varios productos en un solo cuadro. En este blog tutorial, aprenderá cómo crear una tabla de comparación dentro de su sitio de WordPress. Comencemos con la consulta básica
¿Por qué es importante comparar los productos para el sitio web de su empresa, una tabla de comparación se refiere a una tabla donde puede mostrar grupos de datos de múltiples productos o servicios uno al lado del otro para una mejor comprensión?

Ejemplo de tabla de comparación
Se utiliza principalmente en sitios comerciales electrónicos para compartir diferentes modelos de productos, imágenes, características, precios, descripción, etc. Sin embargo, los propietarios de sitios web también usan una tabla de comparación para demostrar que su producto es el mejor producto, comparando productos de competencia en la misma tabla. .
Ayuda a los clientes a encontrar las ventajas y desventajas de un producto de un vistazo. Usando estos datos efectivos de la tabla de comparación, los clientes pueden seleccionar el producto correcto en unos minutos y ahorrar un tiempo precioso. Qué felices complementos ayudan a crear una tabla de comparación de productos

Con el nuevo editor de bloques de Gutenberg, puede crear una tabla para sus necesidades básicas. Pero si desea crear una tabla de comparación de productos para comparar los productos, necesita un complemento de terceros o escribir un código personalizado para esta función. Esto consume mucho tiempo y dinero, porque el complemento gratuito viene con algunas características iniciales. Puede resolver este tipo de barreras utilizando el nuevo widget gratuito de Happy Addon llamado “Tabla de comparación”. Con este widget, puede crear y personalizar tablas receptivas de manera efectiva para comparar sus productos uno al lado del otro, de una manera más organizada. Veamos por qué necesita usar complementos felices widget:
Compatible con dispositivos móviles
Una gran biblioteca de plantillas prefabricadas
Agregue una imagen a una columna
Una amplia gama de íconos de asistencia
Dar modelos de mesa preparados
Diseñar la tabla de características perfectas en WordPress es el momento de mostrarle cómo usar la tabla de comparación de complementos de Widget Happy y crear una tabla de comparación de productos interactivos para su sitio web.
Antes de eso, debe instalar y activar los siguientes complementos en su sitio de WordPress:
Elementor (gratis)
Suplementos felices (gratis)
Siga: cómo diseñar su tabla de comparación con suplementos de elemento feliz, puede agregar la tabla de comparación en cualquier parte de su sitio, pero aquí, demostraremos el widget en una página vacía. También puede consultar esta guía para descubrir cómo crear una nueva página en WordPress. Estos son los pasos que debe seguir para crear la tabla de comparación:
Paso 1: Agregue el widget para la tabla de comparación
Paso 2: Administre la cabecera de la tabla 3: Administre la fila de la tabla
Paso 4: el botón maneja la mesa
Paso 5: Configuración de la tabla
Paso 6: tabla de comparación de estilo
Vamos a empezar:
Paso 1: Agregue el widget para la tabla de comparación primero, debe encontrar y agregar el widget al lugar correcto de su sitio web. Obtenga el widget en el área de la galería de widgets Elementor.
El área de contenido de la tabla de comparación Después de agregar el widget, obtenga el diseño predeterminado de la tabla, como en la imagen a continuación. El área de contenido tiene la configuración necesaria para administrar el contenido de la tabla. Aquí recibirás.
Cabezal

Fila de masa
Botón Tabke
Configuración de Tabal
Ahora, cubriremos cada una de las configuraciones, para que pueda administrar fácilmente el contenido de la tabla.
Paso 2: Administre el cabezal de la tabla La opción de tapa de la tabla le permite agregar el elemento principal de la tabla haciendo clic en el elemento Agregar. Puede copiar y eliminar un artículo. También puede establecer fácilmente la alineación (izquierda, central y derecha) y la posición del icono (izquierda y derecha) del contenido completo de la tabla.

Personalice las tablas para el cabezal de la mesa para personalizar el cabezal individual del cabezal de la mesa, primero debe abrir un elemento. Luego puede agregar el título, seleccionar el título de ancho de contenido de la etiqueta HTML, ingrese un icono, configure el color del icono y escriba una descripción.
El ancho completo de la columna se define como 100%. Aquí, observe que establecí el ancho de la columna en 60 (%). Esto significa que la columna característica recibe 60% de espacio, y las otras dos columnas obtienen un 20% de espacio. También puedes escribir una descripción. Primero, active la opción Descripción. Luego obtendrá el editor de texto para escribir la descripción. No tenemos que agregar la descripción, por lo que no la activamos. Agregue el encabezado pegajoso si desea agregar encabezado pegajoso, primero debe activar la opción de encabezado pegajoso. Luego, el encabezado de la tabla se mostrará en la parte superior cada vez que se agote. Pas 3: Administre la tabla de forma predeterminada, el widget viene con dos filas con columnas. Puede agregar una nueva línea y puede ingresar las columnas necesarias en ella. Para personalizar el contenido de la fila y la columna, debe abrir una fila o columna, luego cambiar el contenido de acuerdo con sus objetivos.

Agregue una nueva fila de tabla para agregar una nueva fila de tabla, primero debe hacer clic en Agregar artículo.

Después de eso, obtendrá la opción de insertar una fila. Debe elegir la fila en lugar de una columna y establecer el tipo de contenido -> vacío porque es una fila. No es necesario cambiar el tamaño de la imagen, así que manténgala de forma predeterminada.

Sin embargo, puede agregar tres tipos de contenido en la columna, como el título, el icono y la imagen.

Agregue una columna con el título para mostrarle cómo agregar una columna en una fila. Primero, debe agregar un elemento haciendo clic en el elemento Agregar. En segundo lugar, seleccione la columna (fila/columna) y establezca el tipo de contenido -> tit. Finalmente, puedes escribir el título del título.

Escriba la descripción Puede escribir una descripción bajo el título. Primero, muestre la opción Descripción. Luego obtendrá el panel del editor de texto y puede escribir la descripción a su manera. Agregué dos columnas. Y esta vez utilicé el tipo de contenido -> icono. Aquí está la visualización actual de la tabla.
Nota: Tenga en cuenta que cada vez que agrega contenido a una columna, el contenido se mostrará de derecha a izquierda. Paso 4: el botón Administre el botón Acceder al área de contenido-> Botón para la tabla, luego puede escribir el título e ingresar un enlace al botón.

Botón de personalización Puede agregar el estilo personalizado para decorar el botón. Active el estilo personalizado primero. Luego obtendrá la configuración esencial para agregar un nuevo estilo de botón. Agregue el botón de color de texto, color de fondo y sombra de caja. También puede agregar diferentes estilos al botón Rover.

Paso 5: Configuración de la tabla El área de configuración de la tabla le brinda la opción de establecer el ancho de la tabla dependiendo de sus dispositivos en su tableta y visualización móvil, las tablas se pueden llevar a cabo. De esta manera, controlará la capacidad de responder a la tabla.

Paso 6: La tabla de comparación de estilo de estilo tiene las opciones de estilo necesarias para personalizar la cabeza de la mesa, el giro de la mesa y el botón de la mesa.

Usando este widget, puede crear este tipo de tabla de comparación elemental para comparar su producto uno al lado del otro. El resultado final de la tabla de comparación de su producto Después de haber diseñado todas las partes de su tabla de comparación, obtendrá un aspecto perfecto para presentar sus productos de manera atractiva, incluidas características, imágenes y otros artículos. A continuación se muestra la tabla que creé hoy. Utilice diferentes opciones de estilo para hacer un diseño para alinear su marca. También puede consultar la documentación completa de la tabla de comparación. ¿Estás listo para crear tablas de comparación en tu sitio web de WordPress? Una tabla de comparación interactiva ofrece a los usuarios una mejor vista al comparar los productos. Diseñar una tabla de comparación usando el elemento y complementos felices ya no es difícil si sigue los pasos anteriores. En esta guía, mostré por qué necesita usar el widget la tabla de comparación de suplementos felices. También le mostré cómo crear una tabla de comparación en su sitio web de WordPress. Si aún tiene alguna pregunta sobre este blog, puede comentar. Por favor suscribete para nuestras nuevas noticias. Recuerde iniciar sesión en nuestros canales sociales Facebook, Twitter y YouTube.

Suscríbase a nuestro boletín Obtenga las últimas noticias y actualizaciones sobre Elementor