Índice de contenidos
Contenido
Esta es, probablemente, la parte más importante y más laboriosa para crear una página web.
Es momento de añadir los primeros contenidos a nuestra página web, no sin antes aprender a hacer copias de seguridad de toda nuestra página web. Vamos a crear una página de contacto, vamos a añadir varias entradas a nuestra página web y posteriormente vamos a crear un menú donde aparecerá dicho contenido.
Finalmente vamos a añadir contenido a nuestra página principal.
Crear copia de seguridad de una página web
A partir de este momento, es imprescindible ir realizando copias de seguridad de nuestra web.
Hay hostings que nos hacen copias automáticas o que ofrecen un servicio de pago. Si no tenemos copias automáticas podemos hacerlo desde nuestro hosting CPanel -> Backups.
Para poder restaurar de una forma sencilla, las copias de seguridad tenemos que hacerlas según lo indicado en la imágen: por un lado, una copia de los archivos web y por otro lado una copia de las bases de datos, si tenemos más de una.
Ahora que sabemos como crear una copia de seguridad, podemos empezar a trabajar en la página web, creando copias de seguridad periódicas por si necesitamos restaurar a un punto anterior.
Crear una página de contacto
Ya tenemos previamente instalados los plugin WPForms y WP Mail SMTP. Ambos son necesarios para crear un formulario de contacto y que este funcione correctamente.
Configurar el servidor SMTP
Lo primero que haremos es configurar el servidor SMTP para que nos lleguen los correos enviados por el formulario.
Podemos utilizar distintos tipos de configuración en función del tipo de correo que utilicemos.
Si usamos un correo web con nuestro dominio, deberemos utilizar una configuración similar a la que se muestra en la imagen. En el caso de hospedarnos en GoDaddy, la configuración será la misma.
En todo caso, es la misma configuración que utilizaríamos al configurar Microsoft Outlook y que en cualquier web hosting nos facilitarán.
Crear un formulario de contacto
Ahora que ya tenemos nuestro servidor de salida de correos configurado, vamos a crear un formulario de contacto para que los usuarios puedan ponerse en contacto si fuera necesario.
En primer lugar nos dirigimos a WPForms, en el menú izquierdo de nuestro escritorio y seleccionamos Añadir nuevo.
En la pantalla que aparece seleccionamos Formulario Simple y nos llevará automáticamente al maquetador, con un pequeño formulario simple creado.
Lo modificamos a nuestro gusto y guardamos. Ya hemos creado un formulario de contacto.
En la pestaña "Todos los formularios" encontraremos nuestro formulario creado con su "shortcode" correspondiente por si queremos añadirlos manualmente en un campo de texto.
Crear una página de contacto y añadir el formulario
Ya solo nos queda un último paso, crear una página de contacto y añadir nuestro formulario.
Para crear una página, vamos a seguir el mismo procedimiendo que hemos utilizado para crear nuestra página de inicio.
Creamos la página, le damos un nombre y un enlace permanente, por ejemplo /contacto/.
Publicamos la página y ejecutamos el Beaver Builder. Esto puede hacerse desde el editor de la página, o desde la misma página, en el menú superior.
Vamos a añadir ahora el formulario a la página en dos sencillos pasos:
Desde el menu superior, seleccionamos el símbolo +.
- Desde Módulos -> WordPress Widgets, seleccionamos WPForms y lo arrastramos al centro de nuestra página.
- Seleccionamos el formulario que queremos añadir a la página.
Ya tenemos nuestra página de contacto creada.
Si lo deseamos podemos añadir más contenido, por ejemplo nuestro teléfono o dirección.
Desde el menú superior podemos añadir columnas y otros módulos a nuestro gusto.
Añadir entradas a nuestra página web
Para empezar a crear entradas, lo hacemos del mismo modo que si fueran páginas, es decir Entradas -> Añadir nueva.
El proceso es también similar, solo que a las entradas vamos a asignarles una categoría.
- Damos un título a nuestra entrada.
- Seleccionamos una categoría.
- Desactivamos, si lo deseamos, comentarios y pingbacks
- Seleccionamos una imágen destacada. Esta imágen se mostrará en el plugin Content Views, que anteriormente hemos mencionado.
- Publicamos.
- Una vez publicado, en el menú derecho aparecerá la opción "Enlace permanente". Podemos modificar, si lo deseamos el slug de la url para acceder a la entrada.
- Lanzamos beaver builder para editar nuestra entrada.
El proceso de edición es el mismo que hemos visto para nuestro formulario de contacto.
Todo se gestiona desde el menu superior +.
Es un sistema basado en la inserción de filas, columnas y módulos.
Este punto es bastante personal, con lo cual es cuestión de dedicarle unos minutos y ver varias posibilidades de diseño.
Este sistema de columnas lo podemos utilizar para crear páginas con menús de bloques con imágenes, como veremos en último paso: Personalizar página web y últimos ajustes.
Las columnas y módulos tienen una gran cantidad de opciones de diseño como espaciados, bordes, redondeados, backgrounds, etc., con lo cual es cuestión de cada uno decidir que formato quiere dar a sus entradas.
Crear un menú para nuestra web
Estamos a punto de conseguir crear una página web completa, ya tenemos entradas creadas, una página de inicio y una página de contacto.
Quizá vaya siendo hora de dar acceso a cualquier usuario a nuestras páginas y entradas con un menú principal para nuestra página web, lo cual no nos va a llevar más de 5 minutos.
Nos dirigimos al menú Apariencia -> Menús
Lo primero que encontraremos es un menú principal con varios campos invalidos, señalados en rojo. Esto se debe a que al crear la página web en WordPress, hemos eliminado todo el contenido que venía por defecto. Por tanto ese menú dirige a páginas y entradas que no existen.
Vamos a utilizar el mismo menú, no sin antes eliminar todos los campos en rojo hasta dejarlo limpio.
Una vez limpio, a la izquierda encontraremos la herramienta para añadir elementos, que ofrece 4 posibilidades:
- Páginas: Desde esta opción seleccionamos y añadimos nuestra página de contacto.
- Entradas: Podemos enlazar entradas individuales al menú.
- Enlaces personalizados: Podemos enlazar a cualquier parte de nuestra web colocando la url o a una página externa. Los enlaces personalizados se utilizan para crear sub-menús, escribiendo una # en el campo URL. También pueden usarse enlaces personalizados para ir a enlaces ancla o anclajes (secciones concretas de una página.
- Categorías: Aquí podemos añadir una Categoría completa. Esto por ejemplo puede utilizarse para un blog, por tanto todo lo que se publicase en el blog aparecería en ese apartado.
Ya solo nos queda guardar el menú y seleccionarlo como menú principal.
Al haber utilizado el menú que había, este paso probablemente no será necesario.
En caso de que el menú no aparezca, debemos dirigirnos a Apariencia -> Personalizar -> Menús. Una vez ahí seleccionar el menú como principal y ya deberá aparecer en nuestra página web.
Hemos conseguido crear una web, hemos creado una página de contacto con formulario, una página de inicio, unas entradas y un menú donde hemos organizado todo el contenido.
Ya solo nos falta centrarnos en los detalles y conseguir que nuestra web tenga un diseño y un aspecto más profesional. Todo esto lo veremos en el último paso, el paso 8 de como crear una web.
