Twenty20 Imagen Antes-Después - KolMitE

Twenty20 Imagen Antes-Después

Twenty20 Imagen Antes-Después

diciembre 7, 2018 Widget 0


Descripción

Twenty20 es el complemento de WordPress del script TwentyTwenty que desarrolló el equipo de Zurb.

Esto generó algunas ideas nuevas sobre cómo hacer algo similar para nuestras propias necesidades. Tuvo que pasar entre dos imágenes para mostrar “antes” y “después”. Más que nada, tenía que ser sensible.

Manifestación
Twenty20 Demo

Caracteristicas

  • Responsable y funcional en todos los dispositivos.
  • No requiere imágenes para trabajar.
  • Interfaz de usuario fácil y limpia
  • Añadir antes-después en los widgets.
  • Apoyo a los constructores de páginas populares.
  • Soporta WP Image alt como imagen alt y titulo.

Apoyar a los creadores de páginas

  • WP Bakery Visual Composer.
  • Elementor Page Builder.
  • UX Builder por UXThemes.

Ejemplo rápido

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Parámetros de código abreviado

  • img1 – ID de imagen.
  • img1 – ID de imagen.
  • compensar – 0.1 a 1.0.
  • direcciónhorizontal | vertical.
  • alinearninguna | derecha | izquierda.
  • anchura – Apoya ambos px y %.
  • antes de – Texto
  • después – Texto
  • flotar – verdadero o falso.

Video Demo

Capturas de pantalla

  • Añadir Twenty20 antes-después de la imagen.
  • Seleccione cualquiera de las dos imágenes de Media Libray.
  • Página de configuración del código corto Twenty20.
  • Shortcod.
  • Veinte20 en acción.
  • Control deslizante múltiple en diferentes direcciones.
  • Veinte20 más ancho.
  • Widget en acción.
  • Configuración de WP Bakery Visual Composer.
  • Elemento elementor.
  • Elemento UX Builder.

Instalación

  1. Descomprima el paquete de descarga.
  2. Subir veinte20 al / wp-content / plugins / directorio
  3. Active el complemento a través del menú “Complementos” en WordPress

Instalación manual del plugin

  1. Descargar Twenty20 Plugin a su escritorio.
  2. Si se descarga como un archivo zip, extraiga la carpeta del complemento en su escritorio.
  3. Con su programa FTP, cargue la carpeta del complemento a la wp-content / plugins carpeta en su directorio de WordPress en línea.
  4. Vaya a la pantalla Complementos y encuentre el complemento Twenty20 en la lista.
  5. Haga clic en Activar complemento para activarlo.

Preguntas más frecuentes

¿Cómo funciona?

Twenty20 trabaja apilando dos imágenes una encima de la otra. A medida que el control deslizante se mueve a través de la imagen.

Ejemplo rápido
[twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=”60%” before=”Before” after=”After” hover=”true”]
Parámetros de código abreviado
  • img1 - id de imagen.
  • img1 - id de imagen.
  • desplazamiento - 0.1 a 1.0.
  • dirección - horizontal | vertical.
  • alinear - ninguno | derecho | izquierdo.
  • ancho - soporta tanto px como%.
  • antes - texto de cadena.
  • después - texto de cadena.
  • flotar - verdadero | falso.
¿Cómo agregar el deslizador antes-después?

Compruebe la demo Video demo.

Cómo agregar widget

Compruebe la demo Video demo.

¿Puedo usar más de un control deslizante en una sola publicación o página?

Sí, el complemento Twenty20 permite al usuario agregar un control deslizante ilimitado de antes y después.

Opiniones

Super plugin

Aabor

¡Gracias! Super plugin

Excelente plugin pero …

erickraq

Creo que es genial, busqué muchas opciones que cumplían esta función y todas estaban obsoletas hace 2 años o más. Gracias a usted, este plugin todavía está actualizado y el soporte es muy apreciado. Sólo, en breve, WordPress actualizará el editor de texto antiguo al nuevo llamado Gutenberg.. Sería muy apreciado si lo hicieran compatible, ya que es una herramienta útil y sería una pena que lo perdiera el nuevo editor de publicaciones que se ha renovado (para bien con sinceridad).

Sería genial si lo hicieran compatible con el editor de Gutenberg. Lo agradeceríamos mucho. : D Muchas gracias.

Gutenberg

Funciona bien, gracias!

Diseño webprom

Trabajó para mí como widget de generador de páginas WPBakery. La sombra divisoria se está cortando en la parte superior e inferior, por lo que se tuvo que cambiar a una línea simple con fondo.

.twentytenty-horizontal .twentytwenty-handle :: before, .twentytwenty-horizontal .twentytwenty-handle :: after Debería contar la altura real, entonces la sombra funcionará mejor.

¡Gracias de todas formas!

Buen plugin con buen soporte.

Tanvir Hasan

He estado usando este plugin en varios sitios web. Fue casi perfecto. Solo falta la característica de texto alternativo para las imágenes. El desarrollador del complemento agregó esa función en la última actualización. Muchas gracias por el gran trabajo!

Gran plugin

alegremente

Necesitaba un complemento de reemplazo para la “Imagen de comparación del control deslizante antes y después” de Bovkun, ya que parece que ya no es compatible.

Lo dejó caer, agregó imágenes y funciona bien.

¡Gracias!

con la capacidad de deshabilitar la superposición, ahora de nuevo a gran complemento

spanky129

ACTUALIZACIÓN: La última actualización 1.5.3 corrige los problemas que se detallan a continuación.

PREVIAMENTE: Hasta la versión 1.2, me encantó este complemento; funcionó muy bien, se veía genial y no tuve problemas con eso. Pero con la versión 1.3 (y ahora hasta el actual 1.5.2), esa nueva “característica” de incluir una superposición gris con los títulos “antes” y “después” ha destruido la funcionalidad de mis imágenes. Solía ​​poder hacer clic con el botón derecho en cada imagen para descargarla en mi computadora (no es importante para mí como propietario del sitio, por supuesto, pero también alenté a los visitantes de mi sitio web a hacer lo mismo si quisieran versiones de mayor resolución) de las imágenes). Sin embargo, ahora las imágenes están enterradas bajo esa superposición gris y ya no son accesibles. Si poder permitir que los usuarios accedan a las imágenes es importante, querrá usar un complemento diferente antes / después (o espere que este vuelva a sus raíces).

Otra consideración relacionada con esta superposición es que si arrastra el control deslizante hacia la izquierda o hacia la derecha, obviamente verá solo una de las imágenes, pero * ambos * títulos están visibles y, por lo tanto, parece un poco ambiguo.

Me puse en contacto con el desarrollador acerca de la superposición hace unas semanas y me indicó que buscaría solucionar este problema en una futura actualización (la solución más sencilla sería simplemente eliminar la superposición o hacerla para que se pueda desactivar) , pero desafortunadamente en la última actualización el problema sigue ahí. Desde las páginas de soporte, tomé el consejo de perkinsb1024 sobre la ocultación de la superposición gris con CSS personalizado (que funciona bien en relación con el aspecto de la superposición), pero tenga en cuenta que eso no soluciona el problema fundamental: las imágenes aún no se han enterrado. debajo del contenedor de superposición. Desafortunadamente, es posible que tenga que cambiar de forma renuente los complementos si este problema no puede solucionarse, así que tenga en cuenta esta limitación de 2020 si necesita la accesibilidad del usuario a las imágenes.

Como señalé anteriormente, este plugin fue probablemente uno de los mejores plugins de antes / después. Fue fácil de usar y los resultados visuales fueron excelentes. Pero las “mejoras” percibidas pueden no ser siempre mejoras reales. Espero cuando este plugin vuelva a su gloria pasada.

Leer las 26 críticas.

Colaboradores y Desarrolladores

“Twenty20 Image Before-After” es un software de código abierto. Las siguientes personas han contribuido a este plugin.

Contribuyentes

Traduzca “Twenty20 Image Before-After” a su idioma.

¿Interesado en el desarrollo?

Busque el código, revise el repositorio SVN o suscríbase al registro de desarrollo por RSS.

Registro de cambios

1.5.5

  • Arreglo: Widget del ratón sobre.

1.5.4

  • Agregado: Integrado con WP Image alt.

1.5.3

  • Solucionado el problema de superposición de cationes.

1.5.2

  • Solucionado el problema de inserción de shortcode antes y después

1.5.1

  • Problema de carga fijo

1.5

  • NUEVO: Agregar soporte para el constructor de páginas Elementor.
  • NUEVO: Agregar soporte UX Builder by UXThemes.
  • Correcciones CSS menores

1.4

  • NUEVO: ‘Mueva el control deslizante con el mouse sobre’.

1.3

  • NUEVO: imagen antes y después del subtítulo.
  • Flecha fija sombra css.
  • Widget actualizado.

1.2

  • Error de alineación fijo

1.1

  • Problema de ancho fijo

1.0

  • Primer lanzamiento

Por favor Comparte y Síguenos:
RSS
Follow by Email
Facebook
Twitter

Deja una respuesta