Comenzamos esta categor铆a sobre trucos y consejos para el fant谩stico theme de WordPress, Divi. Si est谩is familiarizados con este theme seguramente sabr茅is que, aunque el m贸dulo de formularios de contacto es bastante completo, no permite realizar algunas personalizaciones que seguramente necesites en tu web. A saber, desplegables, selectores, check de pol铆tica de privacidad…
Para solucionarlo la mejor opci贸n es usar el ya m铆tico plugin, Contact Form 7, que permite crear formularios de manera sencilla y con un sinf铆n de posibilidades. Adem谩s, resulta m谩s sencillo monitorizar aquello que deseemos.
Sin embargo, un h谩ndicap de los formularios generados con Contact Form 7 son tremendamente feos y debemos darles estilo para que tengan posibilidades reales de general conversiones. Si estamos usando Divi, lo ideal es que nuestro formulario tenga los estilos del m贸dulo contact form de Divi.
Para aquellos menos familiarizdos con el CSS os dejamos el c贸digo necesario para replicar los formularios de Divi. Luego, solo tendr茅is que cambiar los colores para adaptarlos a vuestro dise帽o web.
驴Aun no tienes Divi?
Hazte ya con el theme de WordPress m谩s potente de la historia.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar { background-color: #eee !important; border: none !important; width: 100% !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important; font-size: 14px; color: #999 !important; padding: 16px !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .wpcf7-submit { color: #2EA3F2 !important; margin: 8px auto 0; cursor: pointer; font-size: 20px; font-weight: 500; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 6px 20px; line-height: 1.7em; background: transparent; border: 2px solid; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; } .wpcf7-submit:hover { background-color: #eee; border-color:#eee; padding: 6px 20px !important; } |
Con este c贸digo podr谩s generar los estilos que necesitas, solo tienes que copiar y pegar en el archivo style.css de tu聽tema hijo, con un resultado como este.
C贸digo cortes铆a de Agentewp.
[ratings id=禄1216″]
0 comentarios