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

Pin It on Pinterest

COMPARTIR

¡Comparte esta publicación con tus amigos!