Cómo diseñar imágenes en su sitio web de WordPress con CSS

Seguro que ya tienes una idea de la importancia de las imágenes para el éxito de tu sitio web.

Pero cuando se trata de aumentar el compromiso (y, en última instancia, su resultado final), no se trata solo de incluir imágenes en su sitio, se trata de qué imágenes incluye y cómo las presenta.

En este post quiero abordar una pieza importante de ese rompecabezas: la presentación.

WordPress viene preempaquetado con medios simples para diseñar imágenes con CSS. Tienes el poder de crear diferentes efectos para las diversas clases de CSS que WordPress asigna automáticamente a las imágenes de tu sitio. (Si parece que comencé a hablar en un idioma extranjero, no se preocupe, explicaré todo en detalle más adelante en el artículo).

Comenzaré profundizando en las razones por las que las imágenes son tan importantes para su sitio, luego pasaré a cubrir las clases de CSS predeterminadas que WordPress aplica a las imágenes y, finalmente, demostraré cómo puede usar CSS para aplicar estilos personalizados a sus imágenes. .

• Por qué las imágenes son tan importantes para los sitios web
• Un curso intensivo de CSS de WordPress
• Cómo agregar CSS personalizado a WordPress
• Las clases de imágenes CSS predeterminadas de WordPress
• Estilo de imagen simple con WordPress
• Más ejemplos de lo que puede hacer con Image CSS en WordPress
• ¿Qué pasa con los estilos existentes?
• El cielo es el límite

Por qué las imágenes son tan importantes para los sitios web

¿Qué mejor manera de explicar lo beneficiosas que son las imágenes para los blogs que demostrándolo con una imagen?

Las cosas se vuelven aún más interesantes cuando llegas a la biología de cómo procesamos la información. Considere, por ejemplo, que el 90 % de la información que se transmite al cerebro es visual, y el 40 % de las personas responde mejor a la información visual que al texto sin formato (fuente: Zabisco).

Pero seamos honestos: no necesito arrojarte estadísticas para demostrar mi punto. Usted sabe por sus propios hábitos que los sitios web y blogs visualmente atractivos tienen muchas más probabilidades de captar su atención que una gran cantidad de texto. Las imágenes añaden color, atractivo e intriga. Disparan un montón de reacciones en nuestro cerebro antes de que hayamos tenido la oportunidad de comenzar a leer.

En pocas palabras, si no incluye imágenes convincentes y relevantes en las publicaciones de su blog, no está cerca de aprovechar al máximo su contenido. Hacer un esfuerzo adicional cuando se trata de incluir imágenes en las publicaciones de su blog y presentarlas bien puede marcar la diferencia en el compromiso, el tráfico y las ventas.

Un curso intensivo de CSS de WordPress

Los desarrolladores principales de WordPress son muy conscientes de la importancia de las imágenes para los sitios web, razón por la cual otorgan a los desarrolladores de temas (y a los modificadores de temas) una gran cantidad de poder y flexibilidad para determinar cómo se presentan las imágenes.

Ese poder y flexibilidad se ofrece en forma de varias clases de CSS. Pero antes de continuar, tomemos un momento para explicarle qué es CSS y cómo puede usarlo.

CSS significa Hojas de estilo en cascada: un lenguaje de marcado que se utiliza para determinar cómo se ven las páginas web. CSS se combina con HTML (Hyper Text Markup Language), que es el lenguaje de marcado utilizado para definir la estructura semántica de un sitio web. Si esto no tiene mucho sentido para usted, no se preocupe, es más información complementaria de lo necesario.

CSS es un lenguaje simple, una vez que lo entiendes. En términos de poder alterar la apariencia y la ubicación de las imágenes, podrá retomar y trabajar con el código que incluyo en este artículo con relativa facilidad.

Aquí hay un ejemplo de un fragmento de código CSS relacionado con la apariencia de un tipo de imagen en particular en WordPress:

 .alinear a la derecha {
	borde: 1px sólido #c5c5c5;
	flotar derecho;
	margen: 0 0 10px 10px;
	relleno: 3px;
}

El texto .alignright es una clase CSS (identificable como clase por el punto que precede a su nombre). En este caso, .alignright es una clase que WordPress asigna a cualquier imagen que se selecciona dentro del backend de WordPress para alinearla a la derecha del contenido:

Se pueden aplicar varias declaraciones (como border y padding ) a una clase CSS, que finalmente se aplican a cualquier elemento HTML al que se haya asignado la clase en cuestión.

En el ejemplo anterior, cualquier imagen en WordPress que se haya alineado a la derecha (a través del editor de texto) tendrá asignada la clase .alignright y, por lo tanto, heredará el estilo aplicado a esa clase. La imagen 'flotará' hacia la derecha, tendrá un pequeño margen para evitar que el texto entre en ella, un borde gris alrededor y un pequeño relleno para separar el borde del borde de la imagen.

Todo eso tendrá mucho más sentido con una representación visual:

Hay muchas más declaraciones que se pueden agregar a una clase CSS; pronto nos divertiremos con ellos.

Cómo agregar CSS personalizado a WordPress

Los temas de WordPress vienen con sus propias 'hojas de estilo' CSS, que son archivos llenos de marcado CSS como en el ejemplo anterior. Si bien hay muchas maneras de agregar su propio CSS personalizado a su sitio web, editar la hoja de estilo CSS de un tema existente no es el camino a seguir. Su arduo trabajo podría sobrescribirse la próxima vez que se actualice el tema.

El método más limpio y más preparado para el futuro es crear su propio "tema secundario" de WordPress simple con su propia hoja de estilo CSS. La hoja de estilo CSS dentro del directorio de su tema hijo anulará cualquier estilo coincidente dentro de la hoja de estilo del tema "principal".

Crear un tema hijo puede sonar como un ejercicio algo desalentador, pero es bastante fácil si está familiarizado con FTP. Si desea seguir este camino, consulte el tutorial sobre el Codex de WordPress.

Si está buscando algo más sencillo, tengo dos sugerencias de complementos:

1. El módulo CSS personalizado dentro de Jetpack: ideal si ya usa Jetpack en su sitio.
2. CSS personalizado simple: si aún no usa Jetpack (y no necesita su variada funcionalidad), esta es una opción más liviana.

Independientemente de la opción que elija, agregar CSS personalizado a WordPress será tan simple como editar el archivo CSS personalizado que ha generado (usted o uno de los complementos).

Las clases de imágenes CSS predeterminadas de WordPress

Con todo eso fuera del camino, pasemos a lo jugoso: las clases de CSS de imágenes predeterminadas de WordPress.

Hay cuatro clases predeterminadas que puede usar para cambiar la apariencia de las imágenes en WordPress:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Estoy seguro de que puede averiguar a qué tipos de imágenes se asignan estas clases.

Cada imagen que agregue a su sitio web a través del editor de texto TinyMCE en las pantallas de publicación/página tendrá asignada una de estas clases, lo que significa que tiene el poder de diseñar todas estas imágenes como mejor le parezca.

Para diseñar un tipo de imagen en particular, todo lo que necesita hacer es seguir el formato que ya ha visto en el ejemplo anterior:

 .nombre de la clase {
	El valor de la propiedad;
	El valor de la propiedad;
	El valor de la propiedad;
}

Importante: cuando una imagen tiene un título, WordPress asigna una de las clases anteriores a un div que rodea la imagen, en lugar de la imagen en sí. Abordar este problema en particular está fuera del alcance de esta publicación, pero es algo que debe tener en cuenta a medida que experimenta. Le recomiendo que pruebe los efectos elegidos con imágenes subtituladas para ver cómo se ven las cosas.

Dicho esto, pasemos a la parte divertida: ¡diseñar tus imágenes!

Estilo de imagen simple con WordPress

Cuando se trata de agregar efectos estilísticos simples a sus imágenes en WordPress, hay cinco propiedades CSS comunes:

1. background
2. border
3. float
4. margin
5. padding

Para obtener una comprensión completa de cómo estas propiedades afectan la apariencia de una imagen (o más exactamente, la apariencia del 'marco' en el que se coloca la imagen), debemos considerar el 'modelo de caja' de CSS:

Cuando se trata de diseñar imágenes, la imagen en sí misma es el "contenido". Luego, esa imagen se rodea de relleno, bordes y márgenes; todo lo cual puede definir. Las imágenes también se pueden 'flotar', lo que para los fines de este tutorial simplemente significa alineadas. Sus opciones de 'flotación' son izquierda, derecha y ninguna. (Centrar una imagen es un poco más complicado; lo abordaremos en breve).

Consideremos un ejemplo simple para demostrar cómo se pueden usar estas propiedades. Primero, aquí hay una imagen con la clase .alignright asignada, sin ninguna marca CSS:

Ahora agreguemos un marcado CSS simple:

 .alinear a la derecha {
	fondo: gris;
	borde: 3px negro sólido;
	flotar derecho;
	margen: 10px;
	relleno: 3px;
}

Aquí está el efecto final:

Probablemente puedas descifrar lo que hemos hecho aquí. La imagen ahora ha sido "flotada" (es decir, alineada) a la derecha, de modo que el texto la envuelve. Agregamos un poco de relleno, al que se le ha dado un fondo gris. Aplicamos un borde negro grueso que aparece alrededor del relleno. Finalmente, un margen de 10px crea algo de espacio entre la imagen y el texto.

Hay muchas cosas que puede hacer solo con los cinco selectores anteriores. Si desea explorarlos más a fondo, aquí hay un recurso completo para cada uno:

• background
• border
• float
• margin
• padding

También prometí una solución para centrar imágenes. Por razones que están más allá del alcance de este tutorial, CSS no te permite simplemente usar float: center; (es decir, el valor no existe). En su lugar, debe definir la imagen como un elemento de bloque , aplicar margin: 0 auto; y definir un ancho para la imagen. Puedes leer más sobre esta técnica aquí. (También proporcionaré un ejemplo del marcado utilizado para crear una imagen centrada a continuación).

Más ejemplos de lo que puede hacer con Image CSS en WordPress

Ahora que tiene una mejor comprensión de las propiedades CSS más comunes que puede usar, aquí hay algunos ejemplos para inspirarse.

Comencemos con algo de relleno y un fondo gris para dar un marco a nuestras imágenes:

 .alinear a la izquierda {
	fondo: #dbdbdb;
	flotador izquierdo;
	margen: 0 10px 5px 0;
	relleno: 5px;
}

Ese marcado da como resultado esto:

Exploremos lo que sucedió aquí:

• Usé un color hexadecimal HTML para el fondo. Estos códigos de color le brindan una flexibilidad prácticamente ilimitada en la elección de colores para su sitio web.
• Debido a que la imagen que utilicé es un PNG transparente, el color de background llenó todo el espacio disponible que no se usó dentro del archivo de imagen.
• He usado cuatro valores dentro de la propiedad de margin para establecer diferentes márgenes para cada lado de la imagen.

Probemos otra cosa. En lugar de darle a nuestras imágenes un color de fondo, pongámoslas en un borde simple para delinearlas del contenido. Aquí está el marcado:

 .alinear a la derecha {
	borde: 1px sólido #000099;
	flotar derecho;
	margen: 0 0 10px 10px;
	relleno: 3px;
}

Como puede ver, hemos jugado con los valores de propiedad de margin para tener en cuenta la alineación de la imagen, redujimos el relleno y agregamos un borde sólido de 1 px. Aquí está el resultado final:

Finalmente, vamos a crear una imagen centrada y darle un borde gris grueso. Aquí está el marcado:

 .Alinear al centro {
	borde: 5px sólido #dbdbdb;
	bloqueo de pantalla;
	margen: 0 automático;
	ancho: 300px;
}

Y el resultado final:

Como puede ver, es posible cambiar por completo la ubicación y la apariencia de una imagen en WordPress usando solo CSS.

En realidad, solo hemos arañado la superficie aquí; hay mucho más que puedes hacer. (Si está interesado en descubrir más, he proporcionado algunos recursos útiles para obtener más información a continuación).

¿Qué pasa con los estilos existentes?

Si está utilizando un tema de WordPress de calidad real, el desarrollador ya habrá agregado estilos a cada una de las clases de imágenes predeterminadas de WordPress. Como mínimo, habrá alineado cada clase de imagen de forma adecuada.

Más allá de eso, sus elecciones habrán sido completamente subjetivas, y ahora tienes el poder de anular sus efectos de estilo. Cualquier marcado CSS que ingrese, ya sea en la hoja de estilo de su tema secundario o mediante un complemento, tendrá prioridad sobre el CSS predeterminado del tema. Tienes el control.

El cielo es el límite

Al leer este artículo, también espero que se sienta inspirado para experimentar con sus propios estilos CSS personalizados. No quería profundizar demasiado en selectores más avanzados en este tutorial, pero hay mucho más que puedes hacer con CSS de lo que he cubierto aquí.

Si está interesado en explorar efectos más avanzados (como sombras, redondeo y rotación), hay una gran cantidad de recursos en línea gratuitos que pueden enseñarle más sobre CSS. Mis recomendaciones personales son:

• Red de desarrolladores de Mozilla: Amado entre la comunidad de desarrolladores web.
• W3 Schools: odiado por muchos desarrolladores web "serios", pero no se puede refutar su profundidad y amplitud de información. Solo tenga en cuenta que es posible que no siempre sea 100% correcto y/o actualizado.
• Códice de WordPress: obtenga más información sobre cómo se unen WordPress y CSS.

Si tiene alguna pregunta, ¡no dude en enviarla en la sección de comentarios a continuación!

Crédito de la foto: Simon Pow, PicJumbo.

• CSS
• imágenes