Tutorial de WordPress para páginas web

Te explicamos cómo utilizar WordPress para páginas web, con los plugins y el sistema de maquetación más adecuados. ¡No te pierdas esta clase!

En esta clase os vamos a explicar cómo adaptar WordPress para páginas web de servicios. Si acabáis de aterrizar en este blog os recomendamos revisar la clase anterior, donde os explicamos como configurar WordPress desde cero para Blogs. También os podéis revisar el curso de WordPress completo, donde encontraréis información básica para empezar con vuestra instalación.

Plugins básicos para páginas web

Formularios de contacto

Nos iremos al apartado de plugins, le daremos a añadir nuevo y buscaremos contact form 7. Después lo instalaremos y activaremos.

Formularios de contacto
Formularios de contacto
Plugins instalados
Plugins instalados

Se nos activará el apartado de formulario. Podremos acceder entonces al Formulario de contacto 1.

Formulario de contacto 1
Formulario de contacto 1

Dentro del formulario de contacto, encontraremos los campos que podemos añadir: Correo electrónico, teléfono, fecha, área de texto, menú desplegable, casillas de verificación…

Editar formulario de contacto
Editar formulario de contacto

Cuando añadimos un campo (por ejemplo el de teléfono), podemos añadir si queremos que sea un campo obligatorio, el nombre que le queremos dar y nos indicará la etiqueta que tenemos que añadir para que se nos active.

Generador de etiquetas
Generador de etiquetas

Añadiremos entonces las etiquetas correspondientes con la información que verá el usuario.

Añadir campos al formulario de contacto
Añadir campos al formulario de contacto

En el apartado de correo, añadiremos los campos que serán enviados a nuestro correo cuando el usuario rellene el formulario. Podemos seleccionar los campos que necesitemos y añadirlos en los apartados de: para, de, asunto, cabeceras adicionales y cuerpo del mensaje.

Campos que nos llegan por el formulario
Campos que nos llegan por el formulario

Podremos activar también la opción de Correo electrónico (2) si queremos enviar un correo al usuario cuando rellene el formulario.

Correo electrónico (2)
Correo electrónico (2)

En el apartado de mensajes podremos traducir los mensajes que ve el usuario cuando se equivoca, cuando envía el mensaje, cuando falla el envío del mensaje y muchos más. Os recomendamos repasar que todos los mensajes se adecuen a lo que queréis transmitir.

Mensajes del formulario
Mensajes del formulario

Una vez hayamos guardado el formulario de contacto, podremos crear una página de contacto y añadir el bloque de contact form 7. Después podremos seleccionar el formulario de contacto que queramos utilizar. Podemos crear tantos formularios de contacto como queramos.

Bloque de Gutenberg
Bloque de Gutenberg
El formulario que ve el usuario
El formulario que ve el usuario

Botón de WhatsApp

Para instalar click to chat iremos directamente a añadir plugins y buscaremos la palabra clave. Instalaremos el plugin y lo activaremos.

Añadir plugin Click to Chat
Añadir plugin Click to Chat

En los ajustes del plugin podremos seleccionar el número de WhatsApp al que queremos que nos escriban, el mensaje inicial que queremos que le aparezca al usuario, la llamada a la acción y si queremos que se abra WhatsApp Web cuando el usuario llega desde el escritorio.

Opciones de Click to Chat
Opciones de Click to Chat
Completar todas las opciones
Completar todas las opciones

También podremos seleccionar entre una lista de estilos para adecuar el botón a nuestra imagen de marca, tanto en el móvil como en el ordenador.

Seleccionar los estilos del botón de WhatsApp
Seleccionar los estilos del botón de WhatsApp

Asimismo, disponemos de ajustes de visualización para mostrar u ocultar el botón en las páginas que seleccionemos.

Ajustes de visualización
Ajustes de visualización

En el apartado de other settings nos encontraremos con la parte de analítica. Podremos decidir si queremos enviar los clicks de WhatsApp a Google Analytics, Facebook pixel o las conversiones de Google Ads.

Google Analytics y Facebook Pixel
Google Analytics y Facebook Pixel

Si volvemos a la parte que ve el usuario, comprobaremos si el botón de WhatsApp queda como nosotros queremos.

Cómo ve el usuario el botón de WhatsApp
Cómo ve el usuario el botón de WhatsApp

Crear una web de servicios con WordPress

Cumplir con la legalidad: política de privacidad, cookies, etc

¡Ojo! Porque dependiendo del país que estéis se aplicarán unas normas u otras. En España por ejemplo, tenemos que cumplir con la ley de cookies, la ley de protección de datos y los derechos de autor.

Cumplir con la ley de cookies supone crear una URL para la política de Cookies y añadir un banner en el que el usuario acepta su utilización. Deberemos añadirla sobre todo si utilizamos Google Analytics. Hablamos de ello con más detenimiento en una clase anterior.

Para cumplir con la ley de protección de datos deberemos crear la página de política de privacidad y añadir avisos en los formularios de la web. Por ejemplo, en el formulario de contacto.

Para cumplir con la ley de derechos de autor deberemos utilizar contenidos siempre originales. No podéis utilizar imágenes de Internet que no sabéis si tienen licencia o no.

Arquitectura SEO y contenidos

La arquitectura web, también llamada arquitectura de la información, es la organización y estructuración de la información en proyectos online, normalmente en una página web. Dicha arquitectura web trata de mejorar tanto el SEO como la experiencia del usuario, optimizando la navegación dentro del proyecto y tratando de llevar a los usuarios hacia la conversión.

Para crear una web de servicios de forma óptima deberemos crear de antemano nuestro estudio de palabras clave y arquitectura SEO. Ojo con empezar con esto antes de poneros con WordPress porque si no decidís bien vuestra estructura os tocará cambiar todas vuestras landing pages y esto es un auténtico drama.

Tutorial de Gutenberg para páginas web

Tal y como hemos explicado, Gutenberg es el editor por defecto de WordPress. A nosotros es el que más nos gusta y consideramos que cubre casi todas las necesidades que podáis tener. Es verdad que a muchos alumnos este nuevo sistema les cuesta un poco pero una vez se aprende, es más rápido que el editor clásico. Como siempre en marketing digital todo va cambiando a la velocidad de la luz, y deberemos acostumbrarnos a aprender herramientas nuevas habitualmente.

 Editor de bloques Gutenberg
Editor de bloques Gutenberg

WordPress dispone de una pequeña guía donde explica su funcionamiento. Realmente es muy intuitivo. Al darle a “Añadir un bloque” se nos abrirá un completo panel donde podremos seleccionar todos los que vienen por defecto o bien buscar aquellos bloques que nos interesen.

Añadir bloque en Gutenberg
Añadir bloque en Gutenberg
Bloques de Gutenberg
Bloques de Gutenberg

Aquí os dejamos la lista de bloques que podéis utilizar:

Medios
Medios
Diseño
Diseño
Widgets
Widgets
Incrustados
Incrustados
Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola