10 Pasos para diseñar un sitio web con WordPress

Dessire Izaguirre

10 Pasos para diseñar un sitio web con WordPress Contenido Algunos conceptos básicos ¿Qué es un sitio web? ¿Qué es un Blog? ¿Sitio Web o Blog? WordPress.com VS WordPress.org Dominio Hospedaje Los 10 pasos... 1. Determinar el tipo de sitio. 2. Determinar la distribución del contenido. 3. Establecer las Páginas o Secciones. 5. Determinar la jerarquía del contenido. 6. Seleccionar los colores y la tipografía. 7. Diseñar un logo. 8. Elegir las imágenes. 9. Elegir una "plantilla" o "tema". 10. Elegir los "plugins" principales a instalar. ¿Quieres aprender más? Sobre la autora

1 1 1 1 2 2 2 3 3 3 4 6 7 8 8 9 10 11 11

© 2017 Profesional Virtual - Todos los derechos reservados. 1

10 Pasos para diseñar un sitio web con Wordpress Algunos conceptos básicos ¿Qué es un sitio web? Aunque pareciera una pregunta retórica, mucho pierden de vista que un sitio web es un documento electrónico. Dicho documento posee las siguientes características: • Puede contener texto, sonido, video, programas, enlaces, imágenes, entre otros. • Se encuentra adaptado a la llamada World Wide Web (www) y • Se puede acceder mediante un navegador.

¿Qué es un Blog? Del inglés web log o bitácora web: es una página web que incluye contenidos, a modo de diario personal de su autor o autores, actualizados con frecuencia y a menudo comentado por los lectores. Cuenta con una estructura cronológica que se actualiza regularmente y que se suele dedicar a tratar un tema concreto.

¿Sitio Web o Blog? Lo más recomendable para cualquier emprendedor, pequeña o gran empresa es tener ambos integrados: • Sitio web con secciones fijas (contenido estático). • Página de Blog con artículos de interés para la audiencia objetivo (contenido dinámico). © 2017 Profesional Virtual - Todos los derechos reservados. 2

10 Pasos para diseñar un sitio web con Wordpress Wordpress.com VS Wordpress.org WordPress.org es el sitio web de desarrollo de WordPress, plataforma de gestión de contenido para creación de sitios web y blog (permite tener ambos integrados). Para instalarlo debes tener un dominio y un servidor de hospedaje donde alojarlo. WordPress.com es muy diferente. Ofrece un servicio gratuito de alojamiento de blogs de la mano de Automattic mediante la herramienta anteriormente explicada (WordPress) y se obtiene una dirección del tipo nombre.wordpress.com *Esta guía ha sido preparada para usuarios de Wordpress.org

Dominio El nombre del sitio en la web. Todo dominio tiene una extensión al final para indicar el tipo de sitio: .com .net .org u otra.

Hospedaje El servidor donde estará alojado el sitio web. Esto es un servicio que debe contratarse de manera mensual, anual o por un plazo más largo. Siteground es el hospedaje web que uso y recomiendo. Es uno de los proveedores de alojamiento más populares y de mayor audiencia en la comunidad de WordPress.

© 2017 Profesional Virtual - Todos los derechos reservados. 3

10 Pasos para diseñar un sitio web con Wordpress Los 10 pasos... Recomiendo crear un documento en Google Docs, donde desarrolles cada uno de los pasos descritos a continuación: “Diseñar es aplicarse a intentar – lo opuesto de la casualidad, y el antídoto del accidente". — Robert L. Peters

1. Determinar el tipo de sitio. Responde a la pregunta ¿Cuál es el propósito principal del sitio? Ejemplo: • Personal, • Empresarial, • E-commerce, • Enseñanza.

2. Determinar la distribución del contenido. La tendencia en distribución hace años pasó de vertical a horizontal y mixta. El sitio web moderno posee un diseño en forma de "filas" que abarcan por completo la pantalla del ordenador y facilitan la visualización en dispositivos móviles y tablets.

© 2017 Profesional Virtual - Todos los derechos reservados. 4

10 Pasos para diseñar un sitio web con Wordpress 3. Establecer las Páginas o Secciones. En un sitio web básico son 6: Inicio. Es el primer lugar donde llega cualquier persona que ingrese la dirección del sitio web en un navegador. Recordemos que un sitio web es un documento, la página de inicio equivale a la portada. "Acerca de", "Quienes Somos", "Quien Soy", etc. Historia de la persona o empresa, incluyendo fotos reales del equipo o la persona "detrás" del negocio o empresa que representa al sitio así como fotos de las instalaciones o lugar de trabajo. Productos o servicios. Descripción detallada de los productos o servicios ofrecidos, incluyendo fotos reales o imágenes representativas. Contenido angular o esencial. Sección fija con artículos informativos o educativos acerca de los temas principales del sitio. • Responde a inquietudes de la audiencia objetivo en relación a los productos o servicios. • Se recomienda un máximo de 10 por sitio web. • Puede reflejar las categorías del Blog así como las categorías de los productos o servicios. • No es igual que el Blog. Como estrategia de SEO lo recomendable es que cada artículo del Blog contenga un hipervínculo a uno de estos artículos.

© 2017 Profesional Virtual - Todos los derechos reservados. 5

10 Pasos para diseñar un sitio web con Wordpress Blog. En esta página aparecerán publicadas las entradas del Blog en orden ascendente. Contacto. En esta página se suele colocar un formulario de contacto conectado con una dirección de correo electrónico del administrador del sitio además de una dirección física y/o número telefónico. **Las páginas de aterrizaje (Landing Pages). Son páginas con que cumplen una función de mercadeo: ventas o captura de prospectos. Poseen ciertas especificaciones de diseño: • Deben tener un botón de "llamado a la acción" (CTA) o un formulario de captura de datos. • Por lo general se recomienda que no contengan un encabezado.

4. Redactar el contenido escrito. Debe basarse en el plan de negocios, tomando en cuenta: • la misión, • la visión, • audiencia objetivo, • productos o servicios, • entre otros. *Importante: ¡NO es suficiente un "brochure" "triptico" o material similar para redactar el contenido de todo un sitio web!

© 2017 Profesional Virtual - Todos los derechos reservados. 6

10 Pasos para diseñar un sitio web con Wordpress Consideraciones para un buen SEO Antes de redactar el contenido del sitio web es importante hacer una lista de las palabras y frases clave por las cuales quieres que el mismo sea indexado. Efectúa una investigación en Google Adwords de palabras relacionadas con tus productos o servicios y elige como mínimo 5 palabras y/o frases clave. Adicionalmente, introduce esas 5 palabras o frases es el buscador de Google, en base a los resultados generados elige al menos 5 palabras y/o frases más. Por último, utiliza la herramienta Google Trends para comparar frases y palabras clave similares entre sí y elegir aquéllas que tengan una mayor cantidad de búsquedas en el último año.

5. Determinar la jerarquía del contenido. Debes decidir el orden jerárquico que tendrá cada página o sección dentro del menú de navegación. Por lo general si se trata de un sitio web básico con las páginas descritas en el punto anterior, todas irán en el mismo nivel dentro del menú. Salvo el caso del contenido angular que estará conformado por un título y varias sub-páginas. Forman parte del menú de navegación: • Pestañas Principales. • Pestañas Secundarias.

© 2017 Profesional Virtual - Todos los derechos reservados. 7

10 Pasos para diseñar un sitio web con Wordpress No forman parte del menú de navegación: • Las páginas de aterrizaje.

6. Seleccionar los colores y la tipografía. Los colores y tipo de letra deben ir en función de: • La audiencia objetivo del sitio. • Las tendencias. • La marca. Tips de diseño web: • Cada color posee un código denominado “hex” compuesto por una combinación de 6 números y letras. • Elige un color primario que represente a la marca y en base a ello una paleta de colores. • Elige tres tipografías que representen la marca: una para el texto, otra para los títulos y una cursiva para resaltar algunas palabras. Herramientas para seleccionar colores y tipografía: Infografía: La psicología de los colores (para elegir un color primario). Colorlovers (para seleccionar una paleta en base al color primario elegido). En este artículo encontré algunas combinaciones interesantes de tipografía para 2017.

© 2017 Profesional Virtual - Todos los derechos reservados. 8

10 Pasos para diseñar un sitio web con Wordpress 7. Diseñar un logo. Es recomendable contar con un logo para que el sitio web tenga un diseño más profesional. • Está compuesto por el Logotipo (tipografía), Istotipo (imágen) o ambos (Isólogo o imagotipo). • Es el identificador principal de una marca. • Para diseño web debe estar en formato .png fondo transparente. Herramientas gratuitas para diseño de logo: Canva (para crear un logo) LunaPic (para quitarle el fondo blanco)

8. Elegir las imágenes. • Deben identificarse con la audiencia objetivo. • Deben ser lo más natural posible (evita el uso de imágenes excesivamente "ensayadas"). • Es recomendable usar fotos propias en lo posible. • Respetar derechos de autor (tomar imágenes de otro sitio web o producto de una búsqueda en Google en la mayoría de los casos infringe derechos de autor y es un robo). Algunos bancos de imágenes recomendados: Unsplash (gratis) Pixabay (gratis) Depositphotos (pago) © 2017 Profesional Virtual - Todos los derechos reservados. 9

10 Pasos para diseñar un sitio web con Wordpress 9. Elegir una "plantilla" o "tema". • La plantilla o tema es como la “ropa” del sitio web y definirá lo que puedes hacer a nivel de diseño. • Cada plantilla tiene una distribución de contenido y funciones. Plantillas recomendadas: Divi de Elegant Themes (paga). 18 Tags (gratuita).

© 2017 Profesional Virtual - Todos los derechos reservados. 10

10 Pasos para diseñar un sitio web con Wordpress 10. Elegir los "plugins" principales a instalar. Los plugins son componentes de código que agregan funcionalidad al sitio web. La norma para el buen uso de los plugins es: "menos es más". Algunos Plugins Básicos (puedes instalarlos directamente desde el panel de control de Wordpress haciendo una búsqueda por el nombre). Pootle Pagebuilder: para incorporar un constructor de página al editor visual de Wordpress, permitiendo organizar el contenido en bloques. SeedProd Coming Soon: para incorporar una página de aterrizaje que indique que el sitio se encuentra "en construcción" o "en mantenimiento". Login Lockdown: para bloquear intentos fallidos de ingreso de usuarios a la instalación de Wordpress. BackWPup: para hacer copias de respaldo del sitio web. Yoast SEO: para mejorar el SEO de tu sitio en todos los aspectos necesarios. Contact Form 7: para agregar un formulario de contacto si la plantilla instalada no lo tiene. Sharaholic: para agregar íconos para compartir en redes sociales. WpDevArt Facebook Comments: genera más interacción en el Blog haciendo que la sección de comentarios se integre con el perfil de Facebook del usuario. Simple author box: agrega una caja con información del autor al final de cada entrada del Blog.

© 2017 Profesional Virtual - Todos los derechos reservados. 11

10 Pasos para diseñar un sitio web con Wordpress ¿Quieres aprender más? Participa en la próxima edición de nuestro curso online interactivo:

"Aprende diseño web en 1 mes con Wordpress" ¡Quiero aprender más!

© 2017 Profesional Virtual - Todos los derechos reservados. 12

10 Pasos para diseñar un sitio web con Wordpress Sobre la autora Soy Dessire Izaguirre directora-fundadora de Profesional Virtual, academia de capacitación online para el Asistente Virtual. Dedicados a capacitar profesionales para teletrabajar con un negocio propio desde casa como Asistente Virtual. Mi historia con WordPress comenzó en el año 2012 cuando me vi en la necesidad de diseñar un sitio web para mi emprendimiento de Asistente Virtual sin tener los recursos para contratar un diseñador web ni los conocimientos para hacerlo yo misma... Por recomendación de algunas colegas decidí investigar la opción de WordPress.org y me encantó. Sin embargo, no fue fácil aprender a usarlo. Pasé unos 4 meses "rebanándome el cerebro" para autoenseñarme WordPress mediante tutoriales e información en la web. Luego de más de 5 años, varios cursos online y experiencias desarrollando sitios web propios y para mis clientes; disfruto ayudando a otros a aprender WordPress de forma fácil y divertida para que no tengan que "rebanarse el cerebro". Después de todo, ¡no es tan complicado!

© 2017 Profesional Virtual - Todos los derechos reservados. 13