Cómo Crear una Tabla Comparativa en WordPress

Publicada en la Categoría | Por

Cómo Crear una Tabla Comparativa en WordPress
4.5 (90%) 18 voto[s]

No fue sino hasta que me di cuenta que las tablas comparativas son lo que mejor convierte en mi página web que me volví bastante obsesionado con crear y colocar tantas como pueda en mis revisiones y guías de compra.

En esta entrada te explicaré cómo crear tablas comparativas en WordPress para comenzar a disparar las ganancias de tu web y multiplicar hasta por 3 veces las ganancias de tu página nicho.

¿Qué es una Tabla Comparativa?

Una tabla comparativa es un recurso gráfico que muestra información importante sobre los productos o servicios que se ofrecen en nuestras páginas webs.

tabla comparativa con tablepress en wordpress

Tal y como dije arriba, las tablas comparativas son las que mejor convierten (y por mucho) en mis páginas nicho de afiliación.

Eventos Analytics 4

¿Ves la imagen de arriba? Se trata de las etiquetas que consiguen más eventos en mi página nicho (aquí publiqué más información sobre cómo configurar los eventos).

La etiqueta “Ver Precio” es la que utilizo en mis tablas comparativas por lo que puedes ver que  sólo ese recurso recibe más del 30% de los clics que recibe amazon a través de mi página web .

No tengo forma de saber cuál es el porcentaje de esos clics que se transforma en ventas pero te puedo asegurar que muchísimo del dinero que genero día a día es gracias a las tablas comparativas en mis blogs.

Ya que sabes la importancia de las tablas comparativas en tu página web, a continuación te enseñaré la mejor forma de crearlas totalmente gratis.

¿QUIERES MEJORAR TU SEO HOY MISMO?

DESCARGA LA GUÍA CON 4 CONSEJOS PARA MEJORAR EL SEO DE TU PÁGINA WEB HOY MISMO

Son 4 simples consejos pero que mucha gente (yo incluido) olvida al principio de la creación de su página web. Además tendrás todos los contenidos publicados  en tu correo electrónico.

RESPONSABLE: MIJAEL FANDIÑO FINALIDAD: ENVÍO DE PUBLICACIONES Y CORREOS COMERCIALES. LEGITIMACIÓN: TU CONSENTIMIENTO. DESTINATARIOS: ACTIVE CAMPAIGN CON TITULAR ACTIVE CAMPAIGN LLC, ALOJADA EN EEUU Y SUSCRITA AL EU PRIVACYSHIELD.

Crear Tablas Comparativas en WordPress Gratis: TablePress

Para crear tablas comparativas en WordPress hay bastantes plugins, algunos son premium y otros son totalmente gratuitos.

Actualmente estoy usando un plugin premium del cuál hablaré en otra oportunidad, sin embargo, hasta no hace mucho tiempo utilice un recurso totalmente gratuito y me parece que es la mejor opción disponible para los que recién comenzamos en este mundo, se trata del plugin llamado TablePress.

Empecemos 🙂

Paso 1: Instalar TablePress

El primer paso es instalar TablePress en WordPress, puedes instalarlo como cualquier otro plugin.

Puedes ir a  Plugins  >  Añadir Nuevo  y escribir “TablePress” en el buscador.

instalar tablepress

Presionas en Instalar y luego en Activar, con eso ya deberías tener listo para usar el Plugin.

Paso 2: Crear Tablas Comparativas en WordPress con TablePress

Para crear una tabla comparativa con TablePress debes seleccionar en el menú  TablePress  >  Agregar Nueva Tabla .

crear tabla comparativa con tablepress

En la página que se abre debes colocar un nombre para tu tabla y una descripción, además debes colocar el número de filas y columnas que deseas para tu tabla comparativa (no te preocupes por el número exacto, luego puedes agregar o eliminar filas y columnas).

Paso 3: Editar Tablas Comparativas en TablePress

En la próxima página puedes editar la tabla comparativa antes de colocarla en tu página, la verdad es que todo es bastante intuitivo en cuanto a agregar tu contenido.

En este punto me quiero detener en dos tips importantes, intentaré dejarlo todo explicado a continuación:

¿Cómo insertar Imágenes en TablePress?

El editor de las casillas es bastante sencillo, no hay ninguna opción aparente para colocar imágenes a menos que escribas a mano el código HTML de las mismas.

Pues hay una opción “oculta” para hacerlo, es tan fácil como dejar presionado en tu teclado  Shift  y hacer clic en la celda que quieres editar, al hacer eso se abrirá una ventana emergente con el editor avanzado de WordPress, luego es más fácil insertar las imágenes.

Otra opción es utilizar los botones que están debajo en el cuadro de “Manipulación de la Tabla”.

insertar imagenes en tablepress

¿Cómo Agregar/Eliminar filas o columnas en TablePress?

Agregar o eliminar filas y columnas en TablePress es bastante sencillo, basta con seleccionar el ckeckbox correspondiente a lo que quieras agregar/eliminar:

agregar filas y columnas en tablepress

Y luego utilizar los botones disponibles en “Manipulación de la Tabla” para Agregar, Eliminar, Mostrar, Ocultar o Duplicar las filas y columnas.

eliminar filas y columnas en tablepress

Paso 4: Insertar Tablas Comparativas de TablePress en WordPress

Una vez terminada de configurar tu tabla comparativa es momento de agregarlas en tus entradas y páginas, para hacerlo sólo tienes que copiar el shortcode correspondiente e insertarlo justo donde quieras que aparezca tu tabla.

insertar tablas comparativas tablepress

Buuum! Con eso ya tienes lo mínimo necesario para comenzar a crear tus tablas comparativas en WordPress.

Ahora te colocaré las respuestas de algunas de las consultas más comunes que me he encontrado en internet sobre TablePress y las tablas comparativas en general.

Cómo Editar el Color de los Encabezados en TablePress

Por defecto los encabezados de TablePress son de color azul un poco feo, para cambiar los colores de la tabla debes saber algo de CSS. Si no lo sabes no te preocupes demasiado, es bastante fácil y pienso ayudarte.

Lo primero es entrar en  TablePress  >  Opciones de Extensión :

Luego tienes que colocar el siguiente código CSS en el recuadro grande que aparece ahí:

table.tablepress tr.row-1 th {
background: #6dbb27; /*EL COLOR DEL ENCABEZADO*/
}
table.tablepress tr.row-1 th:hover {
background: #19523f; /*EL COLOR DEL ENCABEZADO CUANDO EL CURSOR ESTÁ ENCIMA DE LA CELDA*/
}

Ahí debes cambiar #6dbb27 y #19523f por los colores que desees para tu tabla.

Estos colores puedes colocarlos en formato RGB o Hexadecimal

Cómo Centrar el Contenido en TablePress

Por defecto todo lo que agregues en las tablas comparativas se va a agregar alineado arriba y a la izquierda.

Yo prefiero tener el contenido alineado tanto vertical como horizontalmente, para hacerlo debes agregar el siguiendo código CSS en  TablePress  >  Opciones de Extensión :

table.tablepress tr th {
text-align: center;
}

Cómo ajustar el tamaño de las imágenes en TablePress

Si quieres añadir imágenes en TablePress probablemente quieras que todas tengan el mismo tamaño, eso lo logras subiendo las imágenes con el tamaño recortado que desees.

Si por alguna razón esto no es posible entonces te recomiendo añadir el siguiente código en  TablePress  >  Opciones de Extensión :

table.tablepress tr td img {
width: 150px; /*EL TAMAÑO DE LAS IMÁGENES, AQUÍ ES DE 150PX*/
height: auto;
}

Ventajas de Usar TablePress

  • Crear Tablas comparativas es totalmente gratis
  • El editor de tablas es bastante intuitivo y fácil de utilizar
  • Puedes crear infinitas tablas comparativas
  • Si conoces algo de CSS puedes ajustar el aspecto visual de tus tablas

Desventajas de TablePress

  • Las funciones de este plugin son algo limitadas
  • A pesar de poder editar el estilo, no es nada intuitivo hacerlo
  • Se extrañan cosas útiles para afiliados como rating con estrellas, botones, etc.
  • Las tablas son muy poco Responsive (No se ven demasiado bien en dispositivos móviles)

Consejos sobre las Tablas Comparativas en WordPress

A continuación te voy a dejar algunas recomendaciones que tienen que ver con las tablas comparativas en general, no tiene nada que ver con TablePress, independientemente de la forma que utilices para agregar tus tablas, te recomiendo siempre hacer lo siguiente:

  1. ¿Dónde Colocar las Tablas? Esto lo tengo bastante claro, muchas personas agregan las tablas luego de un largo texto de introducción. Debes saber que mientras más abajo las coloques, menos gente tendrá acceso a ellas y por consiguiente menos clics van a recibir. Yo te recomiendo agregar las tablas comparativas inmediatamente después de la introducción del artículo y lo más arriba posible.
  2. ¿Qué Contenido Colocar? No agregues cualquier contenido sólo por salir del paso, planifica las tablas con contenido útil para tus usuarios, mientras mejor y más completa sea la información que coloques, mayor tiempo pasarán los visitantes de tu web en las tablas y por consiguiente mayor será la probabilidad de recibir clics en ellas.
  3. ¿Tablas Responsive? En la medida de lo posible intenta que tus tablas sean responsive (que se vean bien en dispositivos portátiles), ten en cuenta que la mayor cantidad de tus visitas proviene de estos equipos. Como TablePress no es demasiado responsive que digamos, te recomiendo colocar el botón de “Ver Precio” o “Comprar” lo más visible que puedas, otra recomendación importante es hacer las tablas con contenido vertical, de esa manera garantizas mostrar una mayor cantidad de información.

Conclusiones Sobre las Tablas Comparativas en WordPress

Si tienes una página web monetizada por afiliación y no tienes una tabla comparativa, tengo que decirte que estas dejando de ganar miles de dólares al mes.

Mi recomendación es que crees tantas tablas comparativas como puedas, procura siempre colocarlas por encima de todo tu texto, aprovecha lo geniales que son para convertir e intenta que sean bastante “clickeable” para los usuarios que te visitan.

¿Tienes alguna duda sobre TablePress o sobre las tablas comparativas en WordPress? Puedes hacerme cualquiera que tengas abajo y procuraré responderte de inmediato.

Gracias por leer 🙂

Si te ha Gustado, Ayúdame a Compartir:

54 comentarios en “Cómo Crear una Tabla Comparativa en WordPress”

  1. Excelente post y agradable diseño. He encontrado tu página tras haberte leído en un post reciente de Dean Romero.

    En lo particular, desconocía este plugin y es una muy interesante herramienta para monetizar la web.

    Gracias por tu aporte.

    Un saludo.

    • Que hay Gabriel? Un placer tenerte por aquí! Espero que te pases más seguido cuando decida publicar más cositas.

      En cuanto a TablePress es una opción increíble para monetizar las páginas webs de afiliación… Además es gratuita.

      Como digo en la entrada, creo que perdí la cuenta de cuantos euros me hizo ganar este plugin. Recomendado 100%

      Saludos amigo!

  2. Muy buenas, me gustaría hacerte dos preguntas. En la primera columna siempre me queda todo muy pegado a la izquierda y en la tuya queda un pequeño margen, lo modificas en algún lugar o te sale así?
    ¿Por otro lado, me gusta mucho la plantilla de este blog y va muy rapida, te importaria decirme cual es? Muchas gracias y buen trabajo, sigue así.

    un saludo

    • Que tal Jon! Un placer tenerte por aquí.

      En cuanto a tu primera pregunta, creo que le he colocado lo siguiente a la tabla:
      table.tablepress tr th {
      text-align: center;
      }
      Arriba puedes ver donde agrego el CSS a las tablas.

      En cuanto a la segunda pregunta, no te puedo decir de donde he sacado la plantilla para este blog porque la hice yo desde el absoluto cero, no trabaja con ningún framework como génesis o algo parecido. Entonces creo que no puedes tenerla.

      Me alegro que te guste! Y te espero por el blog más seguido… 2018 pinta a ser un gran año para el blog! Ya verás..
      Saludos!

    • Hola Juan Carlos.

      El botón de Ver Precio es un enlace común y corriente sólo que le he dado estilo utilizando el CSS de mi tema.

      En tu caso puedes hacerlo de la misma manera o utilizando plugins editores como Shortcode Ultimate.

      Saludos y gracias por pasar!

  5. Buenas Mijael,

    La verdad que me esperaba algún tip más sobre cómo optimizar las tablas, o alguna idea sobre cómo estructurar el contenido.
    Sería muy útil. ¿Si lo cuentas algún día me podrás avisar?

    Gracias,

    • Hola Amigo Marcos!

      Muy buena idea! Lo apunto para hacer un artículo sobre ello!

      Como bien dices, no sólo basta con hacer la tabla, hay que saber cómo hacerla, dónde ubicarla y todo lo demás!

      Ahora voy a comenzar con la actualización de los contenidos del blog y me has dado una muy buena idea!

      Gracias Bro! Te mantendré informado!

  6. Hola Mijael:

    Muy útil tu artículo. Gracias!

    Estoy aprendiendo table press y me surge un problema: cuando inserto una imagen en cada fila me sale la tabla muy grande…¿Cómo puedo poner la imagen más pequeña? He tocado la escala de cada imagen pero no me convence porque cada fila la pone con una altura diferente. Hay alguna forma de que todas las filas sean homogéneas y las imágenes también?? el problema es que no sé nada de código… así que tengo que ir poco a poco…

    Agradezco tu ayuda

    José María

    • Hola José María!

      Me alegro que sea útil el artículo.

      Para acomodar las imágenes solo debes meter algo de CSS:

      Vas a Tablepress >> Opciones de extensión

      Ahí agregas lo siguiente:

      table.tablepress tr td img {
      width: 150px;
      height: auto;
      }

      Cambia el 150px por el ancho que necesites en tus imágenes y listo, con eso debes tener todo solucionado.

      Saludos Amigo!

  7. Hola Miguel me ha gustado mucho tu blog es de gran ayuda para los que están empezando en este mundillo
    Tengo una web que tiene unas 600 visitas mensuales
    Es suficiente para sacarle algún tipo de beneficio con este tráfico?
    Muchas gracias

    • Hola Amigo Javi!

      Un placer que escribas aquí!

      Pues a ver, dependiendo del método de monetización que uses y de donde provenga el tráfico de tu web se puede hacer más o menos dinero.

      Por ejemplo, una web de afiliación con Amazon como las que hago que reciba 600 visitas diarias puede hacer MUCHO dinero! Mientras que si las visitas son para monetizar con Google Adsense probablemente haga poco.

      De todas formas estoy seguro que con 600 visitas diarias puedes sacar algo de dinero extra en tu proyecto, yo de ti intentaría monetizar esa web.

      Saludos!

  8. Hola Mijael,

    muy bueno tu blog, útil y directo sin darle vuelta a los temas. Ya te puse en los favoritos 🙂
    Te quería preguntar cual es el plugin premium que utilizas, para tener una idea de costos y beneficios.

    Gracias y saludos

    • Hola Fernando! Gracias por tu comentario amigo!

      Actualmente utilizo el plugin llamado AAWP (Puedes buscarlo así tal cual en google).

      Es de lo mejor que he visto y muchas páginas nicho actualmente lo están usando!

      Saludos!

    • Hola David!

      Entiendo que me preguntas sobre hacer la tabla comparativa a mano tu mismo con HTML?

      Yo hice eso al inicio y el tiempo que perdía en comparación con el resultado que tenía no me salía para nada a cuenta.

      Es una de las cosas que aprendí en el camino: Utilizar las herramientas que ya están creadas y sacarles el provecho invirtiendo ese tiempo en cosas que me generan más beneficios.

      Te recomiendo hacer lo mismo! Saludos Bro!

  10. Ostia! no sabia de esta existencia Mijael! voy a poner en practica todos tus consejos a la web de las mejores depiladoras http://www.depiladoras.es ya que me he pasado toda la mañana del sabado leyendo tus post, tanto este de tablepress, prettylink, analytics, eventos.. themes.. etc.. vamos que si hoy el rebote de tu web mejora, me deberías un minipunto pami! jejeje

    Una pregunta, es recomendable aunque la web dea de afiliación, tener instalado el https? como puedo tener un certificado gratuito sin tener que pagar anulamente como he visto en muchos sitios..

    • Hola Amigo!

      Pues me alegro que pongas en práctica mis consejos! Espero que todos vayan sumando!

      En cuanto a tu pregunta, siempre es recomendable tener instalado un certificado SSL (que sea https), sobre cómo comprarlo no sé qué decirte porque ahora muchos hosting lo ofrecen de forma gratuita con todos sus planes.

      Al menos así es ahora con el hosting que tengo en Raiola y con los más populares de la actualidad.

      Saludos amigo!

    • Hola Re4l!!

      Mira, el plugin premium que recomiendo es AAWP! Es el único premium que he probado pero no he tenido necesidad de buscar otras opciones porque con este estoy bastante a gusto!

      Saludos amigo!

    • Hola re4l, yo despues de leer todo el blog de mijael, compré el aamp, y aunque no se mucho de programación, por no decir nada. ese plugin te lo da todo masticado. asi que siguiendo su respuesta tb te lo recomiendo. primero hice una tabla de comparacion ( tarde 1 tarde en tenerlo funcionado en mi web) y con el plugin tarde no más de 20minutos.. y sin saber como funcionaba.. si que.. Si tambien lo recomiendo.

  12. Mijael disculpa el fastidio pero saber si me puedes decir como haces lo de la tabla de contenido por el tema de la arquitectura web Todo el contenido en tus nichos queda en la misma pagina?? osea no saltan los enlaces a otras pestañas??

    • Hola amigo Daniel!

      No entiendo mucho tu pregunta bro! Te refieres a la tabla de contenidos? Así como está en este artículo?

      O te refieres a las Tablas Comparativas? Si puedes explicarme un poco mejor tu duda te respondo 🙂

      Saludos!

  13. hola!!! muchas gracias por el post =D te queria preguntar si el contenido que le agreges a las tablas, el robot de google, los puede leer? se posicionan las palabras claves del contenido?…. te adjunte mi web, la empece hace 2 semanas, es el primer proyecto que tengo de macro nicho, obviamente esta muy incompleto, pero queria que me des tu opinion, para saber si voy por el buen camino jajaja

    • Hola David!

      Gracias por tu comentario bro!

      Son tan legibles por el robot de google que en algunos casos son colocadas en los Rich Snippets (Posición 0) Imagínate tu el grado de legibilidad que tienen! Jejeje.

      Sobre tu web! Creo que trabajaría un poco más en el contenido bro! Añadir más contenido a algunas URL! Eso te ayudará a rankear para un mayor número de palabras clave y para darle fuerza a la KW principal!

      Por ejemplo, en la plancha a vapor taurus pretender rankear con un párrafo y 3 tablas comparativas es demasiado! No rankearas en tu vida para esa (y creo que para ninguna) palabra clave jamás!

      A meterle más contenido en general a esas URL y tendrás mejores resultados seguro!

      Saludos amigo!

  14. Muchas gracias por tu respuesta! me sacaste una gran duda… y muchas gracias por tu critica a mi pagina, es de gran ayuda! justo esta semana iba a empezar a agregarle contenido al nicho de las planchas, pasa que como es mi primer pagina de afiliación, antes de dar cualquier paso en falso investigo mucho viendo videos, blogs y tambien la competencia, entre eso y aprender a usar algunas funciones se me hizo bastante lento el avance. por ahora trate de enfocarme en la base marketinera (cuadro de tablepress y enlaces de amazon) y en darle una buena estructura silo para que todo tenga un orden logico para el usuario y para google…. mi proxima tarea justamente iba a ser empezar a agregarle contenido a todas las entradas y a la pagina pilar y despues poner unas fichas tecnicas a la home y recien ahi encargarme de la estetica de la pagina, y despues de todo eso recien empezar con los cluster de los demas nichos como aspiradoras, hornos, etc… tengo mucho trabajo por delante jajaja pero x tu consejo ya que era justamente el paso que iba a seguir me da a entender que voy por buen camino =D muchas gracias! me di cuenta que escribi mucho jaja perdon y muchas gracias por el tiempo que nos dedicas a todos nosotros!… pongo mi web para que entiendan de lo que estamos hablando jaja http://devaporweb.com

    • Excelente David!

      Y como recomendación final: Yo en próximos nichos o en próximos silos hiciera el proceso inverso!

      Primero el Contenido y Luego todo lo demás.

      Piensa que lo que te ayuda a rankear es el contenido, lo demás es tema de conversión (que también es importante) pero nada va a convertir si no llegan primero las visitas!!

      Saludos bro!

  16. Hola mano, aqui de nuevo releyendo este tema jeje, es lo que nos toca a los ricos que estamos en quiebra (para no decir “pobres” xD).

    Solo quería apuntar a cómo se lograría poner enlaces dentro de la tabla para que trabaje con amazon. Tengo la idea pero sería bueno que lo dijeras a los novatos. De esta forma este plugin se parecería aún más al AAWP en tablas comparativas

    • Y otra cosa es cambiar el color de una celda. En tu imagen le colocas un color distinto a Ver Precio. Y justamente es donde debería ir un enlace a Amazon. Saludos

      • Eso ya es algo “mas avanzado” porque toco el CSS del blog!

        Prueba con el Ultimate Shortcode para agregar botones! Nunca lo he probado dentro de TablePress pero debería funcionarte!

        Saludos amigo!

    • Hola Leo!

      Agregar enlaces es igual que agregar enlaces en cualquier parte de WordPress. Haces clic en “Editor Avanzado” y ahí tienes el editor para agregar los enlaces.

      El enlace de Amazon tienes que tomarlo manual desde la barra de afiliados de Amazon, no hay una manera automática de ponerlo, todo es a mano 🙁

      Saludos compi!

          • Resuelto. al parecer solo era algo circunstancial que resolví saliendo del editor y volviendo a entrar.
            La tabla me está quedando fina usando el tablepress y el Ultimate Shortcode, lástima que no es responsibe pero ahi vamos.
            Lo de la imagen no logré hacerla clikeable desde TablePress pero se me ocurre que con el Ultimate Shortcode puedo hacerlo más fácil. Sin embargo, los botones funcionan muy bien.
            Voy a probar algunas opciones para hacerla más responsibe.

            Gracias por todos estos tips, no los conocía 🙂
            ¿Recibiste mi msj sobre tu “Productero”? No he logrado instalarlo 🙁

            Saludos

  17. Hola! Me resultó muy interesante este artículo, ya que estoy empezando y no tengo mucho dinero para invertir todavía, asi que estoy probando Table Press .
    Una consulta, como hago para que los enlaces hacia el producto Amazon dentro de la tabla sean No Follow?

    Muchas gracias!

    • Hola Sol!

      Debes ver la opción “HTML” en el editor de texto de WordPress y añadir el atributo rel=”nofollow” a la etiqueta “a” de los enlaces.

      Otra opción es instalar el plugin “Ultimate Nofollow” que te añade una casilla para insertarlo más fácil.

      Saludos!

  19. Mijael muchas gracias por tu ayuda. Sin duda ideal para quienes no tienen la api de amazon. Quiero hacerte una pregunta. Con que pones las estrellas en tus artículos justo donde pones “opinión de los compradores”. Saludos

    • Es así! Es uno de los grandes problemas del plugin… Hay alternativas gratuitas que si lo son, más arriba creo que un compañero puso un tutorial que hizo con otro plugin… Por si lo quieres revisar.

      Saludos Luis!

Deja un comentario