Índice de contenidos
Contenido
Ahora que nuestra página web está en pleno funcionamiento, debemos trabajar algunos detalles y puntos importantes.
En este último punto del tutorial de como crear una página web en 8 pasos, vamos a ver algunos puntos imprescindibles en cualquier web:
- Crear un aviso legal para cookies y privacidad.
- Editar el diseño del pié de página y cabecera.
- Editar el diseño de nuestra página de inicio.
Las opciones son infinitas, con lo cual vamos a centrarnos en lo básico.
Para otras configuraciones más avanzadas, vamos a recurrir a tutoriales específicos en nuestra sección "Diseño y Recursos web", donde os vamos a intentar ayudar en todo lo posible con tutoriales para instalar certificados SSL gratis, códigos CSS, sliders y mucho más..
Legalizar nuestra página web
Lo primero que debemos hacer es cumplir con las leyes de privacidad y protección de datos. Aunque nuestra web no recopile datos directamente, debemos poner en conocimiento de los usuarios de que forma pueden tratar sus datos, incluidas las cookies.
Para ello vamos a hacer dos cosas:
- Crear página de política de privacidad, de forma manual.
- Utilizar el plugin que ya tenemos instalado, GDPR Cookie Consent para crear un aviso y una página de política de cookies.
- Añadir enlaces al pié de página de las políticas de privacidad y cookies.
Crear página de política de privacidad
Simplemente vamos a crear una nueva página, del mismo modo que habiamos creado nuestra página de inicio. La vamos a nombrar "Política de privacidad", desactivaremos comentarios y la publicaremos.
El enlace debería quedar automáticamente como nombreweb.com/politica-de-privacidad/, aunque puede editarse en el slug.
Nos dirigimos a nuestra página, y con la ayuda de beaver builder copiaremos el texto de cualquier plantilla online, en función de los datos que recopile vuestra web, si se puede pagar online, etc.
En caso de que la web sea meramente informativa y no requiera de datos de los usuarios, podeis copiar la plantilla de privacidad de esta misma web, sustituyendo el nombre de Como Crear Web por el vuestro.
Crear un aviso y una página de cookies
Para este punto contamos con la ayuda del plugin GDPR Cookie Consent.
Nos dirigimos, en el menú de nuestro panel, a GDPR Cookie Consent -> Generador de Política.
Una vez ahí, dejamos todo como está, y pulsamos en "Crear la página de política de Cookies".
Esto nos llevará directamente a nuestra página de Política de Cookies, lista para publicar, sin el uso de Beaver Builder.
Lo unico que nos quedará por hacer será traducirla, o pasarla por el traductor google, e ir copiando el contenido traducido.
No debemos traducir el contenido marcado en rojo en la imágen.
Una vez tengamos nuestra página de cookies traducida, podemos publicar.
Cuando esté publicada, sin salir de la página de edición, podemos editar el slug (la url) de la página.
Una vez esté todo listo, entramos a nuestra página de cookies para revisar que todo esté correcto.
Si lo deseamos, podremos ejecutarla con Beaver Builder para realizar modificaciones.
Ahora que ya tenemos una página de política de privacidad y otra de cookies, vamos a generar un aviso para que al recibir un nuevo usuario, este sea notificado automáticamente y deba aceptar nuestras condiciones para seguir navegando.
Nos dirigimos a la opción "Ajustes de la ley de cookies", donde vamos a personalizar textos y botones.
Para ver como van quedando nuestros cambios, abrimos una pestaña en modo incognito en nuestro navegador, donde vamos a ir actualizando.
Son pocos los cambios que hay que ir añadiendo, por tanto vamos a comentarlos pestaña a pestaña.
| PESTAÑA | CAMBIOS A REALIZAR |
| General | Desactivar la pestaña para mostrar de nuevo, ya que vamos a colocar un link en el pie de página. |
| Personalizar la barra de cookies |
En el campo "mensaje", podemos copiar el siguiente mensaje: Este sitio web utiliza cookies para mejorar su experiencia. En cumplimento de la ley de protección de datos deberá aceptar el uso de cookies y nuestra política de privacidad que encontrarán en el pie de página para continuar navegando. Al final de nuestro mensaje, colocamos los botones que queremos, aceptar, rechazar, settings o leer más. Esto se hace mediante shortcodes. Se coloca entre corchetes el nombre del botón, que encontraremos en la siguiente pestaña para Personalizar los botones. |
| Personalizar los botones |
En el "Enlace de <<leer más>> vamos a escribir en "Texto" -> "Política de cookies" y en URL colocaremos nuestra URL de la página de política de cookies. En la parte superior de cada botón aparece su shortcode para introducir en el mensaje de aviso de la barra de cookies. Si lo deseamos, podemos editar el botón rechazar para hacer que en lugar de sacarnos de la web, abra una url. Podemos cambiarle el nombre y enlazarlo a la política de privacidad. |
| Avanzado | Sin cambios a realizar. |
Una vez finalizado, guardamos y verificamos que se muestra todo correctamente.
Añadir enlaces a nuestro pié de página
Nos dirigimos al menú Apariencia -> Widgets
Tal y como se muestra en la imágen, arrastramos un widget de texto hasta la sección "Barra de pié de página".
En el editor de texto, en la esquina superior derecha seleccionamos HTML y pegamos el siguiente texto:
<a href="mailto:admin@comocrearweb.com">Contacto</a> | <a href="https://www.comocrearweb.com/politica-privacidad/">Política de privacidad</a> | <a href="https://www.comocrearweb.com/politica-cookies/">Política de cookies</a>
Cambiamos lo señalado en rojo por lo que corresponda de cada web y ya deberán aparecer los enlaces en nuestra esquina inferior derecha.
Aspectos visuales
Nos dirigimos al menú Apariencia -> Personalizar.
Aquí, que es donde habiamos seleccionado nuestra página de inicio, es donde vamos a realizar todo el diseño web básico.
El header o cabecera
Lo primero que haremos es eliminar el texto de la cabecera e insertar un logotipo.
A continuación, vamos a insertar un favicon. El favicon es la imágen pequeña que se muestra en las pestañas del navegador.
Bastará con dejar las opciones tal y como os mostramos en la imágen.
Si no lo tenemos, podemos crear un logotipo con algunos programas de diseño vectorial, o con algun editor de logos online, que ofrecen una buena cantidad de opciones y diseños gratis. El mismo logotipo podemos utilizarlo como favicon.
A parte de esto, en las pestañas Diseño | Colores | Tipografía | Background Images podemos editar distintos aspectos de la cabecera.
Es interesante, por ejemplo, en Diseño->Cabecera, probar una cabecera de ancho completo o contenido, y ver como queda en nuestra página web, o en Colores, darle a la cabecera el mismo color que el background (fondo).
También es interesante, en Diseño -> Contenedor, probar contenedores separados o un único contenedor.
Os mostramos algunos ejemplos de cabeceras de ancho completo, contenido y con contenedores separados o un contenedor.
Menú y página de inicio
Vamos a ver como podemos mejorar nuestro menú superior y como crear bloques en nuestra página de inicio para utilizarlo como menú, algo que a Google le gusta bastante por la facilidad de encontrar y seguir los enlaces.
Para ello tenemos dos métodos, directamente creando bloques con beaver builder y añadiendo imágenes enlazadas a nuestras entradas, o con la ayuda del plugin Content Views.
Editar el menú o barra de navegación
Desde el menú Apariencia -> Personalizar -> Diseño -> Navegación Principal podemos editar varios aspectos del menú.
En este menú podemos seleccionar y editar varios aspectos del menú:
- Si queremos que el menú ocupe todo el ancho, o solo se situe en el interior del contenedor.
- Elegir la alineación del menú. Podemos elegir también un menú flotante.
- Colocar el menú antes o después de la cabecera. Si lo colocamos antes, se nos mostrará en la parte superior de la pantalla.
- Seleccionar cuando queremos que se muestren los desplegables del menú, si se requiere hacer click o solo pasar el cursor por encima. También podemos elegir la dirección hacia la que se desplegará el menú.
- Añadir un cuadro de búsqueda en el menú.
- Colocar el logo o un icono en el menú.
- Editar el ancho y largo de los items. Cuanto más ancho, más separación vamos a tener.
Fuera del diseño, podemos editar también colores o fuentes en las correspondientes pestañas del diseñador del GeneratePress. Podemos dejar el menú a gusto de cada uno.
Para usuarios más avanzados podemos tocar directamente el CSS desde Apariencia -> Personalizar -> CSS adicional.
Aquí disponen de un listado de código CSS para pegar en nuestra web.
Crear bloques con beaver builder
Nos vamos a nuestra página de inicio y activamos Beaver Builder en el menú superior.
En el menu de bloques, nos vamos a filas y añadimos una fila con una columna.
Vamos a añadir posteriormente filas de 3 o 4 columnas dentro de la fila de una columna.
Vamos a hacerlo así para poder dar un fondo de otro color a ese apartado. Si es lo que queremos, dandole a editar el bloque principal, podemos dar ancho contenido o completo y seleccionar imágenes o colores de fondo.
Como vemos en el ejemplo, una vez creados los bloques en columnas, añadimos en cada uno de ellos un bloque de texto, si queremos insertar imágenes con texto, o un modulo de imágen, si no queremos añadir texto.
Es recomendable tener texto en nuestra página de inicio, para aportar toda la información posible a Google.
Enlazamos las imágenes a cada entrada y ya lo tenemos listo.
En configuración, hay distintas propiedades que podemos asignar a cada bloque como fondo, márgenes, bordes, redondeados, etc.
Si además, hemos creado todos los bloques dentro de un bloque de una sola columna, podemos editar el bloque principal o exterior y darle un fondo y un ancho completo, para obtener una franja coloreada como se puede ver en este otro ejemplo marcado en rojo.
Es posible que para que se vea el ancho completo con la mayoría de pantallas debamos ajustar el ancho de nuestro contenedor.
Esto podemos hacerlo en Apariencia -> Personalizar -> Diseño -> Contenedor -> Ancho del contenedor.
Crear bloques con el plugin Content Views
En este caso es más rápido que de forma manual, y todo se hará editando en el plugin Content Views todas las opciones y añadiendo la categoría o entrada que queremos mostrar.
Una vez editado todo, deberemos crear un bloque de una columna y copiar el shortcode del Content Views que hemos creado.
Content Views tiene una infinidad de opciones y configuraciones, con lo que hemos dedicado un artículo sobre Content Views.
Las imágenes que se mostrarán para cada entrada, corresponden con la imágen destacada que hemos configurado para cada entrada.
Si lo configuramos correctamente, podemos obtener resultados como este:
Instalar un certificado SSL gratis
Si no hemos contratado un servicio de cifrado SSL, es importante disponer de uno para dar confianza a los usuarios que entren a nuestra página web.
Con un certificado SSL nuestra web mostrará el candado en la barra del navegador (donde introducimos las URL), y podremos acceder mediante https.
Vamos a explicar como hacerlo con un plugin que todavía no hemos descargado.
Como instalar un certificado SSL Gratis
Configurar Autoptimize
Para configurar el plugin Autoptimize y mejorar la velocidad de nuestra web, lo haremos desde el menú Ajustes -> Autoptimize.
Aunque ofrece bastantes posibilidades, vamos a realizar una configuración básica que funcionará bien en la mayoría de páginas web.
Sin más, marcaremos las 3 opciones de optimización de codigo: JavaScript, CSS y HTML.
Probamos la velocidad de nuestra web en este enlace: https://developers.google.com/speed/pagespeed/insights/?hl=es
Si la velocidad es buena, no tocaremos nada más. En todo caso, si queremos dedicarle más tiempo se pueden ir optimizando cosas e ir probando la velocidad.
Algo que ayuda es la Carga diferida de imágenes (Lazy Load). Esto lo podemos activar en la pestaña imágenes, aunque en según que páginas web puede ser molesto para el usuario. Podeis probarlo en la pestaña "Imágenes" y ver si os compensa con los resultados de la velocidad de carga.
Configurar Yoast SEO para mejorar posicionamiento web
Debido a que este plugin ofrece una gran cantidad de opciones para mejorar nuestro posicionamiento en Google y otros motores de búsqueda, toda la información está en un artículo dedicado específicamente a Yoast SEO:
Como mejorar nuestro posicionamiento en Google con Yoast SEO
A seguir mejorando tu página web
Si has llegado hasta aquí, enhorabuena.
Has conseguido crear una página web, has diseñado tu web según tus necesidades, has realizado todos los puntos para legalizarla y has instalado un certificado SSL.
Las posibilidades son ilimitadas, hay una gran cantidad de plugins para seguir trabajando en tu web, así que adelante. Eso sí, nunca olvides hacer copias de seguridad antes de realizar cualquier cambio!
No te pierdas nuestros artículos específicos de plugins y otros trucos para mejorar el aspecto de tu página web, monetizar o mejorar el SEO de tu página web.
