Images and Galleries - Photo Collage WYSIWYG Web Builder 12

Photo Collage
Photo Collage

The Photo Collage presenta una nueva y genial forma de mostrar sus imágenes. Hay más de 30 variantes de diseño disponibles, cada una con un número diferente de imágenes. El objeto Collage de fotos es flexible, por lo que se puede usar en cuadrículas de diseño y diseños receptivos. Además, admite lightboxes, integración de Instagram, cargar animaciones y más.
Tenga en cuenta que cada diseño usa una cantidad diferente de imágenes. Por ejemplo, una cuadrícula de 3x3 usa menos imágenes que 8x8. ¡Asegúrese de agregar suficientes imágenes para llenar todas las celdas en el collage de fotos! 

AnimacionesEl objeto Photo Collage admite varias animaciones diferentes que se activan cuando se cargan las imágenes. El tiempo de la animación es aleatorio para cada imagen, por lo que la imagen se carga de manera diferente cada vez;) 

Para obtener una descripción de las opciones disponibles, consulte la Galería de fotos .
CONTINUE READING

Scroll Transitions - WYSIWYG Web Builder 12

Scroll Transitions - WYSIWYG Web Builder 12
Uso de las Transiciones de desplazamiento Las Transiciones de

desplazamiento permiten animar las propiedades CSS de los objetos en función de la posición de la barra de desplazamiento. 
Por ejemplo, puede establecer la opacidad de un objeto o moverlo / rotarlo / escalarlo según la posición de desplazamiento. 

Las transiciones de desplazamiento se pueden configurar en las propiedades de 'animaciones y transiciones CSS3' de un objeto. Para una introducción a las transiciones de CSS3, consulte también el tutorial de Transiciones .
Una Transición de desplazamiento (también conocida como marco clave ) necesita un valor inicial y final, por lo que siempre tendrá al menos dos entradas en la sección Transiciones. El primer cuadro clave define el valor inicial de la animación y el segundo el valor final. Por ejemplo, establezca la opacidad del objeto al inicio (0) y al final (1) de la animación (se desvanece en función de la posición de la barra de desplazamiento). También es posible tener más cuadros clave para animaciones complejas.
Para agregar transiciones de desplazamiento, vaya a las propiedades de animación del objeto y haga clic en el botón "agregar" en la sección Transición.
Más ejemplos
El proyecto de demostración también incluye ejemplos para demostrar la animación de color de fondo, hacer que un objeto 'se presente' a una velocidad diferente al resto del contenido y cómo implementar un efecto de paralaje usando transiciones de desplazamiento. 
http://www.wysiwygwebbuilder.com/support/scrolltransition_color.html 
http://www.wysiwygwebbuilder.com/support/scrolltransition_gradient.html 
http://www.wysiwygwebbuilder.com/support/scrolltransition_flyin.html 
http: // www .wysiwygwebbuilder.com / support / scrolltransition_parallax.html


Descargue los proyectos de demostración: 
http://www.wysiwygwebbuilder.com/support/scrolltransitions.zip
DesplazamientoLa propiedad de desplazamiento especifica la posición del cuadro clave en relación con el anclaje. El desplazamiento puede ser positivo o negativo. 
AnclaLa propiedad de ancla (en combinación con el desplazamiento) especifica en qué posición de desplazamiento se activará el cuadro clave. 
Hay dos modos para cuadros clave: modo absoluto y modo 

absoluto absoluto (o modo de documento)Los cuadros clave se definen como valores absolutos que describen cuánto se ha desplazado la página. 

Los siguientes valores de anclaje se usan para el modo absoluto: 
inicio , la propiedad de desplazamiento especifica el desplazamiento desde la parte superior de la página. 
end , la propiedad de desplazamiento especifica el desplazamiento desde la parte inferior de la página.
Tenga en cuenta que este modo solo es útil si está utilizando un diseño de página fijo, en cuyo caso la posición del objeto es siempre la misma. 
Cuando se utilizan mallas de diseño o diseños receptivos con puntos de interrupción, entonces no se sabe exactamente dónde estará el objeto en la página, por lo que en ese caso se debe usar el modo relativo. 

Modo relativo (o modo de ventana)En lugar de definir un fotograma clave relativo a la página, también puede definirlo según la posición de un objeto en relación con la ventana gráfica. 

Los siguientes valores de anclaje se utilizan para el modo relativo: 
arriba , cuando la parte superior del objeto está alineada con la parte superior de la ventana 
superior , cuando la parte inferior del objeto está en la parte superior de la ventana inferior de la vista
, cuando la parte inferior del objeto está alineada con la parte superior de la ventana 
inferior , cuando la parte superior del objeto está alineada con la parte inferior del 
centro de la ventana gráfica , cuando el objeto está en el centro del puerto 
central de la vista inferior , cuando la parte inferior del objeto está en el centro del puerto central de la vista 
superior , cuando la parte superior del objeto está en el centro del puerto de visualización
Ejemplo 1: Cambie la opacidad de un objeto según la posición de la barra de desplazamiento. 
Paso 1
Primero asegúrese de que la página tenga suficiente contenido para que la página tenga una barra de desplazamiento y el objeto no esté visible inicialmente en la ventana gráfica. 
En este ejemplo, estoy usando una forma posicionada en (435, 1500) 

Paso 2Agregue el primer cuadro clave con los valores que se muestran en la imagen a continuación. Esto establecerá la opacidad de la forma en 0 cuando se encuentre fuera de la ventana gráfica.
Ejemplo 3: muestre un objeto fijo y anime la posición horizontal según la posición de la barra de desplazamiento. 
En este ejemplo, utilizaremos una capa adhesiva para mostrar un objeto de texto en una posición fija. El texto se deslizará desde la derecha hacia la ventana gráfica según la posición de la barra de desplazamiento. Haremos esto animando la propiedad 'izquierda'. 

Sugerencia: al animar la posición de un objeto, puede ser útil establecer el desbordamiento de la propiedad de la página en "oculto"; de lo contrario, los navegadores agregarán barras de desplazamiento cuando el objeto se encuentre fuera de la ventana gráfica. También tenga en cuenta que cuando el objeto es parte de una capa, cuadrícula de diseño u otro contenedor, la animación será relativa a su elemento principal, ¡porque un objeto no puede 'salir' de su contenedor! 

Paso 1
Agregue una capa adhesiva con retraso establecido en 0 y coloque un objeto de texto dentro de él. El uso de una capa adhesiva asegurará que el texto muestre una posición fija. 

Paso 2Agregue el primer fotograma clave al objeto de texto con los valores como se muestra en la imagen a continuación. Esto establecerá la posición izquierda al 110%, por lo que estará fuera de la ventana gráfica cuando cargue la página.
Paso 3Agregue el segundo marco con los valores como se muestra en la imagen a continuación. Esto establecerá la opacidad de la forma en 1 cuando se desplaza 400 píxeles en la ventana gráfica. Tenga en cuenta que para todas las posiciones entre los dos fotogramas clave, la opacidad se animará de modo que la forma se desvanecerá lentamente en la vista.
Puede ver una demostración en vivo aquí: 
http://www.wysiwygwebbuilder.com/support/scrolltransitions1.html
Ejemplo 2: Transformar (rotar / escalar) un objeto basado en la posición de la barra de desplazamiento. Paso 1
Primero asegúrese de que la página tenga suficiente contenido para que la página tenga una barra de desplazamiento y el objeto no esté visible inicialmente en la ventana gráfica. 
En este ejemplo, estoy usando un objeto de texto ubicado en 272, 1140. 

Paso 2Agregue el primer cuadro clave con los valores que se muestran en la imagen a continuación. Esto establecerá la escala del texto 0 cuando se encuentre fuera de la ventana gráfica. 
Tenga en cuenta que se agregó una compensación adicional, por lo que la animación comienza 50 píxeles fuera de la ventana gráfica.
Paso 3Agregue un segundo marco con los valores como se muestra en la imagen a continuación. Esto establecerá el ángulo en 1440 grados y se escalará a 1 cuando el texto se desplaza 500 píxeles hacia la ventana gráfica.
Paso 4Agregue un tercer marco con los valores como se muestra en la imagen a continuación. Esto establecerá la escala del texto en 4 cuando se desplaza 750 píxeles hacia la ventana gráfica mientras mantiene el ángulo igual que en el cuadro clave anterior.
Puede ver una demostración en vivo aquí: 
http://www.wysiwygwebbuilder.com/support/scrolltransitions2.html
Paso 3Agregue un segundo marco con los valores como se muestra en la imagen a continuación. Esto moverá el objeto al 25% de la ventana gráfica a 1000 píxeles desde el inicio de la página.
Puede ver una demostración en vivo aquí: 
http://www.wysiwygwebbuilder.com/support/scrolltransitions3.html
 
CONTINUE READING

Flexbox WYSIWYG Web Builder 12

Flexbox WYSIWYG Web Builder 12
Comenzar con FlexBox

Flexbox es un nuevo modo de diseño de CSS que presenta una forma poderosa de diseñar, alinear y distribuir objetos. Flexbox consta de contenedores flexibles y elementos flexibles. 
Los elementos flexibles (los objetos dentro de un contenedor flexible) pueden colocarse horizontal o verticalmente, alinearse y distribuirse de varias maneras. También es posible estirar o contraer objetos para llenar el espacio vacío disponible. Además de las configuraciones en el contenedor flexible, cada objeto también tiene su propia configuración de flexbox, que se puede establecer mediante Menú-> Organizar-> Flexbox.

Para comenzar con Flexbox, deberá agregar un contenedor flexible a la página. Esto funciona igual que una capa o cuadrícula de diseño, simplemente arrastre y suelte el objeto en el contenedor. Tenga en cuenta que el Flex Container en sí mismo es un elemento flotante por lo que se insertará en la fila libre de la página.
Dirección de
flexión La propiedad de dirección flexible especifica la dirección de los elementos flexibles dentro del contenedor flexible. 

fila; El valor predeterminado de flex-direction es row (de izquierda a derecha, de arriba a abajo). 
fila-reversa; Los elementos flexibles se distribuirán de derecha a izquierda. 
columna; Los elementos flexibles se distribuirán verticalmente. 
columna inversa; Igual que la columna, pero invertida. 

Tenga en cuenta que si cambia la dirección de la página en Propiedades de página de derecha a izquierda (rtl), entonces se reservarán todas las direcciones.
A continuación, puede colocar objetos dentro del contenedor en la página. Notará que los objetos se alinearán automáticamente según la configuración actual del Flex Container.
Propiedades de Flex Container
En las propiedades del Flex Container puede controlar cómo se alinean / distribuyen los elementos dentro del contenedor.
Propiedades para objetos Flex Los
objetos dentro de un contenedor flexible (elementos flexibles) también tienen sus propias propiedades de caja huidas que se pueden configurar mediante Menú-> Organizar-> Flexbox.
Flex
-wrap La propiedad flex-wrap especifica si los elementos flexibles deben envolverse o no, si no hay espacio suficiente para ellos en una línea flexible. 

nowrap; Los artículos flexibles no se envolverán. 
envolver; Los artículos flexibles se envolverán si es necesario.
Justificar contenidoLa propiedad justify-content alinea horizontalmente los elementos del contenedor flexible cuando los elementos no usan todo el espacio disponible en el eje principal. 

f lex-start; Los artículos se colocan al comienzo del contenedor. 
flex-end; Los artículos se colocan al final del contenedor. 
centro Los elementos se colocan en el centro del contenedor. 
espacio entre; Los elementos se colocan con espacio entre las líneas. 
espacio alrededor; Los elementos se colocan con espacio antes, entre y después de las líneas.
Alinear contenido
La propiedad align-content modifica el comportamiento de la propiedad flex-wrap. Es similar a alinear elementos, pero en lugar de alinear elementos flexibles, alinea las líneas flexibles. 

flex-start; Las líneas se empaquetan hacia el inicio del contenedor flexible. 
flex-end; Las líneas se empaquetan hacia el final del contenedor flexible. 
centrar; Las líneas se empaquetan hacia el centro del contenedor flexible. 
espacio entre; Las líneas están distribuidas uniformemente en el contenedor flexible. 
espacio alrededor; Las líneas se distribuyen uniformemente en el contenedor flexible, con espacios de la mitad del tamaño en cada extremo. 
tramo; Las líneas se estiran para ocupar el espacio restante.
Alinear elementos
La propiedad de alinear elementos alinea verticalmente los elementos del contenedor flexible cuando los elementos no utilizan todo el espacio disponible en el eje transversal. 

f lex-start; Los artículos se colocan en la parte superior del contenedor. 
flex-end; Los artículos se colocan en la parte inferior del contenedor. 
centrar; Los artículos se colocan en el centro del contenedor (verticalmente). 
tramo; Los artículos se estiran para adaptarse al contenedor.
Tamaño
El modo de tamaño determina si se incluirá o no la altura del contenedor. 
indefinido; Cuando el tamaño no está definido, la altura estará determinada por los elementos flexibles (contenido). 
fijo; Cuando el tamaño sea fijo, se usará la altura del tiempo de diseño. Esto puede ser útil si quieres tor verticalmente alinear objetos. 


Ancho máximoEspecifica el ancho máximo del contenedor flexible en la ventana del navegador. Esto puede ser útil para evitar que los artículos se estiren a lo ancho. Si la ventana del navegador es más ancha que el ancho especificado, el contenedor de flexión estará centrado.
Flex grow
La propiedad flex-grow especifica cuánto crecerá el objeto en relación con el resto de los elementos flexibles dentro del mismo contenedor flexible. 
Si todos los objetos tienen Flex-Grow establecido en 1, el espacio restante en el contenedor se distribuirá por igual a todos los objetos. Si uno de los objetos tiene un valor de 2, el espacio restante ocupará el doble de espacio que los otros objetos (si es posible).
Contracción
flexible La propiedad de contracción flexible especifica cómo se encogerá el objeto en relación con el resto de los elementos flexibles dentro del mismo contenedor flexible.
Base de
flexión La propiedad de base flexible especifica el tamaño inicial de un objeto antes de que se distribuya el espacio restante. 
La longitud puede ser en porcentajes o píxeles. Si se establece en 'auto', el espacio adicional se distribuye en función del valor de crecimiento flexible.
Alinearse a uno mismo La propiedad Align
-Self de los elementos flexibles anula la propiedad de elementos de alineación del contenedor flexible para ese objeto. 
Flex-Start, los artículos se colocan en la parte superior del contenedor. 
flex-end, los artículos se colocan en la parte inferior del contenedor. 
centro, los artículos se colocan en el centro del contenedor (verticalmente). 
estirar, los artículos se estiran para caber el envase. 
auto, use la alineación predeterminada del contenedor flexible.
CONTINUE READING

Full Page Layouts - WYSIWYG Web Builder 12

Full Page Layouts
Create a Full Page website using the Carousel

In another article we have described how to create a full screen layout with layers:
Creating a Full Screen / Single Page Layout

In this tutorial we use the Carousel to create a single page/full screen layout with auto scrolling. This means that you can use the mouse scroll wheel to quickly go to the next page/slide.
Step 1In the Carousel properties set full width mode to fullpage. Basically this will (automatically) replace the standard Carousel script with the fullPage.js and turns the Carousel into a fullPage vertical slide show. FullPage.js will also add vertical pagination icons at the left of right side of the page.
Step 3Finally we also add a menu at the top of the page as an alternative for the pagination dots to navigate through the pages.
To make the menu visible all the time we add it to a sticky layer. Note that it should not be inside the Carousel otherwise it will scroll out of view!
Step 2Add content to each slide. In this demo each slide has a heading object, but of course you can use any content you like. Also each slide has a different background color. It is also possible to use background images.
Note that the content of the slides will be centered in the browser window. For smaller screens you may need to implement breakpoints to avoid the content being clipped.
We can link to the slide with bookmarks, where #slide-1 is the first slide, #slide-2 the second slide etc.
CONTINUE READING

Layout Grid WYSIWYG Web Builder 12

Layout Grid
Características de la cuadrícula de diseño avanzado

WYSIWYG Web Builder 12 presenta un par de nuevas funciones potentes para la cuadrícula de diseño. 
Si no está familiarizado con la funcionalidad básica de Cuadrícula de diseño, lea primero estos tutoriales relacionados: 
http://www.wysiwygwebbuilder.com/layoutgrid_part1.html 
http://www.wysiwygwebbuilder.com/layoutgrid_part2.html 

Utilice anchos de columna diferentes en Puntos de interrupción
Para establecer un ancho de columna diferente, simplemente cambie al punto de interrupción, abra las propiedades de Cuadrícula de diseño y cambie el ancho de la columna. 

Utilice diferentes recuentos de columnas en puntos de interrupción / columnas ocultas
Para usar un número diferente de columnas, simplemente cambie al punto de interrupción, abra las propiedades de Cuadrícula de diseño y agregue o elimine columnas.
También es posible ocultar columnas en puntos de interrupción. Para ocultar una columna, primero selecciónela y luego desmarque la opción 'visible'. 
Tenga en cuenta que la columna oculta aún está visible en el editor de cuadrícula (para que pueda mostrarla) pero no ocupará ningún espacio en la página.
DesbordamientoCuando tiene un número diferente de columnas en puntos de corte, algunos puntos de interrupción pueden tener más columnas que otro. Por lo tanto, tendrá que decirle a la aplicación qué hacer con las columnas que no encajan en una sola fila. La opción de desbordamiento controla lo que sucederá cuando las columnas no encajen en la fila actual. Las columnas de desbordamiento se pueden ocultar, 100% o tener un valor personalizado.
Lascolumnas de desbordamiento ocultas no serán visibles en la vista actual. 

Lascolumnas de desbordamiento del 100% se desbordarán a la siguiente fila y tendrán un ancho del 100%. Múltiples sobre columnas dará como resultado múltiples filas. 

personalizadoEsto le permite especificar el ancho de cada columna de desbordamiento.
Usar FlexboxCuando esta opción está habilitada, la grilla usará el diseño de CSS Flexbox. Esto da como resultado un código más limpio y también permite que algunas características adicionales como la alineación vertical y toda la columna se llenen con el fondo. Tenga en cuenta que esta es una característica CSS relativamente nueva, no es compatible con navegadores más antiguos (<IE11). Consulte este sitio web para ver qué navegadores actualmente son compatibles con flexbox: http://caniuse.com/#feat=flexbox
CONTINUE READING

Condiciones de formulario y cálculos - wysiwyg web builder

Condiciones de formulario y cálculos Las
Condiciones de formulario y cálculos Las

condiciones del formulario permiten mostrar / ocultar / habilitar / deshabilitar otros objetos en función del valor o la selección de un campo de entrada de formulario. 
Por ejemplo, puede desactivar el botón de envío del formulario hasta que el usuario marque un casillero. Se pueden agregar múltiples condiciones a un objeto. 

También es posible hacer cálculos en campos de formulario. Los cálculos se pueden usar para calcular un valor basado en valores o selecciones de otros campos de entrada. Por ejemplo, para calcular el precio total de un artículo en una tienda web en función de las opciones seleccionadas. Las opciones de condiciones / cálculos están disponibles para Editbox, TextArea, Combobox, Checkbox y Radio Button. Para obtener una descripción de todas las opciones disponibles, consulte la ayuda.

En este tutorial le mostraremos algunos ejemplos. Un enlace al proyecto de demostración con los ejemplos de este tutorial (¡y más!) Está disponible en la parte inferior de esta página. 

Ejemplo 1: Habilite el botón de enviar con una casilla de verificación Paso 1Cree un formulario con una casilla de verificación y un botón de enviar. Agregue una etiqueta 'Acepto la política de privacidad'. 
Asegúrese de que la propiedad 'Desactivado' de Enviar esté marcada, por lo que no se puede hacer clic inicialmente en el botón.
Descargue el proyecto de demostración: 
http://www.wysiwygwebbuilder.com/support/formcalculation.zip
Paso 3Publique o vista previa para probar el formulario en el navegador. 
http://www.wysiwygwebbuilder.com/support/conditions1.html
Paso 2Abra las propiedades 'Condiciones' de la casilla de verificación y agregue dos condiciones: 
Condición: marcada
Acción: habilitar
Destino: enviar (la ID del botón de envío). 

y 

Condición: no marcado
Acción: desactivarObjetivo: enviar (la ID del botón de envío).
Ejemplo 1
Ejemplo 4: costos de impuestos y envío Paso 1Cree un formulario con 2 cuadros combinados: tamaño, cantidad y 3 cajas de edición: envío, impuestos y total.
Ejemplo 2: calcule la suma de dos campos de entrada Paso 1Cree un formulario con 3 cajas de edición: value1, value2 y total
Ejemplo 2
Paso 2Abra las propiedades 'Condiciones' del primer cuadro de edición (valor1) y agregue una condición con los siguientes valores: 
Condición: cambiar
Acción: calcular
Objetivo: total (el ID del campo de resultado) 
Expresión: Número ([valor1]) + Número ([valor2]) 

Notas:
1. Para agregar el valor de un campo de entrada en una expresión, deberá poner su ID entre corchetes. WWB lo reemplazará automáticamente con el código necesario para obtener el valor en la página publicada. 

2. El número es una función estándar de JavaScript. Obtiene el valor numérico del campo de entrada. Si no usamos Number, entonces el valor de la cadena se usará en su lugar. 

3. WWB supervisará automáticamente todos los demás campos de entrada que usemos en una expresión, por lo que no es necesario agregar la misma condición a la otra caja de edición (valor2).
Paso 3Publique o vista previa para probar el formulario en el navegador. 
http://www.wysiwygwebbuilder.com/support/conditions2.html
Ejemplo 3: Productos con cantidad Paso 1Cree un formulario con 3 botones de opción y 2 cajas de edición: cantidad y total. 
Asegúrese de que todos los botones de opción tengan el mismo nombre de grupo: producto 
Configure los valores del botón de opción para: 10, 50 y 25
Ejemplo 3
Paso 2Abra las propiedades 'Condiciones' del cuadro de edición 'cantidad' y agregue una condición con los siguientes valores: 
Condición: cambiar
Acción: calcular
Objetivo: total (el ID del campo de resultado) 
Expresión: [RadioButton1] * [cantidad] 

Notas :
1. Aunque solo hemos agregado la ID del primer botón de opción, WWB usará automáticamente los valores de todos los botones de opción con el mismo nombre de grupo. 

2. WWB supervisará automáticamente todos los demás campos de entrada que usemos en una expresión, de modo que no es necesario agregar la misma condición a los demás campos de entrada.
Ejemplo 4
Paso 2Abra las propiedades 'Condiciones' del cuadro de edición 'cantidad' y agregue dos condiciones: 
Condición: cambie
Acción: calcule
Objetivo: envío (el ID del campo de resultado) 
Expresión: '$' + (Número ([cantidad]) * 5)

y 

Condición: cambiar
Acción: calcular
Objetivo: impuesto (el ID del campo de resultados) 
Expresión: '$' + (0.1 * (Número ([tamaño]) * Número ([cantidad]))) 

Notas:
1. La primera condición actualiza el campo de envío. En este caso, los costos de envío por artículo serán de $ 5. 
2. La segunda condición actualiza el campo de impuestos. En este caso, el impuesto es el 10% del precio del artículo.
Paso 3Abra las propiedades 'Condiciones' del cuadro de edición 'total' y agregue esta condición: 
Condición: cambiar
Acción: calcular
Objetivo: total (el ID del campo de resultado) 
Expresión: '$' + ((Número ([tamaño]) + 5) * Número ([cantidad]) + 0.1 * (Número ([tamaño]) * Número ([cantidad]))) 

Nota: Esta condición actualiza el campo total.
Paso 3Publique o vista previa para probar el formulario en el navegador. 
http://www.wysiwygwebbuilder.com/support/conditions3.html
Paso 4Publique o vista previa para probar el formulario en el navegador. 
http://www.wysiwygwebbuilder.com/support/conditions4.html
CONTINUE READING
Suscribirse a: Entradas (Atom)