Cómo alinear Imágenes Lado a lado en WordPress
La alineación de imágenes es una lucha constante para el blogger de WordPress.
Esta publicación es para cualquiera que haya pasado más tiempo del que le gustaría admitir que juguetea con la alineación y el posicionamiento de la imagen en el editor.
Los dos mejores métodos para alinear imágenes
Hay dos técnicas que debe considerar para colocar imágenes una junto a la otra. Compartiré cómo usar cada uno, así como los pros y los contras incluidos.
Alinear imágenes con una galería
El método más confiable para colocar imágenes una al lado de la otra es usar una galería de WordPress.
Si nunca antes has creado una galería, sigue este tutorial sobre cómo crear galerías.
El truco es usar una versión de tamaño mediano de las imágenes y elegir dos columnas, incluso si solo incluye dos imágenes. El resultado se verá algo como esto:
A diferencia de las imágenes que colocas en tu publicación, las galerías tienen un HTML especial que mantiene las imágenes una junto a la otra. Esta estructura hace que sea más fácil y menos complicado alinear las imágenes en filas / columnas.
Coloque imágenes con códigos cortos de columna
Si no le importa agregar un nuevo complemento a su sitio, Column Shortcodes es una gran solución para alinear imágenes.
Los códigos cortos de columna es uno de esos complementos increíbles que no llenan su sitio con nuevos menús. De hecho, lo único que agrega a su panel de administración es este conveniente botón encima del editor.
Para mostrar cómo funciona, crearé una sola fila de tres imágenes.
Cómo usar códigos cortos de columna
El primer paso es colocar el cursor en una línea vacía en el editor. A continuación, haga clic en el botón código corto y seleccione una opción de columna.
Repita este paso para agregar una segunda columna de 1/3 y luego repita una vez más, pero esta vez utilizando la opción de un tercio (último). El resultado son los siguientes códigos cortos añadidos al editor.
Si nunca ha utilizado códigos cortos antes, es posible que desee seguir este tutorial primero.
Como puedes ver, cada código corto tiene una etiqueta de apertura y cierre. Ahora puedes poner una imagen dentro de cada código corto, como este:
parecen un desastre, ¿no?
Esto se debe a que los códigos cortos no pueden estilizar las imágenes en el editor, pero no es un problema. Una vez que los veas en el sitio, se alinearán perfectamente en columnas, como esta:
Códigos cortos de columna en comparación con galerías
Mientras que los códigos cortos no se muestran bien en el editor como galerías y pueden ser más difíciles de trabajar, también obtienes un poco más de control. Por ejemplo, las galerías obligan a que todas las imágenes se vinculen a:
- Archivo multimedia
- Página adjunta
- Nada
Con el complemento columnas, las imágenes pueden tener direcciones URL personalizadas y cada enlace a un tipo diferente de página.
También puede mezclar y combinar las columnas. Por ejemplo, puede colocar una imagen en un código corto de 2/3 junto a una imagen con un código corto de columna de 1/3.
Por qué no debe usar opciones de alineación
Estos métodos producirán los diseños que desea sin todos los dolores de cabeza.
Las galerías de WordPress son la forma más sencilla y sencilla de alinear imágenes en una fila. Sin embargo, los códigos cortos de columna son una buena alternativa que proporciona más flexibilidad.
Ambos funcionan tan bien porque colocan imágenes en una nueva estructura HTML. El HTML permite mantener un diseño de lado a lado, independientemente de la pantalla utilizada para verlos.
hay algo que me perdí? ¿Tiene alguna pregunta? Publicar un comentario a continuación.
Leave a Reply