Un Sitio Web básico necesita las siguientes Páginas:

• Home Page
• Acerca de
• Contáctenos
• Servicios
• Popup (Pagina o Widget que salga de la nada y ofrezca alguna forma de capturar email y/o datos del cliente.
• Página 404 (sale cuando lo que busca el cliente NO existe)
• Header / Footer (Encabezado y Pie del Sitio)

Cómo crear un formulario de contacto en WordPress (paso a paso)

Para empezar utilizamos el mismo teclado con las teclas: CTRL+E (sistema operativo Windows) o Cmnd+E (Mac) para que aparezca el buscador:

Editar el estilo y rótulos:

Cambiamos el rótulo y le ponemos ‘Contactarme’, le damos estilo—->cambiamos el tamaño de la letra a 65 para que quepa en una sola linea.

Al ser una página nueva le vamos a poner un título de una vez, para ello vamos a ‘Ajustes’—> en título le ponemos ‘Contactarme’—->en ‘Estado’ seleccionamos ‘Publicada’—-> en ‘Estructura de página’ seleccionamos ‘Elementor ancho completo’ y a continuación—> Actualizamos.

Modificamos el texto.

Siguiente sección:

Escogemos dos columnas—-> alto mínimo en 100 VH—> ir al panel de los ‘Widgets’—>escogemos una imagen y la insertamos en la columna del lado izquierdo—>damos clic en la imagen para seleccionarla desde nuestra galería o la arrastramos y la subimos—-> en tamaño de la imagen seleccionamos ‘Completo’.

Desde el panel de los ‘Widgets’ seleccionamos un encabezado o título y le cambiamos el texto—> lo alineamos al ‘centro’—-> en estilo escogemos en este ejemplo el color negro—->Tipografía—-> ‘fuente’: Monserrat—->’Tamaño’: 25—-> ‘Peso’: 500—->’Transformación’: todo mayúsculas.

Copiamos el texto de arriba y lo pegamos debajo del título—> Modificamos el texto.

Duplicamos ambos ‘Widgets” (el encabezado y el texto)—-> arrastramos el título duplicado—> lo colocamos arriba del tercero y modificamos el texto. (ver imágen abajo)

Podemos cambiarle el color al número de teléfono, en el ejemplo se le cambió a negro para que se vea todo igual. Volvemos a duplicar para crear una tercera—->arrastramos para que quede arriba del siguiente—->cambiamos el texto—> ‘Eventos’ en este caso y en vez del número le ponemos un email al cual le añadimos un vínculo.

Seleccionamos la columna completa—-> Alienación vertical: ‘En medio’—-> El espacio entre ‘Widgets’: 5 pixeles—-> cambiamos el estilo de los textos(aquí números) por lo que en Tipografía le cambiamos el ‘Peso’ poniéndole 400—> copiamos ese estilo y lo pegamos en los otros dos, solo el estilo.

Seleccionamos toda la columna y en ‘Estilo’ seleccionamos un color de fondo en ‘Tipo de fondo’ seleccionamos la brocha y escogemos un color—->Avanzado—> le damos un margen de 20 px a todo alrededor.

Hacemos lo mismo con la columna del lado izquierdo—>Margen de 20 px y desvinculamos los valores del relleno para que las dos columnas queden alineadas.

Comprobación en dispositivos móviles:

Seleccionamos la sección completa—->bajo la pestaña de ‘Avanzado’ seleccionamos ‘Adaptabilidad—> donde dice: ‘columnas invertidas para móvil le ponemos que SI. Seleccionamos la columna donde están los contactos, le vamos a agregar de relleno 60 px en la parte de arriba y 60 px en la parte de abajo. Regresamos para la última sección a la vista de ‘Escritorio’.

Sección nueva con dos columnas:

Ponemos un alto mínimo de 60 VH. Copiamos el título de la primera sección—-> pegar en la columna del lado izquierdo—-> alinear hacia el lado izquierdo—> cambiar el texto y poner: ‘Sígueme’—> cambiar en estilo el tamaño de la letra a 50 px—-> copiar uno de los widgets de texto y pegar debajo del título que acabas de poner—–> cambiar el texto—-> Estilo—>alienación: hacia el lado izquierdo.

Panel de Widgets:

Vamos al panel de los ‘Widgets’ y seleccionamos algunos íconos sociales, los cuales arrastramos y pegamos debajo del texto que ya tenemos. En la configuración de los íconos sociales vamos a cambiar en este caso el de ‘Twitter’, buscamos y seleccionamos el de ‘Instagram’. Introducimos los enlaces para cada una de las cuentas que tenemos y le cambiamos el orden en el que aparecen.

Forma de los íconos:

Vamos a seleccionar la Forma de los íconos—-> cuadrados—-> alineación: lado izquierdo. En ‘Estilo’ cambiamos el tamaño a unos 25 px—-> espaciado: 15 px. En la configuración de la columna—-> Avanzado—–>desvinculamos los cuadritos—–> Relleno: 200 px lado derecho—-> 20 px del lado izquierdo.

Vamos a la página de Inicio o Home:

Una vez que estamos en la página de ‘Inicio’ vamos a copiar el formulario de Contacto—->Editar con Elementor—-> vamos hasta abajo—–> en el formulario de contacto le damos clic derecho—->copiar—-> regresamos a la hoja con la que estamos trabajando—–> Clic a la columna del lado derecho—-> Clic derecho—–> Pegar—–> sección Avanzado de la columna—-> eliminamos los vínculos.

Comprobación en teléfono móvil:

A continuación pasamos a Modo adaptable—-> cambiamos el Alto mínimo de la Sección: 100 VH—-> seleccionamos la primera columna—–> Avanzado—-> eliminamos la configuración de Margen y relleno que teníamos en la versión escritorio—–>agregamos 50 px lado derecho—–> 50 px del lado izquierdo—–> 20 px en la parte de arriba y 20 px en la parte de abajo.

Seleccionamos la columna que contiene el formulario de Contacto—–> eliminamos la configuración de Margen y relleno que teníamos en la versión escritorio—–>agregamos 50 px en la parte de arriba—–> 20 px en el lado derecho——> 20 px del lado izquierdo. Listo!

Si estás satisfecho/a con el resultado le das a Actualizar.