Cómo añadir una sombra paralela en WordPress: 4 maneras sencillas 

Cuando una página parece plana, suele ser porque faltan las sombras. Añadir una sombra paralela a tus tarjetas destacadas o botones de llamada a la acción es una de las correcciones de diseño más rápidas que puedes hacer en WordPress.

En esta guía, compartiré 4 maneras sencillas de añadir una sombra paralela en WordPress para que puedas resaltar el contenido más importante.

¿Por qué deberías añadir una sombra paralela en WordPress?

Una sombra paralela crea una sutil ilusión de profundidad imitando la sombra que proyectaría un objeto, haciendo que parezca ligeramente elevado del fondo. Este efecto de sombra CSS puede cambiar drásticamente la percepción de tu contenido por parte de los visitantes.

Nuestros cerebros se sienten atraídos de forma natural por el contraste y la separación, principios arraigados en la psicología Gestalt. Añadir una sombra paralela crea una separación visual entre elementos, guiando instantáneamente la mirada de tus visitantes a las áreas más importantes de tu sitio web.

Esto significa que las sombras paralelas pueden mejorar el rendimiento de tu sitio web:

• Aumenta las conversiones: Resalta las llamadas a la acción como botones o formularios para fomentar clics y conversiones.
• Enfatiza las imágenes: Haz que las imágenes resalten del fondo, atrayendo la atención y mejorando su impacto.
• Mejora la experiencia del usuario: Crea un diseño más atractivo y organizado, haciendo que tu sitio web sea más fácil y agradable de navegar.

A continuación, encontrarás 4 maneras sencillas de añadir estos efectos a tu sitio de WordPress.

Método 1: Añadir una sombra paralela en WordPress usando SeedProd (lo más fácil)

Ahora que entiendes el poder de las sombras paralelas, vamos a crear una. Este método es perfecto para aprendices visuales y cualquiera que quiera una solución sin código. Usaré SeedProd para añadir una elegante sombra paralela en solo unos clics.

SeedProd es el mejor constructor de sitios web de WordPress, con más de 1 millón de usuarios. Con su constructor visual de arrastrar y soltar, puedes crear páginas de destino y sitios web de alta conversión y personalizar cada centímetro de tu diseño sin escribir código.

También puedes añadir sombras paralelas a cualquier elemento de diseño apuntando y haciendo clic.

Para empezar, instala y activa SeedProd en tu sitio web de WordPress. Para más detalles, consulta nuestra guía sobre cómo instalar SeedProd.

Nota: La versión gratuita de SeedProd tiene todo lo que necesitas para añadir sombras de caja en WordPress. Sin embargo, usaré la versión premium para esta guía porque tiene plantillas más avanzadas.

Después de activar el plugin, navega a SeedProd » Landing Pages desde tu panel de WordPress. Luego, haz clic en el botón Añadir Nueva Landing Page.

Aquí, elige un diseño predefinido y totalmente personalizable para tu página. Las plantillas de SeedProd facilitan encontrar un aspecto que se ajuste a tu marca, y puedes modificar cada detalle para hacerlo tuyo.

Haz clic en los filtros de la parte superior para buscar, luego pasa el ratón sobre una plantilla y haz clic en el icono de la marca de verificación para seleccionarla.

Ahora, puedes introducir un nombre para tu página, y SeedProd establecerá automáticamente la URL. Incluir palabras clave relevantes para la página en la URL es una buena idea, ya que esto puede mejorar tu optimización de motores de búsqueda en WordPress.

Si no quieres conservar la URL generada, haz clic dentro del campo 'URL de la página' y escribe la tuya.

Ahora puedes hacer clic en el botón Guardar y Empezar a Editar la Página para lanzar tu diseño en la interfaz del constructor de páginas.

El constructor de arrastrar y soltar de SeedProd muestra una vista previa en vivo de tu diseño a la derecha. En el lado izquierdo, hay un panel con bloques que puedes arrastrar a la página.

Cuando encuentres un bloque que quieras añadir, haz clic, arrastra y suelta en la vista previa en vivo. Luego, puedes seleccionar el bloque para personalizar su apariencia y configuración.

Por ejemplo, al hacer clic en el bloque de Encabezado, puedes introducir tu propio texto y cambiar el tamaño de fuente, el color y la alineación.

También puedes mover bloques por la página arrastrándolos y soltándolos. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo crear una landing page en WordPress.

Si quieres añadir una sombra de caja a un bloque, tendrás que hacer clic en la pestaña Avanzado en la configuración de ese bloque.

En este ejemplo, quiero añadir una sombra de caja a cada cuadro de características. Por lo tanto, haré clic en la configuración de la columna y seleccionaré la pestaña Avanzado.

A continuación, haz clic en el menú desplegable 'Sombra' y selecciona una opción, como Fina, Pequeña, Mediana, Grande, Muy Grande, etc.

Al elegir una sombra, la vista previa se actualizará automáticamente. Puedes experimentar con diferentes estilos hasta que encuentres uno que funcione.

Si los estilos predefinidos no te funcionan, elige la opción 'Personalizado'. Esta opción abre nuevas personalizaciones para cambiar el desenfoque, la extensión, el color, la posición de la sombra y más.

Al final, elegí la opción 2X Grande y repetí el proceso para cada bloque de la cuadrícula.

Después de añadir la sombra de caja, puedes seguir personalizando tu página añadiendo más bloques y sombras.

Cuando estés satisfecho con el aspecto de todo, haz clic en Guardar en la esquina superior derecha y selecciona Publicar para que tu página esté en vivo.

Aquí tienes un ejemplo de cómo se ve mi página final, completa con las nuevas sombras de caja:

Para añadir una sombra de caja a un botón de WordPress, selecciona tu bloque de botón en SeedProd, abre la pestaña Avanzado y aplica los mismos ajustes de sombra que se muestran arriba.

Método 2: Añadir una sombra paralela en WordPress con código CSS (más control)

Añadir una sombra de caja a cada elemento de tu sitio web puede hacer que parezca abarrotado. En su lugar, es mejor usarlas para resaltar contenido importante y mantener la coherencia de tu diseño.

La forma más fácil de hacer esto es estableciendo el estilo de tu sombra de caja con CSS, y usaré WPCode para que sea súper simple.

WPCode es un popular plugin de fragmentos de código que te permite añadir código personalizado a tu sitio de WordPress sin editar directamente los archivos de tu tema. Esto mantiene las cosas organizadas y te ayuda a evitar errores accidentales.

Lo primero que necesitarás hacer es instalar y activar el plugin gratuito WPCode. Para una guía completa, consulta esta guía sobre cómo instalar un plugin de WordPress.

Después de activar el plugin, ve a Fragmentos de código » +Añadir fragmentos desde tu administrador de WordPress.

En esta página, verás fragmentos de código personalizados predefinidos para añadir a tu sitio web. Para añadir los tuyos, pasa el cursor sobre la opción 'Añadir tu código personalizado' y haz clic en Añadir fragmento personalizado.

Después de que la página cargue, escribe un nombre para tu fragmento que te ayude a identificarlo. Luego, selecciona la opción 'Fragmento de CSS' en el menú desplegable 'Tipo de código'.

Ahora añade el siguiente fragmento de código en el editor de código:

.custom-box-shadow {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

Puedes reemplazar los valores de px en el fragmento para personalizar la sombra que deseas crear.

Vamos a desglosar esos números para que sepas exactamente qué está pasando:

• .custom-box-shadow: Este es el nombre de la clase CSS que estamos creando. La usaremos para aplicar la sombra de caja a elementos específicos.
• Box-shadow: Esto le dice al navegador que estamos a punto de definir una propiedad CSS de sombra de caja.
• 5px 5px: Estos dos primeros valores son el desplazamiento horizontal y vertical de la sombra. El primer valor la mueve hacia la derecha, el segundo la mueve hacia abajo. Juega con estos para ajustar la posición de la sombra.
• 10px: Este es el radio de desenfoque. Los números más altos crean una sombra más suave y difusa. Los números más bajos la mantienen nítida.
• 0px (radio de expansión): Este es el radio de expansión. Un valor positivo expande la sombra hacia afuera; 0px la mantiene ajustada. Añádelo entre el valor de desenfoque y el color rgba si quieres usarlo.
• rgba(0, 0, 0, 0.2): Esto establece el color de la sombra. Estamos usando un negro semitransparente aquí. El último número (alfa) controla la transparencia: 0 es completamente transparente y 1 es completamente opaco.

También puedes añadir 'inset' como primer valor para crear una sombra dentro del elemento en lugar de fuera de él.

Si tu sombra de caja no se muestra, aquí tienes tres cosas que puedes comprobar:

• El selector CSS puede no estar apuntando al elemento correcto. Usa las Herramientas de desarrollador del navegador para confirmar a qué elemento se aplica la clase.
• Otra hoja de estilos puede estar anulando tu sombra. Añade !important como último recurso si no puedes resolver el conflicto.
• Un contenedor padre con overflow:hidden recortará la sombra. Elimina esa propiedad o ajusta el contenedor.

Una vez que estés satisfecho con el fragmento, desplázate hacia abajo hasta la sección de Inserción para definir dónde debe añadirlo WPCode. Para usarlo en todo tu sitio web, elige la opción ‘Insertar automáticamente’ y establece la ubicación como Encabezado de todo el sitio.

Ahora, desplázate de nuevo a la parte superior de la página y cambia el interruptor ‘Inactivo’ a la posición ‘Activo’. Luego, haz clic en el botón Guardar fragmento.

El siguiente paso es añadir la clase CSS personalizada a cualquier bloque de WordPress. Para ello, selecciona cualquier bloque en el editor de bloques de WordPress y haz clic en ‘Avanzado’ en el menú de la izquierda.

En el campo ‘Clases CSS adicionales’, escribe ‘custom-box-shadow’.

Luego, cuando estés satisfecho con la entrada, puedes hacer clic en ‘Actualizar’ o ‘Publicar’. A continuación, puedes visitar la entrada y ver tu sombra de caja en acción.

Método 3: Añadir una sombra paralela usando un plugin gratuito (alternativa rápida)

Si no te sientes cómodo trabajando con fragmentos de código, puede que prefieras crear sombras usando Drop Shadow Boxes. Este plugin gratuito de WordPress te permite añadir sombras de caja a cualquier bloque utilizando el editor de bloques integrado de WordPress.

Primero, instala y activa el plugin en tu sitio web. Dado que no hay ajustes configurables, puedes usar el plugin inmediatamente.

A continuación, crea o edita una entrada o página de WordPress. Dentro del editor, haz clic en el icono más (+) para añadir un nuevo bloque y busca ‘drop shadow’.

Cuando aparezca, haz clic en él para añadirlo a tu página. Verás una sombra de caída en un bloque vacío, así que añadamos algo de contenido.

Dentro del bloque de sombra de caída, haz clic en el icono más, añade un bloque y configúralo como de costumbre. Por ejemplo, he añadido un bloque de imagen y he elegido una imagen de la biblioteca de medios de WordPress.

A continuación, haz clic en el bloque para ver los ajustes de la sombra de caja en la barra lateral izquierda.

El ancho de la sombra se establece automáticamente en WordPress, pero puedes cambiarlo eligiendo ‘píxeles’ o ‘%’ en el cuadro desplegable ‘Ancho’. Luego, puedes usar el control deslizante para ajustarlo.

También notarás otros efectos como bordes curvos y un efecto de ‘Perspectiva’. Para previsualizarlos, abre el menú desplegable ‘Efecto’ y elige uno de la lista.

Otras opciones con las que puedes experimentar incluyen sombras interiores y exteriores, colores de borde, píxeles de borde y esquinas redondeadas.

Una vez que estés satisfecho con la sombra de caja, repite estos pasos para otros bloques, o haz clic en ‘Actualizar’ o ‘Publicar’ para que tus cambios se apliquen en vivo.

Así es como se ven mis sombras de caja usando este método:

Método 4: Añadir una sombra paralela usando CSS Hero (avanzado)

Si no te sientes cómodo trabajando con código pero aún quieres crear sombras de caja avanzadas, entonces CSS Hero es una gran opción.

Este plugin premium te permite ajustar cada parte de tu tema de WordPress sin escribir una sola línea de código. También puedes crear sombras únicas para cada bloque, lo que lo hace ideal para experimentar con diferentes efectos de sombra en todo tu sitio.

Para empezar, instala y activa el plugin CSS Hero. Luego, sigue las instrucciones de activación del producto para vincular tu cuenta de CSS Hero con tu sitio de WordPress.

Ahora, haz clic en la opción ‘Personalizar con CSS Hero’ en la barra de herramientas de administración para abrir el editor de CSS Hero.

Por defecto, el editor de CSS Hero muestra una vista previa en vivo de tu sitio web y un panel donde puedes editar cada elemento de tu diseño web.

Si no te encuentras en la página donde quieres añadir la sombra de caja, utiliza los iconos en la parte superior de la pantalla para cambiar del modo ‘Seleccionar’ a ‘Navegar’.

Ahora, puedes ir a la página que desees y volver al modo Seleccionar.

A continuación, haz clic en cualquier elemento de la vista previa donde quieras añadir una sombra de caja, como una imagen, un botón, un párrafo u otro contenido.

Cuando hayas terminado, haz clic en ‘Extra’ en el panel izquierdo.

Por defecto, la opción de sombra de caja muestra ‘Ninguna’, así que haz clic en el botón Crear Sombra .

Primero, cambia dónde aparece la sombra. En los ajustes de Posición de Sombra, puedes elegir ‘Interior’ o ‘Exterior’.

A continuación, trabaja en el ángulo de la sombra en la sección Orientación. Simplemente arrastra el círculo hasta que el ángulo de la sombra de caja esté en la posición que desees.

Finalmente, cambia el color de la sombra usando la herramienta cuentagotas y utiliza los deslizadores para controlar el desenfoque y la extensión de la sombra.

Utiliza el mismo enfoque para añadir una sombra de caja a otras áreas de tu sitio web. Luego, cuando estés satisfecho con el aspecto de todo, haz clic en el botón Guardar y Publicar .

Ahora, visita tus cambios para ver cómo quedan en vivo en tu sitio web.

Preguntas Frecuentes

¿Qué es una sombra de caja en WordPress?

Una sombra de caja en WordPress es un efecto de sombra CSS aplicado a un elemento —como una imagen, un botón o un bloque de contenido— para darle profundidad. Hace que el elemento parezca ligeramente elevado del fondo de la página. Puedes añadir una usando un constructor visual de páginas, un fragmento de CSS o un plugin dedicado, sin editar los archivos del tema.

¿Cómo añado una sombra de caja en WordPress sin un plugin?

Para añadir una sombra de caja en WordPress sin un plugin, escribe un fragmento de CSS personalizado. Añade una regla de box-shadow a través de Apariencia > Personalizar > CSS adicional, o usa WPCode para gestionar el fragmento. Luego aplica el nombre de la clase CSS a cualquier bloque a través de su panel de ajustes Avanzados en el editor de bloques.

¿Cuál es la diferencia entre una sombra de caja y una sombra proyectada?

Una sombra de caja sigue el cuadro delimitador rectangular de un elemento, produciendo siempre una sombra rectangular independientemente de la forma del elemento. Una sombra proyectada utiliza la propiedad de filtro CSS y sigue el contorno real del elemento, incluidas las áreas transparentes. Para la mayoría de los casos de uso de WordPress —tarjetas, botones, imágenes— una sombra de caja funciona bien. Usa una sombra proyectada cuando la sombra necesite seguir una forma irregular o recortada.

¿Puedo añadir una sombra de caja a las imágenes en WordPress?

Sí. Con SeedProd, selecciona un bloque de imagen, abre la pestaña Avanzado y elige un ajuste preestablecido en el menú desplegable Sombra. Con CSS, aplica una regla de box-shadow dirigida al elemento img o a una clase CSS personalizada. El plugin Drop Shadow Boxes también envuelve los bloques de imagen con una sombra utilizando el editor nativo de WordPress.

Más formas de personalizar tu sitio web de WordPress

Los métodos que he cubierto en esta guía son ideales para agregar efectos de sombra de caja en WordPress. Pero si deseas agregar efectos más creativos, encontrarás útiles las siguientes guías:

• Cómo cambiar los márgenes en WordPress — Personaliza el espaciado alrededor de tu contenido para una apariencia pulida y profesional.
• Cómo añadir texto sobre una imagen en WordPress — Crea gráficos impactantes y llamadas a la acción directamente sobre tus imágenes.
• Cómo crear fondos animados con Particle.js en WordPress — Añade un toque de estilo dinámico con fondos animados que captan la atención.
• Cómo hacer una página de ancho completo en WordPress — Libérate de las barras laterales y crea diseños de página inmersivos de ancho completo.
• Cómo atenuar una imagen de fondo en WordPress — Haz que tu texto sea más fácil de leer y crea una sensación de profundidad con una imagen de fondo atenuada.
• Cómo crear animaciones de texto en WordPress — Capta la atención de tus visitantes con efectos de texto animados que llaman la atención.
• Cómo crear divisores de sección elegantes para WordPress — Separa visualmente tu contenido con elegantes divisores de formas.

Espero que esta guía te haya ayudado a aprender cómo añadir una sombra de caja en WordPress. Ahora, puedes mejorar instantáneamente el diseño de tu sitio web y resaltar tu contenido más importante.

¿Listo para llevar tus habilidades de WordPress al siguiente nivel? Empieza con SeedProd y crea páginas de destino y sitios web de alta conversión sin necesidad de código.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.