Cómo crear columnas responsive en WordPress sin saber ni aprender código

Hoy escribo este artículo en el blog a raíz de una consulta que mi buena amiga y compañera Valentina Musumeci me hizo cuando estaba trabajando en el proceso de rediseño de su blog y quería hacer aparecer su formulario de suscripción creado con Thrive Leads justo al lado de su (bonita) imagen principal en la página de inicio.

Seguro que esto es algo que has visto en muchos blogs (yo mismo lo tengo así en estos momentos) y es posible que tú también lo quieras hacer en el tuyo, ya que es algo que te ahorra espacio y con lo que puedes colocar fácilmente tu llamada a la acción “Above the fold”.

Anda mira, ya se me ha ocurrido otro término que añadir al diccionario de WordPress para bloggers. 😛

En realidad, esto es algo muy sencillo de hacer. Lo único que tienes que hacer es maquetar tu contenido en columnas.

Así que si tu quieres hacer algo así, permanece muy atento a lo que te voy a contar en este post.

 

El concepto de crear columnas en WordPress para maquetar tu contenido

Puede que al mencionarte la palabra “columna” estés pensando ahora en la Antigua Grecia y en todo aquello que aprendíamos en el cole de los estilos dórico, jónico y corintio.

Pero no, por ahí no van los tiros. 😛

Voy a explicarte primero a qué me refiero exactamente cuando te hablo de una columna dentro de un diseño web.

Vamos a imaginar que tengo una pantalla de 1920 píxeles de ancho y que el contenedor principal de mi blog es de 1000 píxeles.

Esto quiere decir que los contenidos de mi web estarán, como máximo, dentro de esos 1.000 píxeles de ancho que tiene el contenedor principal.

Pues bien, si dentro de mi contenedor principal de 1000 pixeles yo quiero crear dos espacios horizontales que ocupen el mismo tamaño, tendré que crear dos columnas de 500 píxeles cada una.

Te dejo una ilustración para que lo veas mejor:

 

Como ves, lo que quería hacer Valentina en su página de inicio era exactamente eso: quería que en una de las mitades de su contenedor principal apareciera su formulario de suscripción.

Por tanto, tenía que crear dos columnas: una con su formulario y otra vacía sin contenido alguno que permitiera mostrar la imagen de fondo de su sección a ancho completo.

 

Por qué tienes que crear columnas responsive en tu blog

Pero claro, ahora te estarás preguntando… ¿y si alguien entra en mi blog desde un móvil o una tablet y no tiene en pantalla ese espacio de 1000 píxeles que pasa?

Pues ahí es donde entra en juego el tener que hacer las columnas con un tamaño variable establecido en porcentajes (no en píxeles) para que se adapte al tamaño del dispositivo desde el que se esté visualizando.

O lo que es lo mismo: tienes que hacer que las columnas que vayas a utilizar sean responsive para no mandar al cuerno la experiencia del usuario que se meta en tu blog en pantallas de dimensiones más reducidas, impidiéndole ver tus contenidos de manera correcta desde, por ejemplo, un móvil o una tablet.

Esto es muy sencillo de hacer si tienes un editor visual como Thrive Content Builder que te puede generar estas columnas responsive de manera automática con sólo arrastrar el elemento correspondiente a la maquetación de tu página o entrada.

Pero… ¿qué ocurre si no lo tienes y no quieres o no puedes gastarte el dinero en un plugin premium de este estilo?

Suena complicado hacer todo esto de manera manual o con las opciones que WordPress te permite realizar con su editor nativo, ¿verdad?

Porque lo es. Sobre todo si no tienes ni idea de HTML y CSS (sí, también es complicado si te suenan a chino estas siglas).

Pero tranquilo, pequeño saltamontes. Que, como siempre me dice mi madre, todo tiene solución en esta vida menos la muerte.

Hoy te traigo la solución perfecta creada por los mismos desarrolladores del theme framework GeneratePress para que la utilices en tu WordPress sin que tengas que aprender a crear ni una sola línea de código.

Esta solución nos la regalan los amigos de GeneratePress en forma de plugin y se llama Lightweight Grid Columns.

Eso sí, quiero hacer un aviso para navegantes previamente.

Si utilizas el theme framework GeneratePress, esta solución te va a servir fijo al 100%, ya que, como te he dicho, ha sido creada por sus mismos desarrolladores.

Si estás utilizando otro tema en tu WordPress, es muy probable que también te funcione (así ha sido, por ejemplo, en el caso de Valentina que te comentaba antes y en otras plantillas en las que lo he probado). Pero, en este caso, tampoco te lo puedo asegurar al 100%.

Pero vamos, que si no tienes GeneratePress y necesitas algo así para poder maquetar en columnas… inténtalo al menos. Que no pierdes nada por ello. 😉

Dicho esto… vamos a ver a modo de ejemplo cómo solucionamos el problema de Valentina con Lightweight Grid Columns.

¡Al lío!

 

Cómo crear columnas responsive en WordPress con Lightweight Grid Columns

Lo primero de todo, tienes que instalar y activar el plugin. Este es gratuito y lo puedes encontrar en el repositorio oficial de WordPress, por lo que sólo tienes que buscarlo e instalarlo desde tu panel de administración como cualquier otro plugin.

 

 

Una vez instalado y activado, podrás utilizar el plugin dentro de cualquier página o entrada de tu blog pulsando en el nuevo icono que te aparecerá en las opciones del editor de WordPress. El icono en cuestión es el que te marco con un cuadro rojo en la siguiente imagen:

 

 

Al pulsarlo, te aparecerá una pequeña ventana que contiene 5 opciones. Esta ventana sirve para crear tu primera columna.

Las opciones que encontrarás aquí son las siguientes:

• Desktop grid percentage: establece el porcentaje que va a ocupar tu columna en una pantalla de un ordenador de sobremesa.
• Tablet grid percentage: establece el porcentaje que va a ocupar tu columna en la pantalla de una tablet.
• Mobile grid percentage: establece el porcentaje que va a ocupar tu columna en la pantalla de un teléfono móvil.
• Content: aquí puedes introducir el contenido que quieres que aparezca en esa columna (texto, imágenes, formularios, shortcodes, etc.). ¡Ojo! También puedes introducir el contenido de la columna en el editor de WordPress una vez hayas generado la columna escribiendo entre las etiquetas del shortcode generado para la columna en cuestión.
• Last column in a row: si marcas esta opción, estarás diciéndole al plugin que esa columna es la última de una fila en concreto. Una fila termina cuando varias columnas ocupan ya el 100% de la pantalla.

Respecto a esta última opción, siguiendo el ejemplo de la solución que tuvo que adoptar Valentina, tendríamos que crear una columna al 50% con esta opción desmarcada y una segunda columna al 50% con esta opción marcada, ya que entre ambas forman una fila que ocupa el 100% del ancho de la pantalla.

Vamos, que no deberías dejar una fila sin completar para no tener problemas de visualización. Siempre debes ocupar, al menos, el 100% de una fila y terminarla (independientemente de los porcentajes que utilices en las columnas que conforman la fila o de que alguna de las columnas no tengan contenido alguno, como ahora verás que ocurría en el caso de Valentina).

Cuando hayas rellenado estas opciones a tu gusto, lo único que tienes que hacer es pulsar en “Aceptar”. De manera automática, en tu editor nativo de WordPress te aparecerá el shortcode correspondiente a la columna.

Cómo te he dicho antes, aquí puedes editar el contenido a tu antojo si es necesario. Lo único que tienes que hacer es escribir entre las dos etiquetas con corchetes (el shortcode) de la columna que se te acaba de generar y utilizar el editor de WordPress como siempre haces. 😉

Aquí en España decimos aquello de que el movimiento se demuestra andando. Así que, sabiendo ya para lo que sirve cada una de estas opciones, voy a dejarte mucho más claro como utilizar el plugin Lightweight Grid Columns con un ejemplo práctico.

Volvemos para ello al caso concreto de Valentina.

 

Ejemplo práctico de cómo crear columnas responsive en WordPress sin ningún editor visual y sin tocar código.

Tenemos claro ya que Valentina, para hacer lo que desea, tiene que generar dos columnas, ¿verdad?

Pues vamos a crear la primera, la cual va a ocupar la mitad del contenedor principal. En ella, irán tanto el título de su blog y el slogan, como el formulario de suscripción que ella quiere implementar con Thrive Leads.

Nos vamos, dentro del editor de WordPress, al icono de Lightweight Grid Columns, lo pulsamos y rellenamos los datos de esta primera columna de la siguiente forma:

 

 

Date cuenta que he puesto el tamaño de la columna de tablet igual que en la versión de ordenador sobremesa (50%), pero esto lo podrías modificar tú a tu antojo en tu caso particular a otro porcentaje distinto si lo consideras oportuno.

También, como ves, no he rellenado la opción de contenido. Esto es porque esta parte la voy a crear en el editor nativo de WordPress para poder así aprovecharme de sus herramientas y no tener que hacerlo todo con código.

Pulsamos en “Aceptar”. Ahora nos aparecen en el editor los shortcodes de la columna creada.

Este es el momento de poner en ella el contenido que queremos. En el caso de Valentina lo que hemos dicho antes: slogan y formulario de suscripción creado con Thrive Leads.

 

 

Ahora seguimos el mismo procedimiento para completar el 100% de la fila creando una segunda columna con las mismas características que la primera, pero con una excepción: marcamos la opción “Last column in a row” para indicar que esa es la columna que cierra nuestra fila y completa el 100% del ancho de nuestro contenedor (50% de la primera columna + 50% de esta segunda que vamos a crear).

 

 

Pulsamos en “Aceptar”. Como en este caso no queremos meter ningún contenido en esta columna, lo dejamos vacío tal cual está.

Con un poco de CSS aplicado a sus títulos y subtítulos, el resultado final en la página de inicio del blog de Valentina después de maquetar estas columnas queda tal que así:

 

 

No ha sido tan complicado, ¿verdad que no? Y tampoco te ha hecho falta aprender HTML ni CSS. Yo siempre cumplo lo que prometo. 😉

Esta es la solución más simple y rápida para maquetar columnas responsive en las páginas y entradas de tu WordPress sin necesidad de editores visuales ni de saber código para llevarlo a cabo.

Naturalmente, si sabes código podrás hacer cosas más chulas y sofisticadas. Lo mismo ocurrirá si tienes un editor visual más avanzado como Thrive Content Builder. Pero si en tu caso no dispones ni de una cosa ni de otra, para hacer algo básico esta solución es sencillamente genial y perfectamente válida.

Espero que este tutorial te haya sido útil y que a partir de ahora pongas en práctica esto cuando te haga falta.

Ahora te toca a ti… prueba este plugin y cuéntame tu experiencia. Y, si te ha gustado esta entrada, no dudes en suscribirte al blog para recibir más contenido de valor como este así como en compartir el contenido en tus perfiles de redes sociales para que el artículo pueda ayudar a cuanta más gente mejor. 😉

Imagen | Flickr