+41 78 955 3005

Documentación de Divi en Español

Siga las instrucciones a continuación para instalar y configurar su nuevo tema

Un vistazo al constructor

Cursos de TantoMarketing a precios razonalbles
Cursos de TantoMarketing a precios razonalbles

El Básico

Divi es un tema único de elegantthemes. A diferencia de cualquier otro tema Elegant, Divi está constituido sobre la plataforma de un constructor de páginas que se ha diseñado y desarrollado desde cero. Al usar el constructor que le permite arrastrar y soltar módulos, puede crear hermosos diseños con facilidad, y controlar cada parte de su sitio.

El constructor usa tres bloques principales: las secciones, las filas y los módulos, Si emplea estas tres herramientas al mismo tiempo, puede crear una incontable cantidad de diseños de páginas. La jerarquía básica de estos bloques es la siguiente:

Vistazo al Constructor

Secciones

Los bloques mas básicos y de mayor tamaño para usar en el diseño son las Secciones. Estas se usan para crear las áreas de nivel superior en su sitio. Hay dos tipos de secciones: normal y de ancho completo. Las secciones normales se llenan con filas que contienen columnas, y las secciones de ancho completo se llenan con módulos de ancho completo. Sepa mas sobre las filas y módulos a continuación.

Filas

Las Filas se encuentran dentro de las secciones, y usted puede llenar cada sección con un número ilimitado de filas. Hay varios tipos de fila entre los que puede elegir. Una vez que defina el tipo de fila, puede llenarla con módulos en la columna que seleccione. No hay límite para la cantidad de modulos que puede incluir dentro de una columna.

Módulos

Los Módulos son los elementos visuales que componen su sitio. Cada modulo de Divi puede entrar en cualquier ancho de columna, y éstas son de diseño adaptable (responsive).

Comenzar

Luego de crear una página nueva, verá la ventana convencional de página de WordPress. Cuando use Divi, verá un botón morado “Usar el constructor de Divi. Al hacer clic en este botón activará el constructor de páginas y aparecerá la pantalla de inicio del constructor.

Vistazo al Constructor

Nota:  si la página ya tiene contenido, este será reemplazado de manera predeterminada por una sección con una columna y un módulo Texto. Si usted desea separar ese contenido en distintos módulos, deberá colocarlo manualmente en módulos individuales.

Opciones de diseño del constructor

 

Guardar en la biblioteca

En cualquier momento puede guardar en la biblioteca un diseño que haya creado. Esta opción es genial para usar el mismo diseño en otra página, en otra sección de página, o incluso en otro sitio creado con Divi. Para más información sobre cómo usar la Biblioteca de Divi, vea La Biblioteca de Divi. También puede aprender a Importar y Exportar sus bibliotecas de un sitio a otro.

Cargar de la biblioteca

Puede cargar de la biblioteca en cualquier momento un diseño que ya haya creado. Divi también incluye docenas de diseños predefinidos que se añaden a la biblioteca al momento de instalar el tema. Cargar uno de estos diseños predefinidos es un buen punto de partida para crear un sitio con Divi. Al cargar un diseño, tendrá la opción de seleccionar desde una serie de diseños predefinidos de Divi, o cualquier diseño que haya guardado o importado.

Limpiar diseño

Si en algún momento desea volver a empezar, simplemente haga clic en el botón Limpiar diseño. Esto eliminará todo lo que haya construido en la página y así podrá empezar de cero.

Debajo de estos tres botones está el diseño del constructor de Divi. Aquí es donde añadirá secciones, filas y módulos a su página para poder construir el diseño. Cuando active el constructor de Divi, todo lo que verá será una sección vacía, como la que se muestra en la siguiente imagen.

Opciones de Sección

Cada vez que añada una sección, deberá definir sus propiedades. Al hacer clic en el icono de menú en la parte superior del fondo lateral azul del panel (), se abrirán los Ajustes del módulo Sección . Asegúrese de ver la documentación detallada sobre las secciones de Divi para saber cómo funcionan estos ajustes y cómo puede usarlos de la manera más creativa.

Imagen de fondo – Si es definida, esta imagen se usará como fondo para este módulo. Para quitar la imagen de fondo, simplemente borre la URL del campo de configuración. Las imágenes de fondo en una Sección abarcan el ancho completo del navegador, por lo tanto recomendamos que las imágenes tengan al menos 1080 píxeles de ancho.

Color de fondo transparente – Use esta opción si necesita un color de fondo transparente para la sección.

Color de fondo – Si tan solo desea usar un color plano como fondo de sección, use el selector de color para definir uno.

Vídeo MP4 de fondo – Todos los vídeos deben ser subidos en formato .MP4 o .WEBM para asegurarse máxima compatibilidad con todos los navegadores. Suba la versión .MP4 aquí. Nota importante: Los vídeos de fondo se desactivan en dispositivos móviles. En su lugar, se utiliza una imagen de fondo. Por esta razón, debería definir ambos fondos, imagen y vídeo, para asegurarse mejores resultados. Nota importante: para que el formato de vídeo MP4 funcione en todos los navegadores, su servidor debe tener designados los tipos MIME correctos. Puede aprender más sobre cómo usar el archivo .htaccess para definir los tipos MIME aquí.Si nota que sus vídeos no se reproducen en ciertos navegadores, es probable que esta sea la razón.

Vídeo WEBM de fondo – Todos los vídeos deben ser subidos en formato .MP4 o .WEBM para asegurarse máxima compatibilidad con todos los navegadores. Suba la versión .WEBM aquí. Nota importante: Los vídeos de fondo se desactivan en dispositivos móviles. En su lugar, se utiliza una imagen de fondo. Por esta razón, debería definir ambos fondos, imagen y vídeo, para asegurarse mejores resultados. Nota importante: para que el formato de vídeo WEBM funcione en todos los navegadores, su servidor debe tener designados los tipos MIME correctos. Puede aprender más sobre cómo usar el archivo .htaccess para definir los tipos MIME aquí. Si nota que sus vídeos no se reproducen en ciertos navegadores, es probable que esta sea la razón.

Ancho del vídeo de fondo – Para que los vídeos se muestren correctamente, debe introducir el ancho exacto (en píxeles) del vídeo aquí.

Alto del vídeo de fondo – Para que los vídeos se muestren correctamente, debe introducir el alto exacto (en píxeles) del vídeo aquí.

Pausar vídeo – Para que el vídeo sea pausado en el momento en que otros reproductores usados en el módulo comiencen a reproducir.

Mostrar sombra interior – Aquí puede seleccionar si la sección mostrará una sombra interior o no. Esto puede lucir mejor si usa colores o imágenes de fondo.

Usar efecto Parallax – Si se activa, la imagen de fondo permanecerá fija al desplazar la página. Tenga en cuenta que al activar esta opción, las imágenes se escalarán a la altura del navegador. NOTA: si activa el efecto Parallax, recomendamos que sus imágenes sean del tamaño de un monitor estándar, ya que las imágenes tomarán el ancho o el alto de la ventana del navegador (por ejemplo 1280 x 768 píxeles).

Mantener relleno personalizado en dispositivos móviles – Permite que el relleno personalizado se retenga al ver la página desde un dispositivo móvil.

Desactivar en – Seleccione el dispositivo en el cual desea desactivar la sección.

Añadir y definir una fila

Luego de guardar los ajustes de la sección, deberá insertar una fila y definir el tipo de fila. Al hacer clic en Insertar columna/s, tendrá la posibilidad de elegir entre una serie de tipos de fila. Las filas también tienen muchas opciones para personalizar la apariencia y alterar la estructura del diseño. Si desea saber más sobre las opciones que ofrecen las filas, vea la sección Filas y opciones de filas de esta documentación.

Añadir un módulo

Una vez que ha seleccionado el tipo de fila, se le pedirá insertar módulos. En el ejemplo a continuación se ha agregado una fila de dos columnas.

Cada vez que quiera insertar un módulo, deberá hacer clic en el enlace Insertar módulo/s y seleccionar uno de la lista. Una vez que haya seleccionado el módulo, aparecerán las respectivas opciones en una ventana modal. Cada módulo tiene un propósito distinto, así como también distintas opciones. Para saber más sobre cada módulo individual, asegúrese de revisar las secciones detalladas de esta documentación.

Ampliar el diseño

En el siguiente ejemplo, se ha llenado las dos columnas con un módulo Imagen y un módulo Texto respectivamente.

Se ha definido correctamente una sección, con una fila, con módulos en dos columnas. Puede acceder a las opciones de cualquiera de los elementos al hacer clic en el icono menú (), o borrarlas al hacer clic en el icono cerrar (). También tiene la posibilidad de duplicar la sección, haciendo clic en el icono clonar (). Para ampliar el diseño puede agregar una sección a la página, una fila a la sección existente, o un módulo a una columna existente.

A partir de Divi 2.4 se puede cambiar fácilmente la estructura de columnas en cualquier fila del diseño al hacer clic en el icono columnas (). Las columnas de estas filas se ajustan al instante; los módulos que están dentro de ellas se adaptan y se colocan en las columnas disponibles o se eliminan de aquellas que ya no existen. Ya no es necesario crear una nueva fila y arrastrar cada módulo para cambiar una estructura.

Añadir secciones de ancho completo y secciones especiales

Debajo de cada sección están las opciones Sección estándar, Sección de ancho completo, Sección especial y Añadir de la biblioteca. Las secciones de ancho completo se destacan por no tener filas. Debido a esto, solo se pueden llenar con módulos de ancho completo. Las secciones de ancho completo se definen visualmente con el panel lateral en color morado, y pueden colocarse en cualquier parte del diseño. En el siguiente ejemplo, se ha agregado una sección de ancho completo con un Carrusel de ancho completo y una Sección especial con dos barras laterales.

Modificar y reorganizar el diseño

Editar un diseño es muy fácil al emplear la característica de arrastrar y soltar. Si desea mover una sección arriba o abajo de otra, simplemente haga clic sobre el bloque, y manteniendo presionado arrástrelo a la ubicación que prefiera. Lo mismo puede hacer con las filas y los módulos. Hasta pueda mover filas de una sección a otra, y módulos de una columna a otra. La única limitación es que no puede mover Módulos de ancho completo a las secciones normales y no puede mover los módulos normales a las Secciones de ancho completo.

En el siguiente ejemplo, podrá ver que se ha movido la sección de ancho completo a la parte superior del diseño, y se coloco la sección especial entre las dos secciones existentes.

¡Guarde y publique!

Una vez que ha terminado de construir el diseño, haga clic en el botón Publicar (o Actualizar, si se encontraba editando una página creada anteriormente) del panel de la derecha. Quedará encantado con los resultados.

Volver al Editor predeterminado

Si regresa al editor de páginas predeterminado, verá un mensaje de advertencia de que todo el contenido creado con el constructor se perderá, y el contenido previo será restaurado. Como resguardo, WordPress guarda todas las versiones de las actualizaciones que haya publicado, y también puede guardar el diseño creado antes de volver al editor predeterminado. Vea la sección Guardar en la biblioteca.

Únete a 401.632 clientes felices y obtén acceso a la colección completa de Elegant Themes de 87 bellos temas por el precio de uno

Elegant Themes ofrece una garantía de devolución de dinero de 30 días, por lo que unirse es libre de riesgo!

 

Regístrate Hoy

Pin It on Pinterest

Share This
Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.