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:
Cómo crear columnas usando Gutenberg
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.
Hay varias variaciones de columna, pero usaremos un diseño de dos columnas de igual ancho para los propósitos de este tutorial.
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.
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.
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.
En este caso, lo haremos 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.
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.
Ahora puede elegir la estructura de su sección. Elegiremos una sección de tres columnas.
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.
Para agregar una imagen a una columna, simplemente arrastre el Imagen widget a la subsección.
Para llenar la columna con una imagen, haga clic en el Elegir imagen área en el Editar imagen pestaña en el lado izquierdo ...
… Y luego 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.
Recuerde pegar la URL en el campo correspondiente para incrustar el video que desea.
Ahora, para editar toda esta sección, deberá ir a la Editar sección menú.
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.
Usaremos el Ancho del contenido opción para emparejar el texto con la columna de la imagen.
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.
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.
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).
Su fila agregada ahora se subdivide en 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.
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.
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.
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.
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.
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.
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.
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.
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.
En la vista previa, su contenido aparecerá así.
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.
Deja una respuesta