Creando la página de contacto

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Ya casi terminamos con nuestro sitio web, únicamente nos falta crear esta página y le añadiremos algunas cosas adicionales al final para que se vea aún mejor.

Bien, vamos a empezar por habilitar el editor en la página.

Una vez que el editor se carga lo primero que deseo hacer es crear el encabezado.

Pero ya no tendremos que hacerlo desde cero debido a que tenemos una plantilla para nuestros encabezados guardada.

Así que voy a crear una sección nueva.

Y desde aquí voy a dar clic en añadir desde la biblioteca.

Como puedes ver aquí tenemos nuestra sección guardada.

Simplemente damos clic sobre ella y se añade a la página.

Ahora voy a eliminar esta sección que tengo arriba.

Debido a que mi texto ya tiene el diseño de fuente que deseo, simplemente daré clic sobre el texto para modificarlo.

Ahora voy a entrar en las opciones de la sección y cambiare la imagen de fondo.

Y así de fácil en menos de un minuto ya tenemos nuestro nuevo encabezado.

Muy bien, ahora añadiremos una nueva sección regular.

Utilizaremos estas cuatro filas y añadiremos un módulo de anuncio.

Desde aquí le colocaré teléfono.

Le activaré el ícono, y vamos a seleccionar uno de estos íconos.

Le voy a cambiar el color del ícono.

En la ubicación del ícono lo dejaré al lado izquierdo.

Y en la parte de abajo colocaré el número de teléfono.

Ahora vamos a entrar en las opciones de diseño.

Desde aquí activare el tamaño de fuente para ícono y lo dejare en 56px.

Luego vamos a dejar el tamaño del título en 22px.

Y añadiremos negrita al texto del cuerpo. Y guardamos los cambios.

Ahora voy a clonar 3 veces este modulo.

Y arrastramos los módulos nuevos a las zonas que les corresponden, quiero tenes 4 de estos módulos en fila.

Como vez, es muy fácil hacer que un módulo pase a otro lugar, y no solo podemos arrastrar módulos, podríamos arrastrar las filas o incluso las secciones hacia otro lugar.

Muy bien, ahora voy a modificar los otros módulos.

Empezamos por este, le cambios el título hacia dirección.

También vamos a buscarle otro ícono, necesitamos un ícono como de pin, muy bien.

Luego voy a bajar y aquí añadimos la dirección de nuestra empresa.

Y eso sería todo, ahora guardamos los cambios.

Vamos a modificar el siguiente modulo, a este le colocaremos Skype.

Cambiamos también el ícono que utiliza el módulo y luego pasamos a la parte de abajo en la que añadiremos nuestro usuario en este caso, y guardamos los cambios.

Finalmente voy a modificar el último modulo, aquí le colocamos twitter.

Luego vamos hacia abajo y seleccionamos otro ícono.

Y finalmente vamos al campo de texto y añadiré el usuario de twitter.

Perfecto, ya tendríamos esta sección guardada.

Ahora voy a crear una nueva sección.

También será una sección regular, con este formato.

Aquí añadiremos dos cosas muy importantes.

Tendremos un mapa y también un formulario de contacto.

Así que primero añadimos el mapa.

Aquí tenemos las opciones del mapa, lo primero que quiero hacer es colocar mi ubicación en el mapa.

Así que desde aquí damos clic para añadir una ubicación.

Primero colocamos un título.

Después podemos añadir la dirección para que Google maps intente encontrarla, pero también podríamos utilizar este mapa para ubicarnos.

Simplemente hago zoom, hare mucho zoom ya que como puedes ver estamos muy lejos.

Ahora arrastro este pin donde deseo que me úbique.

Muy bien, ahora creo que haré zoom in para ubicarme mejor.

De hecho creo que hare un poco más grande la ventana de edición para ver mejor el mapa.

Muy bien, ahora si, vamos a ubicarnos.

Como puedes ver colocarte en el mapa es tan fácil como arrastrar este pin.

Una vez que te encuentra ubicado, puedes añadir aquí abajo algo de texto que le aparecerá a tu cliente si le da clic al pin.

Podríamos añadir una pequeña descripción o referencias sobre cómo llegar a tu negocio.

Ahora que ya tenemos todo listo vamos a regresar a las opciones generales.

Muy bien, ahora desde este mapa podemos indicar la vista en la que debe fijarse.

Entonces debemos colocarlo como deseamos que le aparezca a nuestro cliente cuando entre a nuestro sitio web.

Así que debemos ubicarnos en el mapa, ahora es mas fácil ya que vamos a seguir el pin.

El mapa no se centra automáticamente en el pin debido a que podemos tener más de una ubicación, entonces si tienes muchas tiendas por ejemplo, podrías colocar el mapa para que visualice toda la zona en la que están tus negocios.

Una vez nos ubicamos en el mapa podemos configurar estas otras dos opciones.

Para que la rueda del ratón pueda hacer zoom y para que el mapa se pueda arrastrar en móviles.

Ahora que ya tenemos nuestro mapa creado, voy a guardar los cambios.

Muy bien, ahora voy a crear mi formulario de contacto.

Así que añadimos un nuevo módulo aquí y utilizaremos el formulario de contacto.

Desde aquí tenemos las opciones para nuestro formulario.

Los campos que puedes ver en el formulario son los mismos que tenemos en esta zona.

El formulario nos añade por defecto el campo de nombre, correo y el mensaje.

Pero si deseas añadir otro campo solo debes dar clic en añadir nuevo elemento.

Este será el asunto del mensaje, así que le colocaré asunto en el input.

En titulo también lo colocamos asunto.

Podemos crear 3 diferentes tipos de campos, una entrada, uno que valida si es un correo y el área de texto.

En este caso es una entrada así que lo dejare como se encuentra.

Desde aquí podemos convertirlo en un campo obligatorio y podemos hacerlo de ancho completo o no.

Regresemos a las opciones generales, también podemos mover los campos de posición, por ejemplo mi asunto quiero que se muestre antes del campo de texto.

Mas abajo podemos activar el captcha, de esta forma añadimos una pregunta de seguridad para evitar el spam.

Luego debes indicar a que correo debe llegar el mensaje.

Abajo podemos añadirle un título al formulario que aparece en la parte superior.

En patrón del mensaje podemos utilizar los input de los campos para crear nuestro propio mensaje, pero no es necesario así que puedes dejar esta zona vacía.

Después podemos indicar una dirección a la que el usuario debe ser redireccionado después de que nos envía el mensaje.

También podemos añadir un mensaje de éxito cuando el cliente envía el mensaje.

Muy bien, en este caso, voy a entrar en las opciones de diseño, y colocare el texto del título en negrita y también le cambiare el color a blanco.

Después voy a ir hasta abajo y activaré el color del borde, le colocaremos un color verde.

Finalmente activaré los estilos par el botón y le vamos a dar un color de fondo verde también.

Cambiaremos el color del texto a blanco.

El color del borde también lo dejaré en verde.

Y activaré las negritas para el texto del botón.

Muy bien, ahora guardamos los cambios.

Ya tenemos nuestro mapa y el formulario de contacto.

Les vamos a colocar una imagen de fondo, así que entramos en las opciones de la sección.

Y vamos a colocar una imagen, la seleccionamos y la añadimos, también dejaremos marcado el efecto paralaje y guardamos los cambios.

Y con esto hemos terminado nuestra página de contacto, así que vamos a las opciones de abajo y guardamos los cambios.

Muy bien, salgamos del editor para ver nuestro sitio web.

Como puedes ver aquí tenemos nuestra nueva página de contacto.

Nuestro sitio web está casi listo, ya hemos terminado con el diseño de todas las páginas incluyendo al blog.

Pero nos falta modificar el menú, a mí personalmente no me gusta que el menú se quede pegado en la parte superior mientras bajo en las páginas.

También debemos modificar el logotipo y el color de los elementos en el menú.

Entonces, para modificar esto vamos a entrar a nuestra área de administración desde la barra de herramientas.

One Comment on “Creando la página de contacto”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image