logooneasesoria4

¿Necesita una consulta gratuita?

Cómo añadir sombreado a imágenes y bloques con WordPress @ Ayuda WordPress

Uno de los efectos más sutiles y al mismo tiempo atractivos que puedes aplicar a un elemento de una publicación, sea este una imagen, una tabla o cualquier otro bloque de contenido es un sombreado, y en concreto las llamadas sombras paralelas.

Este sencillo retoque de diseño añade presencia al elemento, resaltándolo, al aplicarle una especie de efecto 3D.

Así que vamos a ver diversas maneras de aplicar el efecto de sombreado en WordPress, dependiendo de tus preferencias…

Añadir sombra usando CSS

El método más versátil de todos es usar CSS, pues así puedes controlar de manera sencilla dónde aplicar el efecto, da igual el editor que utilices.

El primer paso es añadir un poco de código a la sección de CSS adicional del personalizador, o del editor del sitio. Para este ejemplo añadiremos lo siguiente, que crea un efecto de sombra paralela, uno de los más sutiles, a la par de efectivos:

/* CSS para aplicar sombra paralela */ 
.sombreado { 
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); 
}

Guarda los cambios y ya tenemos lo fundamental para aplicar el efecto.

Hecho esto, solo queda aplicar la nueva clase CSS (sombreado) a los elementos que queramos resaltar.

Si usamos el editor clásico, o un bloque de HTML, sería alto tan simple como añadir la clase directamente al mismo código.

Por otro lado, si queremos aplicar el efecto a un bloque, solo tenemos que añadir la clase a la sección de CSS adicional del bloque.

sombreado bloque medios y texto editor bloques wordpress

Por supuesto, aquí estamos viendo ejemplos de cómo aplicar el sombreado a elementos concretos, pero puedes igualmente aplicarlo a elementos comunes de diseño de la web.

Por ejemplo, puedes aplicar el sombreado a todas las imágenes del sitio añadiendo este CSS adicional al personalizador o al editor del sitio:

.image { box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }

Añadir sombra usando Divi

Entramos en otro nivel, en lo que debería ser también el editor de bloques, porque sinceramente, me parece increíble que no haya por defecto controles para aplicar sombras, transparencias, etc, en el editor Gutenberg.

En fin, que con Divi esto no es problema pues, al ser un maquetador totalmente orientado a diseñadores, tiene todo lo que puedas necesitar para crear webs sin tocar ni una línea de código.

Da igual qué sección, fila, columna o elemento edites, siempre podrás aplicarle cualquier tipo de sombreado, visualmente.

Añadir sombra usando Elementor

Con el maquetador Elementor, incluso en la versión gratuita, es también muy fácil aplicar sombreado, ya sea en la caja del elemento seleccionado, en la sección de ajustes de estilo, o en el apartado del borde del elemento, en los ajustes avanzados.


Como habrás visto, en realidad es muy sencillo aplicar sombreado a los distintos elementos de un diseño, da igual qué herramienta utilices.

¿Y tú, lo haces de otra manera?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

¿Te gustó este artículo?
  • Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

Déjanos tus comentarios..!

15 de enero de 2024

RECIBE

GRATIS

Recursos para tu web GRATIS.

En agradecimiento por haber leido nuestro blog te ofrecemos algúnos plugins, temas y asesoría para el desarrollo de tu sitio web.
Envía correo y espera respuesta...Gracias..!
baneranunciopluginsbest
Publicaciones Relacionadas
Abrir chat
One Asesoría
Hola 👋
¿Necesita cotizar una página o tienda online, cómo podemos ayudarle..?