homefinance blog
En más de un año vi una gran evolución en el editor de bloques de Gutenberg. En comparación con el clásico editor de WordPress, ahora podemos diseñar elementos en nuestras publicaciones y páginas que solo se podían hacer por codificación. Por ejemplo, con el editor clásico, la forma más fácil de mostrar una tabla en una publicación era crear la tabla mencionada en una hoja de cálculo, exportarla como una imagen y luego ingresarla en la publicación donde desea mostrar. Pero uno de los bloques que encontramos ahora en el nuevo editor de WordPress es el bloque de la tabla. Veamos cómo creamos una mesa con Gutenberg y en qué medida podríamos crear una tabla de precios con el mismo bloque.
El bloque de tabla La creación de una tabla es tan fácil como agregar un nuevo bloque de tabla en el que indicamos el número de líneas y columnas que queremos y alineamos.
Inserte una nueva tabla con el editor de bloques Gutenberg. En una tabla, podemos personalizar las siguientes propiedades:
Configuración para bloques de tabla.
También podemos indicar en cada alineación celular del texto y si la fuente es audaz o cursiva y agregar enlaces. Además, podemos cambiar la tabla en cualquier momento agregando o eliminando líneas y/o columnas. De esta manera vemos que podemos crear fácilmente la siguiente tabla:
! “Data-align =” Center “> Basic
10 Sitios
Esto es mucho más simple y rápido de lo que podríamos hacer con el editor clásico. Y el resultado obtenido ciertamente puede servir para mostrar una tabla de datos. Limitaciones de los bloques de tabla Aunque fue muy fácil para nosotros crear la tabla anterior, hemos encontrado muchas limitaciones. Por un lado, las tablas que diseñas con el bloque de mesa en Gutenberg no son receptivas. Es decir, la tabla no se rompe, pero se vuelve más pequeña sin poder mostrar los diferentes elementos de la tabla en las columnas: tabla que no responde por completo.
Una tabla que se adapta completamente a los dispositivos muestra los elementos de la tabla dividiendo la tabla en columnas, de modo que todas las celdas se muestren mucho mejor. Además de (in) la capacidad de adaptarse a los dispositivos, como puede haber notado, en una tabla no podemos cambiar fácilmente el tipo y el tamaño de la fuente, los colores, etc. en cada celda. Es decir, debido a todas sus limitaciones, el bloque de mesa Gutenberg no es útil para crear una tabla de precios atractiva para sus productos. ¿Cómo podemos crear estas tablas receptivas? Alternativo Bloque de columna Una alternativa sería intentar colocar la tabla con el bloque de columna: Básico para freelancers y sitios web personales 29 €/mes 1 Sitio 5,000 visitas a las páginas probadas
Inscribirse
Profesional para pequeños empresarios 89 euros/mes 5 Sitios 35,000 visitas a páginas probadas
Inscribirse
Negocio para equipos centrados en la optimización 259 euros/mes
? 10 Sitios 200,000 visitas a páginas probadas
Inscribirse
La ventaja del bloque de columna, en comparación con el bloque de la tabla, es que es completamente receptiva, y en una pantalla móvil veremos que cada uno de los planes se muestra detrás del otro.
Columnas receptivas.
Vemos que las columnas son completamente receptivas. Y ciertamente las columnas, para mostrar poca información y sin demasiadas complicaciones, son una alternativa a considerar.
Complementos para el bloque de precio Mi recomendación Si tiene que crear tablas de precios atractivas es instalar algunos de los complementos que incluyen bloques para él. Es posible que no le permita, sin tocar el código, ninguna personalización, pero en muchos casos puede lograr resultados muy elegantes. Veamos algunos ejemplos completamente integrados con el editor de bloques de Gutenberg. Coblocks Coblocks es un complemento que incluye un conjunto completo de bloques totalmente adaptados a Gutenberg. Uno de ellos es el bloque de la mesa de precios. Es muy simple y fácil de usar y, sin codificación, puede personalizar la cantidad de columnas y algunos aspectos relacionados con la tipografía, así como los colores de las columnas y el texto. Rápidamente tiene una tabla de precios completamente receptiva, como la presentada en la siguiente imagen. Cabeza de pantalla de una mesa creada por el precio.
GetWid de manera similar, GetWid Plugin también incluye un conjunto completo de bloques completamente compatibles con el editor de Gutenberg. Rápido, puede construir fácilmente una tabla de precios completamente receptiva, como esta:
Tabla de precios creada con un bloque del complemento GetWid.
En este caso, puede personalizar las fuentes y los colores de fondo y texto. Los bloques premium para los blogs de complementos premium de Gutenberg para Gutenberg también incluyen bloques con los que puede crear tablas de precios muy atractivas. A continuación, le muestro una imagen de la tabla de precios que creé con el bloque de precios insertado en las columnas.
Tabla de precios con complemento de bloques premium para Gutenberg. Este bloque le permite personalizar los colores, las fuentes, el tipo de botones, si desea incluir un icono, las propiedades de la pantalla de precios, las características y la descripción, entre otros. Como puede ver, le permite una personalización muy completa. Complementos Con editores integrados alternativamente, encontrará otros tipos de complementos que incluyen una tabla de precios incorporada que se integra en el tablero de WordPress y con el que puede crear tablas muy completas y personalizadas. Una vez que se construye la tabla deseada, esta tabla se puede incluir en cualquier página o publicación utilizando un código corto. Veamos algunos ejemplos: la tabla de precios receptivas de la tabla de precios receptivas es un complemento que agrega un nuevo editor de WordPress, por lo que puede crear tablas de precios. Puede agregar una gran cantidad de planes y personalizar cada uno de ellos. Para cada plan, puede agregar el nombre, el subtítulo, la descripción y el precio. También puede agregar una lista de funciones, personalizar el botón de compra y cambiar el esquema de color del plan.
Editor de la tabla de precios receptivos de complementos. Una vez que se crea el plan, solo tiene que agregarlo usando un código corto en la página de precios. Tabla de precios supsísticas La tabla de precios supsísticas agrega un editor de arrastre por codo al tablero de WordPress con el que puede construir tablas. Te ofrece muchos modelos de tablas receptivas. En la versión gratuita, tiene hasta 7 modelos disponibles.
Plantillas de mesa de precios supsísticas. Después de seleccionar el diseño de la tabla deseado, tiene un editor que le permite cambiar la cantidad de columnas y personalizar muchas características de cada uno de los planes que se muestran. También puede cambiar el aspecto en cualquier momento. Finalmente, como antes, la tabla se puede incluir en cualquier página o publicación de código postal. Otros complementos gratuitos que integran los editores de la tabla de precios son: Tabla de precios después del arrebato
Complemento de WordPress para tablas de precios: tablas de precios de luz de las aplicaciones Fatcat
Receptivo del generador de mesa de precios – Wricricing Builder
Tablas de precios de WRC
Generador de mesa de precios – Tablas de precios AP Lite
Tabla de precios TC después de Temecod
Tabla de precios – BH A WP Life
Conclusión Como puede ver, en WordPress tiene una amplia variedad de alternativas a las tablas de precios de construcción sin costos adicionales y sin tener que codificar directamente. Por lo tanto, es solo cuestión de elegir la opción que mejor se adapte a sus necesidades.
Recuerde que la página donde muestra los precios de sus productos. Obtiene lo más crítico para atraer a los clientes. Entonces, el tiempo que pases haciéndolo atractivo no será en vano. Y para inspirarlo, puede echar un vistazo al diseño de la tabla de precios de nuestro producto Nelio A/B Prueba, que es la que se destaca como la imagen presentada de esta publicación?
