Cómo crear una pagina web con Divi desde cero
Cómo crear una pagina web con Divi desde cero

TUTORIAL: cómo crear una página web con Divi paso a paso

13/03/2018
Tiempo lectura:

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 el resultado 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:

Cómo crear una pagina web con Divi: paleta de colores

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:

Cómo crear una pagina web con Divi: tipografías

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.

Cómo crear una pagina web con Divi: imágenes

Estas son las seis im√°genes que he utilizado en la web de Universo Entrenamiento:

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.

Ejemplos Divi


Para terminar, te dejo varios ejemplos de webs dise√Īadas con Divi por si necesitas inspiraci√≥n. He preparado varios tipos de sitio: landing page, tienda online, one-page, web corporativa y blog.

Ejemplos Divi: blog
Ejemplos Divi: blog
Ejemplos Divi: landing page
Ejemplos Divi: landing page
Ejemplos Divi: one page
Ejemplos Divi: one page
Ejemplos Divi: web de servicios
Ejemplos Divi: web de servicios
Ejemplos Divi: tienda online
Ejemplos Divi: tienda online

Espero que este tutorial y ejemplos 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.

Summary
ūüé® TUTORIAL: c√≥mo crear una p√°gina web con Divi paso a paso
Article Name
ūüé® TUTORIAL: c√≥mo crear una p√°gina web con Divi paso a paso
Description
En este artículo te muestro paso a paso cómo crear una página web con Divi desde cero y con un ejemplo real.
Author
Publisher Name
Max Camu√Īas
Publisher Logo

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.

¬ŅNecesitas una p√°gina web, blog, landing o tienda online?
¬°PIDE TU
PRESUPUESTO!

Dise√Īa
tu web

Dise√Īa
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

guía

PARA DISE√ĎAR LOGOTIPOS MEMORABLES

GU√ćA para dise√Īar logotipos memorables