Seleccionar página

Tablas Comparativas en WordPress

Tablas Comparativas en WordPress

Bienvenido al capítulo #1 del CURSO GRATUÍTO de maquetación Web para WordPress, donde te enseñaré cómo poder personalizar una TABLA COMPARATIVA para dar mayor profesionalidad a tu Web.

Gracias a los bloques de WordPress 5.X (Gutenberg) en adelante, la labor resulta aún mucho más sencilla, por lo que añadiendo un mínimo de edición en CSS y el nuevo editor… ¡Es pan comido!

Código CSS a añadir

/----TABLA-----/
 th {
     text-align: center;
 }
 .csstabla td:first-child{
     text-align: center;
     border-right: 2px solid black;
     width:40%;
 }
 .csstabla th:first-child{
     text-align: center;
     border-right: 2px solid black;
     width:40%;
 }
 .csstabla{
     border: 1px solid black!important;
     margin-bottom:10px;
 }
 @media (min-width: 600px){
 .csstabla td:first-child{
     padding-left: 0;
     display: none;
     text-align: center;
 }
 .csstabla th:first-child{
     padding-left: 0;
     display: none;
     text-align: center;
 }
 .csstabla{
     border: 1px solid black!important;
     margin-bottom:0px;
 }
 }
 @media (min-width: 499px) and (max-width: 781px){
 .wp-block-table {
     margin: revert!important;
     border: 0px black solid;
 }
 }
 .columnastabla{
     box-shadow: 0 5px 1rem 1px #C1BCC1;
     text-align: center;
 }
 @media (min-width: 782px){
 .columnastabla .wp-block-column:not(:first-child) {
   margin-left: 0px;
     border:0px solid black;
 }
 }
 .wp-block-buttons .wp-block-button {
     margin-top: 5px;
 }
 .wp-block-button__link:hover {
         background-color:red;
 }
 .wp-block-table{
     width:-webkit-fill-available;
     margin-bottom:0px!important;
 }
 .has-subtle-pale-blue-background-color {
     margin-bottom: 0.24rem;
 }
 .has-subtle-pale-green-background-color {
 margin-bottom: 0.24rem;
 }
 .has-subtle-pale-pink-background-color {
     margin-bottom: 0.24rem;
 }
 .has-subtle-light-gray-background-color {
     margin-bottom: 0.24rem;
 }
 figure figcaption {
     font-size: 0.88rem;
     color: #ff0505;
 }

Gracias a éste código es tan simple como seguir los pasos de edición de la creación de ésta tabla en como muestro en el siguiente vídeo:

SIN plugins, Responsive y desde el editor nativo

Con ésta forma de añadir tablas, podremos realizar de una manera súper sencilla y sin necesidad de plugins, en los cuales tenemos que editar fuera de la edición de nuestra página, de manera mucho más simplificada para no perder el tiempo y recursos web en plugins innecesarios.

Además, no olvidaros que gracias a los bloques de WordPress es posible Copiar y Pegar un conjunto de bloques! Tan fácil como copiar el bloque Columnas completo y pegar en nuestra siguiente página o web distinta, ya que es compatible copiar y pegar también entre webs distintas!!

Tablas comparativas prácticas, fáciles y adaptadas a móvil

¿Quieres saber cuál es el resultado? te muestro como queda tanto en escritorio como versión mobile, para que veas que tendrás un resultado profesional sin necesidad de plugins ni de otras herramientas súper complicadas

Resultado de la tabla comparativa en Desktop

Tabla comparativa de ejemplo que podrás ver en mi vídeo de YouTube

No sólo queda estéticamente bien, sino que tienes varias posibilidades de personalización, como color del botón, del hover de éste botón, distintas llamadas a la acción en nofollow para títulos, imágenes y botones….

Además, podrás destacar con un color ciertas columnas y añadirle notas para destacar lo más importante.

Resultado Responsive adaptado a móvil de la tabla comparativa

Ésta tabla totalmente responsive se adapta para todas las medidas de pantalla, mostrando de manera súper fácil y visual las descripciones más importantes que deseemos destacar.

Además, con llamadas a la acción claras que te ayudarán a convertir tus transacciones.

Lo mejor de ésta tabla es que podrás diseñarlo directamente desde tu página de wordpress, no tendrás que añadirla desde un shortcode o crearla en cualquier otro plugin complejo donde debes estar configurando parámetros o editando en un apartado externo.

Sobre el Autor

FernanTEC

💻Apasionado del mundo tecnológico así como de la ingeniería y en general, de todo tipo de herramientas y/o gadgets que nos faciliten la vida. Intento transmitir de manera práctica cómo poder sacarle provecho! espero que te sirva de ayuda! 😉

4 Comentarios

  1. Avatar

    Hola! muy buen artículo!! Una pregunta y perdón mi ignorancia: en donde incluyo el codigo css? porque lo incluí dsdeel personalizador de wordpress y no me funciono.
    Gracias!

    Responder
    • FernanTEC

      Perdón por la tardanza, cada theme tiene su lugar para añadir y quizás tenga preferencia a los estilos desde el personalizador de WordPress, si estas usando Orbital, añadelo desde Apariencia – personalizar – CSS Personalizado

      Responder
  2. Avatar

    Hola Fer:

    Una duda como puedo modificar el código CSS para que en la vista de escritorio me muestre la primera columna de la primer tabla con los datos como títulos, tamaño, etc ya que en la vista de escritorio oculta todo

    Soy nueva en esto, no se si me explique bien 🙂

    Responder
    • FernanTEC

      Buenas Claudia! asegúrate de que has copiado completo el código con las @media bien, y que las llaves { } estan bien copiadas tambien tanto al inicio como al final, dado que no te está cogiendo alguna por eso te pasa eso.

      Responder

Deja una respuesta

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

PROMOCIÓN FERNANTEC

APROVECHA ÉSTA OFERTA CON SERED:
🚀 2 MESES GRATIS 🚀
Código de DESCUENTO: FernanTEC
CLICK EN LA OFERTA:

sered oferta 2 meses gratis

O UN 10% ANUAL
🚀10% DESCUENTO🚀
Código de DESCUENTO: AnualTEC
CLICK EN LA OFERTA:

sered oferta DESCUENTO ANUAL

TEMAS WORDPRESS

orbital theme oferta orbital theme oferta