Manual de diseño web

Configuración de WordPress

Lo primero que vemos al entrar en el panel de control de WordPress es una pantalla como la que te muestro aquí abajo:

En este caso vamos a centrar toda nuestra atención en el panel negro que tenemos en el lateral izquierdo.

Todo lo que necesitamos saber para aprender a manejar WordPress son esas opciones. Ni más ni menos.

Ahora es el momento de ir viendo paso a paso las opciones que tenemos en ese panel de control.

Escritorio

En la opción de Inicio poco tenemos que contar. Simplemente es lo que ves en el pantallazo anterior. Nosotros no nos vamos a centrar en los recuadros que aparecen, ya que es una especie de resumen de las opciones que tenemos en todo el panel de control.

Por el contrario, la opción de Actualizaciones sí que es interesante. Desde aquí podemos actualizar la versión de WordPress, los plugins, el tema y las traducciones.

Cada vez que tengas una nueva actualización, verás como automáticamente se crea un círculo naranja con un número al lado de la sección de Actualizaciones. Este número tan solo significa el número de actualizaciones que tienes disponible.

Para actualizar una de las opciones, tan solo tienes que darle al botón. En este caso, en la sección de Traducciones, podemos darle al botón de Actualizar las traducciones.

Eso sí, mientras la web se está actualizando, no hagas nada de nada. Simplemente espera. Si te ponemos a tocar otras opciones de la web mientras se actualiza, es posible que la web se caiga y te dé un error de mantenimiento.

disenar-pagina-web-estrategica

Entradas

Las entradas -que no son lo mismo que las páginas- son la opción mediante la cual podemos crear artículos en el blog.

Las opciones que tenemos son:

disenar-pagina-web-estrategica
  • Todas las entradas: Desde aquí accedes al listado de post o artículos que hayas escrito previamente. Si es la primera vez, obviamente no tendrás nada escrito, excepto un post llamado Hello Word, que viene por defecto con la instalación de WordPress.
  • Añadir nueva: Esta opción nos permite escribir una nueva entrada. Si en tu caso ya tienes el artículo redactado, tan solo tendrías que copiarlo y pegarlo aquí.
  • Categorías: A través de las categorías podemos organizar las diferentes temáticas de las que vamos a hablar en el blog. En mi caso tengo 5 categorías: diseño web, marketing digital, SEO, identidad visual y negocios online.
  • Etiquetas: La función básica de las etiquetas es enriquecer las entradas del blog con otros términos relacionados con el artículo que has escrito. En este caso no vamos a usar etiquetas, por lo que esta opción la saltamos.

Medios

Medios es el apartado en el cual podemos subir las imágenes que vayamos a utilizar en la web.

disenar-pagina-web-estrategica

Mi recomendación es que solo subas imágenes optimizadas. Con esto quiero decir que las imágenes deben tener un tamaño y un peso determinado para no consumir todo el espacio de almacenamiento del hosting.

Por esa misma regla de tres, tampoco te recomiendo que subas vídeos o documentos PDF. Si quieres poner un vídeo en la web, lo ideal es subirlo a YouTube (en oculto) y después embeberlo o incrustarlo en la web.

Con los documentos PDF pasa lo mismo. Los subes a Dropbox o Drive y compartes el enlace.

En resumen, en la sección de medios tan solo subimos imágenes. En este caso, al ser una instalación virgen no tenemos ninguna imagen.

Páginas

Veamos ahora la opción de páginas. Tiene el mismo funcionamiento que la sección de Entradas. Puedes ver todas las páginas que tienes creadas o añadir una nueva.

Las páginas son las pestañas de tu web. Para que te hagas una idea, una página o pestaña puede ser la de inicio, otra página, la de servicios, etc.

Cuando le das a la opción de Añadir nueva, llegas a una pantalla como la siguiente. Nosotros solamente le vamos a poner el nombre de la página y le daremos a Publicar desde el botón azul que está arriba a la derecha.

disenar-pagina-web-estrategica

Ahora que ya tenemos todas las páginas necesarias creadas, le damos a la opción de ver Todas las páginas y la pantalla que se muestra tendría que ser algo parecido a esto:

disenar-pagina-web-estrategica

Comentarios

Es posible que en esta sección venga un comentario por defecto. Lo primero que voy a hacer es enviar el comentario a la basura.

Cuando algún visitante escriba un nuevo comentario en tu web, aquí podrás gestionarlo y responder al mismo.

disenar-pagina-web-estrategica

Apariencia

Esto se empieza a poner interesante. En la opción de apariencia sí que podemos empezar a jugar y darle forma a la página web.

disenar-pagina-web-estrategica

Temas

El tema o la plantilla es la base de tu página web.

GeneratePress es el tema que recomiendo y el que utilizo en todos mis proyectos y los de mis clientes. Esta plantilla es flexible, te permite hacer muchas adaptaciones de diseño y sobre todo está muy bien optimizada tanto en velocidad de carga como en estructura. Vamos, que es Google friendly.

Tener temas -o plugins- instalados que no están activos, por lo tanto, que no se usan, lo único que hacen es consumir recursos en el hosting. Y, no por ello menos importante, si no los actualizamos (porque no los usamos) también estaríamos abriendo una puerta a las posibles brechas de seguridad.

Por lo tanto, todo lo que no usa y consume espacio, va a la basura.

Personalizar

En este caso te abrirá otra ventana con todas las opciones de personalización del tema. Como este tema puede ser largo de explicar en pantallazos, he preferido dejarte un vídeo en el que te explico cómo configurar la identidad del sitio y cómo cambiar los colores y tipografías.

Configurar la identidad del sitio

Configurar los colores

Configurar las tipografías

Menús

Nos vamos a saltar la opción de los widgets (no vamos a trabajar con ellos) para ir directamente a la creación del menú.

El menú es la carta de presentación de tu página web. Te dejo un ejemplo de mi web:

disenar-pagina-web-estrategica

Como puedes ver el menú está compuesto por los siguientes elementos:

  • Logotipo
  • Página de sobre mí
  • Página de servicios
  • Página de formación
  • Blog
  • Página de contacto
  • Botón de suscripción a la comunidad

No es obligatorio que el menú de tu página web sea idéntico al mío, dependerá de las páginas que quieres mostrar. 

Para crear un nuevo menú, te he preparado otro vídeo en el que te lo explico paso a paso:

Plugins

Los plugins son extensiones que agregamos a la página web para dotarla de nuevas funcionalidades.

En el mercado existen tantas extensiones como te puedas imaginar, aunque los hay gratuitos, freemium y de pago. 

Los plugins freemium son esos que te dará ciertas opciones en versión gratuita y después, para las opciones más avanzadas, tienes que pasar por caja.

Antes de comenzar a instalar un complemento, en la sección de Plugins instalados puedes ver qué extensiones tienes ya activas.

En mi caso, como verás en la imagen, por defecto vienen un par de plugins instalados. Estos complementos, propios de SiteGround, son los que te incluye el proveedor de hosting al realizar la instalación desde su sistema.

Si tú estás usando Webempresa, te dejará otros plugins instalados. Todo depende del alojamiento que utilices.

disenar-pagina-web-estrategica

Para instalar un plugin nuevo, debemos ir a la opción de Añadir nuevo y aquí nos encontramos con dos formas diferentes de hacerlo:

  1. Puedes instalar los complementos desde el repertorio del propio WordPress
  2. También puedes descargarlos desde la página oficial de WordPress.org.

Cualquiera de las dos opciones es válida, aunque mi recomendación es que los descargues desde la web de WordPress y después los subas a la página que estás diseñando.

De todas formas aquí vamos a explicar las dos opciones.

Cómo instalar un plugin desde el repositorio de WordPress

Si elegimos la primera opción, la más sencilla, lo que tenemos que hacer es darle a la opción de Añadir nuevo desde la sección de plugins.

De esta forma entraremos en una especie de buscador en el que tenemos que poner las palabras clave para encontrar la extensión que estamos buscando.

Si es tu caso sabes el nombre exacto del complemento que quieres usar, más fácil todavía, tan solo es poner el nombre y voilá, ya lo tienes listo para instalar y activar.

Te dejo un pantallazo para que veas el ejemplo más claramente.

disenar-pagina-web-estrategica

Imaginemos que quiero instalar el plugin de Elementor, así que pongo el nombre del complemento en el buscador que está a mano derecha.

Como verás en la imagen, he elegido el primer plugin por varias opciones:

  • El creador. Me he fijado en el desarrollador de la extensión. Puedo ver que ha sido creado por Elementor, así que es un plugin fiable.
  • Las estrellitas: Otro de los puntos en los que hay que fijarse antes de instalar un complemento son las estrellas. Que sí, que a primeras puede parecer una tontería, pero nos da muchas pistas. Podemos ver cuántas instalaciones activas tiene esta extensión y en este caso estamos hablando de más de 5 millones. Además podemos ver que casi 6000 personas le asignan una nota, obteniendo una media de 4.5. Nada mal para fiarte e instalarlo.
  • La compatibilidad: El último punto en el que me fijo antes de lanzarme a instalar el plugin, es en la compatibilidad. Si la extensión es compatible con tu versión de WordPress tendrás un aviso positivo. Por el contrario, te saldrá un aviso diciendo que no se ha comprobado la compatibilidad. En este caso eres tú el que decide y se arriesga a perder todo el trabajo de la web.

Una vez que ya te has decantado por la instalación de esa extensión en concreto, tienes que hacer lo mismo que hicimos con el tema, clicar en instalar y activar.

Cómo descargar un plugin e instalarlo en tu web

Como te decía, tienes dos opciones. Si eres de los míos, de los que prefiere la segunda opción, lo que tienes que hacer es ir a la página oficial de WordPress y hacer clic en el apartado plugins que encontrarás en el menú.

Este paso se parece bastante al anterior. Tienes que ir al buscador, poner el nombre o la palabra clave del complemento que quieres instalar y darle a descargar.

Comenzará a descargar un archivo comprimido del estilo .rar o .zip. Es muy importante que NO lo descomprimas.

Tienes que coger ese archivo que se ha descargado y subirlo a tu web. Para ello, puedes volver a la opción de Plugins > Añadir nuevo. Una vez haya cargado el repertorio de WordPress, fíjate que en la parte superior hay un botón llamado Subir plugin.

Le das al botón de Subir plugin y sigues las instrucciones. Es decir, en el desplegable que se abre tienes que darle a Seleccionar archivo y elegir el archivo comprimido que has descargado previamente. Después tan solo es darle al botón de Instalar ahora y luego al de Activar plugin.

disenar-pagina-web-estrategica

Esta opción es válida también para los plugins premium o los plugins de pago que hayas adquirido previamente. 

Cuando adquieres un complemento, el creador del mismo te facilita un archivo comprimido que después tienes que subir a tu web para poder instalarlo. Los pasos para hacer son los mismos que te acabo de explicar.

Plugins básicos recomendados

Aprovecho para aclarar una de las dudas más recurrentes. ¿Cuántos plugins tengo que tener en mi página web?

La verdad es que no hay un número cerrado de plugins, todo depende de las funcionalidades que le quieras dar a tu web, aunque, como te contaba en la guía de las 7 claves para mejorar las ventas tu página web, lo mejor es tener un paquete de unos 20 complementos.

Con esa cantidad, normalmente una web funciona a la perfección. Eso sí, no vale tener 20 extensiones instaladas y 5 desactivadas. Para eso es mejor que borres las que no utilizas y te quedes solamente con las que están activas.

Por lo tanto, a priori, toda página web debería tener un paquete de unos 20 plugins como máximo. Aquí te dejo un listado de los plugins que dejo instalados en la web (no siempre encontrarás todos en tu web, depende de las funcionalidades). Este listado dspués puedes ampliar, como te digo, dependiendo de las funciones que realizarás con tu web:

  • BBQ Firewall: Como sus propios desarrolladores indican, es un cortafuegos muy rápido que protege automáticamente a WordPress contra una amplia gama de amenazas.
  • iThemes Security: Otro plugin de seguridad, muy completo en su versión gratuita que protegerá tu web de posibles amenazas. (En caso de que tu web esté alojada en SiteGround, puedes usar su plugin).
  • Titan Anti-spam & Security: Ideal para evitar los comentarios spam.
  • Elementor: El maquetador de páginas web todo en uno. Por si tienes curiosidad por aprender a manejarlo, aquí te dejo una guía básica de Elementor.
  • 404page – your smart custom 404 error page: Este complemento no es imprescindible pero sí funcional para el usuario. Te permite personalizar las páginas 404, es decir, las páginas que no existen en tu web. Imagina que un usuario mete mal la URL de tu web. Le daría un error 404 y esta es tu oportunidad para cazarlo en esa tela de araña y guiarlo hacia otra acción de tu web para evitar que se vaya.
  • Cookiebot: La extensión perfecta para que los usuarios puedan personalizar las cookies.
  • Smush: Esta extensión te ayudará -y mucho- a reducir el peso de las imágenes de tu web, incluso puedes configurarlo para que las redimensione a tu gusto.
  • UpdraftPlus: Te permite crear copias de seguridad de tu página web. Lo que me gusta es que puedes realizar algunos ajustes para que las copias se guarden automáticamente en una carpeta de Drive y así olvidarte de realizar tus backups de manera manual.
  • Yoast SEO: Un plugin de SEO esencial para que tu página web empiece a posicionarse en Google. No entro en detalles sobre el SEO de la web, porque daría para otro post, pero sí que te recomiendo este artículo en el que hablamos sobre cómo unificar diseño web y SEO.
  • Schema: Siguiendo con el SEO, la funcionalidad que conseguimos con esta otra extensión es la de estructurar los datos de tu web, de forma que facilitamos a Google la lectura de los mismos.

