homefinance blog
En este tutorial rápido, discutiremos cómo agregar transiciones de página a WordPress usando Beard.JS, Oxygen Builder y Little Manual. ¿Qué es la barba?
Ejemplo de animación de barba 1
Ejemplo de animación de barba 2
Barba.js es una biblioteca de JavaScript que le permite crear transiciones fluidas y fluidas entre las páginas de sus sitios. Estas transiciones pueden ser tan simples como mover El usuario navega por el costado. Independientemente de los casos utilizados, esta es una biblioteca muy genial que agrega un dominio profesional a cualquier sitio web de WordPress.
También aumenta su rendimiento al reducir el retraso entre las páginas, minimizar las demandas HTTP y aumentar la experiencia del usuario. Es una biblioteca increíblemente ligera (solo 9 kbs) que es bastante simple de integrar en WordPress usando Oxygen Builder. ¿Por qué Beard.JS y Oxygen Builder? Antes de continuar, debe comprender que agregaremos transiciones de página a nuestro sitio web de WordPress construido con oxígeno. Oxygen Builder cambia la estructura general de un sitio web de WordPress. Por lo general, use un tema prefabricado que consiste en docenas de plantillas de archivos PHP. Cuando use Oxygen Builder, elimine el tema de WordPress de la ecuación y cree el sitio web desde cero. Esto es muy útil tanto en términos de diseño como de desarrollo, si está buscando una forma completamente personalizada de construir un sitio web utilizando un constructor visual.
De todos los constructores, Oxygen Builder es el mejor para los desarrolladores por este motivo. Cuando se trata de barba. Puede continuar incorporando el Beard.js en un sitio web tradicional de WordPress hecho con un tema, pero esto es mucho más difícil y requiere que ingrese los archivos PHP reales que componen el sitio y agregan su propio código. Si se siente cómodo, continúe con este tutorial y podrá comprender la implementación básica de Beard.js en un sitio web de WordPress. Si no es y no usa Oxygen Builder para crear el sitio web de WordPress, es posible que desee dejarlo. O bien, puede echar un vistazo a Oxygen Builder y probarlo solo (licencia de vida, devolución de dinero y sin programa de afiliados). Ahora, eche un vistazo a cómo incorporar la barba. WordPress Web creada con Oxygen Builder. De hecho, es bastante simple y, dada la complejidad de la biblioteca, esto es sorprendente. Agregar transiciones de página a un sitio web de WordPress utilizando Barba.js Cuando crea un sitio web de WordPress con Oxygen Builder, generalmente tiene una plantilla Catchall que aplica el encabezado y el sótano del sitio. En esa plantilla Catchall, entre el encabezado del sótano, es un componente de contenido interno. Este componente intercontente llama a la página real al cargar la plantilla. Cada página puede tener su propia plantilla (así como categorías, archivos y cualquier otra cosa que se le ocurra).
Fuente, pero la belleza de Oxygen Builder es que tiene un control completo sobre todas las plantillas de página sin tener que entender cómo funciona PHP. Y esta simplicidad es lo que usaremos para agregar Beard.js, para crear transiciones de alta calidad entre nuestras páginas de WordPress e impresionar a todos los clientes y visitantes a nuestro sitio. Para implementar esta biblioteca JavaScript en su sitio de WordPress, si está buscando Un tutorial sobre cómo hacer cosas avanzadas con Beard.js, debe buscar en otro lado.
Configure la plantilla de constructor de oxígeno para agregar la biblioteca a WordPress, utilizaremos un espectáculo y plantilla de sótano. Esto se debe al hecho de que debemos empacar el contenido interior del sitio web en dos DI. Esto es realmente bastante fácil. También usaremos un componente de bloque de código que sea nativo de Oxygen Builder y agregaremos la biblioteca Barda.js desde un CDN y lo inicializamos. Cuando agrega la biblioteca Beard.js a cualquier sitio web, debe agregar dos DO. La primera es una cubierta que rodea todos los contenidos. El segundo es un contenedor en el que se contiene el contenido en el que desea animarse durante las transiciones de la página.
… Contenido se cambiará
Aquí hay un diagrama rápido de cómo se implementa en un sitio web de oxígeno.
Como puede ver, tenemos nuestro envoltorio, luego nuestro bloque de código que contiene todo JavaScript y CDN Barba.js, luego tenemos nuestro DIV, que es el contenedor para todo el contenido, y luego en esa sección de contenido. La primera identificación se renombra en: #Barba-Wrapper Code Block contiene CDN, así como todas las reglas de transición. <script src = "https://unpkg.com /[correo electrónico protegido] /dist/gsap.min.js “> beard.init ({ Transitions: [{nombre: ‘Opacidad-transición’, Leave (date) {return gsap.to (date.current.container, {opacidad: 0; duración de transición: 5000ms;});}, ingresar) {return gsap. de (date.next.container, {opacidad: 0; duración de transición: 5000ms;});}]}); El segundo DI recibe una nueva clase: .Barba-ContainerTot El contenido del “bloque de contenido interior” se agrega en ese div. Y eso es. Como puede ver, es muy fácil agregar la barba. JS a WordPress usando Oxygen Builder. Puede seguir la misma estructura general al editar los archivos con temas si tiene un sitio web de WordPress que no usa Oxygen Builder. Desde aquí, puede construir reglas avanzadas, transiciones y más. La transición contenida en este código en nuestra publicación es muy simple y hace que la página se desvanezca al color de fondo del cuerpo. Las transiciones de Barba.js más complejas pueden incluir pantallas SVG, varias secciones individuales y más.
