Agregar Lightbox al sitio de WordPress: Guía definitiva para principiantes

Lightbox es una de las muchas funciones interesantes y populares de un sitio web basado en imágenes. Pero no todos saben cómo agregar lightbox a un sitio web de WordPress, especialmente, un principiante. Por lo tanto, traemos esta guía para principiantes para ayudarlos a agregar lightbox a los sitios web de WordPress.

¿Qué es Lightbox y cómo agregarlo?

Lightbox es una galería de imágenes modal que muestra su imagen y video creando una ventana emergente de pantalla completa y atenuando el resto de la página . Por ejemplo:

Este hermoso y elegante efecto es extremadamente útil para un portafolio, fotografía o cualquier sitio web basado en imágenes. Le permite ver la imagen con claridad y hace que su sitio web sea más destacado .

Normalmente, hay 3 formas de tener lightbox para un sitio web de WordPress:

• Agregar código corto
• Instalación de un complemento
• Usando un tema que admita lightbox.

Para los principiantes, sugerimos que utilicen un complemento o busquen un tema con esa característica lista en mente porque agregar shortcode es solo para usuarios avanzados.

Mostrar Lightbox si su tema lo admite

No hay nada que decir si su tema ya muestra la caja de luz para galerías / imágenes. Pero sabemos que muchos temas necesitan algunos pasos más para mostrarlos. Por ejemplo, este ePortfolio de temas admitía la caja de luz, pero debe vincular la galería al archivo multimedia para mostrar la caja de luz.

Normalmente, hay dos opciones: enlace al archivo multimedia o página adjunta . Cuando vincula una imagen / galería a una página adjunta, se abre una nueva página separada que contiene solo la imagen cuando hace clic en la imagen. Si enlaza a un archivo multimedia, solo mostrará la imagen, no la página, así:

Aquí está la guía para hacerlo.

Primero, vaya al Editor de publicaciones , luego haga clic en la galería.

Si usa el Editor de Gutenberg, mire la barra lateral derecha, verá la sección Enlace a .

En cuanto a una sola imagen, debe hacer clic en este icono en la barra de herramientas:

Mientras está en el Editor clásico, la sección Enlace a aparece cuando crea o edita una galería y una imagen única.

Luego, elija Archivo multimedia y haga clic en Insertar galería para terminar. Al actualizar o publicar el mensaje, haga clic en esa galería / imagen, se verá que la luz se está ejecutando.

Si su tema es compatible con la caja de luz, esta acción puede habilitar la caja de luz para la galería / imagen que desee. De lo contrario, no habrá caja de luz en absoluto.

Sin embargo, la configuración puede ser diferente con diferentes temas. Por ejemplo, algunos pueden requerir que trabaje en el Personalizador, algunos pueden necesitar que inserte un enlace a la página adjunta en lugar del archivo multimedia. Por lo tanto, debe verificar el tema con cuidado .

Independientemente del tema que use, aún así, es necesario saber cómo vincular una galería / imagen a un archivo multimedia porque será útil agregar lightbox usando un complemento a continuación.

Agregar Lightbox mediante un complemento

De hecho, agregar lightbox no es nada difícil. Al buscar la palabra clave "complemento de caja de luz", verá una gran cantidad de complementos para este efecto. En cuanto a nuestra investigación, clasificamos los complementos en dos tipos: complementos complicados y complementos simples para agregar lightbox.

En cuanto a los complementos complicados, hay opciones mucho más sofisticadas para personalizar mucho la caja de luz, como el tamaño de la imagen, el color del borde, los estilos de la caja de luz,… Por ejemplo, la caja de luz y la galería de respuesta y la caja de luz de imagen de FooBox tienen más herramientas de personalización. Pero es más difícil de usar si eres un principiante. Además, el resultado no es tan diferente de un simple complemento. Es por eso que preferimos usar un complemento simple como Simple Lightbox .

Este complemento es fácil de usar, bastante popular entre más de 200,000 instalaciones activas y calificado con 160 de cinco estrellas. Además, el diseño de la caja de luz es bueno.

Paso 1: instalar y activar el complemento Lightbox simple

En su Panel de control> Complemento> Agregar nuevo , solo necesita escribir "caja de luz simple" y hacer clic en Instalar el complemento, y luego Activarlo .

Paso 2: configurar el complemento Simple Lightbox

En el Complemento> Complementos instalados , haga clic en Configuración en la pestaña Caja de luz simple .

Pestaña de activación de la configuración de Lightbox simple

La pestaña Activación le permite habilitar / deshabilitar algunos parámetros. La casilla más importante que debe marcar es Habilitar la funcionalidad Lightbox , que habilita la caja de luz para su galería. Si no elige esta casilla, las demás secciones no tienen sentido.

El resto de casillas son opcionales para ti. Puede marcar para mostrar la caja de luz en su página de inicio, publicaciones individuales, páginas, páginas de archivo, widgets y menús.

Asegúrese de que realmente quiere lightbox para las secciones correctas porque demasiados lightboxes pueden hacer que su sitio web sea un poco ostentoso.

Ficha Agrupación de la configuración de Lightbox simple

Desplazándose hacia abajo, está la pestaña Agrupación . Decidirá la forma en que muestra la caja de luz en forma de control deslizante o de una sola imagen.

Agrupar elementos: márquelo para mostrar su imagen / galería como un control deslizante, lo que le permite navegar de una a la siguiente imagen. Solo cuando active esta función, podrán tener efecto otras secciones de esta pestaña. De lo contrario, otras secciones de agrupación no funcionan.

Agrupar elementos por publicación: al marcar esta casilla, agrupa todos los elementos de una sola publicación en un control deslizante de caja de luz . Hágalo cuando desee agrupar solo las imágenes / galerías dentro de una publicación y excluir otras imágenes / galerías de otras publicaciones, widgets y menús.

Agrupar elementos de la galería por separado, Agrupar elementos del widget por separado y Agrupar elementos del menú por separado: marque cada uno de ellos para agrupar elementos en una galería de una sola publicación, elementos en un widget o elementos de menú respectivamente . Significa que puede navegar a los siguientes elementos en la misma galería, widget o menú en el control deslizante de la caja de luz. Creemos que debe hacerlo cuando no quiera estropear las cajas de luz en diferentes partes, lo que puede confundir a sus visitantes.

Pestaña UI de configuración de Lightbox simple

La pestaña UI tiene secciones para modificar el estilo de la caja de luz. Preste atención a esto si desea personalizar la pantalla de su caja de luz.

Tema: Hay 2 estilos para tu caja de luz. Simplemente elija uno que se adapte a sus gustos.

Estilo oscuro

Estilo ligero

Cambiar el tamaño de la caja de luz para que quepa en la ventana: recomiendo encarecidamente activar esta sección para tener una buena visualización. De lo contrario, la imagen es de pantalla completa y no puede ver la imagen completa de esta manera.

Habilitar animaciones: marque para habilitar el efecto de carga.

Desmarque para desactivar el efecto, haciendo que la navegación sea más rápida.

Iniciar presentación de diapositivas automáticamente: deje que se mueva a la siguiente imagen automáticamente cuando habilite esta sección.

Duración de la diapositiva: si activa la sección de presentación automática de diapositivas anterior, puede elegir la duración de la diapositiva aquí.

Recorrer elementos: ¿desea repetir los elementos después de una ronda de una diapositiva? Si es así, haga clic en este cuadro.

Opacidad de la superposición (0 - 1): puede modificar la opacidad de la superposición del fondo. Cuanto menor sea la opacidad, más claro podrá ver la publicación detrás. Por ejemplo, establecemos la opacidad en 0,1 para que el fondo se pueda ver con mucha claridad.

Habilitar título predeterminado: puede elegir mostrar el título de la imagen haciendo clic en este cuadro. Así es como se muestra el título.

Pestaña Etiqueta de Lightbox simple

Finalmente, esta pestaña le permitirá cambiar la etiqueta de cada botón. Pero estas secciones no entran en vigencia a menos que agregue un código corto al editar el tema. Entonces, en este tutorial para principiantes, no es necesario que se ocupe de esta pestaña.

Cuando haya terminado con todas las configuraciones del complemento Simple Lightbox, haga clic en Guardar cambios justo debajo de la pestaña Etiqueta .

Paso 3: vincule imágenes / galería al archivo multimedia para mostrar Lightbox

Para decidir qué imagen / galería agregar lightbox, debe insertar el enlace del archivo multimedia a esa imagen / galería. Si no agrega un enlace al archivo multimedia, no se puede mostrar la caja de luz.

Simplemente siga la guía que mencionamos en la parte "Mostrar Lightbox si su tema lo admite". Verá, dijimos que definitivamente debería saber cómo hacerlo si desea utilizar el complemento Simple Lightbox.

Las ultimas palabras

A continuación se muestra la forma más fácil de agregar lightbox a su sitio web de WordPress. Especialmente si eres un principiante, usar el complemento Simple Lightbox es una forma simple y efectiva. Dependiendo de su demanda, su sitio web y su estética, puede elegir diferentes complementos de caja de luz para obtener el resultado más deseable. O puede optar por encontrar un tema de WordPress que admita lightbox y configurarlo para mostrar ese efecto.

Si desea más instrucciones sobre complementos complicados de lightbox, deje un comentario a continuación y siga siguiéndonos.