Usuarios

Los usuarios de WordPress son las personas que tienen acceso a tu página web. Cada persona que tiene acceso a tu web, tendrá su propia identificación además de un rol asignado. Aquí nos encontramos con varias opciones de lo más interesantes, pero vayamos por partes.

disenar-pagina-web-estrategica

Lo primero es darle a la opción de todos los usuarios. Ahí veremos un listado de todas las personas que tienen acceso al panel de control de tu WordPress. 

En este caso, como estamos hablando de una instalación virgen, solamente tendrás un único usuario y serás tú mismo. 

disenar-pagina-web-estrategica

Al pasar el ratón por encima de tu nombre de usuario verás que salen un par de opciones nuevas, la de Editar y la de Ver.

Si le damos a la opción Ver vamos a llegar al mismo punto que si le damos a la opción Usuarios > Perfil. En ambos casos nos permite realizar la vista previa del perfil seleccionado.

A nosotros las opciones que más nos interesan son la de Editar y la de Añadir nuevo.

Cómo editar un usuario

Lo primero que vamos a hacer es editar nuestro usuario. Normalmente el nombre de usuario que asigna WordPress a una nueva instalación suele ser admin. Y justo ese es el principal problema de los hackeos de las páginas web, que la gente no edita su nombre de usuario.

En este caso, para evitar todo tipo de problemas graves con nuestra página web estratégica vamos a dedicar 2 minutos a este apartado.

Antes de nada, veremos cómo se divide el panel de editar usuarios. Si te fijas, verás que hay varios títulos destacados que dan pie a diferentes opciones dentro de cada sección:

  • Opciones personales: En esta parte vamos a centrarnos en el esquema de color de administración. Como verás tienes diferentes paletas de colores que puedes elegir. Esto simplemente es para cambiar el color de tu panel de control que por defecto es negro.
  • Nombre: Esta es la opción que más nos interesa. Vamos a cambiar el nombre, apellido, alias y el nombre a mostrar públicamente, de forma que debería quedarte algo así. (Puedes usar tu nombre propio o lo que se te ocurra).
disenar-pagina-web-estrategica
  • Información de contacto: Aquí te permite cambiar tu email y la URL de tu página web.
  • Acerca de ti: En esta sección puedes escribir una breve biografía sobre ti y editar tu foto. Para cambiar tu foto te dejan debajo un enlace a Gravatar. Tan solo sigue las instrucciones para modificar la imagen que quieres mostrar. 
  • Gestión de la cuenta: Esta otra opción nos permite editar nuestra contraseña y desconectarnos de otros sitios. Imagina que has perdido tu móvil y tenías la sesión de WordPress abierta. Vienes al ordenador y clicas aquí para cerrar esa sesión.

Cómo añadir un nuevo usuario

Para añadir un nuevo usuario, tan solo tenemos que clicar en la opción de Añadir nuevo y rellenar los campos que te indican.

Te dejo un pantallazo para que veas rápidamente cómo hacerlo.

disenar-pagina-web-estrategica

En definitiva, crear un usuario no tiene mucha historia. Lo más interesante es saber qué perfil le tenemos que asignar a dicho usuario y eso es justo lo que vamos a explicar a continuación.

Diferencias entre los perfiles de usuario

Una de las grandes ventajas de los perfiles de usuario es que te permite crear diferentes roles asignando distintos permisos. Esto quiere decir que no tienes por qué darle acceso completo a una persona que tan solo se encargará de publicar artículos en tu blog.

Los diferentes tipos de usuarios son los que ves en el pantallazo anterior, pero, ¿sabes en qué se diferencian?

  • Administrador: El administrador cuenta con todos los privilegios, es decir, que tiene acceso a todas las opciones de la web. Cabe destacar que por defecto, tu usuario tiene un rol de Administrador asignado.
  • Editor: Este tipo de usuario WordPress es el que te ayudará con las tareas relacionadas con el contenido de la web y podrá gestionar los comentarios.
  • Autor: Por otro lado, el autor, es el que se encargará de las entradas del blog. Puede publicar, borrar y editar los artículos.
  • Colaborador: El usuario colaborador tiene casi todos los permisos capados, tan solo podrá editar las entradas que ha publicado él mismo. Este usuario es útil si te decantas por hacer guest blogging (tú escribes post en el blog de otros y viceversa).
  • Suscriptor: Para finalizar, los permisos de suscriptor son casi nulos. Tan solo puede leer las páginas y entradas publicadas. Puedes ser beneficioso cuando haces una campaña de publicidad y quieres controlar quién ver cada contenido.

Herramientas

En este otro apartado nos encontramos con unas cuántas herramientas útiles, aunque creo que no les vas a sacar mucho provecho por el hecho de estar empezando a diseñar tu página web estratégica. 

Como su propio nombre indica son herramientas para importar y exportar entradas y para exportar y borrar datos personales.

Por lo tanto, nos vamos a centrar en la herramienta Salud del Sitio que es la más útil en este caso.

disenar-pagina-web-estrategica

Al hacer clic en el apartado de Salud del sitio llegarás a un panel en el que te da una nota de tu página web estratégica. 

Esta sección es como pasarle la ITV a la página web. Te dice qué puntuación tiene y si tienes mejoras o arreglos que hacerle a la web, también te explica cuáles son.

Lo ideal es que vuelvas a esta opción cuando hayas terminado de diseñar tu página web estratégica por completo, así sabrás qué mejoras te quedan pendientes antes de lanzar al público la web.

Ajustes

En la sección de Ajustes te encontrarás con los ajustes globales de WordPress. Es importante dejar bien hechas estas configuraciones para que todo funcione a la perfección. 

Como verás, tienes que realizar diferentes ajustes, así que te he preparado un vídeo para explicarte cada uno de ellos.

Ajustes generales

Ajustes de escritura

Ajustes de lectura

Ajustes de comentarios

Ajustes de medios

Ajustes de enlaces permanentes

Ajustes de privacidad

Los ajustes de privacidad son tan sencillos que no necesitan vídeo. Tan solo sería seleccionar la página que creaste anteriormente de políticas de privacidad y asignarla para que WordPress la detecte automáticamente.

disenar-pagina-web-estrategica

Cómo maquetar con Elementor

Ahora sí, ya tenemos todos los ajustes técnicos de nuestra página web preparados y es el momento de pasar a maquetar la página web. En este caso, vamos a trabajar con la versión gratuita de Elementor.

Esta sección daría para hacer otro megapost u otros 4 más hablando sobre todas las funcionalidades de Elementor, aunque este no es el caso. Lo que sí puedes hacer para familiarizarte con el plugin, es echarle un vistazo a este otro tutorial básico de Elementor y ver las funciones que puedes usar.

Como no quiero que este apartado se quede incompleto, aquí te dejo varios vídeos en los que te explico con detalle cómo puedes diseñar la página de inicio de tu web con Elementor. Una vez que le cojas el truco verás que tienes que replicar los mismos pasos en las otras páginas que vas a crear.

Configurar Elementor

Configurar los ajustes de Elementor

Repaso a los widgets de Elementor

Maquetar una página con Elementor

Gestión de tienda online

En caso de que tu página web esté dotada con una tienda online, tendrás que aprender a gestionar los pedidos, a poner descuentos o por supuesto, a añadir nuevos productos o modificar los que ya tienes. Vamos con ello:

Cómo gestionar los pedidos

Cómo poner cupones descuento

Cómo añadir nuevos productos

A la hora de añadir productos podemos encontrarnos con dos tipos de productos:

  • Los productos simples: Es un artículo único.
  • Los productos que tienen variaciones: pueden ser, por ejemplo, una camiseta de distintas tallas y colores. Las distintas tallas serían una variación y los colores serían otra.

Producto simple

Producto con variaciones

Cómo añadir nuevas categorías de productos

Cómo editar las zonas de envío de productos

Cómo modificar los emails que llegan al cliente

Conectar Facebook con WooCommerce

Una opción interesante que ofrecen Facebook e Instagram, es la de poder conectar la tienda con ambas redes sociales.

El uso de estas redes sociales es una forma de ponerle mostrar nuestros productos y gracias a esta conexión, podemos aumentar las ventas de nuestra tienda online.

En la web encontrarás un plugin llamado Facebook for WooCommerce. Y aunque te dejo un vídeo, es muy escueto, ya que simplemente tienes que seguir los pasos que te propone el plugin.

Google Analytics

Conclusión final

En Con este manual ya tienes todo lo que necesitas para aprender a manejar tu página web y tu tienda online. 

Sé que este manual es largo, por eso te recomiendo que lo guardes a buen recaudo para que puedas ir paso a paso implementando todo lo que te explico.

¡Valora este artículo!

Deja un comentario