Cómo diseñar una página web estratégica y profesional para convertir visitantes en clientes

Diseñar una página web estratégica no es tarea sencilla. Cuando no tienes ni idea de cómo funciona el diseño y quieres hacer la web por ti mismo, sientes que te estás metiendo en un embolado -y grande-.

El diseño web es un mundo enorme, en el que hay que saber de todo para que la web funcione a la perfección. Al fin y al cabo tu página web no deja de ser tu casa digital.

Allá por 2018 cuando me lancé a esto de emprender, decidí que iba a ser diseñadora web. Más que nada porque el tema de los ordenadores se me daba bien y siempre he tenido facilidad para los programas.

El caso es que si lo llego a saber, me lo pienso dos veces.

Cuando empecé a investigar cómo hacer mi página web descubrí que no se puede hacer de cualquier manera, sino que hay que seguir un orden.

Para empezar, las tipografías y colores de tu página web deben ser escogidos cuidadosamente. Al igual que es importante elegir las mejores imágenes. Y también hay que fijarse unos objetivos claros para guiar al usuario.

Bueno, el caso es que estaba muy perdida. Pero tenía ganas de sacar adelante el negocio, así que me puse al lío. 

Cuando hay intención, nada ni nadie te puede parar.

Si en tu caso estás igual de perdido que yo cuando comencé, no te preocupes porque en esta guía de diseño web estratégico tocaremos todos los palos para que puedas empezar sin hacerte un lío.

Aparte de la explicación del paso a paso encontrarás vídeos y pantallazos que te ayudarán a visualizarlo todo de manera más sencilla. Verás cómo diseñar una web estratégica tampoco es extremadamente complicado.

Qué es el diseño web estratégico

Antes de entrar en materia, hablemos un poco sobre la historia del diseño web.

La primera página web que se publicó en Internet fue en el año 1991. Y a partir de ahí ha sido un no parar.

Seguro que en el siglo pasado le decías a alguien que eras diseñador web y te preguntaba: ¿Pero eso qué es?

Pues mira, el diseño web es un arte. Concretamente el arte de planificar y organizar un contenido concreto que luego se publicará en los medios online.

Hoy en día, ¿quién no tiene una página web? Es raro encontrar un negocio que no tenga presencia en internet. Incluso los pequeños negocios de barrio se están poniendo las pilas.

Pero quiero profundizar un poco más en el tema y es que aquí, en esta guía, vamos a hablar sobre cómo diseñar tu web de forma estratégica, que no es lo mismo que un simple diseño o un diseño corporativo.

Atento que ahora viene lo mejor. Te desgrano el paso a paso para que puedas comenzar a diseñar tu web.

Diferencia entre el diseño web y el diseño web estratégico

Como hemos visto en la definición anterior, entendemos por diseño web el hecho de coger un contenido y organizarlo para su posterior publicación.

La diferencia con el diseño estratégico, como su propio nombre indica, se basa en organizar ese contenido con estrategia.

¿Pero qué estrategia?

Como ya te comenté en otro post en el que te hablaba sobre los objetivos de una página web, el diseño web estratégico consiste en fijar objetivos antes de la publicación de la web.

Exactamente la estrategia que vamos a utilizar se basa en crear una tela de araña, en la que capturamos al visitante. De esta forma, no se podrá ir sin realizar una de las acciones que definamos previamente.

La página de inicio es la página de la web que más visitas tiene. Por eso, no podemos arriesgarnos a diseñar por diseñar. Tenemos que definir unos objetivos y acciones que queremos que el usuario realice.

Veamos un ejemplo de la página mencionada, la de inicio.

Podemos fijarnos objetivos diferentes. Solo hay que elegir uno, pero aquí te dejo un par de opciones:

  • Objetivo 1: Guiar al usuario para que se suscriba a la newsletter. Después entra en juego la estrategia de email marketing que hayas preparado.
  • Objetivo 2: Queremos que el usuario rellene el formulario de contacto y nos deje un mensaje solicitando información.

Una vez que tenemos los objetivos definidos, pasamos a la siguiente parte. Poner en marcha todo el mecanismo para diseñar la web. 

La identidad visual de tu página web

Este punto es fundamental. El problema es que la mayoría se lo salta a la torera y no le da importancia. Ya solo por crear una identidad visual para tu página web conseguirás desmarcarte de la mayoría de tu competencia.

Si no has hecho clic en el enlace anterior te recomiendo que lo hagas ahora, ya que en este artículo te explico en detalle cómo puedes diseñar la identidad de tu marca.

¿Por qué crear una identidad visual?

La reacción de las personas que no te conocen y entran en tu web por primera vez dependerá de lo que ven de tu marca. Esto es como cuando conocemos a alguien por y la primera impresión nos la llevamos por como viste. 

Pero, ¿qué significa todo esto?

Esto se llama efecto halo y es uno de los sesgos cognitivos más conocidos en materia psicológica. Este efecto consiste en crearnos una imagen errónea a partir de una cualidad de la persona. 

Por ejemplo. Conocemos a una persona que a nuestro parecer viste bien. Inmediatamente nuestra cabeza asocia ese vestir bien con que su personalidad también será buena. 

En las páginas web pasa lo mismo. 

Cuando entramos a una página web descuidada, la primera impresión que nos llevamos es negativa, por lo que nuestra mente directamente está diciéndonos que la persona que está detrás de la web no es profesional.

Y puede ser todo lo contrario. Es posible que sea tan buen profesional que ni siquiera ha tenido el tiempo de delegar el diseño de su web porque está hasta arriba de trabajo.

El problema es que nosotros ya nos hemos formado una mala imagen de ese profesional y directamente lo descartamos. 

Por eso, insisto, este punto es fundamental. Dar una buena imagen en tu página web es lo que marca la diferencia entre que el usuario te contacte o se vaya a otra página más bonita que la tuya.

Bueno, y como aquí hablamos de diseño, esto mismo podemos extrapolarlo al diseño del feed de tu Instagram, aunque ahora no vamos a entrar en ese tema.

La importancia del hosting y dominio

El hosting y el dominio juegan otro papel fundamental en la página web. Mira, la mayoría de las personas cuando quieren diseñar la página web por su cuenta lo único en lo que piensan es en gastar poco.

Lo que mucha gente no tiene en cuenta es que sin inversión no hay retorno.

Con esto quiero decir que no puedes pretender tenerlo todo bueno, bonito y además barato.

El hosting

Para que tu página web funcione bien, debes tener un hospedaje de calidad. Esto significa que con un buen hosting podrás tener una mejor velocidad de carga, entre otros temas.

El alojamiento que yo utilizo en mi página web se llama SiteGround. No está entre los más baratos, lo reconozco, pero tiene una velocidad de carga increíble a la vez que un soporte de diez.

Otro de los hosting que recomiendo a mis clientes es el de Webempresa. Tiene un precio más económico que el anterior, pero -y aquí está el problema- el espacio de almacenaje es inferior. 

Mi recomendación es que inviertas en un buen hospedaje, que a la larga te ahorrará dolores de cabeza con tu página web. 

El dominio

Un dominio es el nombre de tu página web y está compuesto por dos partes, el nombre y la extensión.

El nombre es la denominación que le das a tu página web. En mi caso es mi propio nombre: Beatriz Calvo.

Por otro lado, la extensión de dominio es lo que viene después del nombre, el .com, .fr, etc. 

Para elegir el dominio tienes diferentes opciones y a continuación te explico varias de ellas:

  • Si vas a diseñar una web de marca personal, te recomiendo que utilices tu propio nombre. Si tu nombre está elegido, siempre puedes poner algo delante. Por ejemplo, imaginemos que beatrizcalvo.fr está cogido. Entonces puedo poner un soy delante de mi nombre, de forma que el dominio sería soybeatrizcalvo.fr.
  • En el caso de tener una empresa, el nombre de tu empresa sería tu dominio. Si te encuentras en la misma tesitura que el caso anterior, en el que el nombre de tu empresa está cogido, te recomiendo que pongas la denominación social. Veámoslo con otro ejemplo. Tu empresa se llama Logi. El dominio que quieres comprar es logi.com, pero te encuentras con que ya está ocupado. Por lo tanto puedes probar el dominio logisl.com o incluso agencialogi.com.
  • La siguiente opción es elegir un nombre que haga referencia a tu trabajo. Vamos con otro ejemplo. En este caso eres asistente virtual y el dominio que puedes comprar es asistenciavirtual.com. Ahora sí, el dominio está disponible, así que no tienes que hacer nada más.

Bien, hemos llegado a un punto en el que ya has elegido el hosting y el dominio aunque es posible que te surja otra duda:

¿Los compro en el mismo proveedor o los compro en un proveedor separado?

Aquí, mi recomendación, es que los compres en proveedores separados y ahora te explico el por qué.

Imagínate que tienes el dominio y el alojamiento comprados en la misma empresa. Un día, esa empresa, por el motivo que sea quiebra. Habrás perdido toda la información de tu web.

En cambio, si los tienes comprados en registradores diferentes, en caso de que la empresa del hosting caiga tendrías que hacer un cambio de DNS apuntando al nuevo hospedaje contratado.

Bueno, ya sé que todo esto que te estoy contando puede resultar muy técnico, así que si no quieres complicarte puedes comprarlo todo en el mismo proveedor.

Cómo instalar WordPress

Si has contratado tu hosting en alguno de los proveedores que te he recomendado anteriormente, puedes instalar WordPress de forma muy sencilla.

A continuación te explico cómo hacerlo en cualquiera de los dos proveedores recomendados.

Cómo instalar WordPress en SiteGround

Como te he dicho hace un rato, el que yo utilizo es SiteGround, así que te voy a poner pantallazos en mi propio panel para que puedas verlo.

En la imagen puedes ver que tengo 3 dominios contratados. En este caso vamos a realizar la instalación de beatrizcalvo.fr.

  1. El primer paso es entrar en tu panel de control de SiteGround e ir a Sitios web
  2. A continuación, en caso de que tengas más de un dominio, deberías elegir en cuál quieres hacer la instalación de WordPress. En tu caso, si solo tienes un dominio, tan solo te saldrá uno.
  3. Seguidamente haz clic en el botón que pone Site tools.
disenar-pagina-web-estrategica

Si has seguido todos los pasos, llegarás a otro panel de control. En este caso se trata del panel del dominio que has elegido.

  1. Antes de nada, en caso de que tengas más de un dominio, asegúrate de que has elegido el correcto. Puedes verlo arriba del todo, al lado del logo de SiteGround.
  2. Lo siguiente es hacer clic en la opción que pone WordPress y seleccionar Instalar y gestionar.
  3. Para terminar, elige una de las opciones que te proponen:
    • Solo instalar WordPress.
    • Instalar WordPress y WooCommerce. (Esta segunda opción elígela en caso de que quieras crear una tienda online).
  4. Una vez que has seleccionado una opción, tan solo tienes que esperar a que se abra el instalador de WordPress y seguir los pasos que se indican.
disenar-pagina-web-estrategica

Cómo instalar WordPress en Webempresa

Como te comenté anteriormente, Webempresa es el proveedor de hosting que recomiendo a mis clientes. 

Si en tu caso vas a tener una web sencilla esta opción es muy recomendable.

Hosting WordPress

Aquí te dejo un vídeo para que puedas comprar tu hosting y dominio desde el mismo proveedor, sin complicaciones de tener que migrar las DNS y otros ajustes técnicos.

Configuración de WordPress

¡Venga que ya queda menos!

Después del trabajo que nos ha llevado crear la identidad visual y hacernos con el hospedaje y dominio, ha llegado el momento de empezar a darle forma a la página web estratégica que vamos a diseñar.

Pero, antes de continuar, tienes que instalar el certificado de seguridad SSL en tu página web. Esto lo hacemos para gustarle más a Google y que nos favorezca.

Una vez que la instalación de WordPress ha terminado, es el momento de comenzar a configurar tu página web desde el dashboard 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.

Por defecto la instalación de WordPress viene con dos páginas creadas, la de ejemplo y la política de privacidad como borrador.

disenar-pagina-web-estrategica

En mi caso, lo primero que hago antes de realizar el diseño web de un cliente, es seleccionar las dos páginas que vienen por defecto y mandarlas a la basura.

Después, paso a crear las páginas que ha pedido el cliente. Imaginemos que es una web sencilla, con 4 páginas:

  • Inicio
  • Sobre nosotros
  • Servicios 
  • Contacto

Por supuesto, tampoco nos olvidamos de crear las páginas legales. Lo primero que debemos respetar es la legalidad para así ahorrarnos multas elevadas.

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

En esta sección vemos que ya viene un comentario por defecto. Como hemos hecho antes, 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. Bien, lo primero que vamos a hacer es instalar un tema llamado GeneratePress y eliminar los demás.

Para añadir un nuevo tema, como siempre, le das al botón Añadir nuevo y en el buscador que sale a mano derecha escribes GeneratePress.

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.

Cuando tienes la plantilla localizada le das al botón de Instalar y después al de Activar.

disenar-pagina-web-estrategica

Bien, ahora que ya tienes el nuevo tema activo, le das otra vez a la opción de Temas (en el panel izquierdo de WordPress) y verás cómo te salen varios temas.

Estos son los temas instalados -pero no activados- que trae WordPress por defecto.

En este caso lo que vamos a hacer es cargarnos todos los temas que no vamos a utilizar. ¿Por qué? Muy sencillo. Y esta explicación también sirve para el uso de los plugins que veremos a continuación.

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.

Y esto mismo es lo que vamos a hacer con los temas que vienen instalados por defecto. 

Para borrar un tema, tienes que pinchar encima de él, en el botón que pone Detalles y vista previa y tienes que buscar la opción que pone Borrar

Esta opción está un poco escondida. La encontrarás abajo a la derecha en pequeño y en color rojo. Te dejo un pantallazo para que la localices fácilmente.

disenar-pagina-web-estrategica

Personalizar

Ahora que ya has borrado todos los temas y te has quedado solamente con el esencial, GeneratePress, pasamos a la opción de 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 hacerlo paso a paso.

Eso sí, el vídeo es de hace un par de años, pero la interfaz de GeneratePress ha cambiado muy poco, por lo que te será de utilidad.

En este caso estamos trabajando con la versión gratuita de GeneratePress. Este tema también tiene una versión de pago, que cuesta unos 50$ al año. 

Mi recomendación, como siempre, es que inviertas en las mejores herramientas, pero vamos, que para empezar con la opción gratuita vas de sobra. 

Aunque si quieres profundizar y aprender cómo diseñar una página web estratégica desde cero, déjame que te diga que tengo una formación de diseño web en la que aprenderás mucho -mucho- más.

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. 

Eso sí, como en este artículo hablamos del diseño web estratégico, no está de más que pienses bien en las partes de tu página web y que las estructures con cabeza.

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 de mis clientes. ¿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 que despué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.
  • 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.

Estos son los plugins que te recomiendo tener instalados. Ahora, a partir de ahí puedes tener lo que quieras. Si tengo que recomendarte alguno más serían las versiones de pago del maquetador Elementor PRO y del tema GeneratePress Premium.

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 un vídeo en el 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.

Aprovecho la ocasión para dejar otro post en el que te detallo los errores más comunes al diseñar la página de inicio. Ya sabes que lo ideal es hacer las cosas bien desde el principio. 

En busca de inspiración

Como no, entiendo que puede llegar un momento en el que te quedas bloqueado y que necesitas inspirarte para diseñar tu página web.

Por eso quiero dejarte unos cuantos sitios a los que yo recurro cuando la creatividad se queda dormida.

Y ojo que esto no se acaba aquí. Cuando has terminado de diseñar tu página web estratégica es cuando comienza el trabajo de verdad. El trabajo de captación de leads y clientes.

Cómo optimizar tu web

Llegados a este punto ya deberías tener tu página web completamente maquetada, así que vamos a pasar a otro tema importante. Una materia vital, que como pasaba con la identidad visual, mucha gente se salta y no le da importancia.

En este caso estamos hablando de la optimización WPO de tu página web. 

Qué es optimización WPO

WPO viene de las siglas inglesas Web Performance Optimization y consiste en hacer un análisis de la página web centrado en encontrar errores de rendimiento.

Para que te hagas una idea más clara. Si una página web tarda más de 3 segundos en cargar, es una página que tendrá una alta tasa de rebote.

La tasa de rebote es la tasa de abandono de tu web. Lo que se traduce en el porcentaje de usuarios que visitan tu web sin realizar ninguna acción y se van por donde han venido.

Por lo tanto, una de las tareas a mejorar en la optimización WPO sería la de mejorar la velocidad de carga de la página web.

Para medir la velocidad de carga de tu web puedes utilizar una herramienta llamada GTmetrix. En los resultados que te ofrece podrás ver la nota que se le asigna a la web además de las recomendaciones a realizar para mejorar dicha velocidad.

Plugins de optimización WPO

También puedes instalar varios plugins que te permiten optimizar tu página web al máximo. Antes de ponerte a instalar plugins de optimización WPO, ten en cuenta los consejos que te he dejado en el apartado de plugins y elige bien el que instalas.

Mi recomendación es WP Rocket, aunque en esta ocasión nos encontramos con el problema de que es un plugin de pago y no es económico que digamos.

Si quieres tirar por una versión gratuita, que es igual de válida que la opción anterior, aquí te dejo un listado de plugins que puedes utilizar:

  • WP Optimize
  • Autoptimize
  • EWWW Image Optimizer
  • W3 Total Caché
  • WP Super Caché

Marketing

Después de todo el trabajo que hemos hecho, es el momento de darnos a conocer. De nada sirve tener una web preciosa y bien optimizada si no nos conocen ni en casa. Para ello, lo que debemos hacer es realizar acciones de marketing.

No me atrevo a decirte exactamente qué acción realizar, ya que dependerá de tu nicho o sector, de tu público y sobre todo de tu presupuesto el hecho de que una estrategia te funcione mejor que otra.

Ahora, en mi caso, lo que sí te puedo hablar es de diseño y marketing. Está claro que son dos herramientas que van de la mano y la una no termina de funcionar sin la otra. 

En cuanto al marketing, es importante fijarse objetivos SMART:

  • S: Específicos
  • M: Medibles
  • A: Alcanzables
  • R: Relevantes
  • T: Temporales (con fecha de caducidad)

También te diría que antes de realizar cualquier acción de marketing, conozcas bien a tu cliente ideal y hagas uso de las 4 P del marketing:

  • Producto (o servicio)
  • Promoción
  • Precio
  • Punto de venta (o distribución)

Ahora, si lo que estás buscando es un listado de acciones que puedes llevar a cabo, aquí te dejo uno, sin entrar mucho en detalle, ya que como te digo, dependerá de muchos factores:

  • Inbound marketing
  • Email marketing
  • Redes sociales
  • Marketing de contenidos
  • Retargeting
  • Social Ads

Seguimiento con Google Analytics

Otra de las acciones que puedes llevar a cabo es la del seguimiento de los datos de tu web. Es importante que conozcas las visitas que tiene tu página web.

La herramienta gratuita que puedes usar en tu página web estratégica es Google Analytics y tan solo necesitas tener una cuenta de Gmail.

Si quieres aprender a crearte tu cuenta y a vincular tu página web, puedes ver el siguiente vídeo en el que te explico en detalle cómo hacerlo:

Después de todo el trabajo que has hecho para crear y diseñar tu página web, por favor, no te olvides del mantenimiento de la misma.

El mantenimiento de la página web es mucho más complejo que lo que se comenta. Normalmente la gente piensa que consiste en actualizar los plugins, pero va mucho más allá.

Un buen mantenimiento web consiste en detectar, evitar errores y problemas en la página web antes de que ocurran. Por eso te recomiendo que no dejes de revisar todos los aspectos fundamentales de tu web y que hagas un análisis desde la opción Salud del sitio.

Conclusión final

En esta guía completa hemos visto el paso a paso de cómo crear una página web estratégica. 

Sé que este artículo 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.

Lo mejor es leerlo una vez y después ir haciendo a la vez que vas repasando los pasos a completar.

Como ves, diseñar una página web no es tan complicado como puede parecer a priori si tienes todos los pasos bien ordenados.

Ahora, también es posible que no tengas el tiempo ni las ganas para hacerlo, en tal caso te aconsejaría que te des una vuelta por web y me contactes para ver cómo podemos enfocar de la mejor manera el diseño de tu web.

¡Valora este artículo!