Primero…¿Qué es un theme y dónde me han metido?

¿Recuerdas que durante esta guía hemos hablado que nuestra meta es crear un sitio web que se vea bien, pero que no requiera usar código o ser un Master en diseño?
Bien…pues permíteme hacer una pausa para dejarte saber qué es lo que hemos estado haciendo hasta ahora:

 

1. Escogimos un dominio  Para darle identidad a tu sitio web y una dirección donde las personas lo puedan encontrar.

 

2. Compramos un servicio de hosting  Porque para que tu sitio web esté disponible en el internet, es importante que esté alojada en un servidor que esté constantemente disponible online y provea toda la tecnología de dirigir IP’s y dominios, etc.  ¿Suena cómo si estuviera hablando otro idioma?  Muy bien…pues nuestro servicio de posting se encarga de este aspecto confuso, pero requerido para que tú no tengas que hacerlo.

 

3. Instalamos WordPress  Cómo discutimos, WordPress es una de las herramientas más usadas en la industria para crear sitios web.  Wordpress es lo que llamamos un CMS (por sus siglas en inglés) ó un gestor de contenido.  En otras palabras, WordPress nos permite controlar las secciones, las funcionalidades y hasta el diseño de nuestro sitio web desde un panel de control.

Aunque WordPress es gratuito y es bastante fácil de usar…es una plataforma bien robusta que conlleva una curva de aprendizaje algo notable.  Por eso es que nunca está demás contar con un profesional que conozca WordPress y sepa entrar más profundo en sus funciones y manejar los aspectos más técnicos y ahorrarte mucho tiempo.

Pero no te preocupes porque en esta guía vamos a tocar lo básico que necesitas saber para lanzar tu sitio web.  Y si aún así necesitas entrar más profundo, puedes contactarme y con mucho gusto te orientaré sobre cómo puedo ayudarte.

El diseño de tu website lo decide un Theme

Un Theme son las plantillas que utiliza WordPress para determinar el diseño de tu sitio web.  De la misma forma que usas plantillas pre hechas para tus documentos de Word o PowerPoint, los Themes te ofrecen estilos pre determinados para ahorrar tiempo.  Simplemente instalamos el theme de nuestra preferencia y comenzamos a trabajar.

El problema con la mayoría de los Themes

 

El problema con la mayoría de los Themes de WordPress es que se ven bien bonitos en las demostraciones, pero al instalarlos solo ves una página en blanco y nada de lo que te gustó en primer lugar.  Entonces cuando lees las instrucciones es casi peor que programar HTML porque tienes que aprenderte los códigos que el programador se inventó.

Pero el DIVI Theme nos evita todo ese dolor de cabeza

 

El DIVI Theme es mi theme favorito de WordPress y uno de los más versátiles porque contiene un editor visual que te permite decidir el diseño de tu sitio web sin programar y lo mejor aún…y lo que vamos a aprovechar en esta guía…es que contiene LIBRERÍAS con esquemas pre hechos de las secciones más importantes de un sitio web.

¿Quieres hacer una página de inicio?  BAM!  Con un click ya tienes el esquema completo.

¿Una sección “Sobre Nosotros”? Listo! Un click y ya está hecha la plantilla, solo es cuestión colocar tu contenido y tus imágenes, enlazar tus secciones y listo.

 

Divi no es gratis, pero vale cada centavo

 

Lo bueno de Divi es que te va a rendir mucho tiempo porque no solo te permite hacer todas las modificaciones e implantar tus ideas en el futuro…sino que constantemente lo están actualizando y haciéndolo cada vez mejor.

Cómo Bajar e instalar el DIVI Theme

 

En esta sección voy a mostrarte cómo bajar Divi, creando una cuenta en Elegant Themes (los creadores del Divi Theme) y luego cómo instalarlo y usarlo en WordPress.  El proceso de instalación es el mismo para cualquier otro Theme que desees instalar en WordPress; sin embargo si quieres seguir la guía paso a paso, te recomiendo que inviertas en este theme que YO no solo recomiendo…sino que uso en cada uno de mis proyectos.

Además…al comprar el Divi Theme continúas aportando a mejorar esta guía y convertirla en el mejor recurso en el internet para que emprendedores como tú puedan crear un website sólido de forma accesible.

Descarga el DIVI Theme

 

  1. HAZ CLICK AQUÍ y escoge el paquete que más te guste.Yo compré el paquete de $249 porque me da acceso de por vida y cómo Elegant Themes siempre tiene nuevos productos y actualizaciones…le vi más valor a este paquete.  Pero la verdad es que cualquier paquete que escojas te va a funcionar para descargar el DIVI Theme.Descarga el DIVI Theme desde elegantThemes
  2. Luego vas a ser dirigido a la pantalla de tu cuenta.  Allí haz click a la opción de descargar el DIVI Theme (escoge Theme Package).  Siempre va a descargar la opción más reciente (por eso me gusta tanto):
    escoge el Divi Theme
  3. Lo próximo que vamos a hacer es regresar al panel de control de nuestro sitio web (tudominio.com/wp-admin).En el menú principal escoge la opción de Appearance > Themes.  Una vez allí, Haz Click donde dice “Add New” o su equivalente en español:Screen-Shot-2016-07-03-at-9.53.41-PM
  4. ¿Recuerdas donde fue que guardaste el archivo que descargaste de DIVI (divi.zip)?  Bien, oprime el botón que dice Upload Theme:Screen-Shot-2016-07-03-at-9.54.13-PMAl abrir la ventana de cargar archivos, vas a escoger el archivo DIVI.zip y WordPress comenzará a trabajar en la instalación.Una vez haya completado la instalación vas a ver una notificación.  Haz click sobre el enlace que dice “activate” o activar:Screen-Shot-2016-07-03-at-9.55

 

¡Listo! Ya está instalado el DIVI Theme en tu sitio web de WordPress…ahora a configurarlo

Algunas configuraciones para el DIVI Theme

El DIVI Theme es tan robusto y versátil que tiene muchas opciones para configurarlo a tu gusto.  En esta guía no puedo darle todo el enfoque que merece este theme.  Te invito a que visites la documentación del DIVI theme en tu cuenta de Elegant Themes, justo donde descargaste tu archivo de DIVI.

Aún así, quiero visitar un momento la pantalla de opciones de DIVI para señalarte algunas configuraciones que debemos trabajar para ajustar DIVI a tu marca.

Todas las configuraciones de DIVI las vas a encontrar en esta sección del menú principal de WordPress:

Screen Shot 2016-07-03 at 11.20.10 PM

 

Claro está…esta opción en el menú apareció luego de haber instalado DIVI.  Vamos a escoger la opción de Theme Options

Coloca tu logo

  1. La primera opción que vas a encontrar es la de cambiar el logo…Screen Shot 2016-07-03 at 11.23.15 PMEscoge la opción de UPLOAD.
  2. Hablemos sobre cómo funcionan los UPLOADS de imágenes en WordPress…cuando decides añadir medios como imágenes, WordPress te va a mostrar una pantalla como esta:Screen Shot 2016-07-03 at 11.25.43 PMAquí puedes presionar el botón para buscar un archivo o simplemente arrastra el archivo hasta esta pantalla y WordPress lo cargará.Si quieres usa una imagen que ya habías cargado a WordPress…escoge la pestaña de “Media Library” para que escojas entre imágenes ya en tu sistema: Screen Shot 2016-07-03 at 11.26.00 PM
    Una vez escogido tu logo, va a estar cargado en el sistema

Finalmente vamos a la mágia del DIVI theme

La magia del DIVI Theme está en lo fácil que hace el añadir secciones (o páginas) a tu sitio web; así que vayamos directo y veamos cómo podemos hacer una sección para nuestro sitio web.

Añadiendo una nueva sección a tu sitio web

 

  1. En el menú principal de WordPress vas a ver una de las funciones principales de WordPress: El crear páginas o secciones:Cómo añadir secciones en WordPressPara crear una sección nueva escoge la opción “Add New”.
  2. Rápidamente te vas a encontrar con una pantalla como esta:
    Screen Shot 2016-07-04 at 12.09.13 AM

    En la parte superior escoges el título de la sección.  Digamos que vamos a crear una página “Sobre Nosotros” (About).  Escribe “Sobre Nosotros”.

  3. Ahora viene mi parte favorita…Haz click sobre el botón que dice “Use DIVI Builder”Use DIVI Builder
  4. Y ahora tu pantalla debe verse más o menos así:Usando el DIVI Builder
  5. ¿Y ahora qué? Bueno, usualmente es que los más experimentados comenzamos a añadir bloques y módulos para ir construyendo nuestras secciones.  Pero DIVI fue diseñado primeramente para que los que no son diseñadores puedan comenzar sin experiencia.Haz click en la pestaña del DIVI Builder que lee “Load From Library”:Screen Shot 2016-07-04 at 12.19.02 AMAhora vas a poder ver una pantalla como esta:Screen-Shot-2016-07-04-at-12.20.38-AM2Esta es la belleza de DIVI…las librerías de secciones pre construidas.  Como estamos trabajando la sección de “Sobre Nosotros”…escoge la opción de “About Us” y mira cómo se va a transformar tu pantalla:Screen Shot 2016-07-04 at 12.26.44 AM
  6. Ahora…veamos el verdadero efecto que tiene lo que acabas de hacer.  Vamos a ver una vista previa de lo que verán tus visitantes.  En la columna de la derecha, haz click en el botón de “Preview”:Screen-Shot-2016-07-04-at-12.29.41-AMMe voy a detener un segundo para tomar nota de los botones “Sabe Draft” y “Publish”.  “Preview” te da una muestra de cómo se verá la página.  “Save Draft” guarda un bosquejo que aún no puede ser visto por el público.  Y “Publish” hace pública la sección.Ahora veamos cómo se ve lo que tenemos hasta ahora:Screen Shot 2016-07-04 at 12.34.56 AMEsto es un pedazo de lo que seguramente aparece en tu pantalla.  Ahora veamos un ejemplo de cómo editamos nuestro contenido.
  7.  Vamos a editar el texto que narra nuestra historia:
    Screen-Shot-2016-07-04-at-12.37.32-AM
    Y el una de las imágenes que describe nuestro equipo:Screen-Shot-2016-07-04-at-12.37.57-AMEstos dos ejemplos te van a dar una idea bien clara de cómo puedes editar tu contenido en DIVI y te va a desarrollar un gustito por esta herramienta.  Nuevamente te recomiendo que repases la documentación de DIVI para que veas todos los módulos que puedes añadir y cómo funciona.
  8. Rápidamente vamos déjame mostrarte lo que estás viendo en tu DIVI Builder:Screen-Shot-2016-07-04-at-12.26.44-AM2– Las secciones envuelven todo el contenido.  Estas te van a permitir agrupar contenido y cambiar el color de fondo.– Las filas se usan para acomodar columnas.  Existen varios arreglos de columnas: Una columna fullscreen, tres columnas, dos columnas 50-50, o arreglos asimétricos como las columnas 1/4-3/4.  DIVI te permite escoger cual arreglo quieres.- Los módulos es donde se encuentran los distintos tipos de contenido: Editor de Texto, Imagen, Sliders (Carruseles), Mapas,  Mostrar individuos, Galerías, etc.
  9. Para editar el texto de la historia, vé al módulos que dice “Text” en la columna 1/4 y haz click en el ícono de las tres rayas (que le llamo hamburguesa):Screen-Shot-2016-07-04-at-12.53.33-AMAhora es solo cuestión de editar tu contenido, guardar los cambios, salir y listo.Editar cambios en DIVI theme - WordPress
  10. Ahora editemos una de las imágenes de nuestro equipo de trabajo.  Recuerda que las tres rayas te permiten editar un bloque, mientras que los dos recuadros que se sobreponen te permiten duplicar el bloque.Screen-Shot-2016-07-04-at-10.28.22-AMNuevamente, cada módulo tiene sus instrucciones, pero la gran mayoría consiste en cambiar imágenes, títulos y textos de descripción:Screen-Shot-2016-07-04-at-10.32.57-AMScreen-Shot-2016-07-04-at-10.33.18-AMAsí queda cuando haces los cambiosScreen Shot 2016-07-04 at 10.38.40 AMY así se ve en tu sitio web:

    Screen Shot 2016-07-04 at 10.41.19 AM

Organiza el menú de tu sitio web

WordPress tiene una sección para manejar el menú de tu sitio web.  Sin embargo, vamos a darle foco al recurso que nos da DIVI para manejar qué secciones se verán en nuestro menú.

  1. Regresa al menú de opciones de DIVI y escoge la pestaña de navegación.  Mientras vayas creando secciones, las vas a ver desglosadas aquí.  Marca con la marca verde las que quieras ver en tu menú y con la “X” roja las que no quieras que se vean.  Listo:Screen Shot 2016-07-04 at 10.59.14 AM

Esto debe darte una idea clara de lo que se puede usar plantillas y editar contenido para ajustar DIVI a tu marca.

Nuevamente, te invito a que leas la documentación de DIVI y descubras todo lo que te permite hacer esta genial herramienta.

Además, visita el banco de recursos para que veas un tutorial que te presenta más a fondo lo que puedes hacer con WordPress para tomar más control de tu sitio web.

Muy bien listo…ya completaste esta primera parte.

Ufff, este estuvo largo.  Vamos a ver qué secciones no deben faltar en tu sitio web

Ver las sessions más importantes

Tienes dudas o preguntas con este proceso? Contáctame para ayudarte.

Paso1: Dominio y Hosting

La base para crear un sitio web es donde lo vamos a alojar y cómo lo vamos a nombrar para que las personas lo encuentren.  También vas a aprender cómo escoger un buen dominio que la gente recuerde.
   Ver esta lección

Paso2: Instalar Wordpress

Vamos a usar la herramienta #1 para crear sitios webs profesionales.  Aunque Wordpress se ha convertido en un estándar de todo profesional...voy a mostrarte como instalar Wordpress con unos pocos clicks.
   Ver esta lección

Paso 3: Instalar y usar Divi

Divi es mi "theme" favorito de Wordpress porque te permite crear un sitio web no importa si eres principiante o profesional.  Este es el "theme" que uso para todos mis proyectos y cuando lo uses vas a ver por qué es mi favorito.
   Ver esta lección

i

Paso 4: Las páginas más importantes de su website

Aquí vamos a discutir las 4 páginas más importantes de tu sitio web.  Estas son las páginas que yo siempre aconsejo que debe tener un negocio.
   Ver esta lección