WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting
No Result
View All Result
WordPress Directo
No Result
View All Result

Muestra un antes y después en WordPress con fotografías

Jorge López by Jorge López
6 octubre 2015
in Plugins
Reading Time: 4 mins read
1

A menudo solemos ver posts, sobre todo de temática viral, en los que podemos comparar un antes y después en WordPress con fotografías mediante un slide. Hoy te enseñamos como llevarlo a cabo en tu WordPress.

En los blogs que tratan de temática viral, los cuales se suelen compartir en redes sociales, solemos toparnos con posts del estilo: ¿Cómo han crecido los actores de X serie?, Compara el transcurso del tiempo en los paisajes de X ciudad, Comprueba cómo han envejecido los participantes de X programa… Dichas entradas contienen un elemento que, al verlo, nos deja a todos desconcertados. Se trata de una imagen con una barra vertical en la zona central, la cual podemos mover de izquierda a derecha y de derecha izquierda, desvelando dos contenidos, que en realidad son dos imágenes distintas. Esto es muy útil para comparar dos imágenes muy parecidas que se varían muy poco entre sí.

Los que sois administradores de algún blog en WordPress, seguro que, la primera vez que lo vísteis, os llamó mucho la atención. Estoy segurísimo. Y no es para menos, puesto que es un componente muy útil para mostrar la diferencia entre dos imágenes. Hoy en WordPress Directo te enseñamos cómo insertar un antes y después en WordPress para que lo puedas usar en entradas, páginas y demás contenidos. ¿Te gusta la idea? ¡Vamos allá!

Antes y después en WordPress - Demo del plugin Twentytwenty
Fuente: zurb.com

El funcionamiento del antes y después en WordPress

El funcionamiento de este tipo de elementos es relativamente simple. En sí, son dos imágenes superpuestas que, mediante un selector en slide, descubren una u otra dependiendo de su posición. Parece cómo si la función de antes y después mezclase las dos imágenes pero no, en realidad están las dos ahí solo que se descubre una parte de una y se oculta la parte de la otra que no queremos ver.

Artículos relacionados

Cómo mostrar un carrusel de logotipos en tu sitio web

25 septiembre 2017

Cómo añadir elegantes timelines en WordPress

24 noviembre 2022

Cómo insertar un audio en WordPress

14 septiembre 2015

Cómo añadir una verificación de edad en WordPress

15 octubre 2018

No solo es muy valioso para posts de temática viral, también viene de perlas por ejemplo para una web de una clínica dental en la que sea posible comparar el antes y el después de una dentadura, en un estudio de retoque fotográfico en el que se puede apreciar cómo ha quedado una foto antigua antes y después de su restauración, para la web de un hotel e incluso para empresas de construcción, en el que fuera posible comparar la obra desde sus cimientos hasta el resultado final.

El plugin TwentyTwenty

Todo lo que te hemos comentado antes, se consigue con el plugin TwentyTwenty que te puedes bajar desde el repositorio de plugins de WordPress. Insertar un antes y después en WordPress con el plugin TwentyTwenty es un proceso realmente simple, que no necesita ninguna configuración para llevarlo a cabo. Una vez que te lo has bajado y activado, ya puedes empezar a utilizarlo.

Antes y después en WordPress - Otra demo de twentytwenty
Fuente: wordpress.org

Una vez activo el plugin, ve a la entrada o página en la que quieres insertar el antes y después, y modifícala. Ya dentro, tenemos que subir las dos imágenes que queremos comparar mediante el gestor de medios de WordPress, así que haz clic en el botón de «Añadir objeto» y sube las dos instantáneas. Muy importante, recuerda que las dos imágenes tienen que tener el mismo tamaño en largo y ancho. Si subes una imagen más grande que otra, el efecto no se logrará y el resultado final será una auténtica chapuza, así que procura editar la imagen, si no son iguales entre sí, con algún programa de edición como Photoshop.

Si tenemos las dos imágenes subidas a WordPress, lo siguiente será insertarlas en el contenido de la entrada o página que deseemos. Debemos ponerlas donde queramos mostrar el antes y después: al principio del todo, debajo de un párrafo específico, antes de cerrar el contenido… donde deseemos. Y diréis, hasta aquí todo normal, no hemos utilizado el plugin que nos hemos descargado. Correcto, es ahora cuando TwentyTwenty hará acto de presencia.

Teniendo insertadas las imágenes en nuestro contenido de WordPress, si queremos que se muestre un efecto de antes y después, tenemos que añadir un shortcode, el cual el plugin identificará e insertará el efecto que queremos conseguir. Ese shortcode es:

[twentytwenty]

Ese el shortcode que debemos añadir ANTES de las dos imágenes que acabamos de insertar. DESPUÉS de las dos imágenes debemos añadir el shortcode de cierre que es:

[/twentytwenty]

Es decir, si pusiésemos a modo de esquema cómo quedaría la estructura del post con el uso del plugin TwentyTwenty, sería una cosa así:

[twentytwenty]
Imagen 1
Imagen 2
[/twentytwenty]

No verás ningún cambio al introducir este shortcode en el backoffice, pero publica la entrada o la página y podrás observar el funcionamiento del plugin TwentyTwenty con las dos imágenes que has subido anteriormente.

Antes y después en WordPress - Demo de Backoffice

Así de fácil y simple es insertar un antes y después en WordPress, solo hay que subir dos imágenes, insertarlas en el contenido de la entrada o la página, añadir los shortcodes antes y después de las imágenes, publicar el contenido y disfrutar del efecto en la parte pública. No hay mucho más. Apto para todo tipo de usuarios.

Antes y después en WordPress - Parte Pública

En WordPress Directo seguiremos mostrándote todas las novedades del mundo de WordPress y te enseñaremos cómo funcionan elementos tan curiosos como este y sobretodo, cómo llevarlo a cabo en tu propio WordPress.

Y a ti, ¿te gusta el funcionamiento de este plugin? ¿Le ves mucha utilidad?

Tags: antes y despuésantes y después en WordPresspluginplugin de WordPresstwentytwenty
ShareTweetSendSharePin
Jorge López

Jorge López

Soy programador web y me gusta mucho el diseño gráfico, la fotografía y todo lo relacionado con las nuevas tecnologías. En mis ratos libres me encanta dibujar y escuchar música. ¡No podría vivir sin ella! Aparte soy un friki de las series...las devoro

Te puede interesar...

Plugins

Cómo ACF Flexible Content revoluciona la creación de páginas en WordPress

21 agosto 2025

WordPress se ha consolidado como el gestor de contenidos más usado en el mundo...

Plugins

Cómo reducir los “cache misses” en WordPress y mejorar el rendimiento del sitio

18 agosto 2025

Pocas cosas resultan tan frustrantes para un usuario como hacer clic en una página...

Plugins

Cómo bloquear los bots de spam en WordPress con Fail2Ban

16 agosto 2025

Los spam bots en WordPress son uno de los dolores de cabeza más comunes...

Plugins

FlyingPress 5.1 se integra con Cloudflare para ofrecer caché completa de páginas y mejorar drásticamente el TTFB

13 agosto 2025

La última actualización de FlyingPress, uno de los plugins de optimización de rendimiento más...

Comments 1

  1. Chema says:
    9 años ago

    Hola

    Genial el plugin y tu artículo. Gracias es sencillísimo, pero tengo un gran problema y es que cuando introduzco las etiquetas el resto del html deja de funcionar.

    Quiero que la imagen salga centrada, pero cuando escribo las etiquetas salen a la izquierda…

    ¿Qué puedo hacer?
    Gracias de antemano

No Result
View All Result
Plugin Imagify, optimizar imágenes
wordpress hosting NVME
Elegant Themes WordPress
elementor editor plugin




Últimos artículos

Los plugins y temas GPL para WordPress: Qué son y cuál es su confiabilidad

19 agosto 2021

Cómo crear un campo nuevo en el checkout de WooCommerce

21 marzo 2019

3 formas sencillas de localizar tu teléfono móvil perdido o robado

6 mayo 2019

Crear un servidor local de desarrollo con MAMP y WordPress

25 mayo 2012

Guía completa sobre shortcodes en WordPress: cómo añadir funcionalidades avanzadas sin complicarse con el código

21 mayo 2025
WordPress Directo

WPDirecto.com es una revista especializada en WordPress y WooCommerce que ofrece una amplia gama de recursos, incluyendo tutoriales, análisis de plugins y plantillas, consejos de optimización y estrategias de SEO, para ayudar a los usuarios a mejorar y personalizar sus sitios web, manteniéndolos informados sobre las últimas novedades y tendencias en el mundo de WordPress.

Menu

  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

Información

WPDirecto es un medio de Medios y Redes:
  • Artículos patrocinados
  • Servicio de diseño web
  • Contacto
  • Acerca de MyR
  • Política de privacidad y cookies
  • Aviso Legal

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.

No Result
View All Result
  • Tutoriales
  • Plugins
  • Plantillas
  • Optimización
  • SEO
  • WordPress Hosting

© 1995-2025 Color Vivo Internet, SLU (Medios y Redes Online).. Otros contenidos se cita fuente. Infraestructura cloud servidores dedicados de Stackscale.