Cómo crear una página web con Divi paso a paso: ejemplo real

Autor: Max Camuñas

Fecha: 13/03/2018

En este artículo te voy a mostrar cómo crear una página web con Divi paso a paso con un ejemplo real.

Para ello, he creado desde cero la página de inicio de una web con temática deportiva, a la que he llamado Universo Entrenamiento.

Basándome en la idea de un entrenador deportivo que quiere potenciar su marca personal y ofrecer sus servicios, he creado el siguiente diseño.

Puedes ver todos los detalles aquí.

Cómo crear una pagina web con Divi desde cero

 

Pasos previos antes de mostrarte cómo crear una página web con Divi


Antes de empezar directamente con el diseño de la web, necesitas tomar una serie de decisiones sobre la parte visual y la estructura de la misma.

A continuación, te cuento los pasos previos que realizo siempre antes de empezar el diseño de una página web:

 

1) Crear la paleta de colores

El primero de los pasos en mi metodología de trabajo es crear la paleta de colores que voy a utilizar tanto en la web como en los elementos gráficos (logo, banners, etc).

Como consejo, siempre recomiendo escoger un color principal y dos o tres complementarios.

En el caso de Universo Entrenamiento he optado por la siguiente combinación de colores:

  • Principal: naranja (#fe7c3e)
  • Secundario 1: negro (#000000)
  • Secundario 2: blanco (#ffffff)

Por lo tanto, la paleta de colores de esta web quedaría de la siguiente manera:

 

2) Diseñar el logotipo

Ahora que tengo claros cuáles son los colores que me gustan para la web, es el momento de diseñar el logotipo en base a esa paleta.

Mi recomendación en este caso es no usar más de dos o tres tipografías diferentes.

En concreto, para el logo de Universo Entrenamiento me he decantado por las dos siguientes:

  1. Adlery Pro para la palabra «entrenamiento», que es la principal en el diseño.
  2. Montserrat para la palabra «universo» (en mayúsculas).

Y el resultado es el siguiente:

Cómo crear una pagina web con Divi: logotipo

 

3) Elegir las tipografías

El siguiente paso del proceso de diseño de una página es la elección de las tipografías web.

Al igual que con los colores, recomiendo usar dos o tres tipografías para la web. Una para el cuerpo de texto y otra para los elementos destacados (titulares, llamadas a la acción, etc).

En este caso, me he decantado por la siguiente combinación:

  • Cuerpo de texto: Open Sans
  • Títulos, CTAs y textos destacados: Oswald

Un ejemplo de cómo las he distribuido:

 

4) Buscar las imágenes

Otro de los aspectos clave del diseño son las fotografías, para las que he recurrido a Unsplash, un banco de imágenes que me gusta mucho porque tiene unos recursos de mucha calidad.

En este caso concreto, he seleccionado seis imágenes para la home, todas relacionados con la temática de la web, y que combinadas con los colores y tipografías, le dan mucha personalidad al diseño.

Para buscar imágenes, puedes recurrir a bancos, donde las encontrarás recursos libres de derechos de autor.

Algunos de ellos: 123RF, Pixabay o Shutterstock.

Estas son las seis imágenes que he utilizado en la web de Universo Entrenamiento:Cómo crear una pagina web con Divi: imágenes

 

5) Redactar los textos

Una vez has definido la parte más creativa y visual, debes empezar a redactar los textos de las diferentes páginas y secciones de tu web.

En este caso, al ser una web de prueba, no ha sido necesario, he tirado de Lorem Ipsum.

Pero en el caso de una web real, necesitas redactar (o trabajar con un Copywriter) para que tu página tenga unos textos atractivos y adaptados a SEO.

 

6) Definir la estructura de la página

Por último, antes de proceder a la creación de la web, debes definir su estructura en dos sentidos:

  • Usabilidad. Hace referencia a la secciones y apartados que va a tener la página y cuántas pestañas va a tener el menú. En este caso, como es un ejemplo muy sencillo, la estructura es la siguiente: Inicio, Método, Programas, Entrenamiento y Contacto.
  • Diseño. Por supuesto, debes definir cuál será la estructura de la web a nivel de maquetación y diseño de cada una de sus páginas, especialmente de la Home, que es la más importante de todas.

La estructura de la página de inicio de Universo Entrenamiento es la siguiente (por orden):

  • Logo + menú
  • Header con CTA
  • 3 servicios
  • Método pro
  • Galería con 2 imágenes
  • Cómo te puedo ayudar
  • Testimonios / Opiniones
  • Formulario de contacto 

Te lo explico con más detalles en el siguiente apartado.

 

Cómo crear una página web con Divi paso a paso: ejemplo Universo Entrenamiento


1) Opciones del tema Divi

El primer paso para crear una página web con Divi es configurar las opciones de la plantilla y personalizarlas a tu gusto.

Esto se hace desde Divi > Opciones de tema > General y aquí puedes ajustar opciones como:

  • Logo
  • Favicon
  • Barra de navegación
  • Paleta de colores de la plantilla
  • Modo de estilo del blog
  • Sidebar
  • Iconos de redes sociales
  • Formato de la fecha
  • Botón de volver arriba
  • y muchas más opciones…

Cómo crear una pagina web con Divi desde cero

Si necesitas alguna opción extra, puedes encontrarlas en las pestañas Navigation, Builder, Layout, Ads, SEO, Integration y Updates.

 

2) Personalizar el tema

Tras configurar las opciones de la Divi, el siguiente paso es personalizar la apariencia de tu web.

Para ello, debes ir a Ajustes > Personalizar y ajustar a tu gusto la personalización de la página.

Aquí personalizar algunos elementos como:

  • Los colores de tu página.
  • Las tipografías para tus textos.
  • El tamaño y formato de la cabecera.
  • El footer (pie de página).
  • Los botones.
  • Y muchas opciones más, como puedes ver a continuación:

Cómo crear una pagina web con Divi desde cero

 

3) Crear la página de inicio

Configuradas las opciones del tema y la personalización de tu web, ahora vas a crear una nueva página, la que será tu Home.

Vas a Páginas > Añadir nueva, le pones el título que quieras, seleccionas la opción Usar constructor visual y la publicas.

Cómo crear una pagina web con Divi desde cero

A continuación, vas a configurar esta página recién creada como la principal de tu web.

Para ello, vas a Ajustes > Lectura > Tu portada muestra > Una página estática y seleccionas en el desplegable la página que acabas de crear.

Cómo crear una pagina web con Divi desde cero

 

4) Maquetar la página de inicio

¡Por fin! Ha llegado el momento de maquetar la página de inicio para que el resultado sea el que te he mostrado al principio.

Para no alargar en exceso este post y mostrar cómo crear una página web con Divi desde cero, he grabado todo el proceso y te explico todos los pasos en el siguiente vídeo.

 

Espero que este tutorial sobre cómo crear una página web paso a paso te sea de gran utilidad si vas a dar tus primeros pasos con Divi.

15 Comentarios

  1. Norman Leyva

    Estupendo tutorial Max. Como siempre muy útiles todos tus consejos, sigue así.

    Responder
  2. Carlos

    Muchas Gracias!! Excelente video que facíl construyes la web.

    Responder
  3. Manfred Camero

    Me ha encantando el post así como el video que has compartido Max, he aprendido un poco mas sobre los puntos y sobre todo el orden que hay que tener para el diseño de una pagina web con Divi.
    Muchas gracias por compartir, saludos desde México.

    Responder
    • Max Camuñas

      Hola Manfred,

      De eso se trata, de crear diseños web con una estructura y orden lógico, pensados para cumplir los objetivos del sitio. Todo tiene que tener sentido.

      Muchas gracias por pasarte y comentar 😉

      Saludos!

      Responder
  4. Liliana

    Hola Max muchas gracias por la información, es de mucho valor. Max soy nueva en esto y tengo una duda….mi blog lo estoy diseñando pero mis textos son muy largos, he visto que se utiliza un botón que dice leer mas , como puedo ponerlo para que solo se vea el titulo un poco de lectura y el que quiera ver completo el articulo se muestre con hacer clic … no se si me entiendas la pregunta. de antemano mil gracias!

    Responder
    • Max Camuñas

      Hola Liliana,

      Si utilizas Divi, debes configurar el módulo blog como extracto. Es muy fácil.

      Saludos!

      Responder
  5. Evan

    Muchas gracias Max! Estoy iniciándome en Divi y me ha servido mucho tu tutorial. Tengo una duda sobre las secciones de la web del encabezado: en tu ejemplo entiendo que son meros textos o categorías sin enlace a otra página, pero para hacer secciones entiendo que hay que crear un Menu como cualquier otra web de WordPress, verdad?

    Responder
    • Max Camuñas

      Hola Evan,

      Efectivamente, en mi diseño no llevan a ningún sitio porque es un simple ejemplo, pero está ideado como un menú.

      Saludos

      Responder
      • David Cruz

        Buen artículo Max. Hace mucho que he escuchado sobre Divi, pero aún no me decidía a comprarlo para mi blog, pero con tu vídeo me he animado.

        Muchas gracias. Saludos

        Responder
        • Max Camuñas

          Hola David,

          Me alegro mucho de que hayas optado por Divi para tu blog 😉

          Responder
  6. florisbel

    Te felicito, eres un excelente profesional, siempre de mucha ayuda tus aportes.

    Responder
  7. Verónica

    Hola Max,
    En primer lugar, te felicito por este post, está todo super bien explicado, lo haces ver tan fácil!
    He seguido paso a paso tus indicaciones, estoy creando mi primer sitio web y gracias a tus instrucciones, el resultado me tiene super feliz.
    La única batalla que no he podido ganar es que al crear la página INICIO me quedó duplicada y por más que navego por los menús de WP y de DIVI no logro eliminar el inicio que estaba instalado antes… si me puedes echar un cable con eso, sería genial!
    Te reitero la gratitud por darte el trabajo de compartir tus conocimientos de forma tan didáctica y amena, un abrazo desde Chile!

    Responder
    • Max Camuñas

      Hola Verónica,

      Muchas gracias por tu comentario. Cuánto me alegro de que mi post te sirva de ayuda 🙂

      ¿Has probado en los ajustes de WordPress? (Ajustes > Lectura > Tu portada muestra > Portada > Seleccionas la páginas que quieras).

      En este artículo que he publicado hoy hablo con más detalles del tema: WordPress Admin: cómo configurar correctamente tu web.

      Saludos!

      Responder
      • Verónica

        Solucionado! Me faltaba crear un menú… seguiré paseándome por tu blog, que estoy aprendiendo muchísimo!

        Responder
  8. Mix Jhonsy

    Parcero un saludo bien especial, nunca he comentado en un Blog, pero tu has logrado que coloque estas lineas para extenderte mis felicitaciones y desde ya me suscribo a tu web para seguirte, diseñe mi home como siempre la había querido, muy bien explicado. un abrazo.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!