Crear una Price Table con Gutenberg

Tabla de Precios en Gutenberg

Tiempo estimado de lectura: 10 minutos

 

Cómo podemos crear una Price Table con Gutenberg

En esta ocasión vamos a crear una Price Table con Gutenberg (o Tabla de Precios), para hacerla, utilizaremos los bloques que Gutenberg tiene por defecto y un poco de código.

El resultado, como no puede ser de otra forma es muy vistoso y espectacular, y lo mejor de todo, nos ahorramos un plugin, que nunca viene mal 🙂

¡Vamos a ello!.

Crear una Price Table con Gutenberg

Lo primero que vamos a hacer es crear una página nueva que se llame Tabla de Precios (o el nombre que tú quieras darle). También podemos crear la Tabla de Precios en una sección de cualquier página que ya exista en tu web, por ejemplo, si tienes una página llamada Precios, y quieres poner la Tabla de Precios en algún lado de esta página.

A continuación vamos a crear una estructura parecida a esta:

Estructura para crear una Price Table con Gutenberg
Estructura para crear una Price Table con Gutenberg
  1. En el bloque que dice Añadir título, añadimos un título 🙂
  2. En el apartado que dice Empieza a escribir o teclea una barra inclinada hacia adelante para elegir un bloque, hacemos clic en el símbolo + y Elegimos la opción Elementos de diseño, Columnas. A continuación tenemos un regulador en la parte derecha donde podemos establecer el número de columnas: elegimos 3 columnas. Justo debajo del número de columnas, tenemos una opción llamada Avanzado, la desplegamos y en el campo Clase CSS le damos el nombre de precios. Si quieres ponerle otro nombre, tendrás que retocar el código que encontrarás más abajo.
  3. Ahora vamos a asignarle una clase a cada columna, para ello hacemos clic dentro de ellas y en la misma zona derecha, en el apartado Avanzado, ponemos el nombre de la clase que va a afectar a las columnas. En este caso la clase se llama precio-unico.
  4. Para cada columna, vamos a ponerle un título y un contenido. La forma más sencilla es ponernos dentro del contenido de la primera columna (que debe estar vacía), escribimos el título , lo seleccionamos y en el primer icono que nos aparece en una cajita flotante, elegimos la opción Encabezado. A continuación pulsamos Intro y escribimos el contenido para esta opción, en nuestro caso el texto Opción 1, Opción 2… Seleccionamos todas estas opciones y de nuevo, en el primer icono nos aparece en la cajita flotante, elegimos la opción Lista.
  5. Para escribir el precio (y poder salir de la lista), pulsamos dos veces la tecla Intro (igual que hacemos en Microsoft Word) y escribimos la palabra Precio seguido del precio que le vamos a poner a esta opción.
  6. Rellenamos el resto de columnas con sus contenidos.
Vista en el navegador de nuestra estructura
Vista en el navegador de nuestra estructura

A continuación, en el Escritorio de nuestro WordPress, vamos al menú Apariencia, Personalizar, hacemos clic en CSS adicional y pegamos este código:

.precio-unico {
border: .5px lightgray solid;
padding: .5em;
background-color: #CEECF5;
text-align: center;
}
.precios h2 {
background-color: #2E9AFE;
padding: .3em;
color: white;
}
.precios ul {
margin-left: 0;
}
.precios ul li {
list-style: none;
}
.precios ul li:nth-child(odd) {
background-color: #A9E2F3;
}
.precios p {
background-color: black;
color: white;
}

Y si todo ha ido bien,  este es el resultado de nuestra Tabla de Precios:

Resultado final de Crear una Price Table con Gutenberg
Resultado final de Crear una Price Table con Gutenberg

Y recuerda que si quieres añadirle los colores propios de tu marca, puedes cambiar los valores hexadecimales de la etiqueta background-color para cambiar el color de fondo de las columnas, y usar también la etiqueta color para cambiar los colores de los textos.


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *