¿Quiere que los elementos de su sitio web destaquen y capten la atención de sus visitantes? Una simple sombra de recuadro puede mejorar instantáneamente el diseño y hacer que destaquen las imágenes, los botones o las secciones de contenido.
En esta guía, voy a compartir 4 maneras fáciles de añadir una sombra de caja en WordPress para que pueda resaltar el contenido que más importa.
¿Por qué debería añadir una sombra de caja en WordPress?
Una sombra recuadrada crea una sutil ilusión de profundidad al imitar la sombra que proyectaría un objeto, haciéndolo aparecer ligeramente elevado del fondo. Este sencillo efecto puede cambiar radicalmente la percepción del contenido por parte de los visitantes.
Nuestro cerebro se siente atraído por el contraste y la separación, principios arraigados en la psicología de la Gestalt. Añadir una sombra de caja crea una separación visual entre los elementos, guiando al instante los ojos de sus visitantes hacia las zonas más importantes de su sitio web.
Esto significa que las sombras de caja pueden ayudar a que su sitio web funcione mejor:
- Aumente las conversiones: Destaque las llamadas a la acción, como botones o formularios, para fomentar los clics y las conversiones.
- Destaque las imágenes: Haz que las imágenes destaquen del fondo, llamando la atención y potenciando su impacto.
- Mejore la experiencia del usuario: Cree un diseño visualmente más atractivo y organizado, haciendo que su sitio web sea más fácil y agradable de navegar.
A continuación, encontrará 4 formas sencillas de añadir estos efectos a su sitio de WordPress.
- Método 1: Añadir una Sombra de Caja en WordPress Usando un Constructor de Página (Más Fácil)
- Método 2: Añadir una sombra de caja en WordPress con código CSS (Más control)
- Método 3: Añadir una sombra de caja utilizando un plugin gratuito (alternativa rápida)
- Método 4: Añadir una sombra de caja usando CSS Hero (Avanzado)
Método 1: Añadir una Sombra de Caja en WordPress Usando un Constructor de Página (Más Fácil)
Ahora que entiendes el poder de las sombras de caja, vamos a crear una. Este método es perfecto para estudiantes visuales y para cualquiera que quiera una solución sin código. Voy a utilizar SeedProd para añadir una sombra de caja con estilo en tan sólo unos clics.
SeedProd es el mejor constructor de sitios web de WordPress, con más de 1 millón de usuarios. Con su constructor de páginas de arrastrar y soltar, puede crear páginas de destino y sitios web de alta conversión y personalizar cada centímetro de su diseño sin escribir código.
También puede añadir sombras de caja a cualquier elemento de diseño señalando y haciendo clic.
Para empezar, instale y active SeedProd en su sitio web WordPress. Para más detalles, consulte nuestra guía sobre cómo instalar SeedProd.
Después de activar el plugin, vaya a SeedProd " Landing Pages desde su panel de WordPress. A continuación, haga clic en el botón Añadir nueva página de destino.
Aquí, elige un diseño prefabricado y totalmente personalizable para tu página. Las plantillas de SeedProd hacen que sea fácil encontrar un aspecto que se adapte a tu marca, y puedes ajustar cada detalle para hacerlo tuyo.
Haz clic en los filtros de la parte superior para navegar, luego pasa el ratón por encima de una plantilla y haz clic en el icono de la marca de verificación para seleccionarla.
Ahora, puede introducir un nombre para su 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 su optimización para los motores de búsqueda de WordPress.
Si no desea conservar la URL generada, haga clic dentro del campo "URL de la página" y escriba la suya propia.
Ahora puede hacer clic en el botón Guardar y empezar a editar la página para iniciar su 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 su diseño a la derecha. En el lado izquierdo, hay un panel con bloques que puede arrastrar a la página.
Cuando encuentres un bloque que quieras añadir, haz clic en él, arrástralo y suéltalo en la vista previa en vivo. A continuación, puedes seleccionar el bloque para personalizar su aspecto y configuración.
Por ejemplo, si haces clic en el bloque Titular, podrás introducir tu propio texto y cambiar el tamaño de la fuente, el color y la alineación.
También puede mover los bloques por la página arrastrándolos y soltándolos. Para obtener instrucciones detalladas, consulta nuestra guía sobre cómo crear una página de aterrizaje en WordPress.
Si quieres añadir una sombra de recuadro a un bloque, tendrás que hacer clic en la pestaña Avanzado de 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, voy a hacer clic en la configuración de la columna y seleccione la ficha Opciones avanzadas.
A continuación, haz clic en el menú desplegable "Sombra" y selecciona una opción, como Línea de pelo, Pequeño, Mediano, Grande, X 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 preestablecidos no te sirven, 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 mucho 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, puede seguir personalizando su página añadiendo más bloques y sombras.
Cuando estés satisfecho con el aspecto de tu página, haz clic en Guardar en la esquina superior derecha y selecciona Publicar.
He aquí un ejemplo del aspecto final de mi página, con las nuevas sombras de recuadro:
Método 2: Añadir una sombra de caja 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 desordenado. Lo mejor es utilizarlas para resaltar el contenido importante y mantener la coherencia del diseño.
La forma más fácil de hacerlo es estableciendo el estilo de la sombra de la caja con CSS, y usaré WPCode para hacerlo súper simple.
WPCode es un popular plugin de fragmentos de código que te permite añadir código personalizado a tu sitio WordPress sin editar directamente los archivos de tu tema. Esto mantiene las cosas organizadas y te ayuda a evitar errores accidentales.
Lo primero que tienes que 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, vaya a Code Snippets " +Add Snippets desde el administrador de WordPress.
En esta página verás fragmentos de código personalizados ya creados para añadirlos a tu sitio web. Para añadir el tuyo propio, pasa el cursor por encima de la opción "Añade tu código personalizado" y haz clic en Añadir fragmento personalizado.
Una vez cargada la página, escriba un nombre para su fragmento que le ayude a identificarlo. A continuación, selecciona la opción "Fragmento 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);
}Puede reemplazar los valores px en el fragmento para personalizar la sombra que desea hacer.
Vamos a desglosar esas cifras para que sepas exactamente lo que 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: Indica al navegador que vamos a definir una sombra de caja.
- 5px 5px: Estos dos primeros valores son el desplazamiento horizontal y vertical de la sombra. El primer valor la desplaza hacia la derecha, el segundo hacia abajo. Juega con ellos para ajustar la posición de la sombra.
- 10px: Este es el radio de desenfoque. Los números altos crean una sombra más suave y borrosa. Los números bajos la mantienen nítida.
- rgba(0, 0, 0, 0.2): Esto establece el color de la sombra. Aquí usamos un negro semitransparente. El último número (alfa) controla la transparencia: 0 es completamente transparente y 1 es completamente opaco.
Una vez que estés satisfecho con el fragmento, desplázate hacia abajo hasta la sección Inserción para definir dónde debe añadirlo WPCode. Para utilizarlo en todo tu sitio web, elige la opción 'Auto Insertar' y establece la ubicación como Encabezado de todo el sitio.
Ahora, vuelva a la parte superior de la página y cambie el conmutador "Inactivo" a la posición "Activo". A continuación, 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", escriba "custom-box-shadow".
Luego, cuando estés satisfecho con la entrada, puedes hacer clic en "Actualizar" o "Publicar". Entonces podrás visitar la entrada y ver tu sombra de caja en acción.
Método 3: Añadir una sombra de caja utilizando un plugin gratuito (alternativa rápida)
Si no te sientes cómodo trabajando con fragmentos de código, puede que prefieras crear sombras utilizando 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.
En primer lugar, instale y active el plugin en su sitio web. Como no hay ajustes configurables, puedes utilizar 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 "sombra paralela".
Cuando aparezca, haz clic en él para añadirlo a tu página. Verás una sombra paralela en un bloque vacío, así que vamos a añadir algo de contenido.
Dentro del bloque de sombra paralela, 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 multimedia de WordPress.
A continuación, haz clic en el bloque para ver la configuración de la sombra del recuadro en la barra lateral izquierda.
WordPress establece automáticamente el ancho de la sombra, pero puedes cambiarlo eligiendo "píxeles" o "%" en el cuadro desplegable "Ancho". A continuación, puede utilizar el control deslizante para ajustarlo.
También verás efectos de nutria, 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 puede experimentar son las sombras interiores y exteriores, los colores de los bordes, los píxeles de los bordes y las esquinas redondeadas.
Cuando esté satisfecho con la sombra del recuadro, repita estos pasos para otros bloques o haga clic en "Actualizar" o "Publicar" para aplicar los cambios.
Así es como se ven mis sombras de caja usando este método:
Método 4: Añadir una sombra de caja usando CSS Hero (Avanzado)
Si no te sientes cómodo trabajando con código pero aún así 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, por lo que es ideal para experimentar con diferentes efectos de sombra en todo tu sitio.
Para empezar, instala y activa el plugin CSS Hero. A continuación, 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" de la barra de herramientas de administración para abrir el editor CSS Hero.
Por defecto, el editor 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 estás en la página en la que quieres añadir la sombra de recuadro, utiliza los iconos de la parte superior de la pantalla para pasar del modo "Seleccionar" al modo "Navegar".
Ahora, puede ir a la página que desee y volver al modo Seleccionar.
A continuación, haga clic en cualquier elemento de la vista previa en el que desee añadir una sombra de recuadro, como una imagen, un botón, un párrafo u otro contenido.
Una vez hecho esto, haz clic en "Extra" en el panel de la izquierda.
Por defecto, la opción de sombra de caja muestra 'Ninguno', así que haga clic en el botón Hacer sombra.
Primero, cambia dónde aparece la sombra. En los ajustes de Posición de la sombra, puede elegir 'Dentro' o 'Fuera'.
A continuación, trabaja en el ángulo de la sombra en la sección Orientación. Simplemente arrastre el círculo hasta que el ángulo de la sombra de la caja esté en la posición que desee.
Por último, cambia el color de la sombra con la herramienta cuentagotas y utiliza los controles deslizantes para controlar el desenfoque y la extensión de la sombra.
Utiliza el mismo método para añadir una sombra de caja a otras áreas de tu sitio web. Cuando estés satisfecho con el resultado, haz clic en el botón Guardar y publicar.
Ahora, visite sus cambios para ver cómo se ven en vivo en su sitio web.
Más formas de personalizar su sitio web WordPress
Los métodos que he cubierto en esta guía son ideales para añadir efectos de sombra de caja en WordPress. Pero si quieres añadir efectos más creativos, te serán útiles las siguientes guías:
- Cómo cambiar los márgenes en WordPress - Personalice el espaciado alrededor de su contenido para obtener un aspecto pulido y profesional.
- Cómo añadir texto a una imagen en WordPress - Cree gráficos llamativos y llamadas a la acción directamente en sus imágenes.
- Cómo crear fondos animados con Particle.js en WordPress - Añada un toque de dinamismo con atractivos fondos animados.
- Cómo hacer una página de ancho completo en WordPress - Libérese de las barras laterales y cree diseños de página envolventes y de ancho completo.
- Cómo aten uar una imagen de fondo en WordPress - Haga que su texto sea más fácil de leer y cree una sensación de profundidad con una imagen de fondo atenuada.
- Cómo crear animaciones de texto en WordPress - Capte la atención de sus visitantes con llamativos efectos de texto animado.
- Cómo crear divisores de sección elegantes para WordPress - Separe visualmente su contenido con divisores de forma elegantes.
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 conocimientos de WordPress más allá? Empieza con SeedProd y crea páginas de destino y sitios web impresionantes y de alta conversión sin codificar.
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenidos útiles para hacer crecer tu negocio.
