Crear un formulario único y atractivo en Elementor es esencial para destacar en la web y captar la atención de tus visitantes. En este tutorial, te mostraremos cómo personalizar un formulario con un diseño de carta o postal que impresionará a tus usuarios. Sigue estos sencillos pasos para lograrlo.
Crear una Sección
Comenzamos abriendo Elementor y creando una nueva sección con dos columnas. Esto servirá como la base de nuestro formulario de carta o postal.
Estilizar el Encabezado
Añadimos un encabezado en la sección y le damos estilo de tema. Ajustamos la tipografía y reducimos el peso de la fuente a 300.
Agregar la Imagen del Sello
Insertamos la imagen del sello en la sección. Asegúrate de que se vea bien en relación con el encabezado.
Insertar el Formulario
Añadimos un formulario a la sección. Una vez que tengas el formulario en su lugar, es hora de personalizarlo para que parezca una carta o postal.
Personalizar los Elementos
Dentro del formulario, comenzamos personalizando los elementos:
-Quitamos los labels de cada campo para darle un aspecto más limpio.
-Para el campo de área de texto, configuramos para que tenga solo una fila.
-Alineamos el botón a la derecha y lo renombramos como «Enviar Carta».
-Ajustamos el espaciado entre las filas.
Personalizar el Estilo
Continuamos personalizando el estilo de los elementos:
-Cambiamos el color del texto y ajustamos la tipografía de los campos.
-Aumentamos el tamaño del texto para una mejor legibilidad.
-Quitamos los bordes, excepto el borde inferior, que lo configuramos en color negro.
Diseño del Botón
Para el botón, hacemos lo siguiente:
-Cambiamos el color de fondo a azul.
-Personalizamos la tipografía del botón para que se destaque.
-Alineamos el botón al centro.
Añadir el Borde Especial
Para el diseño de borde con franjas de colores, utilizamos un código proporcionado al final del tutorial. Copiamos este código en la opción de «Custom CSS» en el contenedor.
Aplicar el Borde Correcto
Para asegurarnos de que el borde se aplique correctamente, definimos la clase en el contenedor. Luego, actualizamos la página para ver los cambios.
Alineación Final
Si es necesario, ajustamos la alineación del encabezado para que quede alineado con la imagen del sello y el diseño del formulario.
¡Y eso es todo! Has creado un formulario personalizado con un diseño de carta o postal en Elementor que seguramente impresionará a tus usuarios. Recuerda actualizar la página y comprobar los cambios. Esperamos que este tutorial te haya sido útil. Si es así, no dudes en darle like, suscribirte al canal y activar la campanita para futuros tutoriales. Si tienes alguna pregunta o comentario, déjalos abajo. ¡Nos vemos en próximos videos!
