domingo, 12 de noviembre de 2017

¿Como conseguir una animación en 3D para wordpress?

Existen muchos plugins para wordpress, pero a veces queremos conseguir efectos especiales y no todos los plugins lo tienen, en esta ocasión vamos a hablar de Dbox Lite 3D.

Con este plugin puedes crear e insertar un control deslizante 3D con transiciones suaves y controles potentes en muy poco tiempo. Puedes adjuntar fácilmente imágenes de la biblioteca multimedia de WordPress al control deslizante e incrustarlas en cualquier lugar del sitio usando cualquiera de los siguientes métodos:
  • Accesos Directos
  • Widgets
  • Etiquetas de la plantilla
Aprendamos a usar de Dbox Lite

1. Primer paso

a.- Para instalarlo lo primero que vamos hacer es ir a plugin


b.- Una vez ahí podemos buscar el plugin e instalarlo


Una vez instalado empezamos nuestro trabajo

2. Segundo paso

a.- En la izquierda buscamos Dbox Lite Slider y seleccionamos slider

b.- Aparecerá una pantalla donde podremos adicionar todas las imágenes que necesitamos.


c.- Una vez que subamos las imágenes, más abajo podemos acomodarlas en el orden que queremos que se muestren y grabamos.


3. Tercer paso ahora vamos a settings (ajustes)

a.- Tenemos varias configuraciones que hacer, el primero es el básico


En el básico elegiremos:


  • Dirección de la rotación
  • La velocidad
  • Podemos desactivar la animación automática
  • Tiempo de transición
  • La cantidad máxima de publicaciones en el control deslizante DboxLite
  • La cantidad de rompimiento de la diapositivas.
  • El tamaño de nuestro slider ancho y alto

Configuración de slides


Preferencias de selección de imagen (la primera tiene prioridad sobre la segunda, la segunda tiene prioridad sobre la tercera y así sucesivamente)

  • Tamaño del extracto de la imagen de Wordpress
  • Habilitar recorte de imagen (usando timthumb)
  • Hacer control deslizante de la imagen
  • Habilitar el texto del título de la imagen al pasar el mouse
  • Imagen predeterminada

Ahí mismo también vemos título de la diapositiva / publicación

Aquí se personaliza la apariencia del título de cada una de las publicaciones deslizantes:

  • Font
  • Google Web Font
  • Font Color
  • Font Size
  • Font Style

Contenido del Slide - Personaliza el aspecto del contenido de cada uno de los posts deslizantes

  • Mostrar contenido / descripción debajo del título
  • Font
  • Google Web Font
  • Font Color
  • Font Size
  • Font Style
  • Pick content From
  • Maximum content size (in words)
  • Maximum content size (in characters)
  • Content Background Color
  • Content Background Opacity

Botones de navegación

  • Button Width
  • Background Color
  • Background Color on Hover

Navigations Dots

  • Background Color
  • Fill Color of Current Dot
  • Size

Navigation Play/Pause

  • Background Color
  • Background Color on Hover
  • Size

Vista previa en el Panel de configuración

  • Disable Preview Section
  • Type of Dbox Lite Slider
  • Preview Slider Params

Shortcode

Pegue el código corto a continuación en el panel de edición de página / publicación para obtener el control deslizante como se muestra en la vista previa anterior

Template Tag

Pegue la etiqueta de la plantilla a continuación en su archivo de plantilla de tema como index.php o page.php en la ubicación requerida para obtener el control deslizante como se muestra en la Vista previa de arriba.

CSS

CSS generado a través de estas configuraciones

Primero guarde los Cambios para la configuración y luego vea estos datos. Puede usar este CSS en sus hojas de estilo 'personalizadas' si usa un valor diferente al 'predeterminado' para la carpeta de la hoja de estilo.

Las limitaciones de este plugin son:

Una de las limitaciones de este plugin, es que no solo tiene 2 tipos de animación horizontal y vertical, y esta en inglés, por lo demás es muy fácil de usar.
Aquí te dejamos el enlace para bajar el plugin, clic aquí

1 comentario: