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

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í:

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:

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:

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...

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:

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.

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.

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.

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.