Inicio

Tu regalo

Cursos

Servicios

Blog

Contacto

Llámame

608283891

Escríbenos

info@creandocondavid.com

Sígueme

Ilustración de ordenador de mesa

En el tutorial Divi en español voy a mostrarte todos los secretos para que puedas crear una página web con WordPress y Divi pero, no de una forma, ni de dos, sino de tres maneras distintas.

En primer lugar aprenderás a instalar una de sus plantillas diseñadas por el equipo de elegant themes, Y también a sustituir sus imágenes, textos y colores.

En segundo lugar aprenderás a crear una página web con diferentes layout creados por el equipo de Divi de Elegant themes.

Y en la tercera estarás preparado para crear una página web desde 0.

Cuando termines tendrás una página web maquetada totalmente a tu gusto con los colores, imágenes y textos que tú quieras.

También aprenderás cuáles son los pasos previos que debes seguir antes de empezar a crear tu página web con Divi para que no te quedes estancad@ en ningún momento.

Desde ahora mismo, quiero que sepas que esta no es una guía cualquiera, si no la guía definitiva que con la que aprenderás a crear tu proyecto web de principio a fin.

Resumen

Todo lo que debes saber antes de empezar a crear tu página web con Divi

  1. -Elegir paleta de colores
  2. -Elegir tipografía
  3. -Bancos de imágenes
  4. -Elaboración de textos
  5. -Estructura de tu web
  6. -Comprar hosting y dominio

Instalación y ajustes de Divi y WordPress

  1. -Instalación de WordPress y ajustes básicos
  2. -Instalación de Divi
  3. -Opciones del tema divi
  4. -Personalizador de temas

Como crear una página web con divi paso a paso

  1. Primera forma (Maqueta una plantilla prefabricada de Divi)
  2. Segunda forma (Con distintos diseños)
  3. Tercera forma (Diseño web desde 0)

Todo lo que debes saber antes de empezar a crear una página web con Divi

1. Paleta de colores

El primer paso que debes seguir es el de elegir los colores que vas a utilizar en tu diseño.

Para ello puedes buscar inspiración en lugares como adobe color, Pinterest o Flauticolors.

Foto rueda cromática colores

2. Elegir tipografía

En segundo lugar debes elegir las fuentes que quieres para tu web. Existen miles de fuentes diferentes, sin embargo, mi recomendación es que no uses más de dos o tres fuentes distintas.

El motivo es que la carga de una fuente consume recursos, por lo tanto la carga de demasiadas fuentes puede ir en contra de la funcionalidad y la velocidad de tu sitio.

Además tienes que tener en cuenta que estas fuentes sean flexibles, es decir, que tengan diferentes tamaños y formas.

3. Bancos de imágenes

Claro está que tener tus propias imágenes, hará que tu sitio sea más personal y único. No obstante existen muchos bancos de imágenes dónde puedes descargártelas totalmente gratis.

De hecho puedes descargarte también imágenes vectoriales, ilustraciones y vídeos.

Probablemente ya lo sepas, pero uno de los bancos de imágenes más conocidos es Pixabay.

Varias imágenes de Pixabay

4. Elaboración de textos

Antes de comenzar con tu web, es muy importante que tengas preparados los textos que vas a incluir en cada apartado.

Además si puedes permitirte contratar un profesional que redacte los textos por ti, es decir, un copywriter, mi consejo es que no te lo pienses ni un solo instante.

5. Estructura de tu web

Primero debes tener claro que la estructura de una página web, se divide en tres partes: cabecera, cuerpo y pie de página.

A partir de aquí tienes que tener claro como vas a distribuir el contenido, por ejemplo: Inicio, regalo, cursos, servicios, blog, contacto.

La siguiente imagen es un ejemplo del menú de mi página web.

Menú de página web

El siguiente paso es distribuir los contenidos de cada página, por ejemplo:

Página de inicio: 

  • Llamadas a la acción
  • Servicios
  • Testimonios
  • Formulario de contacto

Servicios

  • Llamadas a la acción
  • Oferta
  • Ventajas
  • Precios

6. Comprar Hosting y dominio

¿Por qué pongo esto en el punto 6? Porque no quiero que te pase a ti, lo mismo que me paso a mí. En muchas ocasiones aconsejan tener primero un hosting y dominio contratado, y es cierto, hay que tenerlo, pero por propia experiencia te aconsejo hacerlo cuando tengas los 5 puntos anteriores completados.

El motivo es que si no tienes claro los 5 puntos anteriores, seguramente que te quedes estancad@ en algún momento. Por lo tanto el tiempo de creación de tu página web se alargará.

Y mientras tanto estarás pagando el hosting. Pero no te preocupes porque puedes comenzar tu proyecto sin gastarte ni un solo euro, si quieres saber como hacerlo te lo explico todo en este post.

Instalación y ajustes de Divi y WordPress

Llegado este momento, si has completado todos los pasos anteriores, ya debes haber contratado tu hosting y dominio.

En primer lugar voy a explicarte como instalar WordPress desde Siteground, seguidamente te mostraré como hacer unos ajustes básicos que te servirán para poder empezar a crear tu página web con Divi.

Y por último te mostraré como subir el tema Divi a tu WordPress y también que configuraciones tienes que realizar.

1. Instalación de WordPress y ajustes básicos

Desde tu panel de Siteground: sitio web > gestor de aplicaciones.

Imagen del panel de Siteground

Seguidamente: instalar nueva aplicación (despliega el menú y selecciona) WordPress.

Eligiendo aplicación en panel Siteground

Por último rellena los campos para terminar de ajustar la aplicación de la siguiente formas: dominio > lenguaje > en ruta de instalación yo nunca pongo nada > nombre de usuario > contraseña-email-instalar.

Configuración aplicación WordPress

También te lo explico en este vídeo 100% práctico.

Ahora vamos con los ajustes necesarios para empezar a crear tú páginas web con Divi.

Desde el panel de control de tu WordPress: ajustes > generales

Los campos que yo suelo modificar son los siguientes: título del sitio > descripción corta > zona horaria (UTC+1) > formato de fecha (d/m/y) > formato de hora (como en la imagen) > guardar cambios.

Imagen de ah¡justes generales en WordPress

A continuación: ajustes > enlaces permanentes > nombre de la entrada > guardar cambios.

A menos que no te importe caerle mal a Google es aconsejable marcar esta casilla.

Ajustes de enlaces permanentes de WordPress

2. Instalación de Divi

Dentro del panel de administrador de tu WordPress: apariencia > temas > añadir nuevo > subir tema > seleccionar archivo > arrastrar divi.zip > instalar ahora.

Imagen apartado subir tema WordPress

3. Opciones del tema Divi

Dirígete a Divi > opciones del tema > general.

En este apartado vas a realizar las siguientes configuraciones:

  • Subir logo
  • Configurar paleta de colores
  • Introducir redes sociales
  • Activar botón volver arriba

Subir logo en Divi: 

Subir logo > biblioteca de medios o subir archivo > elegir imagen > establecer como logotipo

Imagen de la biblioteca de medios de WprdPress

Configuración paleta de colores en Divi: 

Paleta predeterminada de selección de colores > selecciona el color que quieres cambiar > pega la numeración del nuevo color

Opciones del tema divi

Insertar redes sociales en Divi: 

Dirección del perfil (red social) > pegar url

Opciones generales de Divi

Botón de volver arriba en Divi: 

Botón de volver arriba > activar

Activar botón volver arriba

Y por último haz click en guardar cambios.

4. Personalizador de temas de Divi

Dirígete a Divi >personalizador de temas.

En este apartado vas a poder realizar multitud de configuraciones, no obstante podrás ver muchas de ellas en el siguiente videotutorial que he preparado para ti.

Panata de inicio de academiade.creandocondavid.com

Como crear una página web con Divi paso a paso

En este último apartado del tutorial, he decidido explicarte las tres maneras distintas de crear una página web con Divi a través de videotutoriales.

1. Maqueta una plantilla predefinida de Divi

 (Primer videotutorial)

Aprenderás a:

  • Instalar una plantilla de Divi
  • Sustituir imágenes
  • Sustituir colores
  • Sustituir textos
  • y mucho más…

2. Con distintos diseños

 (Segundo videotutorial)

Aprenderás a:

  • Copiar y pegar secciones, filas y módulos ya creados.
  • Sustituir imágenes
  • Sustituir colores
  • Sustituir textos
  • y mucho más…

3. Diseño web desde 0

 (Tercer videotutorial)

Aprenderás a:

  • Crear un slider chulísimo
  • Crear filas con distintas columnas
  • Manejar varios módulos de Divi
  • Distintas configuraciones de sección, filas y módulos.
  • Y mucho más…

Dime tu mejor email para enviarte tu regalo

* Para cumplir con la nueva Ley de Protección de Datos y que tus datos estén a salvo, debes leer y aceptar mis condiciones legales.

Responsable: David Gómez Jaime
Finalidad de los datos: Responderte al mensaje que me envíes a través del formulario.
Legitimación: Tu consentimiento de que quieres comunicarte conmigo.
Almacenamiento de los datos: Base de datos alojada en Siteground
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Más información
Privacidad
Abrir chat
1
¡HOLA! soy David, consúltame y te ayudaré encantado.