Seleccionar página
Hola, me llamo Antonio Mtz, soy el iniciador de Divicon que hace referencia a (DIVI y CONferencias). Soy diseñador gráfico, con especialidad en imagen corporativa, me gusta mucho la ilustración, el 3D, Motion graphic, fotografía, tipografía. jajaja bueno todo lo que se refiere al diseño.

importanteleeme-divi-wordpress

Ya hace tiempo que no hacia publicaciones en la página.
Estuve acomodando esta página si algunos recuerdan estabamos en www.contenido.realeza.com.mx y ahora nos hemos pasado a nuestro propio
dominio, así que estuve preparando la página y haciendo unos proyectos para sobrevivir xD, espero que pueda publicar más sguido nuevamente

Ahora vengo con un tutorial sé que les gustara, a mi me gusto.
se trata del formulario de contacto para realzar los campos de «Nombre, Email, Asunto» o cualquiera que quieran añadir .

ver demo tutoriales divi elegant

Formulario de contacto divi box-shadow tutorial en español

 

Empecemos con el tutorial.

1.- Primero crearemos una página

1-portada-scrollMagic-wordpress-DIVI-Themes

Módulo formulario contacto.

2.- Añadimos una fla con dos columnas, (la que ustedes prefieran o se adapte mejor para su proyecto)
3.- Insertamos el módulo de contacto en una de las filas

 

Personalizamos el módulo de contacto

5.-Vamos a la configuración del módulo de contacto
Contenido —> y clik en el engrane para entrar a la configuración del input o caja de texto.
6.- Lo hacemos en tamaño completo (Opcional)

7.- Ocultamos el elemento de captcha, yo lo hago por que no me gusta, pero igual puedes dejarlo

Personalizamos los campos de contacto

Texto de campo del formulario
8.-Estos campos que personalizaremos son: (Nombre, Asunto, Email y Mensaje). lo que haremos será quitar el fondo gris
y añadiremos lineas (Borde) debajo de estos campos, como en la imagen de abajo

9.- Configuramos la tipografía y la personalizamos a nuestro gusto, esta vez yo solo escogi light para hacerla más ligera, todos los campos los deje igual

 

Personalizamos el botón de contacto (HOVER)

10.- Vamos a botón escogemos, personalizar estilos de botón y añadimos los valores que muestro acontinuación

11.- Así debemos de tener nuestro formulario, con todas las configuraciones que hemos hecho hasta ahora.
solo falta añadirle un fondo.

Fondo degradado selección general(HOVER)

12.- Esta vez yo seleccione los colores de nuestro logotipo, esto tambien es opcional

13.-  configuramos nuestro padding o relleno personalizado, para dejarle un poco de margen a nuestro formulario de contacto

CSS Módulo de contacto ( box-shadow)

14.- Ahora añadimos la parte importante el CSS

Código

 

/* fomulario 1 */

.et_pb_contact_form_0  {
   
    padding: 20px 12px 10px 20px;
   
}
.et_pb_contact_form_0 
input[type="text"]:focus,
.et_pb_contact_form_0 textarea:focus,
.et_pb_contact_form_0 select:focus { 
     -moz-box-shadow: 0 0 4px #5b1c8b;
    -webkit-box-shadow: 0 0 4px #5b1c8b;
   box-shadow: 0 0 4px #5b1c8b;
  border: 1px solid #5b1c8b;

}

/* fomulario 1 */

IMAGEN FINAL

seccion-video-divithemes-tutoriales

descargar-divi-json-wordpress

¿Te parece interesante este artículo?
Puntaje
[Total: 2 Average: 5]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Pin It on Pinterest

Shares