Cómo agregar un efecto Parallax a cualquier tema de WordPress

Recientemente, uno de nuestros lectores nos preguntó cómo agregar un efecto de paralaje a cualquier tema de WordPress. El efecto Parallax es una tendencia de diseño web donde una imagen de fondo se desplaza más lentamente que el contenido en primer plano. En este artículo, le mostraremos cómo agregar fácilmente un efecto de paralaje a cualquier tema de WordPress.


Agregar efecto de paralaje a cualquier tema de WordPress

¿Qué es un efecto de paralaje??

El efecto Parallax es una técnica moderna de diseño web donde el elemento de fondo se desplaza más lento que el contenido en primer plano. Este efecto agrega profundidad a las imágenes de fondo y las hace sentir interactivas.

El efecto Parallax se puede usar en páginas de destino, contenido de formato largo, páginas de ventas o página de inicio de un sitio web comercial. Es una excelente manera de resaltar diferentes secciones en una página larga.

Muchos temas premium de WordPress vienen con un efecto de paralaje incorporado en su página de inicio. También puede usar el efecto de paralaje en la mayoría de los complementos del generador de páginas de WordPress..

Sin embargo, no todos los temas tienen un efecto de paralaje incorporado, y es posible que no desee utilizar un generador de páginas para crear diseños de página personalizados solo para un efecto de paralaje.

Echemos un vistazo a cómo agregar fácilmente el efecto de fondo de paralaje a cualquier tema de WordPress.

Método 1: Agregue el efecto Parallax a cualquier tema de WordPress usando el complemento

Este método no requiere que agregue ningún código a su tema de WordPress. Es más fácil y recomendado para la mayoría de los usuarios..

Lo primero que debe hacer es instalar y activar el complemento de fondos avanzados de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe editar la página o publicación donde desea agregar el efecto de paralaje. Notarás el nuevo botón “Fondos avanzados de WordPress” en el editor visual.

Botón de fondo avanzado de WordPress

Al hacer clic en él, aparecerá una ventana emergente donde puede cambiar diferentes configuraciones para el fondo que desea agregar.

Primero, debe seleccionar una imagen como su tipo de fondo y luego marcar la opción “estirar”.

Configuración de fondo de paralaje

A continuación, debe hacer clic en el botón “Seleccionar imagen” para cargar o seleccionar la imagen que desea usar. Asegúrese de utilizar una imagen grande, de lo contrario, aparecerá pixelada.

Después de eso, debe habilitar Parallax eligiendo un tipo de paralaje. Hay varios estilos disponibles con los que puede experimentar. El efecto de paralaje más utilizado es el desplazamiento..

Haga clic en el botón Insertar para continuar..

El complemento ahora agregará un código corto dentro de su editor de publicaciones de WordPress. Se verá algo como esto:

[Nk_awb awb_type =”imagen” awb_stretch =”true” awb_image =”22″ awb_image_size =”completo” awb_parallax =”Scroll” awb_parallax_speed =”0.5″ awb_mouse_parallax =”true” awb_mouse_parallax_size =”30″ awb_mouse_parallax_speed =”10000″]

Tu contenido aquí

[/ nk_awb]

Reemplace “Su contenido aquí” con su propio contenido y luego guarde su página.

Ahora puede visitar su sitio web para verlo en acción.

Vista previa del efecto de paralaje

Método 2: Agregue el efecto Parallax a cualquier tema de WordPress con CSS

Este método requiere que tengas una comprensión justa de HTML / CSS y de cómo funcionan los temas de WordPress.

Primero, deberá cargar la imagen que desea usar para el efecto de paralaje en su biblioteca de medios de WordPress visitando Medios »Agregar nuevo página.

Después de cargar la imagen, debe copiar la URL de la imagen editando la imagen en la biblioteca de medios de WordPress.

Copiar url de la imagen

A continuación, debe agregar el siguiente HTML en la página o publicación donde desea mostrar el efecto de paralaje. También puede agregar este HTML a su tema de WordPress o tema secundario.

Tu contenido va aquí…

A continuación, debe agregar el siguiente CSS personalizado a su tema de WordPress.

.paralaje {
background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
altura: 100%;
adjunto de fondo: fijo;
posición de fondo: centro;
repetición de fondo: sin repetición;
tamaño de fondo: cubierta;
margen izquierdo: -410px;
margen derecho: -410px;
}

.contenido de paralaje {
ancho: 50%;
margen: 0 automático;
color: #FFF;
acolchado: 50px;
}

No olvides reemplazar la URL de la imagen de fondo con tu propia imagen de fondo.

Ahora puede guardar sus cambios y visitar su sitio web para verlo en acción.

Efecto de paralaje agregado con CSS

Nota: es posible que deba ajustar CSS para que funcione con el diseño de su sitio.

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente el efecto de paralaje a cualquier tema de WordPress. También puede ver nuestra mega lista de los consejos, trucos y hacks de WordPress más buscados.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map