Saltar al contenido

Qué es y cómo hacer un efecto parallax en WordPress

8 marzo 2020

Hoy en día es muy común utilizar el Efecto Parallax en el diseño de las páginas web, esto hace que sea más dinámica y atractiva. Es por eso que en este blog te explicaremos que es y cómo hacer un efecto Parallax en WordPress.

El efecto Parallax es el que se aplica al diseño de una página web y es accionado por la tecla scroll lock. El mismo consiste en provocar movimiento a la imagen de fondo de la página, haciéndolo de forma distinta al resto del contenido. También consiste en agregar profundidad al diseño, haciéndolo interesante y atractivo para el usuario.

Ahora que ya sabes que es un efecto parallax, te explicaremos como puedes hacerlo utilizando WordPress. Lo primero que debes tener en cuenta es que puedes aplicar dos métodos, sin código y usando código, dichos métodos te lo explicaremos a continuación.

Como hacer el efecto parallax sin código en WordPress

Aplicar un efecto parallax a tu diseño web es totalmente sencillo sin aplicar códigos. A continuación, te lo explicamos paso por paso:

  • Primero, ingresa a la página de inicio en WordPress.org.
  • En el escritorio busca “Plugin” y haz clic en “Añadir nuevo”, en el campo de búsqueda copia “Parallax”. Tendrás como resultado una gran variedad, escoge el que sea más adecuado para ti, instala y actívalo.
  • Ya instalado, en la parte izquierda del escritorio aparecerá “Parallax scroll”, ingresa allí y agrega uno nuevo, coloca el título que desees. En el campo del contenido conseguirás dos pestañas: “Visual” y “HTML”. Para este caso selecciona “Visual”.
  • En este campo del contenido podrás ingresar el texto que desees que posea tu Parallax. Puedes aplicar la configuración típica de texto que ofrece WordPress.
  • Acto seguido, asigna una “Imagen destacada”; recomendamos una imagen que tenga buena resolución, por ejemplo, de 2000 x 1000 pixeles.
  • Una vez asignada la «Imagen Destacada», dirígete a la parte de abajo, en donde podrás configurar el efecto Parallax. Podrás modificar el tamaño, la posición, velocidad y otras opciones más.
  • Ya con esto lo que debes hacer es ir a la parte superior derecha y seleccionar en “Publicar”.
  • Luego dirígete al menú del escritorio y selecciona nuevamente Parallax Scroll, te mostrará en una lista el que acabas de crear. Allí, copia los datos que aparezcan bajo el ítem “Shortcode”.
  • Abre tu página de inicio y selecciona la opción de “Editar página”.
  • Ubica el sitio de tu página en donde desees que aparezca tu Parallax, luego pega el “Shortcode” que acabas de copiar en el paso anterior.
  • Para finalizar selecciona en “Actualizar” para que los cambios se apliquen a tu página de inicio.
  • Selecciona en el menú de WordPress “Visitar Sitio” y verás el efecto Parallax en tu página.
  • Si deseas hacer alguna modificación puedes hacerlo dirigiéndote nuevamente al menú del escritorio de WordPress. En Parallax Scroll puede ubicar nuevamente el que acabas de crear y hacer las modificaciones pertinentes.

Cómo hacer el efecto parallax usando código

Quizás pienses que crear este efecto usando códigos es complicado, pero no es así. Presta mucha atención a este sencillo procedimiento.

  • Lo primero que tienes que hacer es quitar el Shortcode que acabas de colocar al editar tu página de inicio. Asimismo, debes desactivar el Parallax que instalaste, en el menú de Plugins.
  • Abre la página o artículo al que desees agregarle un efecto Parallax.
  • En el campo de contenido ubica la pestaña para lenguaje “HTML”.
  • Ubica el sitio en donde desees que aparezca tu Parallax. Allí vas a colocar lo siguiente:

<div class=“Nombre del Parallax”>

<h1>Titulo del Parallax</h1>

</div>

  • Como ves, debes asignar el nombre a tu Parallax y el «h1» del mismo. Acto seguido, haz clic en actualizar.
  • Luego para configurar todas las características tenemos que agregar elementos CCS adicionales. Allí podemos agregar la imagen, usando el url de la misma, así como ajustar tamaño y posición.
  • De igual forma podemos configurar las letras del Parallax, tamaño, color y posición. Todo esto lo haremos copiando en el campo de códigos lo siguiente:

.miparallax {

background-image: URL(http://….jpg);

width:100%;

height:300%;

overflow:hidden;

background-attachment:fixed;

background-size:100%;

}

.miparallax h1{

color:#fff;

text-align;center;

margin-top:130px;

}

Así de sencillo puedes hacer el Efecto Parallax por medio de WordPress, sigue en nuestra página para saber que otras técnicas y recursos puedes aprender cómo se hace.