Cómo crear y usar columnas de WordPress

Cómo crear y usar columnas de WordPress

Si bien algo tan simple como las columnas puede parecer el elemento más vulgar y, seamos honestos, el elemento más aburrido de cualquier sitio web, en realidad no lo es. De hecho, las columnas pueden incluso ser el componente más importante cuando se trata de organizar su contenido en un todo armonioso. Sin ellos, sería mucho más difícil organizar todos los demás elementos de su sitio, como botones e imágenes, o incluso códigos cortos y widgets, en composiciones lógicas y, sobre todo, estéticamente agradables. Entonces, hoy hemos decidido mostrarle cómo crear y usar columnas en cuatro de los editores de contenido de WordPress más populares. Esto es lo que cubriremos:

Para agregar una columna a una publicación usando el editor de Gutenberg, primero, abra su publicación y haga clic en el más Firme en la esquina superior izquierda de la publicación para abrir el selector de bloque. Ahora seleccione el bloque de columnas, que puede encontrar en el Elementos de diseño lengüeta.

Crea columnas usando Gutenberg

Hay varias variaciones de columna, pero usaremos un diseño de dos columnas de igual ancho para los propósitos de este tutorial.

Varias variaciones de columna

Verás que tu fila se ha dividido en dos partes iguales. También verá la configuración del bloque en el lado derecho. Aquí es donde puede editar el ancho relativo de sus columnas.

Edite el ancho relativo de sus columnas

Para ingresar texto en cualquier columna, haga clic en su más firmar y seleccionar un párrafo bloquear y luego escribir o pegar el texto.

Seleccionar un bloque de párrafo

Al igual que con el texto, puede agregar cualquier otro bloque de Gutenberg a su columna: imágenes, galerías, videos y cualquier otra cosa, incluidas otras columnas. Agreguemos una imagen a la columna del lado derecho.

Agregar una imagen a la columna del lado derecho

En este caso, lo haremos subir una imagen.

Subir una imagen

Clickea en el Botón de vista previa para ver cómo se ve el contenido de tu publicación organizado en columnas.

Publicar contenido organizado en columnas

Cómo crear columnas usando Elementor

En caso de que esté utilizando Elementor, agregar columnas funciona un poco diferente. Después de abrir su publicación en Elementor, puede introducir columnas en un área en Elementor haciendo clic en el Agregar sección botón.

Crea columnas usando Elementor

Ahora puede elegir la estructura de su sección. Elegiremos una sección de tres columnas.

Elige la estructura de tu sección

Como puede ver, el área activa se subdivide en tres secciones. Para agregar texto a sus secciones, simplemente agregue el Editor de texto widget a cualquiera de las subsecciones.

Agregar el widget Editor de texto

Para agregar una imagen a una columna, simplemente arrastre el Imagen widget a la subsección.

Arrastra el widget de imagen

Para llenar la columna con una imagen, haga clic en el Elegir imagen área en el Editar imagen pestaña en el lado izquierdo ...

Elija el área de la imagen

… Y luego cargue o seleccione un archivo de su biblioteca de medios.

Cargue o seleccione un archivo de su biblioteca de medios

Anule la selección de la columna para volver al menú de elementos.

Para agregar un video a su columna, debe arrastrar el Vídeo widget a la columna restante.

Arrastra el widget de video

Recuerde pegar la URL en el campo correspondiente para incrustar el video que desea.

Pegue la URL en el campo correspondiente.

Ahora, para editar toda esta sección, deberá ir a la Editar sección menú.

Menú Editar sección

los Editar sección menú en el lado derecho le ofrece varios Diseño opciones, que gobiernan la apariencia de las columnas en su página. Esto realmente depende de sus preferencias de diseño.

Menú Editar sección

Usaremos el Ancho del contenido opción para emparejar el texto con la columna de la imagen.

Opción de ancho de contenido

los Estructura La sección está ahí para facilitarle el cambio de la relación de ancho de sus columnas. Seleccionaremos el 50, 25, 25 diseño y vea cómo eso afecta el ancho de la columna.

La sección de estructura

Puede formatear cada bloque de texto, agregar fondos, botones, subtítulos para imágenes, widgets de audio e innumerables otros elementos a cualquiera de sus columnas.

Cómo crear columnas usando WPBakery

Si su editor de WordPress preferido es WPBakery, aún puede crear y usar columnas con bastante facilidad.

Primero, abra la publicación en WPBakery y haga clic en el Agregar elemento botón.

Botón Agregar elemento

Luego, elija el elemento Fila.

Fila de panadería

Para dividir este elemento en dos columnas, coloque el cursor sobre la pestaña de columnas. Necesitas el Diseño de columna tabulador para subdividir los elementos en columnas. Seleccionaremos dos columnas iguales (1/2 + 1/2).

Ficha Diseño de columna

Su fila agregada ahora se subdivide en dos columnas iguales.

Dos columnas iguales

Para agregar contenido a una columna, haga clic en su signo más y elija el elemento apropiado. Para el texto, es el Bloque de texto elemento, para las imágenes necesita el Imagen única elemento, para un video, un Youtube (u otro) elemento, y así sucesivamente. Agregaremos algo de texto a la columna del lado izquierdo y una imagen a la derecha. Ya hemos hablado del texto y ahora echaremos un vistazo al Imagen única elemento.

Elemento de imagen única

Aquí puede ver las distintas opciones de configuración de imágenes. Para completar el elemento de imagen, haga clic en el botón de imagen y seleccione una imagen. Si no desea utilizar la biblioteca de medios, puede seleccionar otras fuentes de imágenes de la Fuente de imagen Menú desplegable.

Menú desplegable de fuente de imagen

Como ya tenemos una imagen en nuestra biblioteca, la reutilizaremos.

Una vez que haya configurado su imagen, haga clic en el botón de vista previa para ver cómo se ve su contenido en la publicación.

Su imagen, tal como está configurada, aparecerá en la columna del lado derecho.

Solución de columnas

Por supuesto, es posible que prefiera el editor clásico. También hay una solución de columnas para eso.

Cómo crear columnas con el editor clásico

Finalmente, para agregar columnas en el editor clásico, necesitará un plugin. Recomendamos el plugin Column Shortcodes. Si no está seguro de cómo hacerlo, tenemos un tutorial sobre cómo instalar un plugin de WordPress.https: //wordpress.org/plugins/column-shortcodes/

Este plugin le permitirá crear códigos abreviados de columna: pequeños fragmentos de código que le permitirán reorganizar su texto y otro contenido.

Queremos subdividir nuestra publicación en dos columnas de igual ancho. Comenzaremos por cambiar al texto ver antes de copiar los códigos cortos apropiados. Encontrará los códigos cortos haciendo clic en los corchetes ( [ ] ) botón.

Crear columnas con el editor clásico

Para subdividir nuestra publicación en dos columnas iguales, primero insertaremos el una mitad código abreviado de columna haciendo clic en él. Aparecerán dos etiquetas en la posición de nuestro cursor. Estos representan el principio y el final de la columna del lado izquierdo.

Inserte el código corto de media columna

Ahora, digamos que queremos insertar un tweet en la columna del lado izquierdo de nuestra publicación. Deberá copiar el código de inserción de Twitter. Haga clic en el comando Insertar Tweet en el menú desplegable del tweet.

Incrustar comando Tweet

Twitter se vinculará a una página con el código requerido. Para copiar el código de inserción, simplemente haga clic en el Copiar código botón.

Botón Copiar código

Luego, debemos pegarlo entre la etiqueta de apertura del código abreviado y la etiqueta de cierre, haciendo que el tweet sea el único contenido en nuestra columna de la izquierda.

Pegar código

Para agregar la columna del lado derecho, colocaremos el cursor al final de nuestra publicación y seleccionaremos el código corto apropiado de los corchetes ( [ ] ) menú. Tenga en cuenta que este plugin necesita que la columna de la derecha contenga el (último) código corto. Por tanto, seleccionaremos el la mitad (última) comando y pegue algo de texto entre las etiquetas de apertura y cierre.

Medio (último) comando

En la vista previa, su contenido aparecerá así.

Vista previa de columnas

Y así es como subdivides tu contenido en columnas usando un plugin y el editor clásico.

En conclusión

Entonces, ya sea que use las opciones integradas de un editor o el plugin la, organizar su contenido en columnas no es ningún problema. Depende de usted ver qué diseño de columna se adapta mejor al diseño general de su sitio web. Si bien sus visitantes están ahí para su contenido, hay cosas que puede hacer para que ese contenido sea más atractivo sin mucho esfuerzo o habilidad técnica.

Ya sea que desee emular papel de periódico o experimentar con imágenes y otros elementos incrustados, debe probar una de nuestras sugerencias para columnas. Con las columnas, puede hacer que todas y cada una de sus publicaciones parezcan más legibles, más fáciles de usar y más profesionales con solo unos pocos clics.

Si quieres conocer otros artículos parecidos a Cómo crear y usar columnas de WordPress puedes visitar la categoría Tutoriales.

/* */ Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.