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]

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.

Suscr├şbete a nuestro bolet├şn.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares