ūüĎČ Alineaci√≥n b√°sica de im√°genes de WordPress explicada - WinningWP

Alexa Rank: captura de pantalla

El tema de la alineación de imágenes es algo que los principiantes de WordPress comúnmente malinterpretan. Cuando vaya a agregar una imagen a su contenido (dentro de publicaciones o páginas) WordPress le ofrece cuatro formas predeterminadas de alinear dicha imagen: alinee 'Izquierda', alinee 'Centro', alinee 'Derecha' y alinee 'Ninguno' *.

Echemos un vistazo a cada uno de estos a su vez:

1. Alinear a la izquierda

Una imagen a la que se le ha asignado una alineación izquierda se insertará efectivamente a la izquierda de la sección de la página en la que se encuentra (como el límite izquierdo de su publicación de WordPress), y cualquier otro contenido (como texto) envuelva sus otras tres fronteras, llenando el área a la derecha de donde se encuentra la imagen.

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Alinear el centro

Si desea que su imagen se centralice dentro de la sección de la página en la que se encuentra (es decir, con una cantidad igual de espacio entre el borde del área de contenido y su borde izquierdo y derecho), elija una alineación 'Central'. A diferencia de la alineación "izquierda" mencionada anteriormente, cualquier contenido vecino (como texto) no se ajustará a la imagen, sino que se colocará arriba o abajo de la imagen (dependiendo de en qué parte del texto haya elegido insertar dicha imagen).

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Alinear a la derecha

Alinear correctamente una imagen es, como era de esperar, prácticamente el reverso exacto de alinear una imagen a la izquierda: la imagen se desplazará hacia la derecha de la sección de la página en la que se encuentra (es decir, el límite de la derecha de su La publicación de WordPress del contenido de la página) y cualquier otro contenido (como texto, etc.) se ajustará a sus otras tres fronteras: llenando así el área a la izquierda de la misma.

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Alinear ninguno

Las imágenes que no tienen asignada ninguna alineación (asignándoles una alineación de 'Ninguna'), se ubicarán exactamente en el lugar donde las ubicas, es decir, si eliges posicionar una imagen asignada a una alineación de 'Ninguna' dentro de un párrafo de texto (consulte el siguiente ejemplo a continuación), se colocará en línea con ese texto, lo que dará como resultado que haya texto tanto a la izquierda como a la derecha de la imagen (suponiendo que la imagen no tiene el mismo ancho, o más ancho, que el área en el que se sienta **). Sin embargo, confusamente, una imagen que tiene asignada una alineación de "Ninguno" Y se encuentra dentro de su propio párrafo (es decir, en una nueva línea en el editor de WordPress y / o específicamente dentro de etiquetas HTML 'p') se colocará a la izquierda del área dentro de la cual reside (de una manera similar a la que tendría si hubiera sido alineado a la izquierda) pero sin ningún texto a la derecha de la misma. ¿Por qué? Debido a que una imagen no tiene una alineación específica (o, en términos tecnológicos: ninguna "flotación" específica de izquierda o derecha) que se encuentre dentro de su propio párrafo (sin otros elementos en el mismo párrafo) se separará de su precedente y siguiendo el contenido por líneas de espacio en blanco predefinido, ¡de forma muy similar a como lo hará cualquier otro párrafo!

Ejemplo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Entonces, ¿qué está pasando realmente aquí?

¿Por qué todo esto sucede? En realidad, todo se debe a un lenguaje de computadora utilizado para expresar la presentación (diseño, dimensiones, colores, etc.) de los elementos web, conocidos como hojas de estilo en cascada, o 'CSS' para abreviar. En esencia, cada vez que asigna, digamos, una alineación izquierda a una imagen en una publicación o página, WordPress agrega un nombre de clase HTML de "alignleft" a dicha imagen, lo que fuerza a la imagen a hacer referencia a un conjunto específico de comandos CSS predefinidos que le dicen dónde debe sentarse en la página, ¡simple! De manera similar, para cada una de las otras alineaciones mencionadas, WordPress asigna diferentes nombres de clase, como 'aligncenter' (para que las imágenes se alineen centralmente), 'alignright' (para que las imágenes estén alineadas a la derecha) y 'alignnone' (para imágenes que están no tener asignada ninguna alineación particular) – que cada referencia diferentes conjuntos de comandos CSS.

Admito (desafortunadamente), la idea de envolverse en el mundo de los comandos CSS puede ser más que intimidante para el usuario promedio de WordPress; sin embargo, si tiene interés en aprender más sobre ellos, rápidamente le permitirán obtener un nuevo grado de libertad cuando se trata de diseñar su contenido, ¡o incluso todo su sitio web! Si está interesado en aprender, consulte nuestra publicación anterior sobre dónde aprender mejor CSS en línea o, alternativamente, solo diríjase a Google y ¡enloquezca! ;)

Resumen

Entonces ahí lo tienes: ¡se explican las alineaciones de las imágenes! En resumen: utilice una alineación izquierda cuando desee que una imagen se siente hacia la izquierda y otros elementos (como texto, etc.) para envolverla a la derecha; utilice una alineación central cuando desee que una imagen se ubique en el centro / centro de su contenido sin ningún otro elemento a cada lado; use una alineación correcta cuando desee que una imagen se siente hacia la derecha y otros elementos web vecinos para envolverla a la izquierda; y utilice una alineación de 'ninguno' si desea que su imagen se ubique exactamente donde usted elige colocarla en relación con sus elementos vecinos (es decir, texto, etc.) Y, por último, si desea que una imagen se ubique a la izquierda del contenido -area dentro de la cual reside, PERO no quiere que ningún texto, etc., aparezca a la derecha de la misma, asigne a la imagen una alineación de "Ninguno" y asegúrese de que se encuentre en su propio párrafo privado.

* a través de un menú desplegable que se encuentra en la esquina inferior derecha de la ventana 'Biblioteca de medios' de WordPress, debajo del encabezado secundario 'Configuración de visualización de archivos adjuntos'.

** en cuyo caso el texto que normalmente se ubicaría a cada lado no tendrá otro lugar que ir por encima o por debajo de la imagen – tenga en cuenta que estos casos a menudo pueden dar lugar a confusión entre las cuatro alineaciones ya que no hay espacio para ninguna otra texto / elementos en cualquier lado de la imagen, ¡esencialmente no hará ninguna diferencia qué alineación elijas usar!

¿Útil?

Ver el vídeo: Herramientas SEO 2018 РMetricspot

Like this post? Please share to your friends:
Deja un comentario

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: