Cómo (re) construí la página Apple IWD2020 con Elementor

Siempre es interesante ver lo que puede construir con Elementor Pro. Es una herramienta increíblemente poderosa y enfrenta algunas de las mejores plataformas de diseño web. A principios de esta semana, alguien en el grupo de Facebook de Elementor preguntó si es posible recrear la página de destino de una Apple. Apple es bien conocido por su diseño web, y muchas de sus páginas brindan a los usuarios experiencias únicas en un esfuerzo por expandir la expansión de la marca y generar más ventas. Versión de manzana

Este es el enlace a la página. La página en cuestión fue la página del destino del Día Internacional de la Mujer 2020 que Apple creó para las campañas publicitarias. La página tiene un efecto único, en el que se centra el texto del héroe, pero a medida que mueve el mouse alrededor de la página, las imágenes subyacentes se mueven en la dirección opuesta. Cuando pasa con el mouse sobre cada imagen, muestra una biografía de una mujer de impacto.
Definitivamente le recomendamos que lo revise. Queríamos ver si la recreación de este efecto es posible usando Elementor Pro o si solo podía codificarse. La página de Apple definitivamente está completamente personalizada, utilizando una mezcla HTML única, posicionamiento CSS y JavaScript. Cada imagen tiene un efecto de desplazamiento aplicado. Estos son algunos de los códigos básicos:

Tenga en cuenta que este es solo el héroe de la página. El resto de la página contiene información y llamas a las acciones, pero esto es relativamente simple de hacer. Nuestro desafío fue la recreación de la página de destino de Apple para el Día Internacional de la Mujer 2020 usando Elementor Pro y nada más. Ni siquiera agregaremos JavaScript.
La versión elemental Después de pasar unas horas de juego con Elementor Pro, creé una página que es casi idéntica a la página de destino de Apple, utilizando solo elementos y efectos nativos. Obtenga la plantilla para continuar, le recomiendo que descargue el archivo de plantilla para esta página y cárguelo a su instalación de elementor. Esto lo ayudará a comprender exactamente cómo hemos logrado este efecto. ¿Da la plantilla JSON para instalar en su propia instalación primaria (PRO)? Tómelo aquí. [Compra_link text = “get ahora” color = “heredero” direct = “true”]
*Consejo profesional: escriba $ 0.00 para obtenerlo gratis. ¿Pero no le dices a nadie?
Las limitaciones elementales Cuando hablamos sobre cómo construimos la página real, nos referiremos primero al héroe, porque esta es la parte complicada de esta versión. Elementor Pro tiene algunas limitaciones cuando se trata de este tipo de diseño web. El principal problema es que es muy difícil tener contenido fuera de la página y luego llevarlo a la ventana de vista. Si navega en la página de destino de Apple o en nuestra versión de plantilla, verá que a medida que mueva el mouse, el contenido fuera de la ventana de visualización se mueve a la ventana Vista. Para agregar más profundidad, este movimiento es directamente reactivo al movimiento del cursor del ratón.
En resumen, tuvimos que encontrar una manera de evitar las limitaciones del “contenido de la pantalla”. Mientras lo construí para la creación de un héroe ahora, para presentarte paso a paso cómo se creó esta página. Trabajé desde el medio al exterior, comenzando con el texto inicial y agregando las imágenes.
Para obtener la estructura de la pantalla, simplemente sacé 5 secciones interiores de columnas con 5 columnas interiores cada una en el lienzo elemental. Fueron incluidos en una sección de altura completa. La columna central contiene el texto, mientras que las imágenes irradian en el exterior. Las imágenes se agregaron utilizando el elemento o elemento de la imagen y se hicieron más oscuro al establecer la opacidad predeterminada en 0.5. Al pasar con el mouse, la opacidad aumenta a 0.8. La imaginación se ha colocado en la pantalla utilizando un ancho porcentual y llenado de píxeles y bordes. También usé los bordes para mover las columnas generales que contienen las imágenes alrededor del lienzo. Como puede ver, todas las imágenes están contenidas en filas horizontales, pero se ofrecen para que parezca que se colocan al azar en la página.

La biografía se muestra en la imagen que un efecto importante de esta página fue mostrar la biografía de la mujer cuando pasó por su imagen. Para hacer esto, primero agregué el contenido usando un elemento de texto y lo colocé absolutamente en la columna.
Usando CSS personalizado, también establecemos el ancho de cada elemento de texto. La mayoría tenía un 50% de ancho (respectivamente en su columna), mientras que otros tenían un ancho de 60 a 80%. Se colocaron sobre la imagen usando el índice. Tuvimos que usar CSS personalizado y mostrar y ocultar la biografía de acuerdo con el movimiento con el mouse a la imagen. Hacer esto fue bastante simple y todo lo que tuvimos para cambiar la imagen y los elementos de texto en los que las clases personalizadas de CSS. Luego usé algunos CSS muy simples para hacer que la opacidad del texto sea cero de forma predeterminada y una cuando pasamos con el mouse sobre una imagen..Des {Opacidad: 0; } .Cat-wem: hover + .s {opacidad: 1; Duración de transición: .5s} .To-IMG se refiere a la imagen básica, mientras se refiere al texto de la biografía. Esto cubre la mayor parte de la estructura de la sección de héroes, ahora es el momento de incorporar el efecto de movimiento y el desbordamiento.

Como puede ver, nuestra pantalla actual contiene todas las imágenes posibles. El primer orden es que estas imágenes salgan de la ventana. Para hacer esto, utilicé la propiedad de escala de transformación CSS. Como puede ver, todo es esencialmente medio tamaño en este lienzo (gran parte del texto era .7EM). Esto se hizo por una razón, porque esperábamos aumentar/aumentar este contenido dos veces.
Tome esa plantilla de página para ver exactamente cómo funciona CSS personalizado. Lo que hace esto es presionar la mayor parte del contenido de la ventana de visualización y nos brinda la oportunidad de usar el efecto del mouse, que es un efecto de movimiento primario pro-cabeza, para moverse a través de la página del héroe, al igual que la página de destino de Apple original. Aplicamos este código CSS a la columna que contenía todas nuestras intersecciones en la sección de pantalla completa. Selector {transformación: escamas (2); } Lo que hizo fue aumentar todo el contenido de esa columna, aumentando el tamaño con dos. Ahora la página se ve mucho más similar a la página de destino original de Apple. Si pasa con el mouse sobre cualquier imagen en este momento, la biografía se desvanecerá para esa persona.

El efecto Bio Hover en “tamaño completo”, como puede ver, este CSS personalizado también duplica la interfaz de usuario elemental para todo en esa columna. Por lo tanto, se aplicó al final de la construcción del héroe. El efecto final es la incorporación del “movimiento del mouse”. Esta es una de las partes más ligeras del proyecto, porque es un efecto nativo incluido con Elementor.

En la configuración de columna avanzada, acceda a los efectos de movimiento, luego cambie los efectos del mouse.
Establecimos la ruta del mouse para movernos en la dirección opuesta y establecimos la velocidad en cinco. El cambio de velocidad influye en la rapidez con que la página reaccionará al movimiento del mouse y también determina qué tan lejos se moverá hacia la izquierda, hacia arriba o hacia abajo el contenido de la ventana de visualización. Un problema que puede cumplir es el contenido que se muestra en la segunda sección de la página, que se discutirá a continuación. Otro problema es el contenido que causa el movimiento de las barras de desplazamiento vertical y horizontal. Para remediar esto, simplemente establezca el desbordamiento X y el desbordamiento Y como oculto usando este CSS: Overflow CSS también, asegúrese de que la segunda sección tenga un índice más alto que la primera sección. Y así es como construí todo el héroe de Apple IWC2020 usando Elementor y nada más (bueno, aparte de un CSS personalizado). Este es un efecto verdaderamente único que puede usar en muchas versiones diferentes de sitios web. No tiene que copiar a Apple por completo, pero comprender este método y las técnicas definitivamente hará que sus sitios sean mucho más interesantes. Si le gustó este efecto, le recomendamos que lea nuestro artículo de tutorial para el paralax multicapa. La segunda sección, pero quédate, aún no he terminado. La segunda sección de la página contiene varias exhortaciones e información adicionales que proporciona contexto en el héroe único anterior. Crear esto fue simple con Elementor Pro, todo lo que hicimos fue agregar una sección, elemento H2, sección interior con dos columnas, algunas fotos, bloques de texto y botones y la llamé un día. Con eso llegué: