Guía de configuración del control deslizante en WoodMart Themes

WoodMart El tema cuenta con un deslizador ligero para crear rápidamente efectos de rotación de imágenes suaves que se ejecutan más rápido, son más fáciles de configurar y tienen menos impacto en su sitio que plugins como Revolution Slider. Esta función se basa en WordPress Los tipos de artículos personalizados permiten a los usuarios beneficiarse de Constructor de páginas WPBakery tal vez Elementor Realice la maquetación y la gestión de contenidos, mejorando así la visualización dinámica de la página.

Creación de deslizadores

Los sliders mejoran la presentación visual de una página y atraen la atención de los visitantes hacia los contenidos clave. Los pasos básicos para crear un slider son los siguientes:

Vaya al backend de WordPress y haga clic en Slides > Slider para ir a la página de gestión de sliders.

Introduzca la información pertinente para crear un nuevo control deslizante

personalizacióndeslizador (elemento de interfaz del ordenador)establecer

Diseño

Animación de cambio de diapositiva (Slide Change Animation)

En esta sección, se pueden seleccionar diferentes controles deslizantes para cambiar la animación:

• Diapositiva - Efecto de alternancia de diapositivas por defecto.
• Desvanecer - Hace que la diapositiva aparezca y desaparezca suavemente.
• Parallax - Efecto de desplazamiento de paralaje.
• Distorsión - Animación con efectos especiales de deformación.

Deslizador extensible

• Esta opción se utiliza para Hacer o no el deslizador a pantalla completa.
• El estado actual es NO (apagado)lo que significa que el deslizador no ocupará automáticamente toda la anchura de la pantalla.
• Si está activada (SÍ), la barra deslizante se adaptará a todo el ancho de la página, lo que resulta adecuado para mostrar imágenes grandes a pantalla completa.

Ajuste de la altura en el escritorio

• Esta opción permite ajustar la altura del deslizador en el extremo del escritorio.
• La altura está fijada actualmente en 500pxEl valor puede ajustarse arrastrando el control deslizante según sea necesario.
• Visible en el icono de la derecha, este ajuste de altura sólo se aplica al escritorioLos lados de la tableta y el móvil pueden ajustarse individualmente.

Estilo de las flechas

Estilo Flechas

En esta sección, puede elegir el estilo de las flechas de navegación del control deslizante, con cuatro opciones:

• Flecha por defecto(actualmente seleccionado)
• flecha de línea fina
• flecha circular
• Flechas ocultas (sin flechas de navegación)

Si no desea que el usuario cambie de diapositiva mediante las flechas, puede seleccionar la última opción para ocultar las flechas.

Combinación de colores de las flechas

• Hay dos combinaciones de colores disponibles:
  • Fondo negro, flechas blancas
  • Fondo blanco, flechas negras

Adecuado para diferentes estilos de sitios web, puede elegir según el color de fondo de la página.

Ajustes personalizados

• Estado actual: Apagado (NO)lo que significa que se utilizan los ajustes por defecto.
• Si activa esta opción, podrá realizar ajustes de personalización más avanzados, como el tamaño de la flecha, el color, los bordes, etc.

Estilo de paginación

Estilo de paginación

Esta sección permite seleccionar el estilo del indicador de paginación para el deslizador, con cuatro tipos previstos:

• Paginación por puntos (marcada por defecto): Muestra el progreso actual del deslizador como un punto, adecuado para un estilo minimalista.
• paginación numéricaMuestra la posición de la corredera numéricamente, por ejemplo "01 - 02", para una mejor visualización.
• Puntos + Barra de progreso: Combina puntos y barras de progreso para conseguir diseños más dinámicos.
• Ocultar paginación: No muestra ninguna navegación de paginación, adecuado para diseños sin requisitos de paginación.

Paginación Alineación horizontal

Este ajuste determina la posición horizontal de la navegación de paginación en el deslizador y tiene tres opciones:

• justificación izquierda
• Centrado (actualmente seleccionado)
• alineado a la derecha

Combinación de colores de paginación (Pagination Color Scheme)

Este ajuste permite seleccionar el esquema de colores de la navegación de paginación:

• Fondo negro, indicador de paginación blanco
• Fondo blanco, indicador de paginación negro

Se pueden hacer ajustes según el esquema de color general del sitio web para garantizar un efecto visual coherente.

Ajustes personalizados

• Estado actual: Apagado (NO)indica que se utiliza la configuración por defecto.
• Si activas la configuración personalizada, podrás ajustar el tamaño, espaciado, color, etc. de los indicadores de paginación para disponer de una configuración más avanzada y personalizada.

Una vez creados con éxito, puede ver los controles deslizantes creados en una lista y añadir contenido deslizante para hacerlos más útiles en pasos posteriores.

Configuración personalizada de diapositivas

La configuración del deslizador puede determinar su presentación en el Diapositivas > Deslizador > Edicióndiapositivas (fotografía, software de presentación)Se pueden ajustar los siguientes parámetros clave:

apertura (jerga ajedrecística)

Configuración del diseño

• Contenido sin espacio: Actualmente estado cerrado, si está activado, no habrá relleno extra (padding) en el área de contenido dentro del deslizador.

• Contenido de ancho completo: Actualmente estado cerradosi está activada, el contenido de la barra deslizante ocupará automáticamente todo el ancho de la barra deslizante, lo que permite un efecto de pantalla completa.

• Anchura del contenidoLa anchura del contenido de la barra deslizante puede ajustarse manualmente y actualmente está fijada aproximadamente en 750pxPuede deslizarse y ajustarse según las necesidades del diseño.

Contenido Posición

• Hay tres modos de dispositivo disponibles (Escritorio, Tableta, Móvil)El diseño del contenido puede configurarse por separado para los distintos dispositivos a fin de garantizar la adaptabilidad del control deslizante.
• Alineación vertical del contenido: Proporciona tres tipos de alineación, el actualmente seleccionado es alineado en el centro(es decir, el contenido se encuentra en el centro del deslizador).
• Alineación horizontal del contenido: Se ofrecen tres opciones, la selección actual es justificación izquierdaes decir, el contenido se sitúa a la izquierda de la barra deslizante.

contextos

Color de fondo (Color)

• existe Color para seleccionar un fondo de color sólido. Si no desea utilizar una imagen de fondo, puede hacer clic en el selector de color para establecer un color adecuado.

Imagen de fondo

• Cargar imagen de fondoPuede hacer clic en Cargar carga una imagen para utilizarla como fondo del deslizador.
• Dispositivo Adaptable: Proporcionado Escritorio, Tableta, Móvil Tres opciones para configurar la imagen de fondo para distintos dispositivos, a fin de garantizar una buena visualización en todos los tamaños de pantalla.

Tamaño del fondo

• Esta opción se utiliza para ajustar cómo se muestra la imagen de fondo y tiene dos opciones:
  • PortadaLa imagen de fondo se extenderá hasta ocupar toda el área de la barra deslizante, posiblemente recortando parte del contenido de la imagen, pero asegurándose de que el fondo cubra completamente la barra deslizante.
  • Contiene: La imagen de fondo se mostrará en su totalidad, posiblemente dejando un área en blanco dentro del deslizador, pero el contenido de la imagen no se recortará.

Antecedentes

• Las opciones actuales son Centro, lo que significa que la imagen de fondo se alineará con el deslizador en el punto central. Si necesita ajustarlo, puede elegir otra posición, por ejemplo:
  • Parte inferior izquierda - parte inferior izquierda
  • Centro Centro - centrado
  • Arriba a la derecha - parte superior derecha
  • Fondo central - centrado en el fondo
  • Centro superior - centrado en la parte superior
  • Izquierda Centro - Centrado a la izquierda
  • Izquierda Arriba - arriba a la izquierda
  • Centro derecha - Centro derecha
  • Fondo derecho - inferior derecha
  • A medida - personalizable

Ajustes

Activar reproducción automática

• Estado actual: Apagado (NO)
• Esta opción determina si el control deslizante gira automáticamente, y si está activada, eldiapositivas (fotografía, software de presentación)cambiará automáticamente a intervalos establecidos sin necesidad de pulsar manualmente.
• Adecuado para mostrar contenido dinámico, como productos populares, información promocional, etc., para mejorar el atractivo visual de la página.

Scroll Loading Slider (Init Carousel on Scroll)

• Estado actual: Apagado (NO)
• Esta opción determina si la secuencia de comandos se carga sólo después de que el control deslizante aparezca, una característica que ayuda a optimizar el rendimiento de la página y reducir el tiempo de carga inicial de la página.
• Ideal para páginas que contienen varios sliders, especialmente cuando el contenido es largo, para ayudar a reducir las ejecuciones de script innecesarias y mejorar el flujo de la página.

Añadir diapositivas a un deslizador

existedeslizador (elemento de interfaz del ordenador)Añadir diapositivas

La siguiente pantalla aparece en la barra lateral de la página Crear o editar diapositiva individual, y su función principal es asignar la diapositiva que se está editando en ese momento a uno o varios deslizadores creados:

• Todos los deslizadores(Todos los deslizadores): Aquí se listarán todos los deslizadores que se han creado para el sitio, y el usuario podrá elegir a qué deslizadores quiere asignar la diapositiva actual.
• Más utilizados(Uso más frecuente): Aquí se enumeran los controles deslizantes de uso más frecuente para una selección rápida de los controles deslizantes más utilizados.
• Pulse en la parte inferior del "+ Añadir nuevo deslizador" Puede crear directamente un nuevo deslizador y añadir rápidamente la diapositiva actual al deslizador recién creado.

Utilice esta función para gestionar de forma rápida y eficaz la asociación entre diapositivas y deslizadores para optimizar la eficacia de la gestión de contenidos.

Clasificación de diapositivas

siguienteWordPressEl área de configuración de Atributos de la entrada en el backend, donde la opción Orden se utiliza para establecer el orden en que se muestran las diapositivas o páginas.

Especifique:

• Pida::
  Se utiliza para establecer el orden de la página, entrada o diapositiva actual en una lista o visualización del front-end.
  • El número por defecto es "0", cuanto menor sea el número, más avanzada será la clasificación.
  • Por ejemplo, si introduce "0" o un número negativo (por ejemplo, "-1"), el elemento se mostrará en la parte superior del front-end.
  • Si introduce un número mayor (por ejemplo, "5" o "10"), el elemento aparecerá más adelante en la clasificación.

Utilice esta función para controlar de forma flexible el orden en que se muestran las diapositivas o páginas en su sitio web, ayudándole a organizar y presentar mejor el contenido.

Configurar imágenes destacadas

• En la parte derecha del Imagen destacada haga clic en "Establecer imagen destacada".
• Seleccione una imagen de la biblioteca multimedia de WordPress o suba una nueva.

Añadir un control deslizante a una página

WoodMart Soporte temático Constructor de páginas WPBakery responder cantando Elementor Dos formas de insertar el deslizador:

Uso de Elementor

• Vaya a la pantalla de edición de páginas de Elementor.
• aumentar Deslizador WoodMart Widget a la página.
• Seleccione el control deslizante creado en la lista desplegable y ajuste el tamaño y el estilo según sea necesario.
• Tras confirmar que no hay errores, pulse actualizaciónpara hacer efectivos los cambios.

hacer uso de Constructor de páginas WPBakery

• entrar en Editor de páginaCambiar a Editor de WPBakery .
• aumentar Deslizador WoodMart en el lugar adecuado de la página.
• En Configuración de componentes, seleccione el control deslizante que desea insertar.
• Después de guardar los cambios, actualice la página para previsualizar cómo aparecerá el control deslizante.

advertencia

• Bloques que contienen deslizadores La anchura debe ajustarse a por defecto (ajuste)de lo contrario puede haber problemas tipográficos.
• Deslizador a pantalla completa Debe estar en la configuración del deslizador Activar el deslizador de estiramientoy garantizar que Contenido de ancho completo para garantizar la adaptabilidad a distintos dispositivos.

resúmenes

WoodMart La función de deslizador del tema ayuda a los usuarios a crear rápidamente efectos de rotación de alta calidad y a optimizar la presentación visual del sitio web. El uso adecuado de los sliders no solo atrae la atención de los visitantes hacia la información clave, sino que también mejora la jerarquía de la página y hace que todo el sitio sea más profesional.