Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Divi / Tutorial del Constructor Visual de Divi 3

Tutorial del Constructor Visual de Divi 3

noviembre 18, 2016 Por Oscar martin Deja un comentario

Hola Chicos,

Hoy os traigo otro tutorial de la plantilla Divi 3.

La plantilla es de las plantillas más fáciles y avanzadas que existen para WordPress.

La puedes comprar aquí por 69$, o Si estás suscrito a la Zona Premium la puedes descargar gratis desde la el área de miembros. Te puedes dar de alta por 10€/mes aquí

Divi en su versión 3 ha añadido la posibilidad de edición directamente en el entorno visual, de esa forma es mucho más sencillo aplicar el formato deseado ya que estamos viendo el resultado directamente mientras estamos editándolo.

Aquí tienes el tutorial en vídeo:

Suscríbete a mi canal:  

Si creamos una entrada o página nueva nos encontramos con una pantalla parecida a la siguiente:
usar-constructor-visual-divi

Podemos editar desde esta misma pantalla con el magnífico editor del propio Divi que está a años luz del que trae por defecto WordPress, como veremos en otros tutoriales.

Pero si lo que queremos es usar el constructor visual de Divi 3, hacemos click en “Usar Constructor Visual” y nos lleva a la página tal cual se visualiza pero con la posibilidad de editarla directamente.

editando-constructor-divi

Divi usa la siguiente jerarquía cuando creamos contenido:

Secciones: Es un bloque de información que puede estar compuesta por varias filas de información. Normalmente cada bloque de información relacionada entre si va en el mismo bloque.

Filas: Cada fila puede tener su propio layout de información cómo puedes ver en la imagen de arriba.

Módulos: En cada cajita de layout podemos añadir contenido concreto, cada contenido concreto lo añadimos con un módulo:

modulo divi builder

Y como puedes ver trae un montón de módulos para añadir diferentes tipos de contenido dependiendo de nuestras necesidades.

Según vas escribiendo en el campo “búsqueda” se van filtrando los módulos.

En este ejemplo voy a añadir un slide de vídeo o como viene traducido “Deslizante de vídeo”:

modulo deslizante video divi

Al hacer click tenemos un montón de opciones de personalización y un botón donde pone “Añadir nuevo elemento”, es ahí donde vamos a añadir la url del vídeo que queramos:

slide-video-divi-youtube

Y si guardamos haciendo click en el botón verde podemos ir viendo en tiempo real el resultado que vamos consiguiendo:

video-ejemplo-builder-divi

Si hacemos click en los círculos verdes añadimos filas y si lo hacemos en los círculos azules lo que añadimos son nuevas secciones.

Las secciones las tenemos de 3 tipos:

Tipos de secciones en DIVI 3

tipos-secciones-divi

Regular: Son las secciones normales, las que más vamos a usar. Genera un espacio para que añadas tus filas y tus módulos.

seccion-regular-divi

Especial: A diferencia de la regular deja un espacio para que añadas dentro de la sección una barra lateral o sidebar. De esta forma cuando creas una fila tienes menos espacio para visualizar los módulos ya que además tienes un espacio para añadir módulos en una nueva barra lateral que se genera:

seccion-especial-divi

El espacio naranja es donde iría la barra lateral dentro de la propia sección.

Ancho completo: Genera una espacio que ocupa todo el en ancho, sin que haya márgenes. Este tipo de sección queda muy bien añadiendo de fondo una imagen que ocupa todo el navegador. En este tipo de sección te pregunta directamente que módulo quieres añadir:

ancho-completo-divi

Y por último, mientras estamos editando con el constructor visual tenemos un círculo morado abajo del todo que si hacemos click en el tenemos las opciones generales:

opciones-generarles-divi

Desde aquí podemos elegir varias opciones:

Formato de visualización: En los iconos de la izquierda podemos elegir previsualizar la página en formato ordenador, tablet o móvil y así podemos modificar el diseño en formatos específicos.

Podemos guardar el diseño, salir y una opción que me gusta mucho es el historial de cambios para poder volver a cualquier versión anterior de las que hemos usado. Es la opción del icono del relojito:

historial-ediciones

Hasta aquí el tutorial sobre el constructor visual o visual builder de DIVI.

La puedes comprar aquí por 69$, o Si estás suscrito a la Zona Premium la puedes descargar gratis desde la el área de miembros. Te puedes dar de alta por 10€/mes aquí

Espero que os haya gustado 😉

Saludos

Óscar

 

 

Publicado en: Divi, Themes Etiquetado como: constructor divi, Divi, Tips Divi

Acerca de Oscar martin

Me llamo Óscar y me dedico al Marketing Online. Me gano la vida gracias a internet y a herramientas como Wordpress. ¿Te puedo ayudar? Contáctame

Deja una respuesta Cancelar la respuesta

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

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR