Cómo agregar fácilmente sombra de caja en WordPress (4 formas)

Una sombra de caja es una de las formas más fáciles de agregar profundidad y énfasis a los elementos en tu sitio de WordPress. Podemos crear este efecto con solo unas pocas líneas de CSS.

Dicho esto, incluso si es simple, algunos lectores de WPBeginner han pedido consejos sobre cómo implementarlo de manera efectiva, especialmente si no se sienten cómodos con la codificación.

En este artículo, te mostraremos varias formas de agregar fácilmente sombras de caja en WordPress, paso a paso. 

¿Por qué agregar sombras de caja en WordPress?

Una sombra de caja, a veces también conocida como sombra paralela, es un efecto visual que hace que parezca que algo en la pantalla está proyectando una sombra.

Tendemos a prestar más atención a los objetos que parecen estar más cerca de nosotros. Con esto en mente, muchos propietarios de sitios web agregan sombras de caja a su contenido más importante para que parezca que está flotando sobre la página.

Por ejemplo, si agregas una sombra grande a un botón de llamada a la acción, parecerá físicamente más cercano al visitante, lo que captará su atención.

Dicho esto, veamos cómo puedes agregar sombras de caja a tu blog de WordPress o sitio web. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar.

• Método 1. Agregar una sombra de caja usando código (más control)
• Método 2. Agregar una sombra de caja usando un plugin gratuito
• Método 3. Agregar una sombra de caja usando un constructor de páginas (fácil)
• Método 4. Agregar una sombra de caja usando CSS Hero (avanzado)
• Aprende más formas de agregar diseños únicos a tu sitio de WordPress

Método 1. Agregar una sombra de caja usando código (más control)

Si agregas un efecto de sombra a cada bloque de WordPress, puede hacer que tu sitio se vea desordenado y confuso. Teniendo esto en cuenta, solo debes agregar una sombra de caja a los elementos más importantes de la página.

También debes mantener las sombras de caja consistentes en todo tu sitio. La mejor manera de hacerlo es definiendo el estilo en CSS usando WPCode.

WPCode es el mejor plugin de fragmentos de código utilizado por más de 1 millón de sitios web de WordPress. Facilita agregar código personalizado en WordPress sin tener que editar el archivo functions.php.

Con WPCode, incluso los principiantes pueden editar el código de su sitio web sin arriesgarse a cometer errores y escribir mal que puedan causar muchos errores comunes de WordPress.

Lo primero que debes hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activar, dirígete a Fragmentos de código » Agregar fragmento.

Aquí, verás todos los fragmentos de WPCode prefabricados que puedes agregar a tu sitio. Estos incluyen un fragmento que te permite deshabilitar completamente los comentarios, cargar tipos de archivo que WordPress normalmente no admite, deshabilitar páginas de adjuntos, y mucho más.

Simplemente coloca el cursor sobre ‘Agregar tu código personalizado (Nuevo fragmento)’ y luego haz clic en ‘+ Agregar fragmento personalizado’ cuando aparezca.

A continuación, debes elegir el tipo de código de la lista de opciones que aparecen en la pantalla.

Para este tutorial, necesitarás agregar CSS personalizado a WordPress, así que selecciona ‘Fragmento CSS’ como tipo de código.

Ahora, serás dirigido a la página Crear fragmento personalizado.

Para empezar, escribe un título para el fragmento de código personalizado. Puede ser cualquier cosa que te ayude a identificar el fragmento en el panel de WordPress.

Luego, en el cuadro ‘Vista previa del código’, copia y pega el siguiente fragmento de código:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

En el fragmento anterior, es posible que necesites reemplazar los valores de px dependiendo del tipo de sombra que quieras crear.

Para ayudarte, aquí tienes lo que significan los diferentes valores de px, de izquierda a derecha:

• Desplazamiento horizontal. Cuando estableces un valor positivo, la sombra se empuja hacia la izquierda. Si escribes un valor negativo como -5px, entonces la sombra se empujará hacia la derecha. Si no quieres añadir un desplazamiento horizontal, puedes usar 0px en su lugar.
• Desplazamiento vertical. Si usas un valor positivo, la sombra se empujará hacia abajo. Si escribes un valor negativo, la sombra se empujará hacia arriba. Si no quieres desplazar la sombra verticalmente, simplemente escribe 0px.
• Radio de desenfoque. Esto desenfoca la sombra para que no tenga bordes duros. Cuanto mayor sea el valor, mayor será el efecto de desenfoque. Si prefieres usar bordes nítidos, escribe 0px.
• Radio de expansión. Cuanto mayor sea el valor, mayor será la expansión de la sombra. Este valor es opcional, así que sáltatelo si no quieres mostrar una expansión.
• Color. Aunque el gris es el color más común para las sombras, puedes usar cualquier color que desees escribiendo un código hexadecimal. Si no estás seguro de qué código usar, puedes explorar diferentes colores usando un recurso como Códigos de Color HTML.

Cuando estés satisfecho con el fragmento, desplázate hasta la sección 'Inserción'. WPCode puede añadir tu código a diferentes ubicaciones, como después de cada publicación, solo en el frontend o solo en el administrador.

Para usar el código CSS personalizado en todo tu sitio web de WordPress, haz clic en 'Insertar automáticamente' si aún no está seleccionado. Luego, abre el menú desplegable 'Ubicación' y elige 'Encabezado del sitio'.

Después de eso, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’, para que cambie a ‘Activo’.

Finalmente, haz clic en 'Guardar fragmento' para que el fragmento CSS se active.

Ahora, puedes añadir la clase CSS personalizada a cualquier bloque.

En el editor de bloques de WordPress, simplemente selecciona el bloque donde deseas agregar una sombra de caja. Luego, en el menú de la derecha, haz clic para expandir la sección ‘Avanzado’.

Aquí verás campos donde puedes agregar diferentes clases.

En ‘Clase(s) CSS adicional(es)’, escribe shadow-effect.

Cuando estés listo para publicar la sombra de caja, simplemente haz clic en el botón ‘Publicar’ o ‘Actualizar’.

Ahora, si visitas tu sitio web, verás la sombra de caja en vivo.

Además de agregar una sombra de caja, también puedes usar WPCode para cambiar el color del texto o incluso personalizar el estilo de las citas de tu tema de WordPress con CSS.

Método 2. Agregar una Sombra de Caja Usando un Plugin Gratuito

Si no te sientes cómodo escribiendo código, entonces podrías preferir crear sombras usando Drop Shadow Box. Este plugin gratuito te permite agregar sombras de caja a cualquier bloque usando el editor de páginas y entradas integrado de WordPress.

Primero, necesitarás instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

No hay configuraciones que ajustar, por lo que puedes empezar a usar este plugin de inmediato.

Para agregar una sombra paralela, simplemente haz clic en el ícono ‘+’ y empieza a escribir ‘Drop Shadow Box’. Cuando aparezca el bloque correcto, haz clic en él para agregarlo a la página o entrada.

Esto agrega la sombra paralela como una caja vacía, así que el siguiente paso es agregar contenido.

Para hacer esto, procede y haz clic en el ‘+’ dentro del bloque Drop Shadow Box.

Luego, simplemente agrega el bloque que deseas usar y configúralo como normal.

Por ejemplo, en la siguiente imagen hemos agregado un bloque de Imagen y seleccionado una foto de la biblioteca de medios de WordPress.

Hecho esto, haz clic para seleccionar el bloque Drop Shadow Box. En el menú de la derecha, verás todas las configuraciones que puedes usar para estilizar este bloque.

WordPress establece el ancho de la sombra automáticamente, pero puedes cambiarlo abriendo el menú desplegable 'Width' y luego eligiendo 'Pixels' o '%'.

Luego puedes redimensionarlo usando las configuraciones que aparecen.

El plugin Drop Box Shadow viene con algunos efectos diferentes, como bordes curvos y un efecto 'Perspective' que llama la atención.

Para previsualizar los diferentes efectos, simplemente abre el menú desplegable 'Effect' y elige de la lista. La vista previa se actualizará automáticamente para que puedas probar diferentes estilos y ver cuál prefieres.

También puedes cambiar si el plugin muestra la sombra dentro de la caja, fuera de la caja, o ambas, usando los interruptores 'Inside Shadow' y 'Outside Shadow'.

Después de eso, puedes cambiar el color de la caja y el borde usando la configuración en el encabezado ‘Colores’.

Solo ten en cuenta que ‘Fondo’ se refiere al interior de la Caja de Sombra Paralela, mientras que ‘Borde’ aparece fuera del bloque.

Si quieres crear una caja de sombra más suave y curva, puedes activar el interruptor ‘Esquinas redondeadas’. Finalmente, puedes cambiar la alineación y el relleno, de manera similar a como personalizas otros bloques en WordPress.

Para crear más sombras de caja, simplemente sigue el mismo proceso descrito anteriormente.

Cuando estés satisfecho con el aspecto de la página, simplemente haz clic en ‘Actualizar’ o ‘Publicar’ para que todas tus nuevas sombras de caja estén activas.

Método 3. Añadir una Sombra de Caja Usando un Constructor de Páginas (Fácil)

Si quieres añadir sombras de caja a páginas de destino, páginas de inicio personalizadas, o cualquier parte de tu tema de WordPress, entonces te recomendamos usar un plugin constructor de páginas.

SeedProd es el mejor constructor de páginas de WordPress de arrastrar y soltar. Te permite diseñar páginas de destino personalizadas e incluso crear un tema de WordPress personalizado sin tener que escribir una sola línea de código.

También te permite añadir sombras de caja a cualquier bloque usando su editor avanzado de arrastrar y soltar.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Al activar, ve a SeedProd » Landing Pages en tu panel de WordPress.

SeedProd viene con más de 300 plantillas diseñadas profesionalmente que están agrupadas en categorías. En la parte superior, verás categorías que te permiten crear hermosas páginas de "próximamente", activar el modo de mantenimiento, crear una página de inicio de sesión personalizada para WordPress y más.

Todas las plantillas de SeedProd son fáciles de personalizar, por lo que puedes usar el diseño que desees.

Cuando encuentres una plantilla que quieras usar, simplemente pasa el mouse sobre ella y haz clic en el ícono de marca de verificación.

Ahora puedes escribir un nombre para tu página de destino en el campo 'Nombre de la página'. SeedProd creará automáticamente una 'URL de la página' usando el nombre de la página.

Es inteligente incluir palabras clave relevantes en tu URL siempre que sea posible, ya que esto ayuda a los motores de búsqueda a entender de qué trata la página. Esto a menudo mejorará tu SEO en WordPress.

Para cambiar la URL generada automáticamente de la página, simplemente escribe en el campo 'URL de la página'.

Cuando estés satisfecho con la información que has escrito, haz clic en ‘Guardar y empezar a editar la página’. Esto cargará la interfaz del constructor de páginas de SeedProd.

Este sencillo constructor de arrastrar y soltar muestra una vista previa en vivo del diseño de tu página a la derecha. A la izquierda hay un menú que muestra todos los diferentes bloques y secciones que puedes agregar a la página.

Cuando encuentres un bloque que quieras agregar, simplemente arrástralo y suéltalo en tu plantilla.

Para personalizar un bloque, haz clic para seleccionarlo en el editor de SeedProd. El menú de la izquierda ahora mostrará todas las configuraciones que puedes usar para personalizar el bloque.

Por ejemplo, si haces clic en un bloque de encabezado, puedes escribir tu propio texto o cambiar el color del texto y el tamaño de la fuente.

Mientras construyes la página, puedes mover los bloques por tu diseño arrastrándolos y soltándolos. Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo crear una página de destino con WordPress.

Para crear una sombra de caja, haz clic para seleccionar cualquier bloque en el editor de páginas de SeedProd. La configuración en el menú de la izquierda puede variar entre bloques, pero normalmente necesitarás hacer clic en una pestaña de 'Avanzado'.

Aquí, busca un menú desplegable de 'Sombra' en la sección 'Estilos'. Simplemente abre este menú desplegable y elige un estilo de sombra como Fina, Media o 2X Grande.

La vista previa se actualizará automáticamente, así que puedes probar diferentes estilos para ver cuál se ve mejor en el diseño de tu página.

Si no quieres usar ninguno de los estilos predeterminados, haz clic en 'Personalizado'.

Esto agrega algunas configuraciones nuevas donde puedes cambiar el color, el desenfoque, la expansión y la posición de la sombra personalizada.

Hecho esto, puedes continuar trabajando en la página agregando más bloques y sombras de caja.

Cuando estés satisfecho con el aspecto de la página, haz clic en el botón 'Guardar' y luego elige 'Publicar' para que esté en vivo.

Método 4. Agrega una Sombra de Caja Usando CSS Hero (Avanzado)

Si no te sientes cómodo trabajando con código pero aún quieres crear sombras de caja avanzadas, puedes probar CSS Hero. Este plugin premium te permite ajustar cada parte de tu tema de WordPress sin tener que escribir una sola línea de código.

CSS Hero te permite crear una sombra única para cada bloque, por lo que también es una excelente opción si quieres crear muchos efectos de sombra diferentes. Puedes aprender más sobre el plugin en nuestra reseña de CSS Hero.

Primero, necesitas instalar y activar el plugin CSS Hero. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, verás un botón de ‘Proceder a la activación del producto’ en la parte superior de la pantalla. Haz clic en este botón.

Esto te llevará al sitio web de CSS Hero, donde podrás iniciar sesión en tu cuenta y obtener una clave de licencia. Simplemente sigue las instrucciones en pantalla y serás redirigido de vuelta a tu sitio en unos pocos clics.

A continuación, haz clic en el texto ‘CSS Hero’ en la barra de administración de WordPress.

Esto abrirá el editor de CSS Hero.

Por defecto, el editor de CSS Hero tiene una vista previa WYSIWYG de tu sitio web y un panel izquierdo donde puedes editar cada elemento del diseño de tu web.

Si te das cuenta de que no estás en la página donde quieres añadir la sombra de caja, puedes cambiar del modo ‘Editar’ al modo ‘Navegar’.

Esto te permite interactuar con menús de navegación, enlaces y otro contenido de forma normal.

Ahora puedes navegar a la página o publicación donde quieres añadir la sombra.

Tan pronto como llegues a esa página, vuelve a cambiar al modo ‘Editar’.

Hecho esto, haz clic en el párrafo, imagen, botón o cualquier otro contenido donde quieras añadir una sombra de caja.

En el panel izquierdo, haz clic en ‘Extra’.

Ahora puedes proceder a hacer clic en ‘Crear Sombra’.

Esto mostrará todas las configuraciones que puedes usar para crear una sombra de caja.

Para empezar, puedes cambiar si la sombra aparece dentro o fuera del bloque usando la configuración ‘Posición de la Sombra’.

Aquí, hemos seleccionado 'Exterior' para que la sombra aparezca fuera de la imagen.

Después de tomar esta decisión, puedes ajustar la orientación de la sombra usando el pequeño punto en el cuadro 'Orientación'.

Simplemente arrastra y suelta el punto a una nueva posición para verlo moverse en la vista previa en vivo.

Cuando estés satisfecho con la posición de la sombra, puedes cambiar su color, desenfoque y extensión.

CSS Hero mostrará estos cambios inmediatamente, para que puedas probar diferentes configuraciones y ver cuál se ve mejor.

Para agregar una sombra de caja a otros bloques, simplemente sigue el mismo proceso descrito anteriormente.

Cuando estés satisfecho con el aspecto de la página, haz clic en 'Guardar' para que los cambios se publiquen.

Aprende más formas de agregar diseños únicos a tu sitio de WordPress

Los métodos anteriores proporcionan una excelente base para agregar sombras de caja en WordPress. Pero, ¿qué pasa si quieres lograr efectos aún más únicos y creativos?

En los siguientes artículos, encontrarás guías útiles sobre cómo agregar varios elementos de diseño a tu sitio web:

• Cómo agregar efectos de desplazamiento en imágenes en WordPress – Esta guía explora diferentes efectos de desplazamiento que puedes crear para tus imágenes, haciendo que tu sitio web sea más atractivo e interactivo para los visitantes.
• Cómo agregar fácilmente animaciones CSS en WordPress – Las animaciones, junto con las sombras de caja, pueden crear una experiencia de usuario dinámica y visualmente atractiva, captando la atención de tus visitantes y manteniéndolos interesados.
• Cómo agregar un efecto parallax a cualquier tema de WordPress – Al incorporar efectos parallax, puedes mejorar la ilusión de profundidad y crear un sitio web más inmersivo.
• Cómo crear un divisor de formas personalizado en WordPress – Este artículo te muestra cómo crear formas únicas para separar visualmente las secciones de tu contenido.
• Cómo crear fácilmente un slider responsive en WordPress – Esta guía te enseña cómo crear sliders para mostrar tu contenido de una manera atractiva y que ahorra espacio.
• Cómo agregar un fondo animado en WordPress – Agregar fondos animados puede crear una experiencia de usuario única y visualmente interesante.

Esperamos que este tutorial te haya ayudado a aprender cómo agregar una sombra de caja en WordPress. También es posible que desees aprender cómo eliminar CSS no utilizado en WordPress y cómo optimizar la entrega de CSS de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.