¡Oferta!

Ninja Forms Layout and Styles

El precio original era: $65.99.El precio actual es: $5.00.

Categorías: Plugins, Integraciones y Conectores, Marketing y Conversiones

Ninja Forms Layout and Styles

Es necesario instalar y activar el complemento Diseño y estilos para ver las funciones mencionadas en esta documentación.

Puede crear una columna tomando el centro de un campo y arrastrándolo hacia el lado izquierdo o derecho de su formulario.

Luego puedes crear un espacio vacío en la fila tomando el medio de un campo y arrastrándolo debajo de otro campo.

Puede agregar un campo a la misma columna que otro campo tomando el medio de un campo y arrastrándolo debajo de ese campo.

Puede agregar un campo a su propia fila tomando el medio de un campo y arrastrándolo fuera de una columna y debajo de una columna de tamaño completo.

Puede eliminar espacios vacíos en su formulario haciendo clic en “Eliminar columna”

Puede cambiar el tamaño de las columnas arrastrando la barra que aparece entre los campos.

Puede cambiar el orden de las filas haciendo clic en la barra del lado izquierdo de la fila y arrastrándola a su lugar.

Agregar estilos

Ya sea que esté editando los estilos de formulario predeterminados, los estilos de campo predeterminados, los tipos de estilos de campo, los estilos de error o los estilos de campo individuales, se le presentan muchas de las mismas opciones. Aquí puede encontrar los conceptos básicos de CSS que puede necesitar saber para aprovechar el poder de la extensión Layout & Styles para Ninja Forms.

Ten en cuenta que, según el tema de tu sitio, es posible que tengas que desactivar la configuración de estilos basados en opiniones de Ninja Forms para que los cambios de estilo surtan efecto. Puedes hacerlo navegando a la página de Configuración en la sección Ninja Forms del Panel de Control y configurando la casilla “Estilos basados en opiniones” en “Ninguno”. Luego, guarda la configuración. Puedes encontrar una explicación de qué es esta configuración y por qué existe aquí: Cómo dar estilo a tus formularios

Propiedades CSS básicas

Si bien podemos agregar más en el futuro, aquí mantenemos los elementos básicos que están disponibles para que usted pueda diseñar los elementos de su formulario.

Color de fondo

Esto ofrece un selector de color muy simple para que usted marque un color seleccionado o escriba un valor de color HEX.

Ancho del borde

Puede aceptar entre 1 y 4 valores. Vea los siguientes ejemplos:

1px: esto agregará un borde de 1 píxel en los cuatro lados.
1px 2px: esto agregará un borde de 1 píxel en la parte superior e inferior y un borde de 2 píxeles en los lados izquierdo y derecho.
1px 2px 3px: esto agregará un borde de 1 píxel en la parte superior, un borde de 2px en los lados izquierdo y derecho, y un borde de 3 píxeles en la parte inferior.
1px 2px 3px 4px: esto agregará un borde de 1 píxel en la parte superior, 2 píxeles a la derecha, 3 píxeles en la parte inferior y 4 píxeles a la izquierda.

Color del borde

Esto ofrece un selector de color muy simple para que usted marque un color seleccionado o escriba un valor de color HEX.

Color del texto

Esto ofrece un selector de color muy simple para que usted marque un color seleccionado o escriba un valor de color HEX.

Altura

Seleccione la altura de su elemento con un número entero seguido de px o %. Por ejemplo, 500 px o 100 %.

Ancho

Elige el ancho de tu elemento con un número entero seguido de px o %. Por ejemplo, 500 px o 100 %.

Propiedades CSS avanzadas

Estos son elementos que quizás el usuario promedio no necesite con tanta frecuencia, pero los incluimos en caso de que desee un poco más de control.

Flotar

Esto acepta izquierda, derecha o ninguna.

Tamaño de fuente

Generalmente, será un número entero seguido de px o em, como 16 px o 1 em.

Margen

Puede aceptar entre 1 y 4 valores. Agrega espacios en blanco en el exterior de lo que se aplica, siempre que sea un elemento de nivel de bloque. Consulte los siguientes ejemplos:

1px: esto agregará un margen de 1 píxel en los cuatro lados.
1px 2px: esto agregará un margen de 1 píxel en la parte superior e inferior y un margen de 2 píxeles en la izquierda y la derecha.
1px 2px 3px: esto agregará un margen de 1 píxel en la parte superior, un margen de 2px a la izquierda y a la derecha, y un margen de 3 píxeles en la parte inferior.
1px 2px 3px 4px: esto agregará un margen de 1 píxel en la parte superior, 2 píxeles a la derecha, 3 píxeles en la parte inferior y 4 píxeles a la izquierda.

Relleno

Puede aceptar entre 1 y 4 valores. Agrega espacios en blanco dentro de lo que se aplica, siempre que sea un elemento de nivel de bloque. Consulte los siguientes ejemplos:

1px: esto agregará un relleno de 1 píxel en los cuatro lados.
1px 2px: esto agregará un relleno de 1 píxel en la parte superior e inferior y un relleno de 2 píxeles en la izquierda y la derecha.
1px 2px 3px: esto agregará un relleno de 1 píxel en la parte superior, un relleno de 2px a la izquierda y a la derecha, y un relleno de 3 píxeles en la parte inferior.
1px 2px 3px 4px: esto agregará un relleno de 1 píxel en la parte superior, 2 píxeles a la derecha, 3 píxeles en la parte inferior y 4 píxeles a la izquierda.

CSS avanzado

Esta opción es para quienes están familiarizados con CSS o no les importa experimentar. Aquí puedes escribir cualquier regla que desees, tal como lo harías si estuvieras escribiendo CSS dentro de su propio archivo. Ejemplo:

radio del borde: 5px;
altura de línea: 18px;
caja-sombra: 2px 2px 2px 3px #333;

Recuerde finalizar cada línea con punto y coma.

Jerarquía de estilos y diseño

La extensión Ninja Forms Layout & Styles le ofrece la posibilidad de crear diseños y estilos de formularios muy complejos de forma predeterminada y por formulario, pero comprender el orden en que se aplican los estilos es crucial para aprovechar esta extensión al máximo.

Para comenzar, cuando instale la extensión Diseño y estilos, obtendrá un submenú Estilos en el menú de Ninja Forms. Cuando haga clic en él, verá 4 pestañas que representan los estilos predeterminados de Ninja Forms. Cuando configure estas opciones, se aplicarán en un orden muy específico.

Pestaña Estilos de formulario

Esta pestaña representa los valores predeterminados para los elementos de Ninja Forms. Aquí se configuran elementos como el contenedor principal, las filas y el mensaje de éxito y se aplican a todos los formularios que cree con Ninja Forms, así que asegúrese de que desea que estos estilos se apliquen a todos los formularios antes de continuar.

Pestaña Estilos de campo predeterminados

Cuando creas un campo o cualquier otro elemento con Ninja Forms, se crea una determinada salida requerida. Un div envolvente alrededor de una etiqueta y el elemento real. Las únicas excepciones son los elementos de diseño en los que no hay etiqueta y quizás ningún div envolvente, en cuyo caso solo se aplicarán los estilos de elemento.

En cualquier caso, estos estilos se aplican a TODOS los campos creados en Ninja Forms, independientemente del tipo. Nuevamente, si no desea que se apliquen a absolutamente todo, utilice esta opción con moderación.

Pestaña Estilos de Tipos de Campo

Aquí se le presentarán las mismas opciones que en Estilos de campo predeterminados, con la opción de seleccionar un campo o tipo de elemento específico. Esto significa que puede aplicar estilos a todos los cuadros de texto de una manera y a todos los botones de envío de otra. Básicamente, puede crear estilos predeterminados para cada tipo de elemento que Ninja Forms le permite crear.

Pestaña Estilos de error

Si el formulario no se completa correctamente, aparecen mensajes en la parte superior del formulario y en cada campo que tenga un error adjunto. Esto le permitirá aplicar estilo a estos mensajes y campos que tengan errores para todos sus Formularios Ninja.

Entendiendo la jerarquía

Básicamente, cuanto más específico sea, más peso se le dará a ese estilo. Teniendo esto en cuenta, los estilos de tipos de campo se aplican primero y luego los estilos de campo predeterminados. Tenga esto en cuenta cuando las cosas no parezcan verse como usted cree que deberían.