Background

Documentación Woocommerce

Agregar deslizador de fotos al sitio

VOLVER

Para agregar un deslizador de imágenes, tendremos que hacer 2 procesos:

1. Cargar las fotos que tendrá el o los deslizadores de imágenes.

2. Añadir el elemento Nectar Slider en la página donde queremos que se muestre.

Para empezar, nos dirigiremos al apartado Nectar Slider > All Slides como se muestra en la siguiente foto:

Una vez ahí, para cargar una nueva foto, tenemos que hacer click en [Agregar entrada].

Una vez dentro, veremos una ventana como la siguiente:

Veamos cada punto:

Background Type:

Aquí definiremos si queremos cargar una foto o video en nuestro deslizador. Si escogemos foto (que viene por defecto), se habilitará el botón de carga de archivo. Podremos cargar cualquier formato de imagen desde nuestra Media o una nueva foto.
Si escogemos Video Background, se habilitarán los campos para escoger un archivo en formato de video, pudiendo además seleccionar imagen de muestra (Preview Image).

Add texture overlay to background:

Habilitando esta opción, añadimos una ligera superposición de texturas en el fondo, que queda sobre la imagen que cargamos. Se recomienda cuando utilizamos fotos que no tienen gran contraste con los textos que agregaremos sobre estas.

Background Alignment:

Aquí defines a qué lado alinear el fondo, pudiendo alinearla arriba, abajo o al centro.

Slide Font Color:

Aquí defines si tu texto será claro (light) u oscuro (dark). Si tu imagen es muy blanca o clara, escoge textos oscuros, de lo contrario, utiliza los claros.

Heading:

Aquí defines el título que aparecerá en el deslizador. El tamaño en el que aparecerá se define en la pestaña Salient > Typography > Nectar Specific elements > Nectar/Home Slider Heading Font.

Caption:

Aquí defines el subtítulo o texto bajo el título que aparecerá en el deslizador. El tamaño en el que aparecerá se define en la pestaña Salient > Typography > Nectar Specific elements > Nectar/Home Slider Caption Font. Este campo admite HTML, por lo que puedes incorporar etiquetas básicas como saltos de linea, subtítulos, etc.

Caption Background:

Habilita esta opción si quieres agregar un bloque semi-transparente detrás del subtítulo.

Insert Down Arrow That Leads to Content Below?

Activando esta opción, puedes añadir una atractiva flecha que te deslizará al contenido bajo este.

Link Type:

Aquí definimos de qué manera se comportarán los enlaces del deslizador, pudiendo ser a través de botones (Button Links) o presionando sobre cualquier área de todo el deslizador (Full Slide Link).

Si definimos tipo botones, se habilitará la opción de agregar hasta 2 botones, de lo contrario, seleccionando Full Slide Link, se habilitará un solo campo donde tendremos que ingresar el enlace hacia donde será redirigido el usuario al hacer click.

Configurando los botones, tendremos 4 opciones: texto del botón, link o enlace, estilo del botón (solido, transparente, etc.) y color (predefinido en Salient > Accent Colors).

Slide Content Alignment

Aquí definimos en que lugar se ubicará el contenido (textos y botones) dentro del deslizador, tanto de forma vertical, como horizontal.

Extra Class Name

Si quieres tener un botón muy personalizado, puedes incorporar una clase previamente definida en documento CSS. Si no tienes este conocimiento y has contratado un plan con soporte, puedes pedir al Equipo de Segurihost que haga un botón personalizado con el nombre de clase que tu quieras y recuerdes para usar en otras fotos.

Y para finalizar, es importante indicar dónde o en qué deslizador estará la foto que estamos cargando. Para ello, debemos más arriba, definir o marcar el Slider Location que define su ubicación. En la foto de ejemplo, ya estaba creada el slider location llamado Home (fue llamado así porque es facil identificar que quedará dentro del deslizador que mostramos en portada), donde podremos utilizar ese u otro que nosotros queramos. Para agregar otro Slider Location rapidamente, hacemos click en + Add New Slider Location

Esto aún no acaba... ¿Cómo lo mostramos ahora en una página?

Como agregar Slider a una página del sitio

Nos dirigimos a editar una de nuestras páginas, en el ejemplo utilizaremos la página de inicio o Home como le llamamos nosotros. Una vez dentro del editor, agregamos un nuevo elemento {Nectar Slider}.

Hacemos click y se agregará el elemento al editor.



Después tendremos que hacer click en el ícono de lápiz para modificar. Esto abrirá la configuración de Nectar Slider:

Ahí definimos el Slider Location, de manera tal que en este deslizador, se carguen todas las fotos que fueron marcadas para aparecer en el Slider Location llamado Home como vimos anteriormente.

Después ya podrás definir el alto de la imagen, si mostrar o no flechas de navegación cuando contiene más de 1 sola foto, diseño de los botones de navegación, habilitar deslizamiento (arrastrar fotos) en versión escritorio, efecto Parallax, agregar ciclo con tiempo de aparación de las fotos, forma de transición y tamaño de los botones que ya definimos anteriormente cuando cargabamos la foto.

Una vez aplicado los cambios, ya podremos ver el deslizador en acción.

Así veremos nuestro deslizador: