¿Desea agregar contenido de varias columnas a sus publicaciones de WordPress?

Las columnas se pueden usar para crear Diseños atractivos para sus publicaciones y páginas..

Los medios impresos tradicionales, como periódicos y revistas, han utilizado un diseño de varias columnas desde los primeros días de la impresión. Su objetivo era permitir usuarios Es más fácil leer un texto más pequeño mientras se utiliza el espacio disponible de forma económica.

Si aún no has creado un sitio web o un blog en WordPress, te invitamos a consultar Cómo instalar un blog en WordPress en 7 pasos a continuación, ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog

Los diseños de una sola columna se utilizan con más frecuencia en la web. sin embargo, el rejillas con varias columnas siguen siendo útiles para resaltar el contenido y facilitar la lectura y el análisis.

En este tutorial, le mostraremos cómo agregar fácilmente contenido de varias columnas a sus publicaciones de WordPress sin escribir ningún código HTML.

Agregar contenido a varias columnas de wordpress e1565264744355

Agregar contenido de varias columnas en WordPress: la solución fácil

Crear contenido de varias columnas, también conocido como contenido de cuadrícula en WordPress, ahora es fácil porque es una característica predeterminada. los nuevo editor de bloques de WordPress Gutenberg propone un bloque de columnas.

Para agregar un diseño de varias columnas, debe crear una nueva publicación o editar una. Una vez en el área de edición, haga clic en " Añadir En la parte superior para agregar un bloque.

Luego tienes que seleccionar el bloque Columnas "Ubicado en la pestaña" Elementos de diseño ".

Agregar columnas de wordpress

Verá que el puntero del mouse salta en la columna izquierda y aparecerá un marcador de posición para el texto en la columna derecha.

Columnas en wordpress gutenbeg

Como puede ver en la captura de pantalla anterior, el bloque Columnas al principio parece ser un área vacía. Si desplaza el mouse hacia la izquierda, puede ver el borde del bloque resaltado.

También podrá ver los parámetros del bloque en la columna derecha de la pantalla.

Ejemplo de columnas de gutenbergDe forma predeterminada, el bloque de columnas agrega dos columnas. Puede aumentar la cantidad de columnas que desea agregar desde la configuración del bloque a la derecha. Esto le permite agregar hasta seis columnas en una sola fila.

Editar columnas de wordpress de gutenbergSimplemente haga clic en una columna y comience a escribir para agregar contenido. Puede usar la tecla Tab de su teclado para pasar a la siguiente columna.

Ir a la siguiente columna de wordpressAgregar contenido multimedia y otro contenido a sus columnas

Además del contenido de texto, también puede agregar imágenes e incrustar videos en columnas de WordPress.

El bloque de columna le permite agregar bloques dentro de cada columna. Simplemente coloque el mouse sobre una columna y verá el "Agregar un nuevo bloque" al interior. También puede agregar un bloque ingresando el nombre del bloque.

Agregar una imagen a una columna

Su bloque seleccionado aparecerá en la columna. Puedes ir allí y agregar contenido.

Para cargar - cargar - sus medios, descubra nuestro artículo sobre Cómo cargar tus medios masivos en WordPress

Bloque de imagen de columna de Gutenberg

Así es como se vería su nueva columna en el tema de WordPress por defecto veinte diecinueve. En este ejemplo estamos usando tres columnas y la última columna contiene una imagen.

Imagen agregar columna de Gutenberg

Si solo desea agregar una imagen y texto a un lado, también puede usar el bloque Medios y texto En lugar de columnas. Este bloque está diseñado específicamente para mostrar medios como imágenes y videos al lado del texto.

Wordpress block text media

Adición de varias columnas en el editor clásico de WordPress

Si no ha actualizado WordPress a Gutenberg y todavía está usando eleditor clásiconecesita instalar un complemento separado para crear un diseño de cuadrícula de columnas.

Comience instalando y activando el complemento Columnas de rejilla ligeras

Para obtener instrucciones detalladas, siga nuestra guía paso a paso sobre cómo instalar un complemento en WordPress.

Tras la activación, puede crear un mensaje nuevo o abrir un mensaje antiguo para editarlo. Luego haga clic en " Agregar columnas En la barra de herramientas del editor visual.

Agregar columnas editor clásico de wordpressAhora verá una ventana emergente que le permite agregar su primera columna. Puede elegir la cantidad de área que puede cubrir su columna, en computadoras de escritorio, tabletas y dispositivos móviles de manera diferente.

Ve más allá descubriendo Cómo crear un ancho de página completa en WordPress

Por ejemplo, si establece el porcentaje de cuadrícula de escritorio 50%, su columna cubrirá la mitad de la línea.

Definir el porcentaje de columnas

Tiene muchas opciones para establecer el ancho de su columna, desde 5% a 100% con un intervalo 5. Puede elegir uno haciendo clic en el menú desplegable.

Opción de ancho de columna

Luego, debe agregar el contenido de su columna en el área "Contenido", luego haga clic en el botón "Aceptar" para insertarlo en su publicación.

Contenido de la columna divi

El complemento generará el código corto requerido con su contenido y lo agregará a su editor de publicaciones.

Descubre en este tutorial Cómo instalar y configurar el plugin WP Super Cache para mejorar el rendimiento de tu blog.

Columna agregada en el editor clásico de wordpress

Ahora que ha agregado su primera columna, puede repetir el proceso para agregar más columnas. Para la última columna, no olvide marcar la casilla 'Última columna de la línea'.

Agrega otra columna en el editor clásico de wordpress

Después de eso, podrá guardar su vista previa y vista previa. Así es como se ve en nuestro sitio web de prueba Twenty Seventeen.

Columna agregada demostración de wordpress

Si también desea encontrar temas de WordPress que pueden ayudarlo a crear columnas en sus páginas o publicación, aquí hay temas de 3 WordPress producto de más alta calidad. Perfecto para esta tarea.

1. TheGem

Hay una gran cantidad de Temas de WordPress que puede afirmar que ofrece un diseño de OnePage, pero ninguno puede ofrecer la gran cantidad de opciones y características que tiene la plantilla de TheGem WordPress. 

Los temas multipropósito de wordpress de Thegem crean un sitio web

Todos los elementos de diseño que asocia con un buen sitio web de OnePage están presentes en este tema de WordPress : un control deslizante de pantalla completa (que se puede crear utilizando el complemento Revolution Slider que se entrega con el tema de WordPress), una selección de seis estilos de encabezado y la capacidad de crear secciones de ancho completo utilizando el complemento Visual Composer incluido en el paquete.

Además, tiene una serie de opciones de personalización para elementos como fuentes, colores e íconos. Es algo raro, pero también hay detalles que no nos gustan de TheGem. Pero, básicamente, es un tema de WordPress que, por supuesto, se adaptará a usted, dada la cantidad de puntos positivos que tiene. Es un fuerte competidor, lo que facilitaría la creación de un sitio web de OnePage.

DescargarDemo | alojamiento web

2. Estocolmo

Estocolmo es un tema de WordPress diseñado para ayudarte a crear el sitio web de una empresa de construcción, ingeniería civil o cualquier empresa relacionada con el mundo de la renovación de edificios. Este Plantilla de WordPress está orientado a profesionales que se preocupan por la calidad y el detalle.

Estocolmo-temas-wordpress-multiusos-versátil a crear el sitio en Internet

Viene con un panel de opciones y un backend fácil de usar, que le permitirán administrar fácilmente su contenido. Hay alrededor de 20 demostraciones de esta plantilla que presentan una amplia gama de actividades en las que se puede utilizar este tema de WordPress. Y estos también se pueden utilizar como base para la personalización futura para que su sitio web tenga un aspecto único.

Muy sensible, se muestra perfectamente en cualquier tipo de pantalla. Si durante la personalización o instalación de esta plantilla, encuentra dificultades, la documentación completa incluida en el paquete puede servir como guía. Y si aún no puede, el soporte dedicado a este tema de WordPress queda a su disposición.

DescargarDemo | alojamiento web

3. Júpiter

Júpiter es otro tema muy popular de WordPress. Tiene demostraciones de 25 que cubren 6 de nuestras categorías: agencia, creatividad, educación, alimentación, salud y comercio electrónico, y se agregarán más en futuras actualizaciones. La mayoría de sus diseños tienen un diseño minimalista, con una tipografía agradable.

Júpiter es el tema de wordpress-multiusos-versátil a crear el sitio en Internet

Uno de los principales puntos de venta de Júpiter es su Creative Header Customizer, que le permite personalizar rápida y fácilmente el diseño de los encabezados de su sitio web. Visual Composer, controles deslizantes 3 (Layer, Revolution e iCarousel), nuevos códigos cortos 10, más de iconos 1800 y tipos de publicaciones personalizadas 10 están incluidos en la entrega.

Sus tiempos de carga de página también son excelentes. Este es un producto excelente, y será difícil encontrar tantos Temas de WordPress teniendo sus características.

DescargarDemo | alojamiento web

Otros recursos recomendados

Para ir más allá en la optimización de tu blog o tu web, también te sugerimos que consultes algunos enlaces que te sumergirán en el mundo de Gutenberg

Conclusión

Listo ! Eso es todo por este tutorial. Esperamos que este artículo le haya ayudado a aprender cómo agregar columnas a sus publicaciones y páginas de WordPress. no dude en comparte este tutorial con tus amigos en tus redes sociales.

Si tiene sugerencias o comentarios, serán bienvenidos. Pero si eres un novato, te invitamos a consultar nuestro Recursos.

...