INGRESOS VÍA WEB

Ganar dinero en internet

  • Inicio
  • Blog
  • Recursos que uso
  • Quién es Juan
  • Contacto
  • Contenido Premium
  • Zona Premium
Estás aquí: Inicio/WordPress/Tema Extra de Elegant Themes/Aprende a utilizar el Constructor Divi en EXTRA

Aprende a utilizar el Constructor Divi en EXTRA

por Juan Deja un comentario

Temas Elegant Themes
La compañía Elegant Themes dispone de una de las mejores plantillas del mercado, en cuanto a personalización se refiere, es su buque insignia y se llama Divi. Esta plantilla entra dentro del paquete al realizar la suscripción para adquirir los más de 80 temas de WordPress que tienen. Pero la plantilla EXTRA no se ha quedado atrás y ha incluido la característica “Divi Builder” para crear páginas y entradas con el Constructor Divi.

Suscríbete a mi canal:

 

El tema lo puedes comprar aquí por 89$ o Gratis para mis alumnos

 

Índice del contenido

  • Divi Builder – Cómo construir una web con módulos
    • Conceptos básicos del Constructor Divi
    • Cómo crear páginas y entradas con el Constructor Divi
    • Opciones generales del panel
    • Configuración de las secciones
    • Añadir y definir las filas
    • Inserción de los módulos
    • Configuraciones especiales del Constructor Divi
      • SECCIÓN DE ANCHURA COMPLETA
      • SECCIÓN ESPECIAL
    • Editor visual para crear páginas y entradas con el Constructor Divi

Divi Builder – Cómo construir una web con módulos

 

Puede que este sea el aspecto más importante de esta plantilla, la posibilidad de poder crear páginas y entradas con el Constructor Divi, hace que no tengamos apenas límites a la hora de diseñar cualquier página web. He de decir que el “Divi builder” o Constructor Divi, es también un plugin que puede adquirirse con el paquete de Elegant Themes e instalarlo en cualquier plantilla de WordPress.

 

Conceptos básicos del Constructor Divi

Para crear páginas y entradas con el Constructor Divi, sólo tenemos que arrastrar y mover a la posición que nos guste cada uno de los elementos que tenemos o hemos configurado previamente.

Mi recomendación es conocer que tipos de módulos existen y componer nuestro diseño en un papel antes de llevarlo a la práctica. De esta forma sabremos cuantas secciones, filas y módulos necesitamos para diseñar nuestra web.

crear páginas y entradas con el constructor divi. boceto

  • Sección: Es la parte que limita nuestro diseño, puede tener un ancho determinado o llenar la página de lado a lado (fullwidth). En ella se insertan las filas que contendrán los módulos.
  • Fila: Sirve para especificar la configuración de los módulos en columnas, cada fila que creemos puede tener una configuración diferente de entre 1 y 4 columnas. Su anchura está limitada por la que tenga la sección.
  • Módulo: Es la parte que contiene el elemento que queremos integrar en la web, cada módulo puede adaptarse a cualquier anchura de columna y podemos insertar un número ilimitado de ellos.

 

Cómo crear páginas y entradas con el Constructor Divi

Para iniciar el constructor Divi para crear páginas o entradas, debemos crear una página o entrada nueva y pulsar sobre el botón “Usar el constructor Divi“. Al instante se cambiará el editor clásico de WordPress por la pantalla de inicio del constructor. Si la página ya tenía contenido, se integrará todo en un módulo de texto. Si deseamos separarlo en diferentes zonas, tenemos que hacerlo manualmente.

crear páginas y entradas con el constructor divi. Botón inicio

 

Opciones generales del panel

crear páginas y entradas con el constructor divi. Opciones generales

  • Guardar en biblioteca: Podemos guardar una copia a modo de plantilla de nuestro diseño para su reutilización en una posterior maquetación o en otra web realizada con el Constructor Divi.
  • Cargar de biblioteca: Desde aquí podemos acceder a los diseños guardados para poder volver a utilizarlos. También podemos cargar plantillas de diseños, de la biblioteca Divi, que vienen pre-hechos y que son una buena opción como punto de partida para realizar nuestra personalización.
  • Vaciar diseño: Si en cualquier momento no estamos convencidos del diseño que estamos realizando, podemos eliminarlo y empezar de cero.
  • Hacer y deshacer: Disponemos de tres botones para rehacer y deshacer acciones durante la construcción del sitio, siempre que no demos a actualizar página para que no desaparezca el historial de los movimientos que hemos hecho.
  • Importar/exportar: Nos permite guardar el diseño creado en un archivo para poder llevarlo a otra web o cargar un archivo que tengamos para utilizar una plantilla ya hecha.
  • Opciones generales: Podemos dar unos valores preestablecidos a la construcción de la página o entrada, como cuál será el color oscuro o claro del texto, la distancia entre columnas, añadir especificaciones de estilos concretas…
  • Plegar y desplegar: Muestra u oculta el editor del constructor Divi para tener más visibilidad sobre las otras opciones de WordPress.

 

Configuración de las secciones

Cada vez que añadamos una sección debemos configurarla acorde con nuestras preferencias y seleccionar las opciones que nos interesen. Tenemos que pinchar en las tres rayas para desplegar el panel de las opciones.

crear páginas y entradas con el constructor divi. Secciones

 

  • Imagen de fondo: Podemos elegir una imagen que aparezca de fondo para todo el contenido que tenga esta sección. Podemos utilizar una imagen diferente para cada sección. Para eliminarla sólo tenemos que borrar la URL.
  • Color del fondo transparente: Al activar esta opción no podremos elegir un color para esta sección, pero permitirá ver la imagen de fondo general de la web o el color que tengamos establecido.
  • Color de fondo: Aquí podemos elegir un color de fondo o dejar el que viene por defecto si no elegimos uno.
  • Vídeos: Los vídeos deberían subirse en los dos formatos para asegurar una completa compatibilidad con todos los navegadores. En los dispositivos móviles, los vídeos de fondo están deshabilitados, por lo que es aconsejable subir una imagen que sustituya a estos vídeos en los dispositivos mencionados para conseguir unos mejores resultados.
  • Vídeo .MP4 de fondo: Versión en formato .mp4 del vídeo a mostrar.
  • Vídeo .WEBM de fondo: Versión en formato .webm del vídeo a mostrar.
  • Anchura de vídeo de fondo: Anchura exacta del vídeo en píxeles.
  • Altura de vídeo de fondo: Altura exacta del vídeo en píxeles.
  • Pausar vídeo: Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.
  • Mostrar sombra interna: Puedes elegir si quieres que la sección disponga de una sombra interna o no.
  • Usar efecto de paralaje: Cuando esté habilitado, la imagen de fondo se quedará fija cuando te desplaces.
  • Relleno personalizado: Puedes ajustar el relleno con tus medidas personalizadas o dejar las medidas por defecto si lo dejas en blanco. El relleno es la distancia que hay entre el borde de la sección y la fila o filas que contiene. Puedes establecer diferentes rellenos para cada dispositivo.
  • Desactivar el Teléfono, Tableta o Escritorio: Desactiva la sección en los dispositivos que seleccionemos.
  • Etiqueta de administración: Es el nombre que podemos darle a la sección para identificarla sin necesidad de editarla.
  • CSS personalizado: Tienes la opción de modificar o crear tu propia hoja de estilos para cada sección.

 

Añadir y definir las filas

Las filas nos van a permitir tener diferentes zonas dentro de las secciones, pudiendo establecer distintas anchuras de columnas para utilizar con los módulos.

crear páginas y entradas con el constructor divi. filas

 

Inserción de los módulos

Los módulos se añaden pinchando en “Insertar módulos“. Hay que tener en cuenta que cada módulo tiene un propósito diferente y se configuran de manera distinta. Según nuestras necesidades, tendremos que elegir cuales tenemos que usar. Una vez insertados los módulos, los podemos mover y arrastrar si no nos gusta donde los hemos situado.

crear páginas y entradas con el constructor divi. Módulos

 

Configuraciones especiales del Constructor Divi

Después de aprender a manejar el Constructor Divi, ahora podemos hacer referencia a unas configuraciones que pueden resultar útiles en determinados momentos.

SECCIÓN DE ANCHURA COMPLETA

Este tipo de sección no contiene filas, por lo que no podemos dividirlo en columnas. Está limitado a un número reducido de módulos que pueden ser usados con una anchura total de la página. La sección cambiará a color morado para indicarnos que tiene una anchura total.

crear páginas y entradas con el constructor divi. Anchura completa

 

SECCIÓN ESPECIAL

Esta sección permite crear unas zonas verticales a modo de barra lateral que podemos configurar como tales o utilizarlas para añadir otro tipo de módulos. Esto nos permite trabajar a modo de un WordPress clásico, pero pudiendo elegir el tipo de barra lateral que nos guste. En este caso, el color que identifica la sección es el rojo.

crear páginas y entradas con el constructor divi. Sección especial

 

Editor visual para crear páginas y entradas con el Constructor Divi

Desde la versión Divi 3.0 y Extra 2.0, podemos realizar las cambio y modificaciones de manera visual y de manera gráfica por medio de la inclusión del “Constructor visual“. Este modo de trabajar nos permite ver los cambios en tiempo real en la parte frontal de la web, lo que los usuarios ven.

Tan solo hay que ir a ver la página que estamos realizando con el Constructor Divi y pulsar, en la barra del menú superior “Habilitar Constructor visual“. Según pasemos el ratón por los diferentes elementos, podremos editarlos para realizar las modificaciones. Los menús y las opciones son las mismas que podíamos ver en el editor de las páginas, solo que ahora vemos lo que hacemos.

crear páginas y entradas con el constructor divi. Constructor visual

 

Cuando terminemos de editar, volemos al menú superior y pinchamos en “Salir del Constructor visual” para aceptar y guardar los cambios.

 

Temas Elegant Themes

 

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


¿Qué te parece esta manera de crear páginas webs? Comenta tu experiencia y trabaja como un profesional.

NO PUEDES PERDERTE...

  • Cómo hacer un efecto de paralaje en el tema ExtraCómo hacer un efecto de paralaje en el tema Extra
  • Zonas activas con DIVI en la página principalZonas activas con DIVI en la página principal
  • Cómo añadir Breadcrumb o Migas de pan a ExtraCómo añadir Breadcrumb o Migas de pan a Extra
  • Configurar un formulario en Divi o Extra con Divi BuilderConfigurar un formulario en Divi o Extra con Divi Builder

Encuentra algo

No me pierdas

Mi canal de Youtube

Acerca de Juan


Juan Martín
 es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.
Ver todos los artículos de este autor

Deja un comentario Cancelar respuesta

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




El tema EXTRA lo puedes
comprar aquí por 89$
o
Gratis para mis alumnos

ÍNDICE: Tutoriales “Plantilla Extra”

  • 01 – Aprende a manejar el tema Extra de Elegant Themes
  • 02 – Crear un tema hijo para modificar el pie de página
  • 03 – Modificar la cabecera y poner una imagen personalizada
  • 04 – Plantillas de páginas pre-configuradas
  • 05 – Cómo traducir al español el tema Extra
  • 06 – Widgets propios de la plantilla Extra
  • 07 – Aprende a utilizar el Constructor Divi
  • 08 – Poner un reloj en el menú WordPress
  • 09 – Añadir y administrar los menús. Configurar el Mega Menú
  • 10 – Cambiar los colores de los módulos y los widgets
  • 11 – Menú minimalista en el tema Extra
  • 12 – Deslizador o Slider a pantalla completa en Extra
  • 13 – Cómo hacer Formulario de contacto
  • 14 – Menú pegajoso en dispositivos móviles
  • 15 – Cómo hacer un efecto de paralaje en el tema Extra
  • 16 – Cómo añadir Breadcrumb o Migas de pan a Extra
  • 17 – Cambiar los colores de las categorías
  • 18 – Los “layout” en el tema Extra
  • 19 – Hacer que las redes sociales se abran en una nueva ventana
  • 20 – Configurar el pie de página del tema Extra
  • 21 – Crear enlaces a módulos, filas o secciones dentro de una página
  • 22 – Insertar script en WordPress
  • 23 – Colocar una imagen en el menú secundario
  • 24 – Quitar la palabra CATEGORÍA de la página de archivos




¿Quieres ganar dinero en internet? Sigue mis pasos

¿Quieres ganar dinero en internet? Sigue mis pasos

Quien soy

¿Quieres saber más sobre mi?

Leer Más…

SOCIAL

Más información

  • Aviso legal
  • Política de Privacidad
  • Política de Cookies
  • Condiciones de uso
  • Condiciones generales de venta
  • Enlaces de afiliados

© 2017 – JSC  | Juan Martín

NO ME PIERDAS

100% libre de Spam. Tu privacidad es importante.

Esta web está realizada con Génesis Framework y WordPress · Alojada en SiteGround · Acceder · Mapa del sitio

Utilizamos cookies propias y de terceros para ofrecer nuestros servicios, recoger información estadística e incluir publicidad. Si continua navegando acepta su instalación y uso. OKPolítica de cookies