You are on page 1of 225

Confeccionada y traducida por Ana Ayeln Martnez caribdis.

net Pgina: 1
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Divi 3 por Elegant Themes - Documentacin
elegantthemes.com

Copyright 2016
Todos los derechos reservados

Se distribuye bajo una Licencia Creative Commons Reconocimiento 4.0


Internacional.

Publicada en octubre de 2016 por Ana Ayeln Martnez


Primera traduccin: julio de 2014
ltima revisin: marzo de 2017
caribdis.net
caribdisweb@gmail.com

Descargar archivos de traduccin aqu.

Versin: 1.3 para Divi 3.0.35+

N. de. T.: Esta documentacin contiene algunos trminos en su idioma original,


debido a que no estn disponibles para traducir en los archivos de localizacin
incluidos en el tema.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 2


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
ndice
Un vistazo al constructor..........................................................11
Secciones.................................................................................................11
Filas..........................................................................................................11
Mdulos...................................................................................................11
Comenzar................................................................................................12
Opciones de diseo del constructor....................................................13
Guardar en la biblioteca....................................................................................................13
Cargar de la biblioteca.......................................................................................................13
Limpiar diseo....................................................................................................................13
Opciones de seccin..............................................................................14
Aadir y definir una fila.........................................................................17
Aadir un mdulo..................................................................................18
Ampliar el diseo....................................................................................20
Aadir secciones de ancho completo y secciones especiales..........20
Modificar y reorganizar el diseo........................................................21
Guarde y publique!................................................................................22
Volver al Editor predeterminado..........................................................23
Usar el constructor visual.........................................................25
Activar el constructor visual..................................................................26
Las bases del constructor de Divi.........................................................27
Secciones.............................................................................................................................27
Filas.......................................................................................................................................27
Mdulos...............................................................................................................................28
Construir la primera pgina..................................................................28
Aadir la primera seccin.....................................................................28
Aadir la primera fila.............................................................................29
Aadir el primer mdulo.......................................................................29
Configurar y personalizar secciones, filas y mdulos.......................30
Guardar la pgina y acceder a los ajustes de pgina........................31
Arranque el diseo desde plantillas....................................................32
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 3
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Guardar sus propios diseos en la biblioteca....................................32
Atajos de teclado.......................................................................34
Cortar, Copiar y Pegar............................................................................34
Copiar y pegar estilos en mdulos existentes....................................34
Arrastrar y Copiar...................................................................................34
Deshacer y Rehacer...............................................................................34
Ajustar el ancho de separacin y de las filas......................................35
Cambiar la estructura de columnas.....................................................35
Reflejar valores de relleno mientras arrastra.....................................35
Ajustar el relleno de filas y secciones..................................................35
Aadir contenido nuevo........................................................................36
Bloquear y Desactivar............................................................................36
Guardar y Publicar.................................................................................36
Salir del constructor visual y volver al constructor............................36
Alternar ajustes con una tecla..............................................................36
Alternar la expansin de ventana modal............................................37
Acercar y alejar las vistas previas en modo adaptable.....................37
Cambiar de pestaa y alternar columnas...........................................37
Doble clic para abrir los ajustes del mdulo......................................37
Lista de todos los atajos de teclado.....................................................37
Atajos de pgina.................................................................................................................37
Atajos del editor en lnea...................................................................................................38
Atajos de mdulo................................................................................................................38
Atajos de ventana modal...................................................................................................39
Atajos en el constructor original..........................................................39
Atajos de pgina.................................................................................................................39
Atajos de mdulo................................................................................................................40
Atajos de ventana modal...................................................................................................40

Usar diseos predefinidos.......................................................41


Dnde encontrarlos...............................................................................41
Lista de diseos predefinidos...............................................................41

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 4


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Cargar un diseo predefinido...............................................................42
Flexibilidad..............................................................................................45
La biblioteca de Divi..................................................................48
Qu es la biblioteca de Divi?................................................................48
Guardar elementos nuevos en la biblioteca.......................................48
Crear y administrar elementos en la biblioteca.................................50
Aadir elementos de la biblioteca a una pgina................................51
Mdulos, filas y secciones globales de Divi............................52
Qu es un elemento global de la biblioteca?....................................52
Crear un nuevo elemento global de la biblioteca..............................52
Mdulos globales y sincronizacin selectiva......................................54
Importar y Exportar elementos de la biblioteca de Divi.......57
El sistema de portabilidad.....................................................................57
Exportar elementos de la biblioteca....................................................57
Importar elementos de la biblioteca...................................................60
Exportar diseos individuales de Divi.................................................60
Importar diseos individuales de Divi.................................................61
Personalizador de tema y personalizador de mdulo..........62
Acceder al personalizador de tema y personalizador de mdulo...62
Explorando el personalizador de tema...............................................62
Explorando el personalizador de mdulo..........................................63
Ajustes del personalizador de tema........................................64
Ajustes generales...................................................................................64
Ajustes de diseo................................................................................................................64
Tipografa.............................................................................................................................65
Fondo...................................................................................................................................66
Cabecera y navegacin..........................................................................66
Formato de cabecera.........................................................................................................67
Barra de men primario....................................................................................................68
Barra de men secundario...............................................................................................68
Ajustes de navegacin fija.................................................................................................69

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 5


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Elementos de cabecera......................................................................................................70
Pie de pgina...........................................................................................70
Diseo..................................................................................................................................71
Widgets................................................................................................................................72
Elementos de pie de pgina..............................................................................................72
Men del pie de pgina.....................................................................................................73
Barra inferior.......................................................................................................................73
Estilos para mviles...............................................................................74
Tablet....................................................................................................................................74
Telfono...............................................................................................................................75
Men para mviles.............................................................................................................75
Botones....................................................................................................76
Estilo de botones................................................................................................................77
Estilo al posar el ratn.......................................................................................................77

Ajustes del personalizador de mdulo...................................79


Usar los controles del personalizador.................................................79
Opciones del tema....................................................................81
Ajustes generales...................................................................................82
Navegacin > Pginas............................................................................84
Navegacin > Categoras.......................................................................85
Navegacin > Ajustes generales...........................................................86
Ajustes de diseo > Diseo de entrada...............................................87
Ajustes de diseo > Diseo de pgina.................................................87
Ajustes de diseo > Ajustes generales................................................88
Publicidad................................................................................................89
SEO > SEO de Home...............................................................................90
SEO > SEO de pgina o entrada...........................................................92
SEO > SEO de pgina ndice..................................................................94
Integracin..............................................................................................95
Actualizaciones.......................................................................................96
Un vistazo a las secciones de Divi............................................98
Las secciones son los elementos organizativos ms grandes.........98

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 6


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar secciones de ancho completo.....................................................98
Usar secciones especiales...................................................................100
Filas y opciones de filas de Divi.............................................103
Ajustes generales.................................................................................103
Ajustes de diseo avanzado...............................................................105
CSS personalizado................................................................................107
Probemos algunos ajustes..................................................................109
Ajustes de diseo avanzado y CSS personalizado...............112
Ajustes de diseo avanzado...............................................................112
CSS personalizado................................................................................113
El editor de perfil.....................................................................115
Controle todo lo que pueden hacer los usuarios dentro del
constructor............................................................................................115
Privilegios del tema a nivel superior..................................................115
Interfaz del constructor.......................................................................116
Ajustes de la biblioteca........................................................................116
Pestaas de ajustes.............................................................................117
Tipos de ajustes....................................................................................117
Uso de mdulos...................................................................................118
Portabilidad...........................................................................................119
Control con clic derecho.........................................................121
Acceso rpido a las funciones del constructor de Divi...................121
Renombrar............................................................................................121
Guardar en la biblioteca......................................................................122
Deshacer y Rehacer.............................................................................122
Desactivar..............................................................................................122
Bloquear................................................................................................123
Contraer y Expandir.............................................................................124
Copiar y Pegar......................................................................................125
Vista previa............................................................................................126

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 7


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Los Mdulos.............................................................................128
Anuncio breve.......................................................................................128
Carrusel.................................................................................................130
Tabla de precios...................................................................................134
Testimonio............................................................................................135
Llamado a la accin (CTA, por Call To Action)..................................137
Imagen...................................................................................................138
Galera....................................................................................................139
Barra lateral..........................................................................................141
Portfolio.................................................................................................142
Blog........................................................................................................143
Barras de progreso..............................................................................144
Suscripcin............................................................................................146
Configuracin en panel de opciones del tema.............................................................146
Configuracin del mdulo...............................................................................................146
Texto......................................................................................................148
Conmutador..........................................................................................149
Pestaas................................................................................................149
Formulario de contacto.......................................................................150
Encabezado de ancho completo........................................................152
Portfolio por filtros...............................................................................154
Audio......................................................................................................155
Mapa......................................................................................................156
Ajustes generales del mdulo........................................................................................157
Ajustes de marcador individual......................................................................................157
Redes sociales.......................................................................................158
Ajustes generales del mdulo........................................................................................158
Ajustes de botones individuales.....................................................................................159
Persona..................................................................................................159
Cuenta regresiva..................................................................................160
Contador circular.................................................................................161

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 8


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Contador numrico..............................................................................162
Acorden...............................................................................................163
Ajustes bsicos del mdulo............................................................................................164
Ajustes de elementos del mdulo.................................................................................164
Inicio de sesin.....................................................................................164
Men de ancho completo...................................................................166
Portfolio de ancho completo..............................................................167
Mapa de ancho completo...................................................................168
Ajustes generales del mdulo........................................................................................169
Ajustes de marcador individual......................................................................................169
Tienda....................................................................................................169
Separador..............................................................................................171
Carrusel de ancho completo..............................................................171
Vdeo......................................................................................................175
Carrusel de vdeo.................................................................................177
Ajustes de vdeo individual.............................................................................................178
Cdigo....................................................................................................178
Ttulo de entrada..................................................................................179
Carrusel de entradas...........................................................................181
Comentarios.........................................................................................183
Navegacin de entradas.....................................................................184
Botn.....................................................................................................185
Buscar....................................................................................................186
Caractersticas adicionales.....................................................188
Cargar una imagen para el logo.........................................................188
Crear proyectos para el Portfolio.......................................................188
Crear un proyecto................................................................................189
Usar Mega Mens................................................................................192
Formatos de entrada de blog.............................................................196
Usar el formato de entrada Vdeo.................................................................................197
Usar el formato de entrada Audio.................................................................................197
Usar el formato de entrada Cita.....................................................................................198

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 9


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar el formato de entrada Galera...............................................................................198
Usar el formato de entrada Enlace................................................................................199
Traducir su sitio....................................................................................199
Crear pginas en blanco.....................................................................200
Activar la plantilla Blank Page.........................................................................................200

Sitios de una sola pgina........................................................202


Activar el navegador de pgina nica...............................................202
Crear enlaces personalizados en el men para los sitios de una sola
pgina....................................................................................................203
Apuntar un enlace del men a una ID..............................................204
Divi Leads: sistema de pruebas multivariable.....................206
Qu es Divi Leads?..............................................................................206
De qu tratan las pruebas multivariable?.......................................206
Comenzar la primera prueba.............................................................208
Elegir el sujeto de prueba...................................................................209
Seleccionar el objetivo.........................................................................210
Ver los resultados de las pruebas......................................................210
Finalizar una prueba multivariable....................................................212
Opciones adicionales...........................................................................213
Seguimiento de cdigo abreviado para objetivos externos a la
pgina....................................................................................................215
Cmo instalar el tema.............................................................217
Descargar el tema................................................................................217
Subir el tema en el administrador de WordPress............................218
Cmo actualizar su tema........................................................220
Notificaciones de actualizacin..........................................................220
Autenticar su membresa....................................................................221
Usar el plugin Elegant Updater..........................................................223
Autenticar su membresa................................................................................................225

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 10


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Un vistazo al constructor
Divi es un tema nico de nuestra coleccin. A diferencia de cualquier otro tema
Elegant, Divi est constituido sobre la plataforma de un constructor de pginas
que hemos diseado y desarrollado desde cero. Al usar el constructor, que le
permite arrastrar y soltar mdulos, puede crear hermosos diseos con facilidad,
y controlar cada parte de su sitio.
El constructor usa tres bloques principales: las secciones, las filas y los mdulos. Si
emplea estas tres herramientas al mismo tiempo, puede crear una incontable
cantidad de diseos de pginas. La jerarqua bsica de estos bloques es la
siguiente:

Secciones
Los bloques ms bsicos y de mayor tamao para usar en el diseo 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 mdulos de ancho completo. Sepa ms sobre las filas y los mdulos a
continuacin.

Filas
Las filas se encuentran dentro de las secciones, y usted puede llenar cada seccin
con un nmero ilimitado de filas. Hay varios tipos de fila entre los que puede
elegir. Una vez que defina el tipo de fila, puede llenarla con mdulos en la
columna que seleccione. No hay lmite para la cantidad de mdulos que puede
incluir dentro de una columna.

Mdulos
Los mdulos son los elementos visuales que componen su sitio. Cada mdulo de
Divi puede entrar en cualquier ancho de columna, y estas son de diseo
adaptable (responsive).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 11


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Comenzar
Luego de crear una pgina nueva, ver la ventana convencional de pgina de
WordPress. Cuando use Divi, ver un botn morado Usar el constructor de Divi. Al
hacer clic en este botn activar el constructor de pginas y aparecer la pantalla
de inicio del constructor.

Nota: si la pgina ya tiene contenido, este ser reemplazado de manera


predeterminada por una seccin con una columna y un mdulo Texto. Si usted
desea separar ese contenido en distintos mdulos, deber colocarlo
manualmente en mdulos individuales.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 12


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Opciones de diseo del constructor
Guardar en la biblioteca
En cualquier momento puede guardar en la biblioteca un diseo que haya
creado. Esta opcin es genial para usar el mismo diseo en otra pgina, en otra
seccin de pgina, o incluso en otro sitio creado con Divi. Para ms informacin
sobre cmo usar la Biblioteca de Divi, vea La Biblioteca de Divi. Tambin 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 diseo que ya haya
creado. Divi tambin incluye docenas de diseos predefinidos que se aaden a la
biblioteca al momento de instalar el tema. Cargar uno de estos diseos
predefinidos es un buen punto de partida para crear un sitio con Divi. Al cargar
un diseo, tendr la opcin de seleccionar desde una serie de diseos
predefinidos de Divi, o cualquier diseo que haya guardado o importado.

Limpiar diseo
Si en algn momento desea volver a empezar, simplemente haga clic en el botn
Limpiar diseo. Esto eliminar todo lo que haya construido en la pgina y as
podr empezar de cero.
Debajo de estos tres botones est el diseo del constructor de Divi. Aqu es
donde aadir secciones, filas y mdulos a su pgina para poder construir el
diseo. Cuando active el constructor de Divi, todo lo que ver ser una seccin
vaca, como la que se muestra en la siguiente imagen.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 13


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Opciones de seccin
Cada vez que aada una seccin, deber definir sus propiedades. Al hacer clic en
el icono de men en la parte superior del fondo lateral azul del panel ( ), se
abrirn los Ajustes del mdulo Seccin. Asegrese de ver la documentacin
detallada sobre las secciones de Divi para saber cmo funcionan estos ajustes y
cmo puede usarlos de la manera ms creativa.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 14


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 15
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Imagen de fondo Si es definida, esta imagen se usar como fondo para
este mdulo. Para quitar la imagen de fondo, simplemente borre la URL del
campo de configuracin. Las imgenes de fondo en una Seccin abarcan el
ancho completo del navegador, por lo tanto recomendamos que las
imgenes tengan al menos 1080 pxeles de ancho.
Color de fondo transparente Use esta opcin si necesita un color de
fondo transparente para la seccin.
Color de fondo Si tan solo desea usar un color plano como fondo de
seccin, use el selector de color para definir uno.
Vdeo MP4 de fondo Todos los vdeos deben ser subidos en formato .MP4
o .WEBM para asegurarse mxima compatibilidad con todos los
navegadores. Suba la versin .MP4 aqu. Nota importante: Los vdeos de
fondo se desactivan en dispositivos mviles. En su lugar, se utiliza una
imagen de fondo. Por esta razn, debera definir ambos fondos, imagen y
vdeo, para asegurarse mejores resultados. Nota importante: para que el
formato de vdeo MP4 funcione en todos los navegadores, su servidor debe
tener designados los tipos MIME correctos. Puede aprender ms sobre cmo
usar el archivo .htaccess para definir los tipos MIME aqu. Si nota que sus vdeos
no se reproducen en ciertos navegadores, es probable que esta sea la razn.
Vdeo WEBM de fondo Todos los vdeos deben ser subidos en formato
.MP4 o .WEBM para asegurarse mxima compatibilidad con todos los
navegadores. Suba la versin .WEBM aqu. Nota importante: Los vdeos de
fondo se desactivan en dispositivos mviles. En su lugar, se utiliza una
imagen de fondo. Por esta razn, debera definir ambos fondos, imagen y
vdeo, para asegurarse mejores resultados. Nota importante: para que el
formato de vdeo WEBM funcione en todos los navegadores, su servidor debe
tener designados los tipos MIME correctos. Puede aprender ms sobre cmo
usar el archivo .htaccess para definir los tipos MIME aqu. Si nota que sus vdeos
no se reproducen en ciertos navegadores, es probable que esta sea la razn.
Ancho del vdeo de fondo Para que los vdeos se muestren
correctamente, debe introducir el ancho exacto (en pxeles) del vdeo aqu.
Alto del vdeo de fondo Para que los vdeos se muestren correctamente,
debe introducir el alto exacto (en pxeles) del vdeo aqu.
Pausar vdeo Para que el vdeo sea pausado en el momento en que otros
reproductores usados en el mdulo comiencen a reproducir.
Mostrar sombra interior Aqu puede seleccionar si la seccin mostrar
una sombra interior o no. Esto puede lucir mejor si usa colores o imgenes
de fondo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 16


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar efecto Parallax Si se activa, la imagen de fondo permanecer fija al
desplazar la pgina. Tenga en cuenta que al activar esta opcin, las
imgenes se escalarn a la altura del navegador. NOTA: si activa el efecto
Parallax, recomendamos que sus imgenes sean del tamao de un monitor
estndar, ya que las imgenes tomarn el ancho o el alto de la ventana del
navegador (por ejemplo 1280 x 768 pxeles).
Mantener relleno personalizado en dispositivos mviles Permite que
el relleno personalizado se retenga al ver la pgina desde un dispositivo
mvil.
Desactivar en Seleccione el dispositivo en el cual desea desactivar la
seccin.

Aadir y definir una fila


Luego de guardar los ajustes de la seccin, 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 tambin tienen muchas opciones para
personalizar la apariencia y alterar la estructura del diseo. Si desea saber ms
sobre las opciones que ofrecen las filas, vea la seccin Filas y opciones de filas de
esta documentacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 17


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Aadir un mdulo
Una vez que ha seleccionado el tipo de fila, se le pedir insertar mdulos. En el
ejemplo a continuacin hemos agregado una fila de dos columnas.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 18


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Cada vez que quiera insertar un mdulo, deber hacer clic en el enlace Insertar
mdulo/s y seleccionar uno de la lista. Una vez que haya seleccionado el mdulo,
aparecern las respectivas opciones en una ventana modal. Cada mdulo tiene
un propsito distinto, as como tambin distintas opciones. Para saber ms
sobre cada mdulo individual, asegrese de revisar las secciones detalladas de
esta documentacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 19


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ampliar el diseo
En el siguiente ejemplo, hemos llenado las dos columnas con un mdulo Imagen
y un mdulo Texto respectivamente.

Se ha definido correctamente una seccin, con una fila, con mdulos 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 ( ).
Tambin tiene la posibilidad de duplicar la seccin, haciendo clic en el icono
clonar ( ). Para ampliar el diseo puede agregar una seccin a la pgina, una
fila a la seccin existente, o un mdulo a una columna existente.
A partir de Divi 2.4 se puede cambiar fcilmente la estructura de columnas en
cualquier fila del diseo al hacer clic en el icono columnas ( ). Las columnas de
estas filas se ajustan al instante; los mdulos que estn 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 mdulo
para cambiar una estructura.

Aadir secciones de ancho completo y secciones


especiales
Debajo de cada seccin estn las opciones Seccin estndar, Seccin de ancho
completo, Seccin especial y Aadir de la biblioteca. Las secciones de ancho
completo se destacan por no tener filas. Debido a esto, solo se pueden llenar
con mdulos 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 diseo. En el siguiente ejemplo, hemos agregado a nuestro
diseo una seccin de ancho completo con un Carrusel de ancho completo y una
Seccin especial con dos barras laterales.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 20


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Modificar y reorganizar el diseo
Editar un diseo es muy fcil al emplear la caracterstica de arrastrar y soltar. Si
desea mover una seccin arriba o abajo de otra, simplemente haga clic sobre el
bloque, y manteniendo presionado arrstrelo a la ubicacin que prefiera. Lo
mismo puede hacer con las filas y los mdulos. Hasta puede mover filas de una
seccin a otra, y mdulos de una columna a otra. La nica limitacin es que no
puede mover Mdulos de ancho completo a las secciones normales y no puede
mover los mdulos normales a las Secciones de ancho completo.
En el siguiente ejemplo, podr ver que hemos movido la seccin de ancho
completo a la parte superior del diseo, y colocamos la seccin especial entre las
dos secciones existentes.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 21


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Guarde y publique!
Una vez que ha terminado de construir el diseo, haga clic en el botn Publicar (o
Actualizar, si se encontraba editando una pgina creada anteriormente) del panel
de la derecha. Quedar encantado con los resultados.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 22


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Volver al Editor predeterminado
Si regresa al editor de pginas 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 tambin puede guardar el diseo
creado antes de volver al editor predeterminado. Vea la seccin Guardar en la
biblioteca.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 23


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 24
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar el constructor visual
El constructor de Divi se presenta en dos formas: el constructor estndar de la
interfaz de administracin y el Constructor visual. Ambas interfaces le permiten
construir el mismo tipo de sitios web, con los mismos elementos y ajustes de
diseo para el contenido. La nica diferencia es la interfaz. El constructor
estndar reside en el administrador de WordPress y se puede acceder a l como
a cualquier otro ajuste de WordPress: reemplaza el editor de entradas y pginas
predeterminado. Es muy bueno para hacer cambios rpidos mientras se
encuentra dentro del escritorio, pero tambin est limitado ya que se visualiza
como una representacin del sitio web basada en bloques. Este tutorial se
enfocar ms en el constructor visual, as que si desea saber ms sobre el
constructor original, visite esta seccin.

El flamante constructor visual, por otro lado, le permite crear pginas desde la
interfaz de usuario. Es una experiencia asombrosa y ofrece un proceso de diseo
mucho ms rpido. Cuando aade contenido o ajusta las opciones de diseo
dentro del constructor visual, los cambios se ven de forma instantnea. Puede
hacer clic en la pgina y comenzar a escribir. Puede resaltar texto y ajustar la
fuente y el estilo. Puede agregar contenido nuevo, construir la pgina y observar
cmo todo sucede ante sus ojos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 25


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Activar el constructor visual
Si ha iniciado sesin en WordPress, puede navegar hacia cualquier pgina del
sitio en la interfaz de usuario y hacer clic en el botn Activar constructor visual de
la barra de herramientas.
Si est editando una pgina en la interfaz de administracin, puede cambiar al
constructor visual haciendo clic en el botn azul Usar constructor visual que se
encuentra en la parte superior del constructor de Divi (tenga en cuenta que
antes deber haber activado el constructor de Divi para que el botn azul
aparezca).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 26


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Las bases del constructor de Divi
El poder de Divi est en el constructor, una herramienta arrastrar y soltar que
le permite crear casi cualquier tipo de sitio al combinar y ordenar elementos del
contenido.
El constructor usa tres bloques principales: secciones, filas y mdulos. Al
emplear estos tres al unsono podr crear incontables diseos de pginas. Las
secciones son los bloques de construccin ms grandes, y albergan un grupo de
filas; las filas se colocan dentro de las secciones y se usan para contener
mdulos, y los mdulos van dentro de las filas: esta es la estructura de todo sitio
web hecho con Divi.
Repasemos los conceptos:

Secciones
Los bloques ms bsicos y de mayor tamao para usar en el diseo 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 mdulos de ancho completo. Sepa ms sobre las filas y los mdulos a
continuacin.

Filas
Las filas se encuentran dentro de las secciones, y usted puede llenar cada seccin
con un nmero ilimitado de filas. Hay varios tipos de fila entre los que puede
elegir. Una vez que defina el tipo de fila, puede llenarla con mdulos en la

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 27


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
columna que seleccione. No hay lmite para la cantidad de mdulos que puede
incluir dentro de una columna.

Mdulos
Los mdulos son los elementos visuales que componen su sitio. Cada mdulo de
Divi puede entrar en cualquier ancho de columna, y estas son de diseo
adaptable (responsive).

Construir la primera pgina


Los tres bloques bsicos de construccin (secciones, filas y mdulos) se usan
para construir las pginas.

Aadir la primera seccin


Antes de poder agregar algo a la pgina, tendr que aadir una seccin. Las
secciones se pueden agregar haciendo clic en el botn azul ( ). Cuando pose el
ratn sobre una seccin que ya existe, un botn azul aparecer debajo. Si se
hace clic en el botn, se aadir debajo una nueva seccin.
Si est comenzando una pgina de cero, la primera seccin estar presente de
manera automtica.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 28


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Aadir la primera fila
Despus de que haya agregado la primera seccin, puede comenzar a aadir
filas y columnas. Una seccin puede contener un nmero indefinido de filas, y
puede mezclar y combinar filas de varios tipos de columnas con una gran
variedad de diseos.
Para aadir una fila, haga clic en el botn verde ( ) de una seccin vaca, o haga
clic en el botn verde que aparece al posar el puntero del ratn sobre cualquier
fila ya creada. Una vez que haya hecho clic en el botn verde, aparecer una lista
de tipos de columnas. Elija el que desee y as estar listo para aadir el primer
mdulo.

Aadir el primer mdulo


Los mdulos se pueden agregar dentro de las filas, y cada fila puede contener un
nmero indefinido de mdulos. Los mdulos son elementos de contenido
dentro de la pgina, y Divi incluye 40 elementos distintos con los que puede

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 29


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
construir. Puede usar mdulos bsicos como el de Texto, Imagen o Botn, o
mdulos ms avanzados como Carruseles, Galera y Tienda. Existen tutoriales
individuales para cada mdulo de Divi, as que si desea saber ms sobre los tipos
de mdulos disponibles, asegrese de visitar la seccin Los Mdulos.
Para agregar el primer mdulo haga clic en el botn gris ( ) que se encuentra
dentro de cualquier columna vaca, o el botn que se ve al posar el puntero del
ratn sobre un mdulo de la pgina. Una vez que haya hecho clic en el botn
gris, aparecer la lista de mdulos. Elija el que desee, el cual se agregar a la
pgina y mostrar el panel de ajustes desde donde podr configurar el mdulo.

Configurar y personalizar secciones, filas y mdulos


Cada seccin, fila y mdulo puede ser personalizado de distintas maneras.
Puede acceder al panel de ajustes de un elemento haciendo clic en el icono del
engranaje que aparece al posar el puntero del ratn sobre cualquier elemento
de la pgina.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 30


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Esto lanzar el panel de ajustes para el elemento especfico. Cada panel de
ajustes se divide en tres pestaas: General, Diseo y CSS. Como ya es sabido, todo
lo necesario para construir un gran sitio est en la pestaa General. Aqu puede
hacer cosas tales como ajustar el contenido y diseo del mdulo, y hasta aplicar
algunas opciones bsicas de diseo como el color de la fuente y del fondo. Si
necesita un control adicional sobre el diseo, puede ir a la pestaa Diseo. All
podr personalizar absolutamente todo. Para un vistazo ms profundo sobre
esta pestaa, visite el tutorial sobre diseo avanzado.
Finalmente, si desea ms control puede ir a la pestaa CSS y aplicar CSS
personalizado a cualquier parte del mdulo.

Guardar la pgina y acceder a los ajustes de pgina


Para acceder a los ajustes generales de la pgina, haga clic en el botn morado
de la parte inferior de la pantalla. Esto ampliar la barra de ajustes y le
proporcionar varias opciones. Puede abrir los ajustes de pgina con un clic en
el icono del engranaje, y all podr ajustar elementos tales como el color de
fondo de la pgina y el color del texto. Tambin encontrar los botones Guardar
y Publicar, as como los alternadores de vista para dispositivos mviles.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 31


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Arranque el diseo desde plantillas
Una manera muy buena de comenzar una pgina nueva es arrancar desde una
plantilla. Divi ofrece 20 diseos predefinidos que cubren la variedad de tipos de
pgina ms comunes, tales como Quines somos, Contacto, Blog, Portfolio,
etc. Puede cargar esas plantillas y reemplazar el contenido de demostracin con
el suyo propio. La pgina nueva estar terminada antes de que pueda darse
cuenta! Para saber ms sobre los diseos predefinidos, asegrese de visitar la
seccin correspondiente de esta documentacin.

Guardar sus propios diseos en la biblioteca


Adems de poder usar los diseos predefinidos que incluye Divi, tambin puede
guardar sus propias creaciones en la biblioteca. Cuando se guarda un diseo de
Divi en la biblioteca, se puede cargar en pginas nuevas. Cuanto ms haga crecer
la biblioteca con sus diseos favoritos, ms rpido podr crear nuevos sitios.
Para saber ms sobre la biblioteca de Divi, asegrese de visitar la seccin
correspondiente de esta documentacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 32


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Para guardar un elemento en la biblioteca haga clic en el icono que aparece en la
barra de ajustes del elemento al posar el puntero del ratn.

Perfecto, ya tiene lo bsico, y ahora es hora de empezar a disear!


Ha aadido sus primeras secciones, filas y mdulos a la pgina; ha ajustado las
opciones y comenzado a construir y personalizar su diseo: ya tiene lo bsico,
pero hay mucho ms por aprender. Tenemos decenas de tutoriales que abarcan
cada aspecto de Divi. Lo animamos a seguir leyendo cada uno de los captulos de
esta documentacin. Cuando termine, ser un maestro de Divi.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 33


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Atajos de teclado
Casi todo en el constructor visual se puede activar mediante atajos de teclado.
Aquello que comnmente tomara dos, tres, cuatro y hasta cinco clics, se podr
logar con un par de combinaciones de teclas. Se puede cortar, copiar, pegar,
aadir contenido nuevo, ajustar columnas, cambiar el relleno y ms, sin siquiera
abrir el panel de ajustes. Con los atajos de teclado se podrn construir pginas
ms rpido y de manera ms eficiente.

Cortar, Copiar y Pegar


Probablemente ya est acostumbrado a estos atajos, y ahora funcionan en el
Constructor de Divi de la forma en que se espera. Coloque el puntero sobre un
mdulo y presione Ctrl + C para copiarlo, o Ctrl + X para cortarlo (lo copia y lo
elimina de la pgina). Una vez que un mdulo, una fila o una seccin se han
copiado, simplemente pose el puntero sobre el lugar donde quiere pegarlo y
presione Ctrl + V.

Copiar y pegar estilos en mdulos existentes


No solo se pueden copiar y pegar mdulos enteros, tambin se pueden copiar
estilos de un mdulo y pegarlos en otro. Esta es una nueva caracterstica que
creemos le encantar. Digamos que tiene una pgina con ocho mdulos Anuncio
breve y decide que quiere actualizar los colores y estilos de fuente. Simplemente
personalice uno de los mdulos, acrquele el puntero y presione Ctrl + Alt + C
para copiar los estilos. Esto copiar todas las personalizaciones que tenga en ese
mdulo. Lleve el puntero a otro mdulo Anuncio breve y presione Ctrl + Alt + V
para pegar los estilos. El mdulo se actualizar para lucir exactamente igual al
mdulo cuyos estilos ha copiado, pero mantendr su propio contenido.

Arrastrar y Copiar
Tambin puede copiar un mdulo en una nueva ubicacin, manteniendo
presionada la tecla Alt mientras lo desplaza. Esto copiar el mdulo en la nueva
ubicacin donde lo solt.

Deshacer y Rehacer
La posibilidad de deshacer y rehacer en el constructor es una verdadera
salvacin, y es increblemente fcil cuando se usan atajos de teclado. Si no
qued conforme con un cambio que haya hecho, simplemente presione Ctrl + Z
para revertirlo. Si se arrepiente, presione Ctrl + Y o Cmd + Shift + Z para rehacer el
cambio que acaba de deshacer.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 34


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustar el ancho de separacin y de las filas
Ajustar el ancho de fila o de separacin es algo que nuestros usuarios hacen
constantemente, y ahora con los atajos de teclado podr hacer esos ajustes de
forma instantnea sin siquiera abrir el panel de ajustes de la fila. Para hacer una
fila de ancho completo, simplemente coloque el puntero sobre ella y presione R
+ F. Para ajustar el ancho de separacin, coloque el puntero sobre la fila y
presione G + 1 / 2 / 3 / 4. Por ejemplo, puede crear una grilla de imgenes en
ancho completo, sin separacin, presionando R + F y G + 1.

Cambiar la estructura de columnas


Ahora tambin puede cambiar la estructura de columnas de forma instantnea.
Simplemente coloque el puntero sobre una fila y presione C + 1 / 2 / 3 / 4, etc.
para alternar entre cualquiera de las once estructuras disponibles. Tambin
puede abrir la ventana de informacin Cambiar columna y presionar Shift + Tab
para pasar a cada uno de los tipos de columna de la lista.

Reflejar valores de relleno mientras arrastra


Una de las caractersticas ms geniales del constructor visual es la posibilidad de
arrastrar para aumentar o disminuir los valores de relleno de una fila o seccin.
Hemos aadido algunas combinaciones de teclas diferentes para hacer ms til
el control de relleno. Al presionar Shift mientras arrastra, limitar a un valor de
10 en 10 para el incremento en la altura o el ancho. De esta manera, si desea
aumentar el relleno de una seccin a 100 pxeles, puede presionar la tecla Shift y
arrastrar directamente al valor correcto en un par de toques para que alcance el
salto en 10.
Tambin aadimos la posibilidad de reflejar los valores de relleno. Si arrastra el
relleno en un lado mientras presiona Shift + Alt, el relleno del lado opuesto se
actualizar para emparejarse con el lado que est ajustando. Asimismo puede
presionar Alt mientras arrastra, y se limitar la altura o el ancho del valor de
relleno actual para que no sea mayor que el relleno del lado opuesto. Es una
manera fcil de aumentar o disminuir rpidamente el relleno de cualquier lado
para que coincida exactamente con el valor del lado opuesto.

Ajustar el relleno de filas y secciones


Como alternativa a arrastrar para aumentar o disminuir los valores de relleno,
ahora puede usar las teclas de las flechas para un ajuste ms exacto de los
rellenos de filas y secciones. Si presiona S + Flechas, aumentar los valores de
relleno de la seccin contenedora de acuerdo con la flecha que presione. Si
presiona R + Flechas ajustar el relleno de la fila contenedora. Por ejemplo, al

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 35


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
pulsar S + aumentar el relleno superior de la seccin actual. Al pulsar R +
aumentar el relleno de la parte inferior de la seccin contenedora.
Tambin se pueden disminuir los valores de relleno, presionando las teclas S/R +
Alt + Flechas. Por ejemplo, al pulsar R + Alt + disminuir el valor de relleno
inferior de la fila contenedora.

Aadir contenido nuevo


Los atajos de teclado tambin existen para agregar nuevas filas y secciones. Al
presionar R + 1 / 2 / 3 / 4, etc. automticamente se aadir una fila nueva debajo
de la fila actual con el tipo de columna elegido. Por ejemplo, al pulsar R + 4 se
aadir una nueva fila con 4 columnas de a la pgina.
Lo mismo ocurre con las secciones. Aada cualquier tipo de seccin de Divi
(Estndar, Especial o Ancho completo) presionando S + 1 / 2 / 3.

Bloquear y Desactivar
Cualquier elemento de la pgina ahora se puede bloquear o desactivar,
simplemente llevando el puntero sobre ese elemento y presionando las teclas L
o D.

Guardar y Publicar
Los atajos de teclado estndar para guardar, Ctrl + S, ahora guardarn
automticamente la pgina mientras est en el constructor de Divi. Ni siquiera
necesita abrir la barra de ajustes de la pgina. Puede presionar Ctrl + Alt + S para
guardar la pgina como borrador, sin publicar.

Salir del constructor visual y volver al constructor


Ahora es fcil salir del constructor visual y alternar con el constructor original.
Para salir del constructor visual, simplemente presione Ctrl + E. Para salir del
constructor visual e ir directamente al constructor original, presione Ctrl + Shift +
E.

Alternar ajustes con una tecla


Los paneles de ajustes ms usados ahora se pueden abrir simplemente con
pulsar una tecla. Para alternar la barra de ajustes, presione T. Para abrir los
ajustes de pgina, presione O. Para abrir la ventana de informacin de
portabilidad, presione P. Para abrir el historial de revisiones, presione H.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 36


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Alternar la expansin de ventana modal
La interfaz del constructor visual es totalmente personalizable, en especial
cuando se trata de las ventanas de ajustes. Cuando tenga una ventana modal de
ajustes abierta, puede presionar Ctrl + Enter para llevarla a pantalla completa o
para minimizarla. Tambin puede llevar el panel a la derecha/izquierda de la
pantalla, presionando Ctrl + o Ctrl + para alternar entre ambos modos.

Acercar y alejar las vistas previas en modo adaptable


Ahora se puede alejar o acercar la vista en cada una de las vistas previas,
presionando Ctrl + - y Ctrl + +. Es una excelente manera de tener un vistazo
rpido de cmo se vern los cambios en los distintos dispositivos.

Cambiar de pestaa y alternar columnas


Ahora puede navegar rpidamente en las pestaas y opciones de las ventanas
modales. Cuando tenga abierta una ventana de ajustes, presione Shift + Tab para
ir a la siguiente pestaa, y presione Tab para navegar por los campos que
contiene cada pestaa. Tambin puede alternar entre cada diseo de columna,
pulsando Shift + Tab mientras est abierta la ventana de informacin Cambiar
estructura de columnas.

Doble clic para abrir los ajustes del mdulo


Ya no es necesario colocar el puntero sobre los iconos de un mdulo para abrir
el panel principal de ajustes. En lugar de hacer clic directamente sobre el icono
del engranaje, haga doble clic en cualquier parte del mdulo, fila o seccin para
abrir los ajustes.

Lista de todos los atajos de teclado


Si alguna vez necesita recordar todos los atajos, presione ? para obtener ayuda.
Aparecer una ventana modal con la lista completa de los atajos
correspondientes a Mac y Windows. Para casi todos los casos, la tecla Ctrl es
reemplazada por Cmd para Mac en la siguiente lista.

Atajos de pgina
Deshacer: b + Z

Rehacer: b + Y / cMD + j + Z

Guardar pgina: b + S

Guardar como borrador: b + j + S

Salir del constructor visual: b + E

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 37


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Volver al constructor original: b + j + E

Acercar pantalla: b + +

Alejar pantalla: b + -

Alternar barra de ajustes: T

Abrir ventana modal de ajustes de pgina: O

Abrir ventana modal del historial: H

Abrir ventana modal de portabilidad: P

Lista de todos los atajos: ?

Atajos del editor en lnea


Salir del editor en lnea: |

Atajos de mdulo
Copiar mdulo: b + C

Cortar mdulo: b + X

Pegar mdulo: b + V

Copiar ajustes de diseo del mdulo: a + b + C

Pegar ajustes de diseo del mdulo: a + b + V

Desactivar mdulo: D

Bloquear mdulo: L

Ajustar relleno de a 10px: j + Arrastrar

Reflejar ajustes de relleno: j + a + Arrastrar

Ajustar relleno al lado opuesto: a + Arrastrar

Copiar mdulo y arrastrar: a + Mover mdulo

Cambiar estructura de columnas: C + 1/2/3/4

Hacer fila de ancho completo: R + F

Cambiar ancho de separacin: G + 1/2/3/4

Aumentar relleno de fila: R + z/x/w/y

Aumentar relleno de fila de a 10px: j + R + z/x/w/y

Disminuir relleno de fila: a + R + z/x/w/y

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 38


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Disminuir relleno de fila de a 10px: a + j + R + z/x/w/y

Aadir nueva fila: R + 1 / 2 / 3 / 4

Aumentar relleno de seccin: S + z/x/w/y

Aumentar relleno de seccin de a 10px: j + S + z/x/w/y

Disminuir relleno de seccin: a + S + z/x/w/y

Disminuir relleno de seccin de a 10px: a + j + S + z/x/w/y

Aadir nueva seccin: S + 1/2/3


Abrir ajustes de mdulo: Doble clic en el mdulo

Atajos de ventana modal


Cerrar: |

Deshacer: b + Z

Rehacer: b + Y / cMD + j + Z

Guardar cambios: e

Cambiar a pestaa: j + v

Alternar expansin de ventana modal: b + e

Llevar a la izquierda: b + z

Llevar a la derecha: b + x

Atajos en el constructor original


No queramos aadir los nuevos atajos solo al constructor visual, sino que
tambin lo hemos hecho en el constructor original. Tambin hay algunos
nuevos, como Ctrl + P, que lanzar una vista previa en vivo de cualquier
elemento que est editando.

Atajos de pgina
Guardar pgina: b + S

Guardar pgina como borrador: b + j + S

Deshacer: b + Z

Rehacer: b + j + Z

Abrir historial: H

Abrir portabilidad: P

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 39


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Abrir ajustes de pgina: O

Atajos de mdulo
Cortar mdulo: b + X

Copiar mdulo: b + C

Pegar mdulo: b + V

Copiar mdulo y arrastrar: a + mover mdulo

Desactivar mdulo: D

Bloquear mdulo: L

Cambiar estructura de columnas: C + 1/2/3/4

Aadir nueva fila: R + 1/2/3/4

Aadir nueva seccin: S + 1/2/3


Abrir ajustes de mdulo: Doble clic en el mdulo

Atajos de ventana modal


Cerrar: |

Guardar cambios: e

Cambiar a pestaa: j + v

Vista previa del mdulo: b + P

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 40


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar diseos predefinidos
Dnde encontrarlos
Para comenzar, deber aadir una nueva pgina o proyecto y activar el
constructor. Dentro de las opciones de diseos del constructor, deber hacer clic
en el botn Cargar de la biblioteca. Divi incluye una gran variedad de diseos
predefinidos. Dado que presentan mdulos dispuestos previamente, y el
contenido de ejemplo ya cargado, son un buen punto de partida. La principal
mecnica de trabajo para usar los diseos predefinidos de Divi es reemplazar los
elementos existentes, como las imgenes y el texto, con su propio contenido
real.

Lista de diseos predefinidos


Esto le mostrar la lista completa de diseos predefinidos de Divi. Puede cargar
un diseo predefinido en una pgina en blanco, en un diseo existente, o
reemplazar el contenido ya creado.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 41


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Cargar un diseo predefinido
Al hacer clic en Cargar, se cargar en contenido del diseo predefinido dentro de
su pgina. A continuacin ver un ejemplo de un diseo predefinido dentro del
constructor y la manera en que se ver en la pgina una vez publicada.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 42


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 43
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Al reemplazar cada elemento de la pgina con su propio contenido podr tener
un hermoso sitio personalizado en cuestin de minutos. En este ejemplo
reemplazaremos el ttulo, la imagen y el botn del carrusel; el texto del banner,
los anuncios breves y el ttulo promocional para crear un sitio sobre viajes. Al
hacer clic en el icono men ( ) de cada bloque del constructor, puede acceder
a los ajustes del mdulo para personalizar cada elemento. Para ver ms detalles
sobre cmo editar elementos dentro del constructor, vea la seccin Un vistazo al

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 44


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
constructor. A continuacin est el resultado que podr obtener al usar este
diseo en particular.

Flexibilidad
La belleza de estos diseos est en que puede editarlos de la manera en que
desee. Por ejemplo, si le gusta este diseo en particular, pero no quiere un
Llamado a la accin en la parte inferior, simplemente borre el mdulo del

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 45


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
constructor! A continuacin ver en qu manera afecta esto a la apariencia del
diseo, tanto en el constructor como en la presentacin final de su sitio.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 46


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 47
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
La biblioteca de Divi
Qu es la biblioteca de Divi?
La biblioteca de Divi es la caja de herramientas principal para el diseo web. Aqu
puede almacenar sus diseos, secciones, filas o mdulos favoritos para uso
posterior. Cada vez que guarde un elemento en la biblioteca de Divi, podr
acceder fcilmente a l desde la ventana modal cuando aada a la pgina un
nuevo diseo, mdulo, seccin o fila. Ahorre horas de diseo al crear colecciones
de sus combinaciones preferidas de mdulos. Pas horas personalizando los
ajustes de diseo avanzado y el CSS personalizado de un mdulo para crear una
apariencia nica en su sitio? Por qu no guardar todos esos mdulos
personalizados en la biblioteca, as puede usarlos en el futuro sin necesidad de
rehacerlos? Una vez que ha creado una coleccin de elementos en la biblioteca,
descubrir que crear nuevos sitios web se volver mucho ms sencillo. De
hecho, quiz nunca vuelva a tener que crear un tema hijo. Cuando haya
desarrollado una extensa biblioteca de mdulos, filas y secciones
personalizados, puede exportar esos elementos e importarlos al crear nuevos
sitios, acelerando as el proceso de diseo.
La biblioteca de Divi es ms que simplemente una coleccin de diseos
guardados. Cada elemento de la biblioteca puede convertirse en Global. Los
mdulos globales estn sincronizados y se reflejan en todos los lugares donde
los coloque. Y cada vez que se modifica un mdulo global, se actualiza
automticamente en todas las pginas en las cuales lo haya aadido. En este
sentido, Divi se transforma en ms que un constructor de pginas: es un
constructor de sitios web. Por ejemplo, puede crear una seccin global para
aadir al pie de cada pgina de su sitio. Actualice la seccin global una sola vez y
tendr todos los pies de pgina del sitio entero actualizados en un instante.
Los mdulos en la biblioteca tambin pueden tener los ajustes sincronizados de
manera selectiva. Por ejemplo, si ha hecho personalizaciones importantes
dentro de las pestaas Ajustes de diseo avanzado y CSS personalizado, puede
aadir el mdulo en la biblioteca y guardar solo los ajustes de esas dos opciones.
Si el mdulo es global, los Ajustes de diseo avanzado y CSS personalizado sern
sincronizados, mientras que los Ajustes generales (que incluyen el contenido del
mdulo) pueden ser distintos en cada pgina donde se use ese mdulo.

Guardar elementos nuevos en la biblioteca


Cada vez que edite un mdulo, fila o seccin en el constructor de Divi, tendr la
opcin de guardar ese elemento en la biblioteca para uso posterior. Mientras
edita un elemento de la pgina, ver dos botones Guardar distintos: Guardar y
aadir a la biblioteca y Guardar y salir. Ambas opciones guardarn en la pgina

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 48


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
actual el elemento con el que est trabajando. Sin embargo, si seleccion
Guardar y aadir a la biblioteca, el elemento con el que est trabajando tambin
se aadir a la biblioteca. Una vez aadido a la biblioteca, podr acceder a ese
elemento en cualquier momento desde el enlace Divi > Biblioteca de Divi del
men de WordPress, y podr aadir el elemento guardado en una pgina nueva
desde la pestaa Aadir de la biblioteca cuando cree un nuevo mdulo, fila o
seccin en la pgina.

Una vez que haya hecho clic en Guardar y aadir a la biblioteca, se le pedir que
complete algunos campos con informacin sobre el nuevo elemento. Puede
darle un nombre especfico para recordarlo mejor, elegir los ajustes que desea
conservar y aadir el elemento a una categora determinada, as como tambin
hacer que sea un elemento global de la biblioteca. Para ms informacin sobre
los elementos globales, vea la seccin Qu es un elemento global?
Cuando haya introducido toda la informacin necesaria, haga clic en Guardar y
aadir a la biblioteca para completar el proceso y aadir el elemento a la
biblioteca.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 49


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Crear y administrar elementos en la biblioteca
Cada vez que aada un nuevo elemento a la biblioteca, este elemento podr ser
administrado y editado desde la pgina Divi > Biblioteca de Divi del men de
WordPress. Cuando acceda a esta pgina ver una lista de todos los elementos
en la biblioteca. Puede ordenar la lista por medio de los controles de la parte
superior de la pgina, y puede editar cualquiera de los elementos con un clic en
el enlace Editar que aparece al posar el puntero del ratn en cada fila.
Ya vimos cmo aadir un elemento a la biblioteca mientras usa el constructor de
Divi. Tambin puede construir nuevos elementos de cero desde la biblioteca de
Divi. Una vez que haya construido un nuevo elemento de la biblioteca, estar
disponible en la pestaa Aadir de la biblioteca mientras usa el constructor de
Divi. Para crear un nuevo elemento en la biblioteca, haga clic en el botn Aadir
nuevo de la parte superior de la pgina Divi > Biblioteca de Divi del men de
WordPress.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 50


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Aadir elementos de la biblioteca a una pgina
Cuando haya aadido un elemento a la biblioteca, podr acceder a l
rpidamente al momento de construir pginas nuevas. Cada vez que aada un
mdulo, fila o diseo a la pgina, ver una pestaa Aadir de la biblioteca. Al
hacer clic en esta pestaa se mostrarn todos los elementos de la biblioteca.
Haga clic en el elemento que desea aadir a la pgina.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 51


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mdulos, filas y secciones globales de
Divi
Qu es un elemento global de la biblioteca?
Un elemento global de la biblioteca es un mdulo, fila o seccin que aparece
exactamente igual en cualquier pgina donde se aada. Puede aadir un mdulo
global individual a mltiples pginas. Si cambia un elemento de la pgina, se
actualiza instantneamente en todas las dems en las cuales est presente. Un
ejemplo sencillo sera un mdulo Llamado a la accin que aparece en la parte
inferior de muchas o de todas las pginas de su sitio. Si un mdulo individual se
repite en mltiples pginas, ser muy til hacer de este un elemento global. De
esta manera, no tendr que editar cada pgina cuando quiera modificarlo.
Los elementos globales le dan muchas posibilidades, en especial si considera
que puede sincronizar de manera selectiva los ajustes individuales para cada
mdulo. Por ejemplo, podra crear un mdulo global Encabezado que aparezca
en la parte superior de todas las pginas, y elegir sincronizar nicamente las
pestaas de Ajustes de diseo avanzado y CSS personalizado. Esto le permitir
aplicar estilos personalizados al total de las pginas que usen este mdulo
global, pero an permitirle aadir un contenido nico de texto a cada mdulo,
dentro de la pestaa Ajustes generales (la cual no ha sido sincronizada). Si en
algn momento desea ajustar la apariencia de estos mdulos globales, solo
tendr que editar los Ajustes de diseo avanzado o CSS personalizado una nica
vez.
Secciones enteras tambin pueden convertirse en globales. Esta es la manera
perfecta de crear un pie de pgina personalizado para su sitio, y que ese pie de
pgina se repita en todas las pginas. Si en algn momento desea cambiar la
seccin global del pie de pgina, solo tendr que editarla una vez y las
modificaciones se aplicarn en todos los lugares donde haya sido usada.

Crear un nuevo elemento global de la biblioteca


Crear un elemento global de la biblioteca es sencillo. Cuando guarde el elemento
en la biblioteca, seleccione la opcin Guardar como global. Cualquier elemento
que sea guardado con esta opcin se transformar en global.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 52


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Los elementos globales dentro del constructor de pginas se identifican
fcilmente con el color verde. Si est editando un mdulo, fila o seccin que es
verde, o si la ventana actual que ha abierto es verde, entonces sabr que est
trabajando con un elemento global. Es importante reconocer cundo se est
editando un elemento global, porque cualquier cambio que haga se ver
reflejado en todas las pginas que contengan ese elemento.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 53


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mdulos globales y sincronizacin selectiva
Como ya mencionamos, es posible hacer una sincronizacin selectiva de
cualquiera de las tres pestaas (Ajustes generales, Ajustes de diseo avanzado y
CSS personalizado) al momento de guardar un elemento global en la biblioteca.
Por ejemplo, si ha creado un nuevo mdulo global y eligi sincronizar
nicamente la pestaa Ajustes de diseo avanzado, solo esos ajustes para ese
mdulo se vern reflejados.
Qu significa esto y por qu es til exactamente? Digamos que usted tiene un
mdulo Encabezado de ancho completo en la parte superior de todas las pginas.
Esto es algo muy comn. Cada mdulo de encabezado tiene un ttulo diferente
en los Ajustes generales, que representa la pgina actual. Tambin ha usado los
Ajustes de diseo avanzado para darle al encabezado una apariencia nica,
ajustando la fuente del ttulo en Negrita y Maysculas, y tambin ha aumentado
el relleno personalizado en la parte superior e inferior para que aparezca ms
grande. Quiere que todos los mdulos de encabezado en cada pgina usen este
estilo, pero necesita que cada pgina tenga su ttulo respectivo. En este caso,
puede crear un mdulo global Encabezado de ancho completo y elegir la
sincronizacin selectiva solo para la pestaa Ajustes de diseo avanzado. Ahora,
cada vez que aada este mdulo global a una pgina nueva, los Ajustes de diseo
avanzado se sincronizarn, pero los Ajustes generales permanecern nicos para

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 54


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
el mdulo actual. Si en algn momento desea cambiar el estilo de los
encabezados en todas las pginas, puede modificar los Ajustes de diseo
avanzado sincronizados que son compartidos por estos mdulos globales, y los
cambios se vern reflejados en cada pgina donde haya usado ese mdulo
global. Eso es genial, porque le ahorrar un montn de tiempo.
Esta misma teora podra aplicarse tambin a la pestaa CSS personalizado.
Digamos que usted ha creado un mdulo Carrusel y ha usado la pestaa CSS
personalizado para aplicar una animacin nica al botn del carrusel. Quiere usar
esta nueva animacin en todos los mdulos Carrusel del sitio. En este caso,
puede crear un nuevo mdulo global Carrusel y elegir la sincronizacin selectiva
solo para los ajustes del CSS personalizado (los cuales incluyen su animacin CSS
personalizada). Aada este carrusel a la pgina y edite los Ajustes generales y
Ajustes de diseo avanzado con total libertad, mientras mantiene el cdigo CSS
personalizado nico sincronizado en toda la serie de mdulos. Si en algn
momento desea editar el CSS personalizado para esta serie de mdulos
globales, solo tiene que hacerlo una vez. Al editar los ajustes de la pestaa CSS
personalizado en un mdulo, se actualizan todas las implementaciones de este
mdulo global Carrusel.

Cada vez que edite un mdulo global, podr identificar con el color verde cules
son las pestaas que se estn sincronizando actualmente. Las pestaas que son
verdes son pestaas que actualmente estn siendo sincronizadas dentro del

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 55


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
mdulo global. Los ajustes que se hagan dentro de las pestaas verdes se
compartirn en todas las instancias del elemento global.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 56


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Importar y Exportar elementos de la
biblioteca de Divi
Transfiera fcilmente elementos de la biblioteca de un sitio a otro.

El sistema de portabilidad
Divi tiene un amplio sistema de portabilidad que abarca cada rincn del tema.
Todo lo que existe dentro de Divi se puede exportar de un sitio y luego importar
a un sitio nuevo. La exportacin en Divi tambin es una excelente herramienta
para guardar copias de respaldo de su sitio, guardar sus ajustes favoritos para
nuevos diseos, o compartir sus diseos y ajustes personalizados con otros. Esto
incluye las opciones del tema, los ajustes del personalizador de tema y los
perfiles de Divi, y ms importante an, los diseos de Divi y las colecciones de la
biblioteca. Cada sistema funciona de la misma manera, y podr ver el icono de
portabilidad en varias secciones del tema. Cuando exporte un elemento o diseo
de la biblioteca de Divi, puede ser compartido y usado en cualquier sitio que
tenga Divi. Todo imgenes incluidas el CSS personalizado y los ajustes de
diseo avanzados estn contenidos en un solo archivo JSON. Cuando importe el
archivo a un sitio nuevo, los diseos de Divi estarn listos para usar.

Exportar elementos de la biblioteca


La biblioteca de Divi es una herramienta poderosa para los desarrolladores web,
ya que les permite construir y categorizar diseos personalizados que pueden
usar como punto de partida para futuros proyectos. Si usa el sistema de
portabilidad, estos diseos personalizados pueden ser fcilmente transferidos
de un sitio a otro.
Para exportar elementos de la biblioteca, debe ir a la pgina Divi > Biblioteca de
Divi en el administrador de WordPress. Aqu ver una lista de los elementos de la
biblioteca, junto con un botn Importar y exportar en la parte superior. Al hacer
clic en ese botn, se abrir la ventana emergente de Portabilidad.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 57


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Desde dentro de esta ventana, mientras est en la pestaa Exportar, puede
hacer clic en el botn Exportar Diseos del constructor de Divi para comenzar a
exportar la biblioteca entera de Divi. Tambin puede elegir un nombre para el
archivo de exportacin. Si exporta colecciones grandes de la biblioteca,
especialmente aquellas que contienen fotos en alta resolucin, puede
llevar un buen rato. Se recomienda exportar la biblioteca en colecciones de
tamao moderado.

Si tiene muchos diseos guardados en la biblioteca, puede que quiera escoger


elementos individuales para exportar, en lugar de exportar todo a la vez. Divi le

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 58


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
permite seleccionar individualmente. Para hacer esto, cierre la ventana de
Portabilidad y dentro de la lista de elementos de la biblioteca seleccione los
elementos que desea importar.

Haga clic en Importar y exportar una vez ms para abrir la ventana de


Portabilidad. Y antes de exportar, seleccione la casilla Solo exportar elementos
seleccionados.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 59


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Despus de que se complete el proceso, el navegador descargar un archivo
.JSON. Este archivo puede ser usado para importar los elementos exportados a
un sitio nuevo, desde la pestaa Importar de la ventana de Portabilidad.

Importar elementos de la biblioteca


Una vez que haya exportado una coleccin de la biblioteca de Divi, podr
importarla al sitio nuevo. Para ello, usar la misma ventana de Portabilidad. En
primer lugar, vaya a Divi > Biblioteca de Divi y luego haga clic en el botn Importar
y exportar. Esta vez deber hacer clic en la pestaa Importar para mostrar las
opciones correspondientes.

Una vez dentro de la pestaa Importar, haga clic en el botn Elegir y busque el
archivo .JSON que haya exportado previamente. Luego de seleccionarlo haga clic
en el botn Importar Diseos del constructor de Divi para comenzar la
importacin. Cuando se haya completado el proceso, ver un aviso de que los
elementos de la biblioteca de Divi se han aadido a su biblioteca, y las imgenes
incluidas se han importado a la biblioteca de medios.

Exportar diseos individuales de Divi


Tambin se pueden importar elementos individuales del constructor de Divi. El
proceso es exactamente igual a exportar elementos de la biblioteca, con la nica
diferencia de que estos elementos solo se pueden exportar e importar dentro de
la entrada o pgina que est editando con el constructor de Divi.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 60


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Dentro del constructor, busque el icono de Portabilidad. Al hacer clic en este
icono se abrir la ventana del sistema de portabilidad, y con l podr exportar el
diseo actual de Divi.

Importar diseos individuales de Divi


Una vez que haya exportado el diseo y descargado el archivo .JSON, este puede
ser importado en una pgina nueva. Los diseos importados reemplazarn el
contenido actual de la pgina con el contenido exportado. Para importar un
diseo del constructor de Divi, haga clic en el icono de Portabilidad para abrir la
ventana del sistema. Vaya a la pestaa Importar, haga clic en el botn Elegir y
busque el archivo exportado previamente, y por ltimo haga clic en el botn
Importar Diseo del constructor de Divi.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 61


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Personalizador de tema y
personalizador de mdulo
Acceder al personalizador de tema y personalizador
de mdulo
Los personalizadores de tema y mdulo le dan control sobre cada elemento
individual de la pgina. Quiere ajustar el tamao o el espaciado del texto o un
elemento de su sitio con solo un clic? El personalizador es el punto de partida!
Puede acceder a los paneles de personalizacin desde los enlaces Divi >
Personalizador de tema y Divi > Personalizador de mdulo del men de WordPress.
El personalizador de tema le da el control sobre los elementos a nivel global del
sitio web, tales como los tamaos del logo y del men, o los estilos de textos y
cabeceras. El personalizador de mdulo le da el control sobre los tamaos y
fuentes dentro de los mdulos individuales. Quiere reducir la altura de todos
los mdulos de Carruseles en su sitio? Puede hacerlo en segundos desde el
personalizador de mdulo!

Explorando el personalizador de tema


Primero echaremos un vistazo al personalizador de tema. Aqu hay cientos de
opciones, separadas en categoras. Al abrir el personalizador ver varios paneles,
como por ejemplo Ajustes generales y Cabecera y navegacin. Al hacer clic en estos
paneles se desplegarn las opciones relacionadas con esas reas del sitio.
Mientras edite los ajustes dentro del personalizador, tendr una vista previa de
los efectos sobre el sitio. Una vez que guarde los cambios, los nuevos estilos
sern aplicados en el sitio web.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 62


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Puede hacer casi todo lo que se le ocurra con el personalizador de tema, sin
tocar una sola lnea de cdigo.

Explorando el personalizador de mdulo


El personalizador de mdulo funciona de la misma manera que el
personalizador de tema, aunque est enfocado en la personalizacin de los
mdulos individuales en lugar de los elementos generales del sitio. Al abrir el
personalizador de mdulo ver un panel separado para cada mdulo de Divi. Al
hacer clic en estos paneles se desplegarn los controles del personalizador que
pueden ser usados para ajustar el espacio y la tipografa de cada mdulo del
sitio entero. Por ejemplo, si cree que los ttulos del Carrusel de ancho completo
son demasiado grandes, puede abrir el panel respectivo y modificar el tamao
de la fuente para el encabezado. De all en ms, cada vez que aada un Carrusel
de ancho completo a una pgina, el tamao personalizado del encabezado se
ver reflejado. No es necesario usar un tema hijo para editar los ajustes
avanzados del mdulo para cada mdulo individual. El personalizador de
mdulo es una coleccin de controles globales para un mdulo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 63


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes del personalizador de tema
Ajustes generales
Para empezar a personalizar el diseo y la tipografa de su sitio, primero debe
ingresar al Personalizador de tema, con un clic en el enlace Divi > Personalizador
de tema del men de WordPress. Esto abrir el personalizador. Luego busque el
panel Ajustes generales. Haga clic en el panel para abrir los ajustes
correspondientes y comience a personalizarlos.
Dentro del panel Ajustes generales, ver cuatro secciones: Identidad del sitio
(opcin nativa de WordPress), Ajustes de diseo, Tipografa y Fondo.

Ajustes de diseo
En este panel podr ajustar varias opciones de tamao y espaciado para su sitio.
Aqu puede aumentar o disminuir el espacio entre columnas, filas y secciones, y
modificar el tamao de la barra lateral. Tambin puede activar el diseo con
recuadro desde este panel.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 64


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Tipografa
En el panel Tipografa podr ajustar la apariencia predeterminada del texto en
todo el sitio. Puede seleccionar el tamao de las fuentes del texto y de los ttulos,
que se vern reflejados por igual en todas las reas del sitio. Tambin puede
seleccionar los colores, as como la altura de lnea, el espacio entre letras y los
estilos de fuente. Por ltimo, tambin podr elegir entre docenas de fuentes
para aplicar a cada opcin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 65


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Fondo
El panel Fondo le permite seleccionar el color de fondo del tema, as como
tambin subir una imagen personalizada para usar como fondo, y ajustar la
posicin en la pgina. Las imgenes y colores de fondo dan muy buenos
resultados cuando se usa el diseo con recuadro mencionado en la seccin
anterior.

Cabecera y navegacin
Para empezar a personalizar la cabecera y navegacin de su sitio, primero debe
ingresar al Personalizador de tema, con un clic en el enlace Divi > Personalizador
de tema del men de WordPress. Esto abrir el personalizador. Luego busque el
panel Cabecera y navegacin. Haga clic en el panel para abrir los ajustes
correspondientes y comience a personalizarlos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 66


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Formato de cabecera
Aqu puede ajustar el formato general de la cabecera, tal como intercambiar
entre los modos de diseo principal: Predeterminado, Centrado, Logo centrado en
lnea, En aparicin y Pantalla completa.
Si elige Centrado, el logo se colocar arriba del men de navegacin, y ambos
elementos centrados en la cabecera.
Si elige Logo centrado en lnea, el logo se colocar alineado con los elementos del
men y centrado entre los enlaces.
Si elige En aparicin, se mostrar el logo a la izquierda y un icono de men en el
extremo derecho de la barra de navegacin. Al hacer clic en este icono, los
elementos del men aparecern desde la derecha sobre una barra vertical con
un color de fondo.
Si elige Pantalla completa, se mostrar el logo a la izquierda y un icono de men
en el extremo derecho de la barra de navegacin. Al hacer clic en este icono se
superpondr un color de fondo semitransparente con la lista de elementos del
men centrados en la pantalla.
Al seleccionar alguno de estos dos ltimos formatos, ver una nueva opcin en
el panel Cabecera y navegacin denominado Ajustes de encabezado en pantalla
completa y en aparicin, desde donde podr controlar fuentes, tamaos y colores
de estos encabezados y los elementos del men que contienen.
Tambin puede activar la Navegacin vertical desde Formato de cabecera, con lo
cual la apariencia del sitio cambiar de manera drstica, creando una barra
ancha de navegacin a la izquierda o a la derecha del contenido.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 67


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Barra de men primario
En este panel puede ajustar el tamao, estilo y color del men de navegacin
primario. Esta es la barra blanca larga de la parte superior de la pgina que
contiene el logo y los enlaces del men principal. Dentro de este panel puede
hacer fcilmente muchas cosas, tales como ajustar la altura del logo, el color de
fondo de la barra del men y el color de los enlaces.

Barra de men secundario


La barra de men secundario es la ms pequea de las dos barras de
navegacin, que aparece arriba de la barra de navegacin principal. Este men

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 68


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
no aparecer a menos que haya asignado un men a la ubicacin Men
secundario. Una vez activado, aparecer una barra azul ms pequea. Este panel
le permite personalizar esa barra de men y el texto que contendr, ajustando el
color de fondo, y el color y estilos del texto.

Ajustes de navegacin fija


La barra de navegacin fija refiere a la barra de navegacin que se fija en la parte
superior de la pantalla al momento de desplazar la pgina. Notar que al
desplazar la pgina hacia abajo, la barra del men permanece fija en la parte
superior de la pantalla y se achica para proporcionar ms espacio de lectura.
Todo esto es personalizable desde el panel Ajustes de navegacin fija. Puede
seleccionar la altura del men si cree que se achica demasiado, y puede cambiar
los colores del men y de los enlaces, independientemente del estado inicial del
men.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 69


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Elementos de cabecera
Los elementos de cabecera son algunas cosas opcionales que aparecen en la
barra de navegacin, cada una de las cuales se puede activar o desactivar desde
aqu, tal como los iconos de redes sociales, el icono de bsqueda, el nmero de
telfono y la direccin de correo electrnico.

Pie de pgina
Para empezar a personalizar el pie de pgina de su sitio, primero debe ingresar
al Personalizador de tema, con un clic en el enlace Divi > Personalizador de tema

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 70


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
del men de WordPress. Esto abrir el personalizador. Luego busque el panel
Pie de pgina. Haga clic en el panel para abrir los ajustes correspondientes y
comience a personalizarlos.

Diseo
Aqu puede seleccionar entre diez estructuras de columnas distintas para las
reas del widget, y asignar el color de fondo para el pie de pgina.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 71


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Widgets
Aqu puede ajustar las opciones para los widgets del pie de pgina, que incluyen
controles de tipografa, estilos y colores.

Elementos de pie de pgina


Aqu puede seleccionar si los iconos de redes sociales se muestran o no en la
barra inferior.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 72


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Men del pie de pgina
Aqu puede controlar el tamao, color y estilo del texto de los elementos del
men del pie de pgina.

Barra inferior
Aqu puede ajustar los colores y estilos de texto, el color de fondo de la barra de
los crditos, y el color y tamao de los iconos de redes sociales. Adems, podr
desactivar los crditos predeterminados de Divi o reemplazarlos por un texto
personalizado (recuerde que puede usar cdigo HTML en el campo Editar
crditos del pie de pgina, por ejemplo para usar enlaces).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 73


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Estilos para mviles
Una de las mejores caractersticas del personalizador de tema es que le permite
ajustar los tamaos de fuente y espaciado especficamente para los distintos
dispositivos mviles. Puede asignar tamaos de texto y valores de espaciado
nicos para smartphones y tablets, seleccionando estos ajustes
independientemente de los ajustes generales que se aplican a las vistas en
equipos de escritorio.
Para personalizar los estilos para mviles, primero debe ingresar al
Personalizador de tema, con un clic en el enlace Divi > Personalizador de tema del
men de WordPress. Luego busque el panel Estilos para mviles y bralo para
revelar las opciones. Ver tres secciones dentro de este panel: Tablet, Telfono y
Men para mviles.

Tablet
Aqu puede ajustar los estilos que ver el visitante en pantallas del tamao de
una tablet. Puede seleccionar los tamaos de fuente de textos y ttulos, as como
tambin el espaciado entre filas y secciones dentro del sitio.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 74


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Telfono
Aqu puede ajustar los estilos que ver el visitante en pantallas del tamao de un
telfono mvil. Puede seleccionar los tamaos de fuente de textos y ttulos, as
como tambin el espaciado entre filas y secciones dentro del sitio.

Men para mviles


Cuando se alcanza el punto de partida del men para mviles, la apariencia del
men de navegacin cambia para adaptarse a esa resolucin estndar. Este
men es el que ver el visitante en una tablet o telfono mvil. Aqu puede
ajustar la apariencia de este men, pasando por alto los estilos generales que

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 75


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
haya escogido para la Barra de men primario dentro del panel Cabecera y
navegacin del personalizador de tema.

Botones
Los botones de Divi definitivamente son personalizables: hemos equipado el
personalizador de tema para los botones con todas las opciones de estilo que
pueda necesitar. Al usar estos controles, podr crear botones nicos y atractivos
en su sitio.

Para empezar a personalizar los botones de su sitio, primero debe ingresar al


Personalizador de tema, con un clic en el enlace Divi > Personalizador de tema del

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 76


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
men de WordPress. Luego haga clic en el panel Botones para abrir los ajustes
correspondientes. Los ajustes para los botones estn separados en dos
secciones: Estilo de botones y Estilo al posar el ratn.

Estilo de botones
Aqu puede ajustar la apariencia general de los botones, con los diferentes
controles del personalizador. Puede cambiar el color de texto y de fondo de los
botones, ajustar el tamao y estilo de fuente, e incluso crear botones con
esquinas redondeadas, usando el selector deslizante para radio de borde.
Adems, podr cambiar la fuente predeterminada y el icono que se muestra
dentro del botn.

Estilo al posar el ratn


Tambin puede ajustar el estilo del botn al posar el puntero del ratn. Al aplicar
un estilo diferente del botn en su estado normal para la accin de posar el
puntero, el resultado es un vistoso efecto de animacin. Esta animacin tendr
lugar cuando el usuario lleve el puntero del ratn sobre el botn.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 77


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 78
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes del personalizador de mdulo
Adems del personalizador de tema, tambin hemos introducido el
personalizador de mdulo. El personalizador de mdulo tiene opciones de estilo
que pueden ser usadas para ajustar cada mdulo disponible en Divi. Si hay algo
que le molesta de la apariencia de un mdulo en particular, y desea cambiar el
aspecto de ese mdulo en el sitio entero, el personalizador de mdulo ser su
mejor amigo.
Para acceder al personalizador de mdulo, haga clic en el enlace Divi >
Personalizador de mdulo del men de WordPress. Cuando abra el
personalizador, ver los paneles individuales para cada uno de los mdulos de
Divi. Para ajustar la apariencia de un mdulo, abra el panel correspondiente y
ver las opciones disponibles.

Usar los controles del personalizador


Muchos de los controles del personalizador de mdulo estn limitados a los
tamaos y estilos de fuente, y a los valores de espaciado. Para un control ms
especfico, puede usar los Ajustes de diseo avanzado de cada mdulo; para
ajustes menores, sin embargo, el personalizador de mdulo es ideal. Cuando
modifique la apariencia de un mdulo desde el personalizador, los cambios
afectarn a todos los mdulos de ese tipo en el sitio, y as ahorrar mucho
tiempo al configurar mdulos para cada pgina.

Si, por ejemplo, piensa que el mdulo Carrusel de ancho completo es demasiado
grande para su gusto, y desea que todos los carruseles de este tipo sean un poco
ms pequeos, puede ajustar los valores de relleno del mdulo desde el

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 79


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
personalizador. Abra el panel Carrusel de ancho completo y use el selector
deslizante Relleno superior e inferior para disminuir el tamao del carrusel. Si hay
un carrusel activo en la pgina que est viendo en ese momento, tendr una
vista previa de los ajustes.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 80


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Opciones del tema
Todos los temas de Elegant Themes incluyen una seccin de opciones de
personalizacin. Aqu es donde puede controlar aspectos tales como el logo, los
ajustes de navegacin, y mucho ms. Estas opciones estn dentro de lo que
antiguamente se denominaba ePanel, y puede acceder a ellas desde el men Divi
> Opciones del tema.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 81


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes generales
Logo Aqu es donde puede cargar el
archivo de su logo para que aparezca
en la cabecera de cada pgina de su
sitio.
Favicon Si carga una imagen aqu se
usar como favicon, el cual es un
icono que se muestra junto al ttulo
de su sitio en las pestaas del
navegador y en los mens de
Marcadores/Favoritos.
Barra de navegacin fija Por
defecto, la barra de navegacin
permanece fija en la parte superior de
la pantalla. Le sugerimos desactivar
esta opcin si necesita usar un logo
de mayor altura que la
predeterminada.
Activar galera de Divi Esta opcin
reemplazar la galera
predeterminada de WordPress con
una galera con los estilos de Divi.
Tomar la primera imagen de la
entrada Por defecto, las miniaturas
se crean usando campos
personalizados. Sin embargo, si
prefiere usar las imgenes que ya
estn en las entradas (e ignorar los
campos personalizados) puede activar
esta opcin. Una vez activada, las
miniaturas se generarn
automticamente usando la primera
imagen de la entrada. La imagen debe
estar alojada en su propio servidor.
Modo Estilo blog Por defecto, el
tema extracta automticamente las
entradas en la pgina principal o de
ndice para crear previsualizaciones. Si
desea mostrar las entradas completas
en las pginas ndice, active esta
opcin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 82


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Diseo de pgina de Tienda y pgina de Categora para WooCommerce
Si usa la integracin de comercio electrnico, puede definir qu estilo de
tienda usar para las pginas de productos y de categoras de productos.
Clave API de MailChimp Para crear y usar correctamente el mdulo de
Divi Suscripcin, deber introducir aqu la clave API de MailChimp.
Clave de API de Google El mdulo de mapas usa la API de Google Maps y
requiere una clave API de Google vlida para funcionar. Antes de usar el
mdulo de mapas, por favor asegrese de que ha aadido su clave API aqu.
Encuentre ms informacin sobre cmo crear una clave API de Google aqu.
Incluir el script de Google Maps Desactive esta opcin para eliminar el
script de la API de Google Maps de las pginas del constructor de Divi.
Autorizacin de AWeber Autorice su cuenta de AWeber aqu, siguiendo
los pasos que se detallan.
Regenerar listas de MailChimp Por defecto, las listas de MailChimp se
guardan en cach por un da. Si agreg una nueva lista pero esta no
aparece dentro de los ajustes del mdulo Suscripcin, active esta opcin. No
olvide desactivarla una vez que la lista ha sido regenerada. Puede crear una
clave API aqu. O encontrar su clave API aqu.
Regenerar listas de AWeber Por defecto, las listas de AWeber se guardan
en cach por un da. Si agreg una nueva lista pero esta no aparece dentro
de los ajustes del mdulo Suscripcin, active esta opcin. No olvide
desactivarla una vez que la lista ha sido regenerada.
Iconos de redes sociales Divi pone los enlaces a redes sociales dentro del
pie de pgina. En el panel de opciones puede controlar qu iconos mostrar
y cules sern los enlaces que contengan.
Nmero de productos para mostrar en las pginas de archivo de
WooCommerce Aqu puede designar cuntos productos de
WooCommerce se muestran en la pgina de archivo. Esta opcin funciona
independientemente de las opciones de Ajustes > Lectura en el
administrador de WordPress.
Nmero de entradas por pgina Defina cuntas entradas desea mostrar
cuando el visitante abra una pgina de Categora, Archivo, Bsqueda o
Etiqueta.
Formato de fecha Esta opcin le permite cambiar la manera en que se
muestran las fechas. Para ms informacin, por favor consulte la
documentacin de WordPress aqu.
Usar extractos cuando sean definidos Esto habilitar el uso de extractos
en las entradas o pginas.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 83


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Cdigos abreviados adaptables Esta opcin hace que los cdigos
abreviados se ajusten a los diferentes tamaos de pantalla.
Subconjuntos de Google Fonts Esto habilitar Google Fonts para idiomas
distintos del ingls.
Botn Volver arriba Active esta opcin para mostrar un botn Volver
arriba mientras se desplaza la pgina.
Desplazamiento suave Active esta opcin para obtener un efecto de
desplazamiento suave con la rueda del ratn.
Desactivar traducciones Seleccione esta opcin si no desea mostrar las
cadenas del tema traducidas en su sitio.
CSS personalizado Aqu puede agregar cualquier cdigo CSS
personalizado para reemplazar o ampliar los estilos por defecto. Si realiza
modificaciones muy extensas, recomendamos que use siempre temas hijos.

Navegacin > Pginas

Excluir pginas de la barra de navegacin En esta ventana aparecern


todas las pginas existentes. Por defecto, cada pgina nueva aparecer en
el men. Si no desea mostrar una o varias pginas, puede desmarcarlas
aqu.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 84


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mostrar mens desplegables Si desea eliminar los mens desplegables
de la barra de navegacin de las pginas, desactive esta opcin.
Mostrar enlace a Home Por defecto, el tema crea un enlace a la home
que cuando es cliqueado dirige a la portada del sitio. Si por el contrario usa
una pgina principal esttica y ya ha creado una pgina llamada Home, esto
generar un enlace duplicado. En tal caso, desactive esta opcin para
eliminar el enlace.
Ordenar enlaces de pginas Aqu puede elegir la manera en que se
ordenan los enlaces de las pginas (por ttulo, por orden en el men, por
fecha de creacin, por fecha de modificacin, por ID, por autor y por
nombre).
Ordenar enlaces de las pginas por Ascendente / Descendente Aqu
puede elegir revertir el orden en que se muestran los enlaces de las pginas
(ascendente y descendente).
Nmero de niveles de men desplegable Esta opcin le permite
controlar cuntos niveles tendrn los mens desplegables de las pginas.
Incrementar el nmero le permite mostrar elementos de men adicionales.

Navegacin > Categoras

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 85


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Excluir categoras de la barra de navegacin En esta ventana
aparecern todas las categoras existentes. Por defecto, cada categora
nueva aparecer en el men. Si no desea mostrar una o varias categoras,
puede desmarcarlas aqu.
Ocultar categoras vacas Si ha creado una categora pero esta no
contiene ninguna entrada, puede elegir si se muestra o no en el men de
navegacin. Por defecto, las categoras vacas estn ocultas.
Nmero de niveles de men desplegable Esta opcin le permite
controlar cuntos niveles tendrn los mens desplegables de las pginas.
Incrementar el nmero le permite mostrar elementos de men adicionales.
Ordenar enlaces de categoras por Nombre / ID / Slug / Cantidad /
Grupo de trminos Aqu puede elegir la manera en que se ordenan los
enlaces de las categoras.
Ordenar enlaces de categoras por Ascendente / Descendente Aqu
puede elegir revertir el orden en que se muestran los enlaces de las
categoras (ascendente y descendente).

Navegacin > Ajustes generales

Desactivar enlaces en elementos superiores de mens desplegables


En algunos casos, los usuarios crean categoras superiores o enlaces como
ttulos de una lista de enlaces o categoras inferiores. En este caso, no
desean que los enlaces superiores conduzcan a ninguna parte, sino que
sirvan un propsito organizativo. Al activar esta opcin se eliminar el
enlace de las categoras o pginas superiores para que no conduzcan a
ninguna parte al hacer clic sobre ellos.
Mtodo alternativo de desplazamiento a anclaje A veces, cuando se
usa la ID CSS de una seccin para enlazar a ella directamente desde otra
pgina, la posicin de desplazamiento final de la pgina puede ser

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 86


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
imprecisa. Active esta opcin para usar un mtodo alternativo de
desplazamiento hacia los anclajes, el cual en algunos casos puede ser ms
preciso que el mtodo predeterminado.

Ajustes de diseo > Diseo de entrada

Elegir los elementos para mostrar en la seccin informacin de


entrada Aqu puede elegir qu elementos aparecern en la seccin de
informacin de las pginas (Autor, Fecha, Categoras y Comentarios). Esta es
la zona, generalmente debajo del ttulo, donde se muestra informacin
bsica sobre la pgina. Los elementos seleccionados debajo se mostrarn.
Mostrar comentarios en entradas Puede desactivar esta opcin si desea
eliminar los comentarios y el formulario de comentarios de las entradas.
Usar miniaturas en entradas Por defecto, las miniaturas se muestran al
inicio de las entradas. Si desea eliminar esa imagen de miniatura inicial para
evitar que aparezca repetida, desactive esta opcin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 87


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes de diseo > Diseo de pgina

Usar miniaturas en pginas Por defecto, las miniaturas no se muestran


en las pginas (solo en las entradas). Sin embargo, si desea usar miniaturas
en las pginas, es posible activando esta opcin.
Mostrar comentarios en pginas Por defecto, los comentarios no se
muestran en las pginas. Sin embargo, si desea permitir comentarios en las
pginas, active esta opcin.

Ajustes de diseo > Ajustes generales

Seccin de informacin de entrada Aqu puede elegir qu elementos


aparecern en la seccin de informacin de las pginas (Autor, Fecha,
Categoras y Comentarios). Esta es la zona, generalmente debajo del ttulo,
donde se muestra informacin bsica sobre la pgina. Los elementos
seleccionados debajo se mostrarn.
Usar miniaturas en pginas ndice Active esta opcin para mostrar
miniaturas en la pginas ndice.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 88


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Publicidad

Activar banner 468x60 en entradas Si activa esta opcin se mostrar un


banner de 468x60 en la parte inferior de las entradas, debajo del contenido.
Si est activado, debe escribir las URL de la imagen del banner y del destino
a continuacin.
URL de la imagen de banner del anuncio 468x60 Aqu puede
proporcionar la URL de la imagen del banner 468x60.
URL de destino del anuncio 468x60 Aqu puede proporcionar la URL de
destino del banner 468x60.
Pegar cdigo Adsense 468x60 Aqu puede pegar el cdigo copiado de
Adsense.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 89


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
SEO > SEO de Home

Activar ttulo personalizado Por defecto, para crear los ttulos de la


home, el tema usa una combinacin del nombre del Sitio y la descripcin,
tal como se definen cuando se crea el sitio. Si desea crear un ttulo
personalizado, active esta opcin y escriba el ttulo personalizado en el
campo que aparece debajo.
Activar descripcin meta Por defecto, para llenar el campo de
descripcin meta, el tema usa la descripcin del sitio, tal como se define
cuando se crea el sitio. Si desea usar una descripcin diferente, active esta
opcin y escriba la descripcin personalizada en el campo que aparece
debajo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 90


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Activar palabras clave meta Por defecto, el tema no agrega palabras
clave en la cabecera. La mayora de los motores de bsqueda ya no usan
palabras clave para valorar su sitio, pero algunas personas las incluyen de
todas maneras. Si desea agregar palabras clave meta en el encabezado,
active esta opcin y escriba las palabras clave en el campo que aparece
debajo.
Activar URL cannicas La canonizacin ayuda a prevenir la indexacin de
contenido duplicado por parte de los buscadores, y como resultado
contribuye a evitar las penalizaciones por contenido duplicado y la
degradacin del pagerank. Algunas pginas pueden tener diferentes URL
que conduzcan al mismo lugar. Por ejemplo, dominio.com,
dominio.com/index.html y www.dominio.com son diferentes URL que
conducen a una misma home. Desde el punto de vista de los buscadores
estas URL duplicadas, que tambin pueden ocurrir debido a enlaces
permanentes personalizados, pueden ser tratadas individualmente en lugar
de apuntar a un destino nico. Definir una URL cannica les dice a los
buscadores qu URL desea usar oficialmente. El tema basa sus URL
cannicas en los enlaces permanentes y en el nombre de dominio definido
en los ajustes generales del administrador de WordPress.
Ttulo personalizado de la home (si est activado) Si ha activado los
ttulos personalizados puede agregar el ttulo aqu. El ttulo que escriba aqu
se mostrar entre las etiquetas <title></title>del archivo header.php.
Descripcin meta de la home (si est activada) Si ha activado las
descripciones meta, puede agregar la descripcin aqu.
Palabras clave meta de la home (si estn activadas) Si ha activado las
palabras clave puede agregar las palabras clave personalizadas aqu. Las
palabras clave deben estar separadas por comas. Por ejemplo:
wordpress,temas,plantillas,elegant.
Si los ttulos personalizados estn desactivados, elija el mtodo de
auto-generacin Si no utiliza ttulos de entradas personalizados, puede
controlar la manera en que se generan los ttulos. Aqu puede elegir en qu
orden desea que aparezca el ttulo de la entrada y el nombre del sitio, o
puede eliminar completamente del ttulo el nombre del sitio.
Defina un carcter para separar el nombre del sitio y el ttulo de la
entrada Aqu puede cambiar el carcter que separa el nombre del sitio y
el ttulo de la entrada cuando se usan ttulos de entrada auto-generados.
Los valores comunes son | o -.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 91


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
SEO > SEO de pgina o entrada

Activar ttulos personalizados Por defecto, el tema crea ttulos de


entradas basados en el ttulo de la entrada y el nombre del sitio. Si desea
crear un ttulo diferente del que tiene la entrada actualmente, puede definir
un ttulo personalizado para cada entrada usando los campos
personalizados. Esta opcin debe ser activada para que funcionen los ttulos
personalizados, y debe elegir un nombre de campo personalizado para su
ttulo debajo.
Activar descripcin personalizada Si desea agregar una descripcin
meta a una entrada puede hacerlo usando campos personalizados. Esta
opcin debe ser activada para que se muestren descripciones en las
entradas. Puede agregar una descripcin meta usando los campos

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 92


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
personalizados basados en un nombre de campo personalizado que debe
definir debajo.
Activar palabras clave personalizadas Si desea agregar palabras clave a
sus entradas, puede hacerlo usando campos personalizados. Esta opcin
debe ser activada para que se muestren palabras clave en las entradas.
Puede agregar las palabras clave usando los campos personalizados
basados en un nombre de campo personalizado que debe definir debajo.
Activar URL cannicas La canonizacin ayuda a prevenir la indexacin de
contenido duplicado por parte de los buscadores, y como resultado
contribuye a evitar las penalizaciones por contenido duplicado y la
degradacin del pagerank. Algunas pginas pueden tener diferentes URL
que conduzcan al mismo lugar. Por ejemplo, dominio.com,
dominio.com/index.html y www.dominio.com son diferentes URL que
conducen a una misma home. Desde el punto de vista de los buscadores
estas URL duplicadas, que tambin pueden ocurrir debido a enlaces
permanentes personalizados, pueden ser tratadas individualmente en lugar
de apuntar a un destino nico. Definir una URL cannica les dice a los
buscadores qu URL desea usar oficialmente. El tema basa sus URL
cannicas en los enlaces permanentes y en el nombre de dominio definido
en los ajustes generales del administrador de WordPress.
Campo personalizado Nombre para usar en el ttulo Cuando defina el
ttulo usando campos personalizados, deber usar este valor en el campo
personalizado Nombre. El valor de su campo personalizado debe ser el
ttulo que desee usar.
Campo personalizado Nombre para usar en la descripcin Cuando
defina la descripcin meta usando campos personalizados, deber usar
este valor en el campo personalizado Nombre. El valor de su campo
personalizado debe ser la descripcin personalizada que desee usar.
Campo personalizado Nombre para usar en las palabras clave Cuando
defina las palabras clave usando campos personalizados, deber usar este
valor en el campo personalizado Nombre. El valor de su campo
personalizado debe incluir las palabras clave personalizadas que desee
usar, separadas por comas.
Si los ttulos personalizados estn desactivados, elija el mtodo de
auto-generacin Si no utiliza ttulos de entradas personalizados, puede
controlar la manera en que se generan los ttulos. Aqu puede elegir en qu
orden desea que aparezca el ttulo de la entrada y el nombre del sitio, o
puede eliminar completamente del ttulo el nombre del sitio.
Defina un carcter para separar el nombre del sitio y el ttulo de la
entrada Aqu puede cambiar el carcter que separa el nombre del sitio y

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 93


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
el ttulo de la entrada cuando se usan ttulos de entrada auto-generados.
Los valores comunes son | o -.

SEO > SEO de pgina ndice

Activar URL cannicas La canonizacin ayuda a prevenir la indexacin de


contenido duplicado por parte de los buscadores, y como resultado
contribuye a evitar las penalizaciones por contenido duplicado y la
degradacin del pagerank. Algunas pginas pueden tener diferentes URL
que conduzcan al mismo lugar. Por ejemplo, dominio.com,
dominio.com/index.html y www.dominio.com son diferentes URL que
conducen a una misma home. Desde el punto de vista de los buscadores
estas URL duplicadas, que tambin pueden ocurrir debido a enlaces
permanentes personalizados, pueden ser tratadas individualmente en lugar
de apuntar a un destino nico. Definir una URL cannica les dice a los
buscadores qu URL desea usar oficialmente. El tema basa sus URL
cannicas en los enlaces permanentes y en el nombre de dominio definido
en los ajustes generales del administrador de WordPress.
Activar descripciones meta Haga clic en esta casilla si desea mostrar
descripciones meta en las pginas de categoras o archivos. La descripcin
se basa en la descripcin de la categora que elige al crear o editar la
categora en el administrador de WordPress.
Elija el mtodo de auto-generacin de ttulo Aqu puede elegir la
manera en que se generan los ttulos en las pginas ndice. Puede cambiar
el orden en que se muestran el nombre del sitio y el ttulo, o puede eliminar
completamente del ttulo el nombre del sitio.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 94


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Defina un carcter para separar el nombre del sitio y el ttulo de la
entrada Aqu puede cambiar el carcter que separa el nombre del sitio y
el ttulo de la pgina ndice cuando se usan ttulos de entrada auto-
generados. Los valores comunes son | o -.

Integracin
La seccin Integracin es muy buena para agregar cdigo de servicios de terceros
en ciertas reas del tema. El cdigo puede ser aadido en la cabecera y cuerpo
del sitio, as como tambin antes y despus de cada entrada. Por ejemplo, si
necesita agregar un cdigo de seguimiento (tal como Google Analytics), pero no
est seguro de qu archivo PHP debe editar para incluirlo en la seccin <body>
de su sitio, puede simplemente pegar ese cdigo en el campo correspondiente
de la seccin Integracin.
Para ms informacin sobre cmo aprovechar las ventajas de la seccin
Integracin, lea nuestra entrada del blog Ways To Use The Integration Tab In Our
ePanel Theme Options (en ingls).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 95


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Activar cdigo en <head> Si desactiva esta opcin se eliminar el cdigo
en el sector head de su sitio. Esto le permite eliminar el cdigo, pero
guardarlo para uso futuro.
Activar cdigo en <body> Si desactiva esta opcin se eliminar el cdigo
del sector body de su sitio. Esto le permite eliminar el cdigo, pero
guardarlo para uso futuro.
Activar cdigo nico en parte superior Si desactiva esta opcin se
eliminar el cdigo de la parte superior de las entradas. Esto le permite
eliminar el cdigo, pero guardarlo para uso futuro.
Activar cdigo nico en parte inferior Si desactiva esta opcin se
eliminar el cdigo de la parte inferior de las entradas. Esto le permite
eliminar el cdigo, pero guardarlo para uso futuro.
Aadir cdigo al <head> de su sitio Cualquier cdigo que pegue aqu
aparecer en el sector head de todas las pginas de su sitio. Esto es til si
desea agregar JavaScript o CSS a todas las pginas.
Aadir cdigo al <body> (sirve para estadsticas de visitas) Cualquier
cdigo que pegue aqu aparecer en el sector body de todas las pginas de
su sitio. Esto es til si desea incluir un pixel de rastreo para contadores de
visitas, tales como Google Analytics.
Aadir cdigo en la parte superior de las entradas Cualquier cdigo
que pegue aqu aparecer en la parte superior de las entradas. Esto es til
si desea integrar elementos tales como enlaces para compartir en redes
sociales.
Aadir cdigo en la parte inferior de las entradas, antes de los
comentarios Cualquier cdigo que pegue aqu aparecer en la parte
inferior de las entradas.

Actualizaciones
Vea la seccin Cmo actualizar su tema para ms informacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 96


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 97
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Un vistazo a las secciones de Divi
Las secciones son los elementos organizativos ms
grandes
Las secciones son los bloques ms grandes del constructor de Divi. Puede
considerarlas como bloques horizontales apilables, los cuales se usan para
agrupar el contenido dentro de reas que se distinguen visualmente. En Divi,
todo lo que construya debe comenzar en una seccin. Este envoltorio de
contenido tiene varios ajustes que se pueden configurar para lograr
asombrosos resultados.
Vea las Opciones de seccin en el captulo Un vistazo al constructor de esta
documentacin.

Usar secciones de ancho completo


Las secciones de ancho completo le dan acceso a un nuevo conjunto de mdulos
de ancho completo. Estos mdulos se comportan de manera un tanto diferente,
ya que sacan ventaja del ancho completo del navegador. Los mdulos de ancho
completo solo pueden colocarse dentro de secciones de ancho completo.

Una vez que agregue a la pgina una nueva seccin de ancho completo, puede
hacer clic en el botn Insertar mdulo/s. A diferencia de las secciones normales,
no existe el concepto de filas o columnas aqu, ya que los mdulos de ancho
completo siempre van a tomar el 100% del ancho de la pantalla. Los mdulos de
ancho completo representan una buena manera de aadir un corte visual en
una pgina.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 98


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Un buen ejemplo de mdulo de ancho completo es el carrusel. Este carrusel de
ancho completo funciona igual que el carrusel estndar, solo que se expande al
100% del ancho del navegador. Mostrar un carrusel a semejante escala puede
resultar deslumbrante: solo vea nuestra demostracin de Divi para apreciar un
ejemplo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 99


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar secciones especiales
Las secciones especiales le brindan niveles adicionales de divisin vertical, los
cuales permiten insertar columnas dentro de columnas. Estas secciones son
tiles para crear diseos dinmicos con barras laterales.
A diferencia de las secciones normales, cuando use una seccin especial, podr
agregar variantes complejas de columnas seguidas de barras laterales
extendidas, sin ver rupturas de pgina no deseadas. Estos tipos de estructura no
son posibles en las secciones normales.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 100


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Una vez que haya agregado una seccin especial a la pgina, notar que un rea
tiene la opcin Insertar mdulo/s, mientras que la otra tiene la opcin Aadir fila.
El rea para insertar mdulos representa la barra lateral vertical. Puede agregar
aqu todos los mdulos que desee, en una sola fila, los cuales rellenarn toda la
extensin de la seccin, adyacentes a la estructura de columnas que cree en la
seccin siguiente. Al hacer clic en Aadir fila podr agregar filas adicionales. Es
decir, tiene la posibilidad de agregar filas dentro de filas.

Como resultado, podr crear la estructura de columnas que desee, y todas


lucirn estupendas. A continuacin hay un ejemplo de una pgina creada con las
secciones especiales. Como se ve, el diseo es de dos sectores, con una barra
lateral y una estructura compleja de columnas contigua.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 101


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 102
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Filas y opciones de filas de Divi
Las filas pueden ser muy verstiles, ya que son los distintos diseos de columnas
para colocar dentro de las secciones. Al igual que los mdulos, las filas tienen
varios ajustes a los cuales se puede acceder con un clic en el icono del extremo
superior izquierdo. Aqu veremos solo algunas de las tantas caractersticas
incluidas y cmo se pueden usar para crear diseos nicos. Los ajustes de las
filas en particular se pueden emplear para crear una inmensa variedad de
diseos con el constructor de Divi, ya que son estos ajustes los que definen la
estructura en la cual se albergan los mdulos.

Ajustes generales
Hacer esta fila de ancho completo Si se activa esta opcin, la fila se
extender al ancho de la ventana del navegador (similar a una seccin de
ancho completo). Esto es buensimo para crear atractivos diseos de
columnas en ancho completo.
Usar ancho personalizado Tambin puede asignar un ancho
personalizado a cada fila. Por ejemplo, si desea aadir alguna variacin al
flujo de la pgina y hacer una fila ms extensa que el resto, puede
introducir aqu un valor personalizado para el ancho.
Usar ancho personalizado de separacin El ancho de separacin es la
distancia entre columnas. Hay cuatro tamaos de ancho de separacin,
desde ninguno a grande. Si asigna el ancho de separacin a 1, no existir
ninguna separacin entre columnas. Cuando se combina con la opcin
Hacer esta fila de ancho completo, podr crear un efecto similar al del
mdulo Portfolio de ancho completo.
Ancho de separacin Use este selector deslizante para asignar el ancho
de separacin entre columnas (de 1: sin separacin, a 4: separacin
grande).
Relleno personalizado Si desea ajustar el relleno (superior, inferior,
izquierdo y derecho) de la fila, puede hacerlo con esta opcin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 103


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mantener relleno personalizado en dispositivos mviles Si desea
conservar los valores del relleno personalizado en los dispositivos mviles,
puede hacerlo con esta opcin.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin El rtulo de administracin le permite
cambiar la etiqueta para identificar el mdulo ms fcilmente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 104


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes de diseo avanzado
Margen personalizado Si desea ajustar el margen (superior, inferior,
izquierdo y derecho) de la fila, puede hacerlo con esta opcin
Imagen de fondo Se pueden aplicar imgenes de fondo a una fila
entera.
Color de fondo De manera predeterminada, las filas tienen un color de
fondo transparente. Aqu puede elegir un color slido para el fondo.
Vdeo MP4 de fondo Se pueden aplicar vdeos de fondo a las filas. Si
desea aplicar un vdeo de fondo, debe subir el archivo en formato MP4
aqu.
Vdeo WEBM de fondo Se pueden aplicar vdeos de fondo a las filas. Si
desea aplicar un vdeo de fondo, debe subir el archivo en formato WEBM
aqu.
Ancho del vdeo de fondo Luego de subir el archivo, debe introducir
aqu el ancho del vdeo. Debe ser igual al ancho real del vdeo, de lo
contrario la posicin del fondo no ser correcta.
Alto del vdeo de fondo Luego de subir el archivo, debe introducir aqu
la altura del vdeo. Debe ser igual a la altura real del vdeo, de lo contrario
la posicin del fondo no ser correcta.
Pausar vdeo Si desea que los vdeos puedan ser pausados con un clic,
active esta opcin.
Usar efecto Parallax Si desea usar un efecto Parallax para la imagen de
fondo, puede activarlo aqu y luego elegir el mtodo (CSS o True Parallax).
Igualar alturas de columna Esta es una opcin genial, en especial
cuando ha aplicado colores slidos de fondo a columnas individuales. Al
activar esta opcin, todas las columnas estarn obligadas a tomar el
mismo valor de altura.
Columna Imagen de fondo* (Imagen de fondo de columna) Para cada
columna en una fila, puede asignar una imagen de fondo nica.
Columna efecto Parallax* (Efecto Parallax de columna) Si desea usar
un efecto Parallax en la columna, puede activarlo aqu y luego elegir el
mtodo (CSS o True Parallax).
Columna Color de fondo* (Color de fondo de columna) Para cada
columna en una fila, puede asignar un color de fondo nico.
Columna Relleno* (Relleno de columna) Para cada columna en una
fila, puede asignar valores nicos de relleno.
Mantener relleno personalizado en dispositivos mviles Si desea
conservar los valores del relleno personalizado de la columna en los
dispositivos mviles, puede hacerlo con esta opcin.

*Orden de palabras en las cadenas originales no compatible con el idioma espaol.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 105


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 106
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
CSS personalizado
ID CSS Puede asignar una ID CSS a la fila si desea referirla desde la hoja
de estilos o usarla como anclaje de enlace.
Clase CSS Puede asignar una clase CSS a la fila si desea referirla desde la
hoja de estilo.
Columna ID CSS Puede asignar una ID CSS a la columna si desea
referirla desde la hoja de estilos o usarla como anclaje de enlace.
Columna Clase CSS Puede asignar una clase CSS a la columna si desea
referirla desde la hoja de estilo.
Antes Introduzca aqu el cdigo CSS para aplicar antes (::before) del
div de la fila principal.
Elemento principal Introduzca aqu el cdigo CSS para aplicar al div de
la fila principal.
Despus Introduzca aqu el cdigo CSS para aplicar despus (::after)
del div de la fila principal.
Columna Antes Introduzca aqu el cdigo CSS para aplicar antes
(::before) del div de la columna correspondiente (aparecern tantos
campos Antes como columnas se hayan insertado en la fila).
Columna Elemento principal Introduzca aqu el cdigo CSS para aplicar
al div de la columna correspondiente (aparecern tantos campos
Elemento principal como columnas se hayan insertado en la fila).
Columna Despus Introduzca aqu el cdigo CSS para aplicar despus
(::after) del div de la columna correspondiente (aparecern tantos
campos Despus como columnas se hayan insertado en la fila).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 107


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 108
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Al seleccionar cada campo se mostrar en color naranja, junto al ttulo, el
nombre de la clase correspondiente.

Probemos algunos ajustes


Ahora que hemos repasado todos los ajustes, probaremos algunas
combinaciones para mostrar las posibilidades creativas que nos ofrecen. En este
ejemplo, tocaremos el ajuste de la Fila de ancho completo como introduccin. La
opcin para hacer la fila de ancho completo es una de las ms verstiles del
conjunto. Esto ampliar el ancho de la fila hasta los extremos del navegador, de
manera similar a la Seccin de ancho completo. A diferencia de esta, sin embargo,
las filas de ancho completo pueden tener estructuras de columnas y pueden
contener cualquier mdulo.
En el siguiente ejemplo hemos creado una fila con cuatro columnas y aadido
una imagen rectangular a cada columna. Luego activamos la opcin Hacer esta
fila de ancho completo para ampliar la fila hasta los bordes de la ventana del
navegador.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 109


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
A continuacin, redujimos el Ancho de separacin a 1 para eliminar el espacio
entre las columnas de la fila.

Por ltimo, eliminamos el relleno de la parte de arriba y de abajo de la fila, al


introducir 0 en los valores superior e inferior de la opcin Relleno personalizado.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 110


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
El resultado es una transformacin completa de una fila normal de cuatro
columnas a una galera de imgenes que luce espectacular en contraste con la
seccin color verde de abajo. Tambin se puede crear este mismo efecto al usar
colores de fondo personalizados para las columnas y para los mdulos de texto.
Las posibilidades son infinitas!

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 111


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes de diseo avanzado y CSS
personalizado
Cada vez que edite un mdulo, fila o seccin, ver tres pestaas en la ventana
modal de ajustes: Ajustes generales, Ajustes de diseo avanzado y CSS
personalizado. En la pestaa Ajustes generales podr encontrar todo lo que
necesita para crear sensacionales diseos en Divi y para aprovechar cada
mdulo. Sin embargo, si desea tener ms control sobre la apariencia del mdulo,
podr aventurarse a los Ajustes de diseo avanzado. Si usted es un desarrollador y
quiere usar su propio cdigo CSS en lugar de los controles de diseo avanzado,
podr ir directamente a la pestaa CSS personalizado. Al usarlos combinados, no
hay nada que no se pueda disear a gusto.

Ajustes de diseo avanzado


Los ajustes de diseo avanzado varan de mdulo a mdulo. Para cada uno,
hemos aadido todos los posibles ajustes de diseo que pueda necesitar en la
pestaa Ajustes de diseo avanzado, y hemos dejado todos los ajustes de diseo
bsicos o usados ms comnmente en la pestaa Ajustes generales. Como regla
general, si hay algo que no puede hacer a nivel diseo desde la pestaa Ajustes
generales, sin dudas podr lograrlo desde la pestaa Ajustes de diseo avanzado.
Debido al enorme abanico de ajustes disponibles en determinados mdulos, los
hemos separado en su propia pestaa, as los ajustes generales no quedan
saturados.
Para localizar y usar los Ajustes de diseo avanzado, simplemente edite un
mdulo, una fila o una seccin existentes (o cree uno/a nuevo/a) y se abrir la
ventana modal de los ajustes. Luego haga clic en la pestaa Ajustes de diseo
avanzado para revelar los controles de diseo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 112


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Desde esta pestaa puede hacer casi cualquier cosa. Los ajustes variarn de
acuerdo con el tipo de mdulo que est editando. Por lo general, encontrar
opciones para ajustar la tipografa (como tamao del texto, espacio entre letras,
altura de lnea, etc.), as como tambin un montn de ajustes nicos para ciertos
elementos. Al usar estas opciones de diseo, podr crear pginas realmente
atractivas y originales, que no seran posibles solo con los Ajustes generales.

CSS personalizado
En la pestaa Ajustes de diseo avanzado hemos incluido muchsimas opciones
con las cuales podr modificar casi cualquier aspecto, tal como lo hara con CSS,
pero sin tocar ni una lnea de cdigo. Sin embargo, si usted es un desarrollador
quiz prefiera escribir su propio cdigo en lugar de usar los controles de diseo
personalizado integrados. En este caso puede usar la tercera pestaa de la
ventana modal de los ajustes para mdulos, filas y secciones: CSS personalizado.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 113


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
En esta pestaa hemos desdoblado los elementos estructurales del mdulo, e
incluimos varios campos de texto donde podr escribir su propio cdigo CSS. Al
usar este panel, podr aplicar CSS a partes individuales del mdulo. Por ejemplo,
puede aplicar CSS personalizado directamente a un icono de Anuncio breve, o
crear su propio seudoelemento :after desde el constructor de Divi. Si usa estos
ajustes, se evitar la molestia de tener que crear un tema hijo, y tendr la
posibilidad de referir fcilmente a cdigos CSS personalizados en mdulos o
pginas individuales.
Al seleccionar cada campo se mostrar en color naranja, junto al ttulo, el
nombre de la clase correspondiente, para facilitar la edicin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 114


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
El editor de perfil
Controle todo lo que pueden hacer los usuarios
dentro del constructor
El editor de perfil de Divi le da el control sobre lo que cada usuario de acuerdo
con el perfil de WordPress que se le asigne puede hacer dentro del
constructor. Para cada perfil, puede desactivar ciertas acciones, lo cual limitar la
manera en que puede ser usado el constructor por los usuarios, dado el perfil
que tengan.
Esta es la mejor manera de que los desarrolladores independientes y las
pequeas agencias de diseo web dejen los sitios en manos de sus clientes, pero
limitando lo que el cliente pueda hacer con Divi. Al restringir caractersticas ms
avanzadas, puede lograr que el constructor de Divi les sea ms sencillo de
entender, adems de impedirles que accedan a herramientas que podran
arruinar sus diseos si se usan sin conocimientos.
Aqu hay un buen ejemplo. Digamos que ha terminado de construir un sitio
nuevo para un cliente, y le ha sacado el mayor provecho a los Ajustes de diseo
avanzado y CSS personalizado; hasta ha integrado plugins externos desde el
mdulo Cdigo. Todo se ve perfecto y mantiene un estilo uniforme. Seguramente
querr dejar en manos de su cliente la actualizacin de la pgina Quines
somos, pero no desea que hagan nada alocado. Esta es una buena oportunidad
para usar el editor de perfil. Simplemente asigne un perfil especfico a su cliente,
como Editor. Luego, desde el editor de perfil, ajuste las facultades de ese perfil.
Usted puede hacer cosas como: desactivar la biblioteca de Divi, desactivar el
acceso a mdulos globales, desactivar el acceso a las pestaas Ajustes de diseo
avanzado y CSS personalizado. Hasta puede negarles la posibilidad de borrar y
mover mdulos, y solo permitirles editar mdulos existentes. Por ltimo,
tambin puede controlar qu tipo de ajustes pueden editar dentro de la pestaa
Ajustes generales. Cuando termine, el cliente tendr nicamente las herramientas
necesarias para editar su contenido.

Privilegios del tema a nivel superior


Aqu puede configurar los ajustes del tema a nivel superior, lo cual limitar el
acceso a los elementos principales del men de Divi (tales como las Opciones del
tema y el Personalizador de tema).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 115


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Interfaz del constructor
Aqu puede limitar acciones de nivel superior dentro del constructor, tales como
la posibilidad de editar, borrar o mover elementos. Una implementacin comn
de estos ajustes podra ser activar la edicin de los elementos, pero desactivar la
posibilidad de moverlos o borrarlos. Tambin puede desactivar el acceso
completo al constructor de Divi.

Ajustes de la biblioteca
Aqu puede controlar el acceso del usuario a la biblioteca de Divi. Tambin puede
impedir que los usuarios editen los mdulos globales. Dado que los cambios
hechos a los mdulos globales a menudo tienen consecuencias de amplio
alcance, quiz sea ms seguro no permitir que sus clientes los editen.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 116


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Pestaas de ajustes
Pestaas de ajustes se refiere a las tres categoras de opciones disponibles
dentro de la ventana de cada mdulo, fila y seccin. Estas pestaas de ajustes
son: Ajustes generales, Ajustes de diseo avanzado y CSS personalizado. Con
frecuencia, todo lo necesario para construir un sitio fantstico con Divi se puede
encontrar en los Ajustes generales, pero si desea ir un paso ms adelante, puede
emplear las pestaas de diseo avanzado y CSS personalizado. A menudo es
buena idea desactivar estas dos ltimas pestaas a los clientes.

Tipos de ajustes
Adems de tener la posibilidad de desactivar todas las pestaas de ajustes,
puede tener control sobre los tipos de ajustes disponibles en esas pestaas. Esto
le da un dominio an ms estricto sobre lo que pueden editar los clientes. Por
ejemplo, puede que quiera permitir que el cliente controle nicamente el
contenido de los mdulos de texto, pero impedir que ajuste los colores y las
opciones de diseo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 117


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Uso de mdulos
Tambin puede desactivar el uso de mdulos enteros. Cuando se desactiva un
mdulo para un usuario, no podr editar ese tipo de mdulos ni aadir nuevos a
la pgina. Por ejemplo, puede que quiera desactivar todos los mdulos menos el
de Texto y el de Imagen, si realmente desea simplificarles la vida a sus clientes.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 118


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Portabilidad
Por ltimo, puede controlar qu opciones del sistema de portabilidad quedarn
habilitadas para los distintos perfiles de usuario.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 119


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 120
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Control con clic derecho
Acceso rpido a las funciones del constructor de Divi
Cada vez que haga clic con el botn derecho del ratn sobre algn sector dentro
del constructor de Divi, ya sea un mdulo, una fila o una seccin, ver una lista
de distintas acciones que puede ejecutar. Estas acciones incluyen: Renombrar,
Prueba multivariable, Guardar en la biblioteca, Deshacer y Rehacer, Desactivar,
Bloquear, Contraer y Expandir, Copiar y Pegar, y Vista previa. Tal vez ya est
familiarizado con muchas de estas funciones, las cuales han sido aadidas al
men contextual con clic derecho para su conveniencia. De esta manera, no
tendr que hurgar en los ajustes del mdulo para acceder a las caractersticas
ms usadas. Algunas de estas funciones, sin embargo, son nicas para el men
contextual y solo estn disponibles al hacer clic derecho. Estas incluyen: Copiar,
Pegar, Bloquear, Contraer y Desactivar.

Renombrar
Cualquier mdulo, fila o seccin puede tener un nombre. Este nombre aparece
en el constructor, y se usa para identificar el elemento dentro de la pgina.
Cuando edite pginas muy extensas, esto puede ser de ayuda para organizar los
elementos dentro del constructor. Por ejemplo, si tiene veinte mdulos de texto
distintos en una pgina, tal vez quiera darle a cada uno un nombre que lo
identifique para saber qu contiene antes de abrir la ventana de los ajustes.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 121


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Guardar en la biblioteca
La opcin para guardar un elemento en la biblioteca de Divi fue aadido a los
controles de clic derecho para su beneficio. Usando esta caracterstica podr
guardar elementos en la biblioteca sin tener que abrir la ventana de ajustes
correspondiente.

Deshacer y Rehacer
Cualquier accin que lleve a cabo dentro del constructor de Divi se puede
deshacer, y cualquier accin deshecha se puede rehacer.
Los controles Deshacer y Rehacer, que tambin estn disponibles si usa los
botones Deshacer y Rehacer de la parte superior derecha de la interfaz del
constructor de Divi junto con el Historial, pueden ser usados con el clic derecho.

Desactivar
Desactivar es una opcin que solo est disponible en los controles del clic
derecho. Cualquier mdulo, fila o seccin puede ser desactivado. Una vez que se
desactiva un elemento, no aparecer ms en la pgina que ve el visitante. Sin
embargo, el elemento permanece activo dentro del constructor. Desactivar sirve
para eliminar elementos en la interfaz del usuario (el sitio en vivo) sin tener que
eliminarlo del constructor. Y puede ser reactivado en el futuro. Los elementos

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 122


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
que se han desactivado en todos los dispositivos aparecen con un 50% de
opacidad dentro del constructor para diferenciarlos del resto.

Todos los mdulos, filas y secciones incluyen en el men Desactivar la opcin de


aplicar este ajuste en telfonos celulares, tablets y equipos de escritorio. A
menudo puede ser beneficioso para el visitante que ciertos elementos no se
muestren, si es que est accediendo a la pgina en un dispositivo con una
pantalla pequea. Hasta es posible duplicar mdulos y crear sus respectivas
versiones que se mostrarn a los distintos usuarios de acuerdo con el tamao de
sus pantallas.

Bloquear
Bloquear es otra funcin que solo est disponible en los controles del clic
derecho. Una vez que se bloquea un elemento, no puede ser movido, editado o
borrado hasta que se desbloquee. nicamente los usuarios con perfil de
administrador tendrn permiso para bloquear y desbloquear elementos. Esto

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 123


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
significa que puede asignar a sus clientes un perfil inferior, como Editor, y que no
tendrn la posibilidad de editar ningn elemento que haya sido bloqueado. Esta
es una buena manera de controlar lo que sus clientes pueden o no modificar. En
muchos casos, quiz quiera bloquear todo menos los mdulos de texto, por
ejemplo, lo cual le permitira a su cliente aadir contenido, pero no ajustar las
opciones de los mdulos ms avanzados.

Contraer y Expandir
Contraer es una caracterstica que solo est disponible con el clic derecho.
Cualquier seccin o fila puede ser contrada dentro de la interfaz del constructor.
Cuando un elemento ha sido contrado, los elementos que estn dentro quedan
ocultos y la fila o seccin se reduce a un rectngulo ms pequeo. Si est
trabajando con una pgina muy extensa, contraer los elementos que ya ha
terminado puede hacer el trabajo ms fcil.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 124


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Copiar y Pegar
Copiar y Pegar es otra funcin que solo est disponible desde los controles del
clic derecho. Puede copiar cualquier mdulo, fila o seccin de un rea, y pegarlos
en cualquier otra. Hasta puede copiar y pegar elementos de una pgina a otra.
Esto le ahorrar un montn de tiempo, y a veces hasta puede resultar ms
conveniente que guardar elementos en la biblioteca (en especial cuando solo
desea reutilizar el elemento en otra pgina una sola vez).
La seccin, fila o mdulo copiados se pegar siempre a continuacin de la
seccin, fila o mdulo seleccionados. La accin Pegar despus dentro del men
contextual solo se mostrar si se hace clic derecho sobre un mismo tipo de
bloque (si se copia un mdulo, puede pegarse nicamente despus de otro
mdulo; si se copia una fila, despus de otra fila, etc.).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 125


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Vista previa
La posibilidad de tener una vista previa de los elementos dentro del constructor
es una herramienta sumamente til que hemos aadido a los controles del clic
derecho. Al elegir la vista previa de un elemento, podr echar un rpido vistazo a
la apariencia de una parte especfica dentro del constructor, en lugar de tener
que previsualizar la pgina entera en el sitio.
La herramienta Vista previa tambin est disponible en todas las ventanas de
ajustes de las secciones, filas y mdulos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 126


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 127
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Los Mdulos
Anuncio breve
El mdulo Anuncio breve es una combinacin simple y elegante de texto e
imagen. Los anuncios breves son una manera eficaz de mostrar pequeas
porciones de informacin, y con frecuencia se muestran en filas para listar
habilidades de una persona o caractersticas de un servicio. Los mdulos
Anuncio breve se pueden disponer en cualquier columna que usted cree.

Ttulo Pngale un ttulo al anuncio breve, el cual aparecer arriba del


texto, en negrita. La opcin URL debajo del campo Ttulo le permitir
convertirlo en un enlace.
URL Escriba una URL vlida en este campo para que el ttulo del anuncio
breve sea convertido en un enlace. Si deja este campo en blanco, el ttulo
quedar tan solo como un elemento esttico.
La URL se abre Aqu puede elegir si el enlace se abre en la misma
ventana o no.
Usar icono Cuando cree anuncios breves, puede elegir usar un icono o
una imagen junto con el texto. Si selecciona S para la opcin Usar icono,
aparecern las siguientes opciones para personalizarlo. Si elige no usar un
icono, se le pedir que suba una imagen.
Icono Si selecciona S para la opcin Usar icono, aparecer esta opcin,
la cual le ofrece una lista de iconos disponibles que podr usar junto con
el texto del anuncio breve. Simplemente haga clic en el icono que desea
usar y este aparecer en su anuncio breve.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 128


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color del icono Si selecciona S para la opcin Usar icono, aparecer
esta opcin, la cual le permitir personalizar el color del icono. Por
defecto, los iconos son del color de acento configurado en el tema.
Crculo de fondo Si selecciona S para la opcin Usar icono, aparecer
esta opcin, la cual le permitir mostrar el icono dentro de un fondo
circular. Si selecciona S para este ajuste, aparecern opciones
adicionales para personalizar el color del crculo y el borde.
Color del crculo Si selecciona S para la opcin Crculo de fondo,
aparecer esta opcin, la cual le permitir elegir un color para el crculo de
fondo. Este color es independiente del color del icono seleccionado
anteriormente. El icono, con su propio color, aparecer dentro de este
crculo del color que elija aqu.
Mostrar borde circular Si selecciona S para la opcin Crculo de fondo,
aparecer esta opcin, la cual le permitir mostrar un borde en el crculo.
Si se selecciona, aparecer una nueva opcin para escoger el color del
borde.
Color del borde del crculo Si selecciona S para la opcin Mostrar
borde circular, aparecer esta opcin, la cual le permitir elegir el color del
borde circular.
Ubicacin de la imagen/icono Aqu puede elegir en qu lugar se
mostrar el icono del anuncio breve. Puede aparecer arriba del texto o a la
izquierda. Si coloca la imagen/icono en la parte izquierda del texto, se
mostrar de menor tamao que cuando aparece arriba.
Animacin de la imagen/icono Esto controla la direccin de donde
aparece la animacin en carga diferida.
Imagen Si eligi no usar un icono, aparecer esta opcin. Escriba una
URL vlida de la imagen, o suba una imagen a travs de la biblioteca
multimedia de WordPress. Las imgenes de los anuncios breves siempre
aparecern centradas en sus respectivas columnas y ocuparn el ancho
completo de la columna, hasta 550 pxeles. Sin embargo, la imagen nunca
se escalar a un tamao mayor al original. La altura de la imagen se
determinar por la relacin de aspecto de la imagen original, por lo cual es
conveniente que todas las imgenes para los anuncios breves tengan el
mismo alto, en caso de que las ubique una junto a la otra.
Texto alternativo de la imagen Si eligi no usar un icono, aparecer
esta opcin. El texto alternativo proporciona informacin necesaria en
caso de que la imagen no cargue, no aparezca correctamente, o en
cualquier otra situacin en la cual no se pueda visualizar. Tambin permite
que la imagen sea leda y reconocida por los motores de bsqueda.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 129


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de texto Si el anuncio breve aparece sobre un fondo oscuro, el
color del texto debera ser claro. Si se coloca sobre un fondo claro, el color
del texto debera ser oscuro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Contenido En este campo deber introducir el contenido del anuncio
breve. El texto tambin ocupar el ancho completo de la columna, hasta
550 pxeles.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Anuncio breve
aparecer con el rtulo Anuncio breve en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Carrusel
El Carrusel puede situarse en cualquier parte, y ocupa el ancho completo de las
estructuras de columnas en las cuales se encuentre. Los carruseles de Divi
incluyen fondos con efecto Parallax, as como tambin fondos de vdeo.

Flechas Elija si desea mostrar o no las flechas de navegacin (izquierda y


derecha).
Mostrar controles Elija si desea mostrar o no los botones
circulares/indicadores de pases en la parte inferior del carrusel.
Animacin automtica Si desea que las imgenes del carrusel roten de
manera automtica, sin que el visitante deba presionar los botones, active
esta opcin y luego defina la velocidad de rotacin en el siguiente campo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 130


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Velocidad de animacin automtica (en milisegundos) Aqu puede
designar cun largo ser el intervalo de transicin de cada imagen del
carrusel, si est activada la opcin Animacin automtica. Cuanto mayor
sea el nmero, ms tiempo transcurrir entre cada rotacin.
Continuar el pase automtico al posar el puntero Si activa esto,
permitir que el pase automtico contine al posar el puntero del ratn.
Usar efecto Parallax Si activa este ajuste, la imagen de fondo
permanecer fija al desplazar la pgina. Tenga en cuenta que cuando este
ajuste est activado, las imgenes se escalarn a la altura del navegador.
Eliminar sombra interior Elija si desea mostrar o no la sombra interior
de la seccin.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Carrusel aparecer
con el rtulo Carrusel en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.
Comience haciendo clic en Aadir Diapositiva en la parte superior de esta
ventana modal de opciones. As aadir el primer pase y ver los ajustes de la
diapositiva correspondiente:
Encabezado Defina el ttulo para su diapositiva aqu.
Texto del botn Si desea mostrar un botn debajo del contenido de la
diapositiva, introduzca el texto aqu. Deje en blanco si prefiere no mostrar
un botn.
URL del botn Si muestra un botn, escriba una URL vlida en este
campo para definir el destino del enlace.
Imagen de fondo Si es definida, esta imagen se usar como fondo para
este mdulo. Para quitar la imagen de fondo, simplemente borre la URL
del campo de configuracin.
La altura de una diapositiva est determinada por la cantidad de texto que
agregue al contenido. Si tiene varias diapositivas, el carrusel tomar la
altura de la imagen ms alta.
El ancho del carrusel est determinado por la estructura de columnas
dentro de la cual est situado. Recomendamos que las imgenes del
carrusel tengan al menos el ancho de la columna que lo contenga. Los
anchos de columna son los siguientes:
1 columna: 1080 pxeles
de columna: 795 pxeles

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 131


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
de columna: 700 pxeles
de columna: 510 pxeles
de columna: 320 pxeles
de columna: 225 pxeles
Tenga en cuenta que si activa el efecto Parallax, recomendamos que las
imgenes sean al menos del tamao estndar de una pantalla, ya que
tomarn el ancho o la altura de la ventana del navegador (por ejemplo,
1280 x 768 pxeles).
Posicin de la imagen de fondo Elija la posicin de la imagen de fondo.
Tamao de imagen de fondo Elija el tamao de la imagen de fondo.
Color de fondo Si tan solo desea usar un color slido como fondo, use el
selector de color para definirlo.
Imagen de diapositiva Si agrega una imagen de diapositiva, esta
aparecer a la izquierda del texto, sobre el fondo del pase. Si no especifica
una imagen de diapositiva, se mostrar nicamente un texto centrado. Ya
que la altura de cada pase est determinada por el texto, si la imagen
tiene la altura suficiente se mostrar alineada en la parte inferior de la
diapositiva.
Tenga en cuenta que la altura de una diapositiva con imagen puede estar
determinada por la imagen ms alta del pase, as que asegrese de que la
imagen de diapositiva es lo suficientemente alta para encajar en caso de
que quiera una imagen alineada a la base. Por razones de legibilidad, las
imgenes de diapositiva solo aparecern en los pases que estn en
anchos de de columna, de columna, o 1 columna. Asimismo, las
imgenes de diapositiva no se mostrarn en navegadores cuyo ancho sea
menor de 768 pxeles. Los anchos de las imgenes de diapositiva se
enumerarn a continuacin. Recomendamos que las imgenes de
diapositiva tengan al menos este ancho:
1 columna: 410 pxeles
de columna: 308 pxeles
de columna: 260 pxeles
Usar superposicin de fondo Si activa este ajuste, se aadir un color
de superposicin encima de la imagen de fondo y detrs del contenido del
carrusel.
Color de superposicin de fondo Aqu puede elegir el color de
superposicin de fondo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 132


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar superposicin de texto Si activa este ajuste, se aadir un color
de fondo detrs del texto del carrusel para que el texto sea ms legible
sobre las imgenes de fondo.
Alineacin vertical de la imagen de diapositiva Elija la lineacin
vertical de la imagen, que puede ser centrada verticalmente o alineada en
la parte inferior del carrusel.
Vdeo de diapositiva Si es definido, este vdeo aparecer a la izquierda
del texto de la diapositiva. Introduzca la URL del vdeo de YouTube o Vimeo,
o deje en blanco para mostrar solo texto.
Texto alternativo de la imagen El texto alternativo proporciona
informacin necesaria en caso de que la imagen no cargue, no aparezca
correctamente, o en cualquier otra situacin en la cual no se pueda
visualizar. Tambin permite que la imagen sea leda y reconocida por los
motores de bsqueda.
Color de texto Si el fondo del pase es oscuro, el color del texto debera
ser claro. Si el fondo del pase es claro, el color del texto debera ser
oscuro.
Vdeo MP4 de fondo Todos los vdeos deben ser subidos en formato
.MP4 o .WEBM para asegurarse mxima compatibilidad con todos los
navegadores. Suba la versin .MP4 aqu. Nota importante: Los vdeos de
fondo se desactivan en dispositivos mviles. En su lugar, se utiliza una
imagen de fondo. Por esta razn, debera definir ambos fondos, imagen y
vdeo, para asegurarse mejores resultados. Nota importante: para que el
formato de vdeo WEBM funcione en todos los navegadores, su servidor debe
tener designados los tipos MIME correctos. Puede aprender ms sobre cmo
usar el archivo .htaccess para definir los tipos MIME aqu. Si nota que sus
vdeos no se reproducen en ciertos navegadores, es probable que esta sea la
razn.
Vdeo WEBM de fondo - Todos los vdeos deben ser subidos en
formato .MP4 o .WEBM para asegurarse mxima compatibilidad con todos
los navegadores. Suba la versin .WEBM aqu. Nota importante: Los vdeos
de fondo se desactivan en dispositivos mviles. En su lugar, se utiliza una
imagen de fondo. Por esta razn, debera definir ambos fondos, imagen y
vdeo, para asegurarse mejores resultados. Nota importante: para que el
formato de vdeo WEBM funcione en todos los navegadores, su servidor debe
tener designados los tipos MIME correctos. Puede aprender ms sobre cmo
usar el archivo .htaccess para definir los tipos MIME aqu. Si nota que sus
vdeos no se reproducen en ciertos navegadores, es probable que esta sea la
razn.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 133


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ancho del vdeo de fondo Para que los vdeos se muestren
correctamente, debe introducir el ancho exacto (en pxeles) del vdeo aqu.
Alto del vdeo de fondo Para que los vdeos se muestren
correctamente, debe introducir el alto exacto (en pxeles) del vdeo aqu.
Pausar vdeo Permita que el vdeo sea pausado por otros reproductores
cuando comiencen a reproducir.
Contenido Escriba aqu el texto principal del contenido para la
diapositiva. Tenga en cuenta que la cantidad de texto que introduzca aqu
determinar la altura del carrusel.
Rtulo de administracin El rtulo de administracin le permite dar un
nombre especfico a la diapositiva para que sea ms fcil de identificar.
Guardar Luego de hacer clic en el botn Guardar de estos ajustes
individuales, volver a los ajustes del mdulo, en donde podr agregar
una nueva diapositiva, borrar o editar diapositivas, y arrastrar y soltar para
reordenar las diapositivas existentes.

Tabla de precios
Es ms fcil que nunca crear tablas de precios para sus productos en lnea. Cree
todas las tablas que necesite y controle el monto y los detalles de cada una.
Hasta puede destacar un plan en particular para aumentar sus ventas. Aunque el
mdulo incluya ms de una tabla de precios, ser manejado como un mdulo
nico y puede colocarse en una columna de cualquier ancho.

Desactivar en Seleccione el dispositivo en el cual desea desactivar este


mdulo.
Rtulo de administracin - Por defecto, el mdulo Tabla de precios
aparecer con el rtulo Tabla de precios en el constructor. El rtulo de

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 134


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.
Aadir Tabla de precios Comience haciendo clic en Aadir Tabla de
precios en la parte superior de esta ventana modal de opciones. As
aadir la primera tabla y ver los ajustes correspondientes.
Destacar esta tabla Elija si desea destacar la tabla o no. Destacar una
tabla la hace resaltar del resto.
Ttulo El ttulo que escriba aqu se mostrar para esta opcin de precios.
(Por ejemplo: Desarrollador).
Subttulo El subttulo que escriba aqu aparecer debajo del ttulo (Por
ejemplo: El ms popular).
Moneda Escriba aqu el smbolo de moneda.
Por - Si el precio se basa en una suscripcin, escriba el perodo de pago
aqu. (Por ejemplo: Anual, Ao, etc.).
Precio Escriba el valor del producto aqu.
URL del botn En la parte inferior de cada tabla puede insertar un
botn de Llamado a la accin, si escribe una URL vlida en este campo.
Deje este campo y el de Texto del botn en blanco si no desea mostrar un
botn dentro de la tabla de precios.
Texto del botn - Defina el texto del botn aqu.
Contenido En este campo puede escribir la lista de caractersticas que
incluye o no el producto o plan ofrecido. Separe cada elemento de la lista
en una lnea aparte y comience con un smbolo + para una caracterstica
incluida, o un smbolo - para una caracterstica no incluida.
Guardar Luego de hacer clic en el botn Guardar de los ajustes de la
tabla de precios, volver a los ajustes del mdulo, en donde podr agregar
una nueva tabla, borrar o editar tablas, y arrastrar y soltar para reordenar
las tablas existentes.

Testimonio
Los Testimonios representan una buena manera de alentar la confianza de sus
visitantes. Al usar el mdulo de testimonios de Divi puede agregar informacin
rpidamente en las pginas de venta y de suscripcin. Estos testimonios son por
lo general breves reseas o recomendaciones hechas por sus clientes. Cada
testimonio tiene unas comillas, y est firmado con el nombre del autor, adems
de incluir el enlace a su sitio (si lo tuviera). Este mdulo es muy eficaz cuando se
usa en conjunto con las tablas de precios en las pginas de venta.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 135


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Nombre del autor Escriba aqu el nombre del autor del testimonio. Este
aparecer en la parte inferior del mdulo, debajo del testimonio.
Ttulo del puesto Aqu puede escribir el puesto de trabajo del autor, el
cual se mostrar debajo del nombre. Para no mostrar este texto,
simplemente deje el campo en blanco.
Nombre de la empresa Aqu puede definir el nombre de la empresa
para la persona que ofrece el testimonio. Este nombre tambin ser un
enlace al sitio web especificado en la siguiente opcin.
Sitio web del autor/empresa Aqu puede escribir la URL del sitio web
para el testimonio. El autor/empresa contendr un enlace a este sitio, si es
definido.
La URL se abre Esta opcin le permite elegir si los enlaces de los
testimonios se abrirn en una nueva ventana, o en la misma pestaa del
navegador (esto ocasiona que el visitante abandone su sitio).
URL de la imagen de retrato Aqu puede subir una foto para usar en el
testimonio. Haga clic en el botn Subir imagen para seleccionarla de su
equipo o de la Librera multimedia de WordPress.
Icono de cita Esta opcin le permite desactivar el icono de la cita
(comillas) si lo desea. En ocasiones este icono puede recargar el
testimonio si se usa adems una imagen de retrato. Si elige mostrar una
imagen de retrato, puede considerar desactivar el icono de la cita, para
obtener una apariencia ms prolija.
Usar color de fondo Elija si se muestra o no el color de fondo asignado
en el siguiente campo.
Color de fondo Defina el color de fondo para el recuadro.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 136


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de texto Si trabaja con un fondo oscuro, el texto deber ser claro.
Si trabaja con un fondo claro, el texto deber ser oscuro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Contenido En este campo puede escribir el contenido del testimonio.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Testimonio aparecer
con el rtulo Testimonio en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Llamado a la accin (CTA, por Call To Action)


Siempre es importante hacer a sus visitantes un claro llamado a la accin. Sea
que est tratando de que realicen una compra, o simplemente que soliciten un
presupuesto, con esta pequea seccin conseguir los clics que necesita. El
mdulo CTA es una combinacin sencilla de un ttulo, un texto breve y un botn.
Cuando se combina con un color de fondo llamativo, el CTA puede captar ms
rpido la atencin de sus visitantes.

Ttulo Escriba aqu el ttulo para el mdulo de Llamado a la accin.


URL del botn Escriba una URL vlida en este campo para especificar la
pgina de destino del botn.
La URL se abre Elija si el enlace se abre en la misma ventana o no.
Texto del botn Defina el texto del botn aqu, o djelo en blanco si no
desea mostrar un botn.
Usar color de fondo Elija si se muestra o no el color de fondo asignado
en el siguiente campo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 137


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de fondo Puede darle al bloque del CTA cualquier color que desee,
usando este selector. Elija el mismo color en el fondo de la seccin para
crear la apariencia de un CTA de ancho completo o sin bordes.
Color de texto Si el color de fondo del CTA es oscuro, el texto debera
ser claro. Si el color de fondo del CTA es claro, el color de texto debera ser
oscuro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Contenido En este campo puede introducir el contenido del llamado a la
accin.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Llamado a la accin
aparecer con el rtulo Llamado a la accin en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Imagen
Divi simplifica el proceso de agregar imgenes en cualquier parte de su sitio.
Todas las imgenes incluyen carga diferida, y cuatro estilos de animacin
diferentes que le dan a la navegacin un toque ms dinmico. Los mdulos de
Imagen pueden colocarse en cualquier columna que usted cree, y el tamao ser
ajustado para encajar automticamente.

URL de la imagen Introduzca la URL de la imagen aqu, o elija/suba una


desde la Biblioteca multimedia de WordPress. Las imgenes siempre
aparecern alineadas a la izquierda dentro de sus respectivas columnas y

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 138


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
tomarn el ancho total de la columna. Sin embargo, la imagen nunca se
escalar a un tamao mayor al original. La altura de la imagen se
determinar por la relacin de aspecto de la imagen original.
Texto alternativo de la imagen El texto alternativo proporciona
informacin necesaria en caso de que la imagen no cargue, no aparezca
correctamente, o en cualquier otra situacin en la cual no se pueda
visualizar. Tambin permite que la imagen sea leda y reconocida por los
motores de bsqueda.
Texto del ttulo de la imagen Esto define el texto de la etiqueta HTML
title.
Abrir en Lightbox Aqu puede elegir si la imagen se abrir o no en estilo
Lightbox cuando se hace clic en ella. Si se activa, la imagen se ampliar a
su tamao completo si se hace clic en ella dentro de la ventana modal.
Esta es una caracterstica muy til para los portfolios.
URL del enlace Escriba una URL vlida en este campo para convertir la
imagen en un enlace. No se crear un enlace si se deja el campo en blanco
y la imagen permanecer como un elemento esttico.
La URL se abre Elija si el enlace se abre en la misma ventana o no.
Animacin Use este men desplegable para definir el tipo de animacin
de la carga diferida para la imagen. Puede elegir que aparezca desde la
derecha, desde la izquierda, desde abajo o desde arriba.
Eliminar espacio debajo de la imagen Aqu puede elegir si la imagen
debe tener o no un espacio debajo. Es decir, si su base debe estar pegada
a la base de la seccin.
Alineacin de la imagen Aqu puede elegir la alineacin de la imagen:
izquierda, derecha o centrada.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Imagen aparecer con
el rtulo Imagen en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Galera
Compartir una coleccin de imgenes siempre es bueno para atraer visitantes a
su contenido, por medio del impacto visual. El mdulo Galera le permite crear y
organizar galeras de WordPress en cualquier lugar de su sitio.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 139


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Puede elegir mostrar la galera de imgenes con un diseo de Grilla, separado en
pginas, o con un Carrusel. Adems, al hacer clic en cualquiera de las imgenes,
se abrirn en tamao completo dentro de una ventana de Lightbox.

Imgenes de la Galera Haga clic en el botn Actualizar Galera para


seleccionar las imgenes que desee mostrar.
Diseo Intercambie los distintos tipos de presentacin (Carrusel o Grilla).
Si elige Grilla ver las dos siguientes opciones a continuacin.
Nmero de imgenes Defina el nmero de imgenes que desea
mostrar por pgina.
Orientacin de miniatura Esto controla la orientacin de las miniaturas
de la galera (apaisada o en retrato).
Mostrar ttulo y leyenda Aqu puede elegir si las imgenes muestran el
ttulo y la leyenda, en caso de tener uno o ambos.
Mostrar paginacin Active o desactive la paginacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 140


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de texto Aqu puede elegir el contraste del texto. Si trabaja con un
fondo oscuro, el texto deber ser claro. Si trabaja con un fondo claro, el
texto deber ser oscuro.
Animacin automtica Si seleccion el diseo Carrusel y desea que las
imgenes del roten de manera automtica, sin que el visitante deba
presionar los botones, active esta opcin y luego defina la velocidad de
rotacin en el siguiente campo.
Velocidad de animacin automtica (en milisegundos) Aqu puede
designar cun largo ser el intervalo de transicin de cada imagen, si est
activada la opcin Animacin automtica. Cuanto mayor sea el nmero,
ms tiempo transcurrir entre cada rotacin.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Galera aparecer con
el rtulo Galera en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Barra lateral
Divi le permite crear un nmero ilimitado de reas listas para incluir widgets. Las
Barras laterales pueden agregarse en cualquier pgina, dndole la posibilidad de
crear barras nicas para distintas secciones de su sitio.

Orientacin Puede situar las barras laterales donde desee. Elija en qu


lado de la pgina aparecer la barra lateral. Este ajuste controla la
orientacin del contenido y la posicin del borde.
rea de widget El mdulo Barra lateral usa reas de widgets que usted
puede crear desde el men Apariencia > Widgets. Puede seleccionar

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 141


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
cualquiera de sus reas personalizadas de widgets desde este men
desplegable.
Color de texto Si la barra lateral se muestra sobre un fondo claro, el
color del texto debera ser oscuro. Si la barra lateral se muestra sobre un
fondo oscuro, el color del texto debera ser claro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Barra lateral
aparecer con el rtulo Barra lateral en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Portfolio
Con el mdulo Portfolio puede hacer alarde de sus trabajos en cualquier parte
del sitio y en cualquier estructura de columnas.

Diseo Puede elegir mostrar sus proyectos con un diseo en Grilla o en


Ancho completo.
Nmero de entradas Defina el nmero de proyectos que desea
mostrar. Necesitar tener proyectos creados para que aparezcan dentro
de este mdulo.
Incluir categoras Seleccione las categoras que desea incluir en la lista
de proyectos. Todas las categoras de proyectos que haya creado se
mostrarn aqu y podr seleccionarlas o deseleccionarlas.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 142


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mostrar ttulo Elija si desea mostrar o no los ttulos de los proyectos.
Mostrar categoras Elija si desea mostrar o no las categoras de los
proyectos.
Mostrar paginacin Elija si desea mostrar o no la paginacin en esta
lista.
Color de texto Si el portfolio se muestra sobre un fondo claro, el color
del texto debera ser oscuro. Si el portfolio se muestra sobre un fondo
oscuro, el color del texto debera ser claro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Portfolio aparecer
con el rtulo Portfolio en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Blog
Con Divi, hasta los blogs son un mdulo, el cual puede colocarse en cualquier
parte del sitio y con varios formatos. Puede combinar mdulos de blog y de
barras laterales para crear la estructura clsica de un blog; o blogs de una, dos o
tres columnas.

Diseo Puede elegir mostrar las entradas del blog con un diseo en
Grilla o en Ancho completo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 143


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Nmero de entradas Defina el nmero de entradas que desea mostrar.
Necesitar tener entradas creadas para que aparezcan dentro de este
mdulo.
Incluir categoras Seleccione las categoras que desea incluir en la lista
de entradas. Todas las categoras de entradas que haya creado se
mostrarn aqu y podr seleccionarlas o deseleccionarlas.
Formato de fecha Defina el formato de fecha que desea mostrar en las
entradas del blog. El formato predeterminado es M j, Y (Enero 6, 2014).
Vea la Documentacin de WordPress para obtener ms opciones de
formato de fecha.
Mostrar imagen destacada Esta opcin le permite mostrar o no las
miniaturas de las entradas dentro del mdulo blog.
Contenido Si muestra el contenido completo en la pgina ndice las
entradas no aparecen cortadas. Si muestra el extracto, solo se mostrar
una breve parte del texto.
Botn Leer ms Elija si desea mostrar o no el enlace Leer ms a
continuacin del extracto.
Mostrar autor Elija si desea mostrar o no el autor de cada entrada del
blog.
Mostrar fecha Elija si desea mostrar o no la fecha en la cual fue creada
la entrada.
Mostrar categoras Elija si desea mostrar o no las categoras de las
entradas.
Mostrar nmero de comentarios Elija si desea mostrar o no la
cantidad de comentarios que hay en cada entrada.
Mostrar paginacin Elija si desea mostrar o no la paginacin en esta
lista. Para activar la paginacin, deber instalar el plugin WP-Pagenavi.
Nmero de compensacin Elija desde cuntas entradas efectuar
compensacin (nmero de entradas recientes que se omitirn).
Superposicin de imagen destacada Elija si desea mostrar un icono y
un color de superposicin cuando el visitante pase el puntero del ratn
sobre la imagen destacada de una entrada.
Color del texto Si el blog se muestra sobre un fondo claro, el color del
texto debera ser oscuro. Si el blog se muestra sobre un fondo oscuro, el
color del texto debera ser claro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 144


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Rtulo de administracin Por defecto, el mdulo Blog aparecer con el
rtulo Blog en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Barras de progreso
Las Barras de progreso representan una manera moderna y efectiva de mostrar
estadsticas a sus visitantes. La animacin es lanzada en forma diferida al
navegar por la pgina, y puede usar dentro de este mdulo todas las barras que
desee.

Color de texto Si las barras se muestran sobre un fondo claro, el color


del texto debera ser oscuro. Si se muestran sobre un fondo oscuro, el
color del texto debera ser claro.
Color de fondo Puede darles a las barras el color de fondo que desee,
con el selector de color.
Color de fondo de la barra Puede darles a las barras de porcentaje el
color que desee, con el selector de color.
Usar porcentajes Elija si desea mostrar el nmero con o sin el signo de
porcentaje.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Barras de progreso
aparecer con el rtulo Barras de progreso en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.
Comience haciendo clic en Aadir Barra de progreso en la parte superior de la
ventana modal de opciones. As aadir la primera barra y ver los ajustes
correspondientes:

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 145


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ttulo El ttulo que escriba aqu ser usado para la etiqueta de esta
barra.
Porcentaje Defina aqu el porcentaje para esta barra.
Guardar Luego de hacer clic en el botn Guardar de los ajustes de la
barra, volver a los ajustes del mdulo, en donde podr agregar una
nueva barra, borrar o editar barras, y arrastrar y soltar para reordenar las
barras existentes.

Suscripcin
Incrementar las suscripciones a listas de correo es fcil con este mdulo. Posee
soporte para los servicios MailChimp, AWeber y FeedBurner.

Configuracin en panel de opciones del tema


MailChimp Antes de que pueda usar este mdulo con MailChimp, debe
conectarse primero con su cuenta de MailChimp. Para esto, visite el men
Divi > Opciones del tema del administrador de WordPress. Busque en la
pestaa General la opcin Clave API de MailChimp, introduzca su clave API y
haga clic en el botn Guardar cambios. Su cuenta estar conectada. Aqu
encontrar ms informacin sobre cmo obtener su clave API.
AWeber Antes de que pueda usar este mdulo con AWeber, debe
conectarse primero con su cuenta de AWeber. Para esto, visite el men Divi
> Opciones del tema del administrador de WordPress. Busque en la
pestaa General la opcin Autorizacin de AWeber y obtenga su cdigo
nico. Luego copie y pegue el cdigo en el campo de configuracin del
panel de opciones y haga clic en el botn Establecer conexin para
confirmar la conexin y vincularla con su cuenta.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 146


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Configuracin del mdulo
Proveedor del servicio Aqu puede elegir el proveedor de la lista de
correos que est usando. El mdulo actualmente incluye integracin con
MailChimp, AWeber y FeedBurner. Seleccione el proveedor de la lista y
contine con las opciones siguientes.
Listas de MailChimp Si seleccion MailChimp como proveedor,
aparecer esta opcin. Aqu puede elegir una lista de MailChimp para
agregar clientes. Si no ve ninguna lista aqu, debe asegurarse de que se ha
introducido la clave API de MailChimp en el panel de Opciones del tema y
que al menos tiene una lista creada en su cuenta de MailChimp. Si agreg
una nueva lista, pero no aparece aqu, active la opcin Regenerar listas de
MailChimp en el panel de opciones. No olvide desactivarla una vez que la
lista ha sido regenerada.
Listas de AWeber Si seleccion AWeber como proveedor, aparecer esta
opcin. Aqu puede elegir una lista de AWeber para agregar clientes. Si no
ve ninguna lista aqu, debe asegurarse de que AWeber est configurado
correctamente en el panel de Opciones del tema y que al menos tiene una
lista creada en su cuenta de AWeber. Si agreg una nueva lista, pero no
aparece aqu, active la opcin Regenerar listas de AWeber en el panel de
opciones. No olvide desactivarla una vez que la lista ha sido regenerada.
Ttulo del Feed Si seleccion FeedBurner como proveedor, aparecer
esta opcin. As es como identificar su cuenta de FeedBurner. Deber
escribir el ttulo de su Feed, el cual podr encontrar aqu.
Ttulo Escriba aqu el ttulo para el formulario de suscripcin.
Texto del botn Defina aqu el texto para el botn de suscripcin.
Usar color de fondo Elija si se muestra o no el color de fondo asignado
en el siguiente campo.
Color de fondo Puede darle al bloque de suscripcin cualquier color que
desee, usando este selector. Elija el mismo color en el fondo de la seccin
para crear la apariencia de un bloque de ancho completo o sin bordes.
Color de texto Si el mdulo se muestra sobre un fondo claro, el color
del texto debera ser oscuro. Si se muestra sobre un fondo oscuro, el color
del texto debera ser claro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Contenido En este campo puede introducir el contenido del mdulo
Suscripcin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 147


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Suscripcin aparecer
con el rtulo Suscripcin en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Texto
El Texto puede colocarse en cualquier parte de la pgina. Estos mdulos pueden
ir dentro de cualquier tipo de columna y cuando se combinan con otros mdulos
el resultado es ms dinmico. Cuando agregue un mdulo de Texto, tendr todas
las opciones de edicin que existen en una pgina convencional de WordPress.
El mdulo Texto puede usarse para crear pequeas porciones de informacin
dentro de un diseo complejo, o se pueden incluir como una columna de ancho
completo que ocupe toda la pgina.

Color de texto Si el mdulo se muestra sobre un fondo claro, el color


del texto debera ser oscuro. Si se muestra sobre un fondo oscuro, el color
del texto debera ser claro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Contenido En este campo deber introducir el contenido del cuerpo del
texto. El texto ocupar el ancho completo de la columna que lo contiene.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 148


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Rtulo de administracin Por defecto, el mdulo Texto aparecer con
el rtulo Texto en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Conmutador
Los Conmutadores son una herramienta para consolidar y ordenar informacin,
adems de mejorar la experiencia del usuario dentro de la pgina. Puede crear
la cantidad de conmutadores que desee, los cuales lucirn genial en columnas
de cualquier tamao.

Ttulo Escriba aqu el ttulo del conmutador.


Estado Puede elegir mostrar el conmutador abierto o cerrado con este
men desplegable.
Contenido En este campo puede introducir el contenido del
conmutador.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Conmutador
aparecer con el rtulo Conmutador en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Pestaas
Las Pestaas son tambin otra herramienta para consolidar y ordenar
informacin, adems de mejorar la experiencia del usuario dentro de la pgina.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 149


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Puede crear la cantidad de pestaas que desee, las cuales lucirn genial en
columnas de cualquier tamao. En de columna los botones de la pestaa son
apilados y se mantienen visibles. En columnas de mayor ancho, los botones de la
pestaa se disponen en una fila horizontal. Puede incluir toda clase de contenido
dentro de una pestaa, ya que este contenido se controla con el editor
convencional de las pginas de WordPress.

Aadir Pestaa - Comience haciendo clic en Aadir Pestaa en la parte


superior de la ventana modal de opciones. As aadir la primera pestaa
y ver los ajustes correspondientes.
Ttulo El ttulo que escriba aqu se mostrar dentro del botn para esta
pestaa.
Contenido En este campo puede introducir el contenido del cuerpo de
la pestaa actual.
Guardar - Luego de hacer clic en el botn Guardar de los ajustes de
pestaa, volver a los ajustes del mdulo, en donde podr agregar una
nueva pestaa, borrar o editar pestaas, y arrastrar y soltar para
reordenar las pestaas existentes.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Pestaas aparecer
con el rtulo Pestaas en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Formulario de contacto
La comunicacin es la piedra fundamental de cualquier negocio. Con Divi, puede
agregar Formularios de contacto fcilmente en cualquier parte del sitio. Divi 2.6
permite aadir nuevos campos de texto, adems de los predeterminados
Nombre, Correo electrnico y Mensaje.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 150


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mostrar Captcha Para mayor seguridad puede mostrar un CAPTCHA en
el formulario de contacto, seleccionndolo de este men desplegable.
Correo electrnico Escriba la direccin de correo electrnico donde
deberan ser enviados los mensajes desde este formulario.
Ttulo Defina aqu el ttulo para el formulario de contacto.
Patrn del mensaje En este campo puede definir el patrn
personalizado para el mensaje de correo electrnico. Los campos se
deben incluir en siguiente formato: %%id_campo%%. Por ejemplo, si desea
incluir el campo con la ID telefono y el campo con la ID mensaje, puede
usar el siguiente patrn: Mi mensaje es %%mensaje%% y nmero de
telfono es %%telefono%%. Si deja el campo en blanco se usar el mensaje
predeterminado.
Activar redireccin de URL Si selecciona esta opcin, el usuario ser
redirigido luego del envo exitoso a la URL que especifique a continuacin.
URL de redireccin Introduzca aqu la URL de redireccin.
Mensaje de xito Introduzca aqu el mensaje que desea mostrar luego
del envo exitoso del formulario. Deje el campo en blanco para usar el
predeterminado.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Formulario de
contacto aparecer con el rtulo Formulario de contacto en el constructor.
El rtulo de administracin le permite cambiar esta etiqueta para
identificarlo ms fcilmente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 151


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Para aadir un campo personalizado haga clic en Aadir Campo en la parte
superior de la ventana modal de opciones. As aadir un campo ms y ver los
ajustes correspondientes:
ID del campo Defina aqu una ID nica para el campo; por ejemplo, telef.
Use nicamente caracteres en ingls, preferentemente en minsculas, sin
caracteres especiales ni espacios.
Ttulo Escriba aqu el ttulo, que ser mostrado dentro del campo; por
ejemplo, Telfono.
Tipo Seleccione aqu el tipo de campo que est insertando: Campo de
entrada de texto, el cual ocupa una lnea y admite textos breves; Campo
Correo electrnico, el cual ocupa una lnea y solo admite direcciones de
correo electrnico, o rea de texto, el cual admite textos extensos.
Campo obligatorio Aqu puede definir si el campo debe ser obligatorio
u opcional.
Ancho completo Si activa este ajuste, el campo tomar el 100% del
ancho del rea que lo contiene, de lo contrario ocupar el 50%.
Guardar Luego de hacer clic en el botn Guardar de los ajustes del
campo, volver a los ajustes del mdulo, en donde podr agregar un
nuevo campo, borrar o editar campos, y arrastrar y soltar para reordenar
los campos existentes.

Encabezado de ancho completo


El mdulo Encabezado de ancho completo simplifica el proceso de agregar
elegantes y coloridos encabezados en la parte superior de sus pginas (o en
cualquier parte de la pgina, a su eleccin). Estos mdulos solo pueden
agregarse en Secciones de ancho completo.

Ttulo Introduzca el ttulo para la pgina aqu.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 152


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Texto del subttulo Si desea usar un subttulo, agrguelo aqu. El
subttulo aparecer debajo del ttulo, en una tipografa ms pequea.
Color de texto Aqu puede elegir el contraste del texto. Si trabaja con un
fondo oscuro, el texto deber ser claro. Si trabaja con un fondo claro, el
texto deber ser oscuro.
Orientacin del texto y logo Esto controla la alineacin del texto
dentro de este mdulo.
Pantalla completa Aqu puede elegir si el encabezado se expande al
tamao de la pantalla completa.
Mostrar botn 'Desplazar hacia abajo' Aqu puede elegir si se muestra
el botn Desplazar hacia abajo.
Texto del botn #1 Introduzca el texto para el primer botn.
URL del botn #1 Introduzca la URL para el primer botn.
Texto del botn #2 Introduzca el texto para el segundo botn.
URL del botn #2 Introduzca la URL para el segundo botn.
URL de la imagen de fondo Suba la imagen que desee, o introduzca la
URL de la imagen que quiera mostrar.
Color de fondo Puede darle al encabezado cualquier color que desee,
usando este selector.
Color de superposicin de fondo Elija una color de superposicin, el
cual se colocar sobre la imagen de fondo. Puede crear atractivos efectos
de superposicin semitransparente sobre las imgenes de fondo.
Usar efecto Parallax Si se activa, la imagen de fondo permanecer fija
al desplazar la pgina, creando un asombroso efecto denominado
Parallax.
URL de la imagen del logo Suba la imagen que desee, o introduzca la
URL de la imagen que quiera mostrar.
Texto alternativo de imagen del logo Esto define el texto de la
etiqueta HTML alt. Aqu puede usarse una descripcin corta de la imagen.
Ttulo del logo Esto define el texto de la etiqueta HTML title.
URL de la imagen de encabezado Suba la imagen que desee, o
introduzca la URL de la imagen que quiera mostrar.
Alineacin vertical de la imagen Esto controla la orientacin de la
imagen dentro del mdulo.
Contenido Aqu puede definir el contenido que ser mostrado debajo
del encabezado.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 153


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Encabezado de ancho completo en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Portfolio por filtros


El Portfolio por filtros le permite mostrar sus proyectos ms recientes con una
estructura estndar o en grilla. Este portfolio se ve igual al del mdulo Portfolio,
salvo por cargar los nuevos proyectos usando peticiones de Ajax, y por incluir la
opcin de filtrar los proyectos por categoras. Cuando se selecciona una
categora en particular, la lista de proyectos se regenera instantneamente con
una nueva lista de proyectos de la categora seleccionada.

Diseo Elija el estilo deseado para el portfolio. Ancho completo mostrar


un proyecto por fila, en tanto Grilla mostrar todos los proyectos en una
grilla con mltiples proyectos por fila.
Nmero de entradas Defina el nmero de proyectos que desea
mostrar, antes de que se use la paginacin.
Incluir categoras Seleccione las categoras que desea incluir en la lista
de proyectos. Los proyectos de categoras que no estn seleccionadas, no
se mostrarn en la lista.
Mostrar ttulo Escriba un ttulo, si lo desea, el cual se mostrar en la
parte superior de la lista de proyectos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 154


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mostrar categoras - Elija si desea mostrar o no las categoras debajo de
los proyectos, en el rea de metadatos de entrada.
Mostrar paginacin Esta opcin activa/desactiva la paginacin. Si la
paginacin est desactivada, se mostrar solo una pgina de proyectos
para cada categora.
Color de texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Portfolio por filtros en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Audio
El mdulo Audio le permite incrustar un archivo de audio en un reproductor
personalizado y colocarlo en cualquier parte de la pgina. El reproductor posee
un estilo moderno y simple. Este es un componente importante para msicos
que desean mostrar sus creaciones, o para publicar Podcasts.

Audio Defina el archivo de audio para usar en este mdulo. Para


eliminar un archivo de audio del mdulo, simplemente borre la URL
introducida en este campo. Haga clic en el botn Subir archivo de audio

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 155


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
para subir un archivo de audio desde su equipo y poder usarlo en el
reproductor de audio.
Ttulo El ttulo del mdulo audio se muestra dentro del reproductor de
audio. Por lo general, este ser el nombre de la cancin o pista.
Nombre del artista Aqu puede introducir el nombre del artista, el cual
ser mostrado en el reproductor de audio debajo del ttulo.
Nombre del lbum Aqu puede introducir el nombre del lbum, el cual
ser mostrado en el reproductor de audio debajo del ttulo, junto al
nombre del artista.
URL de la imagen de tapa Las imgenes de tapa se muestran a la
izquierda o arriba de los controles de audio (dependiendo del ancho de la
columna). Haga clic en el botn Cargar imagen para subir la imagen desde
su equipo y mostrarla como tapa.
Color de texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Audio en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Mapa
El mdulo Mapa simplifica el proceso de incrustar un mapa de Google en
cualquier parte de la pgina. Incluso puede agregarle ilimitados marcadores de
ubicacin y definir una ubicacin personalizada como zona de partida. El mdulo
Mapa tambin est disponible en formato de ancho completo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 156


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes generales del mdulo
Direccin central del mapa Escriba una direccin como punto central
para el mapa, la cual ser mostrada en el mapa a continuacin. Esto es til
si tiene varios marcadores y quiere mostrar el zoom del mapa en una
ubicacin especfica. Simplemente introduzca la direccin en formato
estndar, como por ejemplo Av. Pueyrredn 650, Ciudad de Crdoba.
Zoom con la rueda del ratn Aqu puede elegir si el nivel del zoom se
controla con la rueda del ratn o no.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Mapa en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Ajustes de marcador individual


Ttulo Al crear un nuevo marcador, puede asignarle un ttulo. Este texto
aparecer en el recuadro al posar el puntero del ratn sobre el marcador
en el mapa.
Direccin del marcador en el mapa Esta es la ubicacin especfica en el
mapa donde aparecer el nuevo marcador. Escriba la direccin en
formato estndar.
Contenido Al crear un nuevo marcador, puede asignarle un bloque con
contenido de texto. Este texto aparecer en el recuadro al hacer clic sobre
el marcador en el mapa.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 157


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Redes sociales
Los mdulos de Redes sociales le permiten crear enlaces tipo icono que apuntan
a sus perfiles en redes sociales, tales como Facebook, Twitter, Google+, etc. Estos
iconos estn integrados al tema, y evitan usar un servicio de marcadores de
servicios externos. Puede agregar enlaces a mltiples perfiles dentro de cada
mdulo, y situar el mdulo en cualquier parte de la pgina.

Ajustes generales del mdulo


Forma del enlace Aqu puede elegir la forma de los iconos de las redes
sociales. Puede alternar entre Circular o Rectngulo redondeado.
Color de texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
La URL se abre Aqu puede elegir si el enlace se abre en la misma
ventana o no.
Botn Seguir Aqu puede elegir si se muestra o no el botn Seguir junto
al icono. Si est desactivado, se mostrar nicamente el logo del icono.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Redes sociales en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 158


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes de botones individuales
Red social Elija la red social a la cual desea enlazar. Dependiendo de la
red que seleccione, se usar el logo correspondiente y el color de fondo
predeterminado.
URL de la cuenta Introduzca la URL completa de su perfil en la red
social. A esta pgina apuntar el enlace.
Color del icono Seleccione el color para usar como fondo del botn. Por
defecto, se muestra el color que coincide con la identidad corporativa de
la red social que ha elegido. Sin embargo, tambin puede escoger un color
personalizado.

Persona
El mdulo Persona es la mejor herramienta para crear un bloque de informacin
de perfil personal. Es especialmente conveniente en pginas como Sobre
nosotros o Staf, en donde puede crear una pequea seccin de biografa para
cada miembro. Este mdulo combina texto, imagen y enlaces a redes sociales en
un solo lugar.

Nombre Este es el nombre de la persona que est presentando. El


nombre se muestra en la parte superior del mdulo en un texto con
tipografa ms grande.
Puesto Este texto se mostrar debajo del nombre, con una tipografa
ms pequea. A menudo esto se utiliza para describir el puesto de trabajo
de la persona dentro de un equipo. Por ejemplo, Nick Roach, Diseador
Grfico.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 159


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
URL de la imagen Aqu puede subir una foto para usar en el mdulo.
Animacin Por defecto, las imgenes aparecen al tiempo que el
visitante desplaza la pgina. Aqu puede elegir la direccin de la
animacin, o desactivarla si lo desea.
Color de texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
URL del perfil de Facebook Escriba la URL de la pgina de Facebook, o
deje el campo en blanco para no mostrar el icono de Facebook.
URL del perfil de Twitter Escriba la URL de la pgina de Twitter, o deje el
campo en blanco para no mostrar el icono de Twitter.
URL del perfil de Google+ Escriba la URL de la pgina de Google+, o deje
el campo en blanco para no mostrar el icono de Google+.
URL del perfil de LinkedIn Escriba la URL de la pgina de LinkedIn, o
deje el campo en blanco para no mostrar el icono de LinkedIn.
Descripcin Introduzca aqu el texto principal o biografa de la persona.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Persona en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Cuenta regresiva
El mdulo Cuenta regresiva crea un reloj numrico que mostrar el tiempo
faltante hasta determinada fecha. Esto es til para crear una pgina
Prximamente que genere expectativa de un nuevo evento, producto o
servicio. Cuando se combina con una Pgina en blanco (plantilla Blank Page)
puede crear pginas individuales de presentacin o En mantenimiento.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 160


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ttulo de la Cuenta regresiva Este es el ttulo que se mostrar en la
cuenta regresiva. Se colocar arriba de los nmeros hasta los cuales se
cuenta.
Cuenta regresiva hasta Elija una fecha para la cuenta regresiva. La
fecha debe ser futura.
Color de texto - Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Usar color de fondo Elija si desea mostrar o no un color de fondo para
este mdulo. Si selecciona S, podr elegir el color del selector para el
fondo.
Color de fondo Aqu puede definir un color de fondo personalizado para
la cuenta regresiva.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Cuenta regresiva en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Contador circular
El Contador circular le brinda un atractivo visual para mostrar una estadstica
nica. Cuando se desplaza por la pgina, el nmero avanza y el grfico circular
va completando hasta el porcentaje de base. Puede combinar mltiples
contadores circulares en una misma pgina para darles a los visitantes la
posibilidad de conocer sus habilidades y las de su equipo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 161


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ttulo Escriba un ttulo para el contador circular. Por lo general, ser una
palabra que represente la estadstica que est mostrando. El ttulo
aparecer debajo del nmero dentro del contador circular.
Nmero Defina un nmero para el contador circular. Si elige un nmero
menor de 100, el grfico circular se llenar hasta el porcentaje que
corresponda a ese nmero. Por ejemplo, si introduce el nmero 20, el
crculo se llenar hasta el 20% con el color elegido.
Signo de porcentaje Aqu puede elegir si el signo de porcentaje debe
aadirse al nmero seleccionado anteriormente.
Color del texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Color de fondo de la barra Esto cambiar el color de relleno de la barra.
La extensin de la barra est controlada por el nmero seleccionado
anteriormente. Si seleccion el nmero 50 y el color azul, el crculo se
llenar hasta el 50% con ese color.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Contador circular en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Contador numrico
El Contador numrico sirve para mostrar nmeros de manera ms dinmica e
interesante. Este mdulo se usa comnmente para presentar estadsticas sobre
usted o su empresa. Por ejemplo, puede mostrar la cantidad de clientes, o los
seguidores de Facebook, o los productos vendidos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 162


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ttulo Escriba un ttulo para el contador. Este ttulo se mostrar debajo
del texto, en una tipografa ms pequea.
Nmero Este es el nmero hasta el cual se contar. Mientras desplaza la
pgina y llegue hasta el contador, el nmero rpidamente contar desde
cero hasta que llegue a la cifra definida aqu. Aqu debe introducir
nicamente nmeros.
Signo de porcentaje Aqu puede elegir si el signo de porcentaje debe
aadirse al nmero seleccionado anteriormente.
Color del nmero Esto cambiar el color del nmero.
Color del texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Contador numrico en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Acorden
El mdulo Acorden es otra herramienta para consolidar y ordenar informacin
dentro de un mismo sistema. Los acordeones son muy similares a las Pestaas,
salvo que los tems se muestran en una lista vertical. Cuando se abre un nuevo
tem de la lista, el abierto previamente se cierra y se muestra el nuevo contenido.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 163


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes bsicos del mdulo
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Acorden en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Ajustes de elementos del mdulo


Para cada mdulo Acorden puede agregar mltiples elementos (pestaas
dentro del mismo acorden).
Ttulo El ttulo se mostrar cuando el elemento est cerrado dentro del
acorden, y arriba del texto del contenido cuando el acorden haya sido
abierto.
Contenido El contenido se muestra dentro del recuadro del elemento,
debajo del ttulo, cuando el acorden ha sido abierto.

Inicio de sesin
El mdulo Inicio de sesin muestra un formulario de inicio de sesin de
WordPress con el estilo del tema, y en cualquier parte de la pgina. Si usted usa
su sitio como sistema de membresa, agregar un formulario directamente en
una pgina puede ser muy til (en lugar de redirigir a la pgina predeterminada
de WordPress que est fuera del diseo del sitio).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 164


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ttulo El ttulo aparecer dentro del recuadro de inicio de sesin, arriba
del formulario.
Redirigir a la pgina actual Aqu puede elegir si el usuario es redirigido
a la pgina actual una vez iniciada sesin.
Usar color de fondo Si desea que el formulario de inicio de sesin se
muestre sobre un fondo con un color slido, seleccione S en esta opcin
y se usar el color de fondo que elija en la siguiente opcin.
Color de fondo Seleccione un color de fondo para el bloque que
contendr el formulario de inicio de sesin. Si eligi desactivar el color de
fondo en la opcin anterior, este ajuste no tendr efecto.
Color del texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Contenido El contenido ser mostrado dentro del bloque que contendr
el formulario de inicio de sesin, debajo del ttulo. Si desea incluir una
descripcin adicional, use este campo. De lo contrario, tan solo djelo en
blanco (se mostrarn nicamente los campos y botn del formulario).
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Inicio de sesin en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 165


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Men de ancho completo
El mdulo Men de ancho completo le permite colocar un men de navegacin en
cualquier parte de la pgina. Esto puede ser til para aadir un men
secundario, o puede usarse en conjunto con la Pgina en blanco (Blank Page)
para mover el men principal a un lugar ms abajo. En esencia, este mdulo le
permite mover el men de navegacin adonde desee.

Men Seleccione un men que haya creado desde Apariencia > Mens
para usar en este mdulo.
Color de fondo Use el selector de color para elegir un color de fondo
para este mdulo.
Color del texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Orientacin del texto Este men desplegable le permite especificar la
orientacin del texto: alineado a la izquierda, centrado o alineado a la
derecha.
Los submens se abren Elija la direccin en la cual se abrirn los
submens (hacia arriba o hacia abajo).
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Men de ancho completo en el constructor. El rtulo de

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 166


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Portfolio de ancho completo


El mdulo Portfolio de ancho completo funciona igual que el mdulo Portfolio,
salvo por mostrar los proyectos en todo el ancho del navegador. Tambin
incluye dos diseos nuevos: Grilla y Carrusel. El mdulo muestra los proyectos
ms recientes, y puede ser usado por diseadores y artistas para mostrar una
galera de sus ltimos trabajos.

Ttulo del portfolio Escriba un ttulo para mostrar arriba del portfolio, o
deje el campo en blanco si no desea incluir un ttulo.
Diseo Elija el estilo de diseo que desee usar. Grilla mostrar todos los
elementos en una columna mltiple y en un diseo de varias filas. Carrusel
mostrara los elementos en una sola fila con imgenes contiguas que se
deslizar para revelar elementos adicionales en la lista.
Incluir categoras Seleccione las categoras que desea mostrar. Los
proyectos de categoras que no estn seleccionadas, no se mostrarn en
la lista.
Nmero de entradas Elija cuntos proyectos se mostrarn o deje el
campo en blanco para no limitar la cantidad.
Mostrar ttulo Elija si se mostrar o no el ttulo de cada proyecto
cuando se pose el puntero del ratn sobre la imagen correspondiente.
Mostrar fecha Elija si se mostrar o no la fecha de cada proyecto
cuando se pose el puntero del ratn sobre la imagen correspondiente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 167


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de texto Aqu puede elegir el contraste del texto. Si el mdulo se
muestra sobre un fondo claro, el color del texto debera ser oscuro. Si se
muestra sobre un fondo oscuro, el color del texto debera ser claro.
Rotacin automtica del carrusel Si elige la opcin de diseo Carrusel
y desea que las imgenes pasen automticamente, sin que el visitante
tenga que hacer clic en el botn siguiente, active este ajuste y luego defina
a continuacin la velocidad de rotacin si lo desea.
Velocidad de rotacin automtica del carrusel Aqu puede designar la
velocidad de rotacin del carrusel, si selecciona la opcin Rotacin
automtica de carrusel. Cuanto ms alto sea el nmero, ms largo ser el
intervalo entre cada rotacin. (Por ejemplo: 1000 = 1 segundo).
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Portfolio de ancho completo en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Mapa de ancho completo


El mdulo Mapas simplifica el proceso de incrustar un mapa de Google en
cualquier parte de la pgina. Incluso puede agregarle ilimitados marcadores de
ubicacin y definir una ubicacin personalizada como zona de partida. El mdulo
Mapas tambin est disponible en formato normal.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 168


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ajustes generales del mdulo
Direccin central del mapa - Escriba una direccin como punto central
para el mapa, la cual ser mostrada en el mapa a continuacin. Esto es til
si tiene varios marcadores y quiere mostrar el zoom del mapa en una
ubicacin especfica. Simplemente introduzca la direccin en formato
estndar, como por ejemplo Av. Pueyrredn 650, Ciudad de Crdoba.
Zoom con la rueda del ratn Aqu puede elegir si el nivel del zoom se
controla con la rueda del ratn o no.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, este mdulo aparecer con el
rtulo Mapa de ancho completo en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Ajustes de marcador individual


Ttulo Al crear un nuevo marcador, puede asignarle un Ttulo. Este texto
aparecer en el recuadro al posar el puntero del ratn sobre el marcador
en el mapa.
Direccin del marcador en el mapa Esta es la ubicacin especfica en el
mapa donde aparecer el nuevo marcador. Escriba la direccin en
formato estndar.
Contenido Al crear un nuevo marcador, puede asignarle un bloque con
contenido de texto. Este texto aparecer en el recuadro al hacer clic sobre
el marcador en el mapa.

Tienda
Divi ha sido diseado para ser compatible con WooCommerce. Para integrar
WooCommerce deber instalar la ltima versin del plugin.
WooCommerce es la plataforma que recomendamos, ya que posee las mejores
caractersticas, una excelente interfaz, y est bien programada. Luego de activar
el plugin, ver que han sido agregadas al men de WordPress dos secciones
nuevas: WooCommerce y Productos. Puede usar estas secciones para configurar
su tienda y publicar sus productos. Puede encontrar documentacin completa
sobre WooCommerce aqu.
Aunque puede incluir varios mdulos de WooCommerce, tambin puede usar
WooCommerce independientemente del constructor. Puede crear pginas
estndar para el proceso de compra y para el carrito, etc., tal como se describe
en la documentacin de WooCommerce. Tambin puede crear enlaces directos a

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 169


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
las categoras de WooCommerce, o usar los cdigos abreviados de WooCommerce
dentro de un mdulo Texto. Esto le da la libertad de hacer casi cualquier cosa
que desee.

Tipo Elija qu tipo de productos desea mostrar en la lista de productos.


Puede elegir Productos recientes, opcin que mostrar todos los productos
en orden cronolgico; Productos destacados, Productos en oferta, Productos
ms vendidos o Productos mejor valorados.
Nmero de entradas Defina el nmero de productos que desea
mostrar. Deber tener productos creados para que aparezcan en este
mdulo. Vea cmo aadir y administrar productos.
Nmero de columnas Elija cuntas columnas se mostrarn. 4 columnas
deberan usarse para una fila de 1 columna. 2 columnas deberan usarse
para una fila de 1/2 columna. 1 columna debera usarse para una fila de
1/4 de columna.
Ordenar por Elija la manera en que sern ordenados los productos. Las
opciones son: Orden predeterminado, Popularidad, Valoraciones, Fecha,
Precio: menor a mayor, y Precio: mayor a menor.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Tienda aparecer con
el rtulo Tienda en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 170


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Separador
El mdulo Separador es perfecto para crear una lnea horizontal, espacio vertical
personalizado, o ambos. Este elemento sirve para estructurar y organizar mejor
sus pginas.

Color Elija el color de la lnea divisoria de 1 pxel que se crear para este
mdulo. La lnea horizontal tomar el ancho completo de la columna que
la contenga.
Visibilidad Elija no mostrar el separador si solo necesita agregar espacio
vertical. Si elige mostrar el separador, la lnea aparecer en la parte
superior del mdulo, pero no afectar la altura que especifique en el
siguiente campo.
Alto Defina el espacio vertical que se debe agregar debajo del separador
(en pxeles).
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Separador aparecer
con el rtulo Separador en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.

Carrusel de ancho completo


Divi tambin le permite situar carruseles dentro de Secciones de ancho completo,
para que ocupen todo el ancho del navegador. Los carruseles de Divi incluyen
fondos con efecto Parallax, as como tambin fondos de vdeo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 171


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Flechas Elija si desea mostrar o no las flechas de navegacin (izquierda y
derecha).
Controles Elija si desea mostrar o no los botones circulares/indicadores
de pases en la parte inferior del carrusel.
Animacin automtica Si desea que las imgenes del carrusel roten de
manera automtica, sin que el visitante deba presionar los botones, active
esta opcin y luego defina la velocidad de rotacin en el siguiente campo.
Velocidad de animacin automtica (en milisegundos) Aqu puede
designar cun largo ser el intervalo de transicin de cada imagen del
carrusel, si est activada la opcin Animacin automtica. Cuanto mayor
sea el nmero, ms tiempo transcurrir entre cada rotacin.
Usar efecto Parallax Si activa este ajuste, la imagen de fondo
permanecer fija al desplazar la pgina. Tenga en cuenta que cuando este
ajuste est activado, las imgenes se escalarn a la altura del navegador.
Eliminar sombra interior Elija si desea mostrar o no la sombra interior
de la seccin.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Carrusel aparecer
con el rtulo Carrusel en el constructor. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.
Comience haciendo clic en Aadir Diapositiva en la parte superior de esta
ventana modal de opciones. As aadir el primer pase y ver los ajustes de la
diapositiva correspondiente:
Encabezado Defina el ttulo para su diapositiva aqu.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 172


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Texto del botn Si desea mostrar un botn debajo del contenido de la
diapositiva, introduzca el texto aqu. Deje en blanco si prefiere no mostrar
un botn.
URL del botn Si muestra un botn, escriba una URL vlida en este
campo para definir el destino del enlace.
Imagen de fondo Si es definida, esta imagen se usar como fondo para
este mdulo. Para quitar la imagen de fondo, simplemente borre la URL
del campo de configuracin.
La altura de una diapositiva est determinada por la cantidad de texto que
agregue al contenido. Si tiene varias diapositivas, el carrusel tomar la
altura de la imagen ms alta.
El ancho del carrusel est determinado por la estructura de columnas
dentro de la cual est situado. Recomendamos que las imgenes del
carrusel tengan al menos el ancho de la columna que lo contenga. Los
anchos de columna son los siguientes:
1 columna: 1080 pxeles
de columna: 795 pxeles
de columna: 700 pxeles
de columna: 510 pxeles
de columna: 320 pxeles
de columna: 225 pxeles
Tenga en cuenta que si activa el efecto Parallax, recomendamos que las
imgenes sean al menos del tamao estndar de una pantalla, ya que
tomarn el ancho o la altura de la ventana del navegador (por ejemplo,
1280 x 768 pxeles).
Posicin de la imagen de fondo Elija la posicin de la imagen de fondo.
Tamao de imagen de fondo Elija el tamao de la imagen de fondo.
Color de fondo Si tan solo desea usar un color slido como fondo, use el
selector de color para definirlo.
Imagen de diapositiva Si agrega una imagen de diapositiva, esta
aparecer a la izquierda del texto, sobre el fondo del pase. Si no especifica
una imagen de diapositiva, se mostrar nicamente un texto centrado. Ya
que la altura de cada pase est determinada por el texto, si la imagen
tiene la altura suficiente se mostrar alineada en la parte inferior de la
diapositiva.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 173


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Tenga en cuenta que la altura de una diapositiva con imagen puede estar
determinada por la imagen ms alta del pase, as que asegrese de que la
imagen de diapositiva es lo suficientemente alta para encajar en caso de
que quiera una imagen alineada a la base. Por razones de legibilidad, las
imgenes de diapositiva solo aparecern en los pases que estn en
anchos de de columna, de columna, o 1 columna. Asimismo, las
imgenes de diapositiva no se mostrarn en navegadores cuyo ancho sea
menor de 768 pxeles. Los anchos de las imgenes de diapositiva se
enumerarn a continuacin. Recomendamos que las imgenes de
diapositiva tengan al menos este ancho:
1 columna: 410 pxeles
de columna: 308 pxeles
de columna: 260 pxeles
Usar superposicin de fondo Si activa este ajuste, se aadir un color
de superposicin encima de la imagen de fondo y detrs del contenido del
carrusel.
Color de superposicin de fondo Aqu puede elegir el color de
superposicin de fondo.
Usar superposicin de texto Si activa este ajuste, se aadir un color
de fondo detrs del texto del carrusel para que el texto sea ms legible
sobre las imgenes de fondo.
Alineacin vertical de la imagen de diapositiva Elija la lineacin
vertical de la imagen, que puede ser centrada verticalmente o alineada en
la parte inferior del carrusel.
Vdeo de diapositiva Si es definido, este vdeo aparecer a la izquierda
del texto de la diapositiva. Introduzca la URL del vdeo de YouTube o Vimeo,
o deje en blanco para mostrar solo texto.
Texto alternativo de la imagen El texto alternativo proporciona
informacin necesaria en caso de que la imagen no cargue, no aparezca
correctamente, o en cualquier otra situacin en la cual no se pueda
visualizar. Tambin permite que la imagen sea leda y reconocida por los
motores de bsqueda.
Color de texto Si el fondo del pase es oscuro, el color del texto debera
ser claro. Si el fondo del pase es claro, el color del texto debera ser
oscuro.
Vdeo MP4 de fondo Todos los vdeos deben ser subidos en formato
.MP4 o .WEBM para asegurarse mxima compatibilidad con todos los
navegadores. Suba la versin .MP4 aqu. Nota importante: Los vdeos de

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 174


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
fondo se desactivan en dispositivos mviles. En su lugar, se utiliza una
imagen de fondo. Por esta razn, debera definir ambos fondos, imagen y
vdeo, para asegurarse mejores resultados. Nota importante: para que el
formato de vdeo WEBM funcione en todos los navegadores, su servidor debe
tener designados los tipos MIME correctos. Puede aprender ms sobre cmo
usar el archivo .htaccess para definir los tipos MIME aqu. Si nota que sus
vdeos no se reproducen en ciertos navegadores, es probable que esta sea la
razn.
Vdeo WEBM de fondo - Todos los vdeos deben ser subidos en
formato .MP4 o .WEBM para asegurarse mxima compatibilidad con todos
los navegadores. Suba la versin .WEBM aqu. Nota importante: Los vdeos
de fondo se desactivan en dispositivos mviles. En su lugar, se utiliza una
imagen de fondo. Por esta razn, debera definir ambos fondos, imagen y
vdeo, para asegurarse mejores resultados. Nota importante: para que el
formato de vdeo WEBM funcione en todos los navegadores, su servidor debe
tener designados los tipos MIME correctos. Puede aprender ms sobre cmo
usar el archivo .htaccess para definir los tipos MIME aqu. Si nota que sus
vdeos no se reproducen en ciertos navegadores, es probable que esta sea la
razn.
Ancho del vdeo de fondo Para que los vdeos se muestren
correctamente, debe introducir el ancho exacto (en pxeles) del vdeo aqu.
Alto del vdeo de fondo Para que los vdeos se muestren
correctamente, debe introducir el alto exacto (en pxeles) del vdeo aqu.
Pausar vdeo Permita que el vdeo sea pausado por otros reproductores
cuando comiencen a reproducir.
Contenido Escriba aqu el texto principal del contenido para la
diapositiva. Tenga en cuenta que la cantidad de texto que introduzca aqu
determinar la altura del carrusel.
Rtulo de administracin El rtulo de administracin le permite dar un
nombre a la nueva diapositiva aadida para identificarla ms fcilmente.
Guardar Luego de hacer clic en el botn Guardar de estos ajustes
individuales, volver a los ajustes del mdulo, en donde podr agregar
una nueva diapositiva, borrar o editar diapositivas, y arrastrar y soltar para
reordenar las diapositivas existentes.

Vdeo
Aadir vdeos a sus pginas en Divi es muy sencillo si usa el mdulo Vdeo. Este le
permite incrustar vdeos desde casi cualquier fuente, as como tambin

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 175


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
personalizar la imagen de la miniatura y el botn de reproduccin para darle un
estilo ms claro.

URL del vdeo MP4 El mdulo Vdeo de Divi le permite aadir vdeos
usando dos mtodos diferentes. Puede subir su propio vdeo desde su
equipo, haciendo clic en el botn Subir vdeo y seleccionando el archivo, o
puede introducir una URL para el vdeo desde un servicio externo, como
YouTube o Vimeo. Simplemente copie la URL desde el navegador y pguela
en el campo URL del vdeo: Divi har el resto!
Vdeo WEBM Suba aqu la versin WEBM del vdeo. Todos los vdeos
deben ser subidos en formato .MP4 o .WEBM para asegurarse mxima
compatibilidad con todos los navegadores.
URL de la imagen superpuesta Si desea definir una miniatura
personalizada para el vdeo, la cual ser mostrada sobre la interfaz
estndar del vdeo con un botn de reproduccin personalizado para
darle una apariencia ms clara, puede elegir hacerlo usando este campo.
Este le permite subir una imagen personalizada, o dejar que Divi genere
automticamente una desde la URL del vdeo. La mayora de los servicios
tienen soporte para esta opcin, como por ejemplo YouTube o Vimeo.
Simplemente haga clic en el botn Generar desde el vdeo y deje que Divi
haga el resto.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 176


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Rtulo de administracin Por defecto, el mdulo Vdeo aparecer con
el rtulo Vdeo en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Carrusel de vdeo
Divi simplifica el proceso de agregar carruseles de vdeos en una pgina. Esta es
una buena manera de organizar una coleccin de vdeos desde casi cualquier
fuente. La galera de vdeos tambin le permite personalizar las miniaturas de los
vdeos y el botn de reproduccin para darle un estilo ms claro.

Mostrar imagen superpuesta en el vdeo principal Esta opcin cubrir


la interfaz del reproductor para el vdeo principal. Esta imagen puede ser
subida en los ajustes de cada uno de los vdeos o autogenerada por Divi.
Flechas Este ajuste mostrar u ocultar las flechas de navegacin que
aparecen al posar el puntero del ratn en el vdeo principal.
Controles del carrusel Este ajuste le permitir elegir los controles
debajo del carrusel: miniaturas o navegacin por puntos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 177


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de los controles del carrusel Este ajuste determinar el color
claro u oscuro de los controles del carrusel. Los controles son las flechas
de la tira de miniaturas o los crculos de la navegacin por puntos.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Carrusel de vdeo
aparecer con el rtulo Carrusel de vdeo en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Ajustes de vdeo individual


Rtulo de administracin Por defecto, la pestaa aparecer con el
rtulo Vdeo nuevo en la ventana modal. El rtulo de administracin le
permite cambiar esta etiqueta para identificarlo ms fcilmente.
URL del vdeo MP4 El mdulo Vdeo de Divi le permite aadir vdeos
usando dos mtodos diferentes. Puede subir su propio vdeo desde su
equipo, haciendo clic en el botn Subir vdeo y seleccionando el archivo, o
puede introducir una URL para el vdeo desde un servicio externo, como
YouTube o Vimeo. Simplemente copie la URL desde el navegador y pguela
en el campo URL del vdeo: Divi har el resto!
Vdeo WEBM Suba aqu la versin WEBM del vdeo. Todos los vdeos
deben ser subidos en formato .MP4 o .WEBM para asegurarse mxima
compatibilidad con todos los navegadores.
URL de la imagen superpuesta Si desea definir una miniatura
personalizada para el vdeo, la cual ser mostrada sobre la interfaz
estndar del vdeo con un botn de reproduccin personalizado para
darle una apariencia ms clara, puede elegir hacerlo usando este campo.
Este le permite subir una imagen personalizada, o dejar que Divi genere
automticamente una desde la URL del vdeo. La mayora de los servicios
tienen soporte para esta opcin, como por ejemplo YouTube o Vimeo.
Simplemente haga clic en el botn Generar desde el vdeo y deje que Divi
haga el resto.
Color de las flechas del carrusel Este ajuste determina el color claro u
oscuro de las flechas del carrusel.

Cdigo
El mdulo Cdigo es un lienzo en blanco que le permite aadir cdigo a la
pgina, tal como los cdigos abreviados de los plugins o HTML esttico. Si desea
usar un plugin de otros desarrolladores, por ejemplo de un Slider, podr

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 178


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
simplemente colocar el cdigo abreviado en un mdulo Cdigo estndar o de
ancho completo para mostrar el elemento sin ningn conflicto.

Contenido Aqu puede copiar y pegar el cdigo deseado dentro del


mdulo.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Cdigo aparecer con
el rtulo Cdigo en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Ttulo de entrada
El mdulo Ttulo de entrada muestra con un toque elegante el ttulo de la entrada
o pgina actual, y de manera opcional la imagen destacada y la informacin
meta. Esto le permite presentar las entradas con una apariencia nica al crearlas
con el constructor de Divi.
Este mdulo tambin est disponible para las secciones de ancho completo, con
las mismas opciones.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 179


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mostrar ttulo Elija si desea mostrar o no el ttulo de la entrada.
Mostrar meta Elija si desea mostrar o no la seccin meta de la entrada.
Mostrar autor Elija si desea mostrar o no el nombre del autor en la
seccin meta de la entrada.
Mostrar fecha Elija si desea mostrar o no la fecha en la seccin meta de
la entrada.
Formato de fecha Defina el formato de fecha en la seccin meta de la
entrada. El valor predeterminado es 'M j, Y'.
Mostrar categoras de entradas Elija si desea mostrar o no las
categoras en la seccin meta de la entrada. Nota: Esta opcin no funciona
con tipos de entrada personalizada.
Mostrar nmero de comentarios Elija si desea mostrar o no el nmero
de comentarios en la seccin meta de la entrada.
Mostrar imagen destacada Elija si desea mostrar o no la imagen
destacada.
Ubicacin de imagen destacada Elija el lugar donde se colocar la
imagen destacada.
Usar efecto Parallax Si en el ajuste anterior seleccion Imagen de fondo
del ttulo/meta, elija si desea mostrar o no el efecto Parallax para la imagen
destacada.
Mtodo Parallax Elija el mtodo de Parallax para usar en la imagen
destacada.
Orientacin del texto Elija la orientacin del texto del ttulo/meta.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 180


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de texto Elija el color para el texto del ttulo/meta.
Usar color de fondo de texto Elija si desea usar o no un color de fondo
para el texto del ttulo/meta.
Color de fondo del texto Si eligi usar un color de fondo, seleccinelo
aqu.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Ttulo de entrada
aparecer con el rtulo Ttulo de entrada en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Carrusel de entradas
El mdulo Carrusel de entradas funciona exactamente igual que el mdulo
estndar Carrusel del constructor de Divi, aunque en lugar de crearlo con
diapositivas personalizadas, el contenido de este carrusel se toma de las
entradas destacadas del blog. Este es un complemento genial del mdulo Blog y
una manera muy atractiva de presentar sus entradas favoritas.
Este mdulo tambin est disponible para las secciones de ancho completo, con
las mismas opciones.

Nmero de entradas Elija cuntos entradas se mostrarn o deje el


campo en blanco para no limitar la cantidad.
Incluir categoras Elija las categoras que desea incluir en el carrusel.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 181


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Ordenar por Aqu puede ajustar el orden en que se mostrarn las
entradas: de nuevos a antiguos, de antiguos a nuevos, por orden
alfabtico, por orden alfabtico inverso o al azar.
Mostrar flechas Este ajuste mostrar u ocultar las flechas de
navegacin.
Mostrar controles Este ajuste mostrar u ocultar los botones
circulares debajo del carrusel.
Mostrar botn Leer ms Este ajuste activar o desactivar el botn
Leer ms.
Texto del botn Defina el texto que se mostrar en el botn Leer ms.
Deje en blanco para usar el texto predeterminado (Leer ms).
Mostrar contenido Si muestra todo el contenido, no se cortarn las
entradas en la pgina del blog. Si muestra extractos, solo se mostrarn las
primeras lneas de la entrada.
Usar extractos cuando sean definidos Desactive esta opcin si desea
ignorar los extractos definidos manualmente y siempre generarlos
automticamente.
Longitud de extracto automtico Defina la longitud de los extractos
generados automticamente. Deje en blanco para usar la predeterminada
(270).
Mostrar informacin meta de entrada Este ajuste activar o
desactivar la seccin meta.
Color de fondo Use el selector de color y elija un color de fondo para
este mdulo.
Imagen de fondo Suba la imagen deseada, o escriba la URL de la
imagen que desea usar como fondo para el carrusel.
Color de texto Aqu puede elegir el contraste del texto. Si trabaja con un
fondo oscuro, el texto deber ser claro. Si trabaja con un fondo claro, el
texto deber ser oscuro.
Mostrar imagen destacada Este ajuste activar o desactivar la imagen
destacada en el carrusel.
Ubicacin de la imagen Seleccione la forma en que desea mostrar la
imagen destacada en las diapositivas.
Usar efecto Parallax Si activa este ajuste, la imagen de fondo
permanecer fija al desplazar la pgina.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 182


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Usar superposicin de fondo Cuando est activado, se aadir un color
de superposicin encima de la imagen de fondo y detrs del contenido del
carrusel.
Color de superposicin de fondo Use el selector de color para elegir un
color de superposicin de fondo.
Usar superposicin de texto Cuando est activado, se aadir un color
de fondo detrs del texto del carrusel para que el texto sea ms legible
sobre las imgenes de fondo.
Eliminar sombra interior Esto eliminar la sombra interior que se
aplica a la seccin de manera predeterminada.
Posicin de la imagen de fondo Elija la posicin CSS de la imagen de
fondo para cada diapositiva.
Tamao de imagen de fondo Elija el tamao CSS de la imagen de fondo
para cada diapositiva.
Animacin automtica Si desea que las imgenes del carrusel roten de
manera automtica, sin que el visitante deba presionar los botones, active
esta opcin y luego defina la velocidad de rotacin en el siguiente campo.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Carrusel de entradas
aparecer con el rtulo Carrusel de entradas en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Comentarios
Los comentarios son un componente estndar de cada tema, y por lo general
aparecen en la parte inferior de las entradas, debajo del contenido. Hemos
transformado esta rea de comentarios en un mdulo del constructor de Divi,
para que tenga un control total sobre la ubicacin de esta seccin dentro de la
entrada. Tambin le da la oportunidad de personalizar la apariencia desde los
Ajustes de diseo avanzado y CSS personalizado.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 183


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Mostrar avatar del autor Si desactiva esto, se eliminar el avatar del
autor del comentario.
Mostrar botn Responder Si desactiva este ajuste, los usuarios no
tendrn la posibilidad de responder a los comentarios de la lista.
Mostrar nmero de comentarios Si desactiva este ajuste, el nmero
total de comentarios no se mostrar.
Color de texto Aqu puede elegir el contraste del texto. Si trabaja con un
fondo oscuro, el texto deber ser claro. Si trabaja con un fondo claro, el
texto deber ser oscuro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Comentarios
aparecer con el rtulo Comentarios en el constructor. El rtulo de
administracin le permite cambiar esta etiqueta para identificarlo ms
fcilmente.

Navegacin de entradas
La navegacin de entradas es otro componente comn en la mayora de los
sitios WordPress. Por lo general, los enlaces de navegacin aparecen en la parte
inferior de las entradas, animando a los visitantes a que lean las publicaciones
anteriores y siguientes. Hemos convertido estos enlaces en un mdulo del
constructor de Divi, para que pueda aadirlos en cualquier sector de la pgina.
Este mdulo tambin incluye varias opciones novedosas, entre ellas la
posibilidad de limitar los enlaces nicamente a entradas que pertenecen a la

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 184


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
misma categora. Esta opcin simple hace que los enlaces sean ms relevantes,
incrementando la probabilidad de que el visitante encuentre contenido de su
inters.

En la misma categora Aqu puede definir si las entradas anteriores y


siguientes deben estar en el mismo trmino de taxonoma que la entrada
actual.
Ocultar enlace a la entrada anterior Aqu puede elegir ocultar o
mostrar el enlace a la entrada anterior.
Ocultar enlace a la entrada siguiente Aqu puede elegir ocultar o
mostrar el enlace a la entrada siguiente.
Texto del enlace Anterior Defina el texto personalizado para el
enlace "Anterior". Puede utilizar la variable %title para incluir el ttulo de la
entrada. Deje en blanco para usar el predeterminado.
Texto del enlace Siguiente Defina el texto personalizado para el
enlace Siguiente. Puede utilizar la variable %title para incluir el ttulo de la
entrada. Deje en blanco para usar el predeterminado.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Navegacin de
entradas aparecer con el rtulo Navegacin de entradas en el constructor.
El rtulo de administracin le permite cambiar esta etiqueta para
identificarlo ms fcilmente.

Botn
Existen varios mdulos del constructor que incluyen botones: los Carruseles, los
Llamados a la accin, los formularios de Suscripcin, por solo nombrar algunos.
Sin embargo, ahora es posible aadir un botn nico dentro de un diseo de

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 185


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Divi. Cuando se combina con los Ajustes de diseo avanzado, podr crear
incontables estilos de botones.

URL del botn Introduzca la URL de destino para el botn.


La URL se abre Aqu puede elegir si el enlace se abre en la misma
ventana o no.
Texto del botn Escriba el texto del botn.
Alineacin del botn Aqu puede definir la alineacin del botn:
izquierda, derecha o centrada.
Color de texto Aqu puede elegir el contraste del texto. Si trabaja con un
fondo oscuro, el texto deber ser claro. Si trabaja con un fondo claro, el
texto deber ser oscuro.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Botn aparecer con
el rtulo Botn en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Buscar
Hasta ahora, la nica manera de aadir un formulario de bsqueda en su sitio
era mediante el widget de bsqueda predeterminado de WordPress. Sin
embargo, estaba limitado a reas listas para widgets tales como las barras
laterales de Divi y el pie de pgina. Hemos convertido este formulario de
bsqueda en un nuevo mdulo del constructor, que incluye controles completos
sobre los resultados de bsqueda y el diseo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 186


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Color de texto Aqu puede elegir el contraste del texto. Si trabaja con un
fondo oscuro, el texto deber ser claro. Si trabaja con un fondo claro, el
texto deber ser oscuro.
Orientacin del texto Esto controla la alineacin del texto dentro de
este mdulo: izquierda, derecha o centrada.
Excluir pginas Si activa este ajuste, se excluirn todas las pginas de
los resultados de bsqueda.
Excluir entradas Si activa este ajuste, se excluirn todas las entradas de
los resultados de bsqueda.
Excluir categoras Elija las categoras que desea excluir de los
resultados de bsqueda.
Ocultar botn Si activa esto se ocultar el botn Buscar.
Texto del marcador de posicin Escriba el texto que desea usar como
marcador de posicin para el campo de bsqueda.
Desactivar en Seleccione el dispositivo en el cual desea desactivar este
mdulo.
Rtulo de administracin Por defecto, el mdulo Buscar aparecer con
el rtulo Buscar en el constructor. El rtulo de administracin le permite
cambiar esta etiqueta para identificarlo ms fcilmente.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 187


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Caractersticas adicionales
Cargar una imagen para el logo

Puede definir una imagen propia para el logo desde la pgina de opciones del
tema, que se encuentra en el men de Divi. Para ir al panel de opciones, haga
clic en el men Divi > Opciones del tema. Dentro del panel de opciones, en la
pestaa General, localice el campo Logo. En ese campo, escriba la URL completa
de la imagen para su logo. Puede usar el botn Subir en el extremo derecho del
campo para cargar la imagen del logo si an no lo ha hecho. Luego de cargarla,
copie y pegue la URL en el campo y haga clic en el botn Guardar para guardar la
configuracin en el panel de opciones.
Si no tiene una imagen para el logo, puede usar el archivo PSD incluido como
punto de partida. Si tiene Photoshop, puede abrir este archivo y editar el texto
con este programa. Si no tiene Photoshop, puede usar el archivo logo_blank.png
como lienzo en blanco en otro programa de edicin de imgenes. Estos archivos
(logo.psd y logo_blank.png) estn dentro de la carpeta /psd/, incluida en el
paquete de archivos del tema.

Crear proyectos para el Portfolio


Con Divi, crear un proyecto es fcil y divertido. Se ha aadido un elemento al
men de WordPress, llamado Proyectos, para que pueda crear proyectos al igual
que crea pginas o entradas. Tambin tiene la opcin de usar una estructura
bsica de proyectos, o usar el constructor para crear asombrosos diseos.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 188


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Crear un proyecto
Ttulo Comience por ponerle un ttulo a su proyecto.
Diseo de pgina Puede elegir entre tres diseos de pgina distintos, los
cuales pueden ser nicos para cada proyecto, si as lo desea. Las tres
opciones incluyen una barra lateral izquierda, una barra lateral derecha o la
pgina de ancho completo.
Categoras Las categoras de los proyectos estn separadas de las
categoras de entradas, para que tenga un control total sobre lo que incluye
en sus portfolios. Dentro del constructor de proyectos, puede agregar una
categora nueva o elegir una (o varias) de las ya existentes.
Etiqueta Use las etiquetas de proyectos para definir las herramientas que
fueron usadas en el proyecto. Las etiquetas se mostrarn listadas en la
pgina del proyecto bajo el rtulo Herramientas. Cada herramienta, o
etiqueta, es un enlace para ver todos los proyectos que la incluyen.
Imagen destacada Seleccione una imagen destacada de las que ya estn
en la Librera multimedia (o suba una nueva). Esta ser la imagen que se
mostrar como miniatura en su portfolio. La miniatura se escalar de
acuerdo a la proporcin de la imagen destacada, por lo tanto
recomendamos que todas las imgenes para los proyectos tengan la misma
proporcin si utiliza un diseo en grilla.
Contenido: Bsico El diseo bsico de proyecto mostrar la imagen
destacada en la parte superior de la pgina, seguida del contenido que
introduzca en el Editor de texto.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 189


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
En el siguiente ejemplo puede ver que tenemos el ttulo del proyecto, y la/s
categora/s justo a la derecha. Debajo, la imagen destacada se muestra en
ancho completo, seguida del contenido que hemos introducido. Las etiquetas
que fueron definidas aparecen como Herramientas y la fecha de publicacin
aparece justo debajo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 190


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Contenido: Extendido Si desea crear pginas de proyectos ms
complejas, puede hacer clic en el botn Usar el constructor de pginas de la
parte superior de la pgina de proyectos y se iniciar el constructor de Divi.
En esta modalidad, tendr la misma libertad creativa que le brinda
cualquier otra pgina que usa el constructor. Eche Un vistazo al constructor.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 191


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Nota: Si elige usar el constructor, comenzar con un lienzo en blanco. Por lo
tanto, todos los elementos del proyecto bsico sern eliminados (por ejemplo, el
ttulo, las categoras, la imagen destacada, las herramientas y la fecha). Sin
embargo, de todas maneras querr incluir esta informacin para las miniaturas
de los proyectos que se mostrarn en el portfolio.

Usar Mega Mens


Los mega mens se pueden definir como mens desplegables dentro de mens
desplegables. Son especialmente tiles cuando su sitio tiene una gran cantidad
de secciones hacia las cuales necesita enlazar desde el men principal. Para no
sobrecargar el men con varias lneas y sus correspondientes mens
desplegables, tendr la opcin de crear un bloque completo de hasta cuatro
columnas como submen nico que puede contener ilimitados enlaces.

En este ejemplo, los elementos del men Qu hacemos y Ms informacin


son mens desplegables independientes, pero con la caracterstica mega men
puede agruparlos para que aparezcan como un solo men desplegable dentro
del elemento Quines somos.
En primer lugar, deber tener creado el men y asignado a la ubicacin Men
principal, desde la opcin Apariencia > Mens del administrador de WordPress.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 192


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Traslade los elementos Qu hacemos y Ms informacin a la posicin de
subelementos de Quines somos, arrastrando y soltando los bloques como se
muestra en la siguiente imagen.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 193


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Los bloques completos ahora son subelementos del elemento del men
Quines somos. Para transformarlo en mega men, deber aadir la etiqueta
mega-menu a la clase CSS personalizada de este elemento y luego hacer clic en
Guardar men.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 194


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Si no ve el campo Clases CSS (opcional) en las propiedades del elemento del
men, deber seleccionar la casilla correspondiente en las Opciones de pantalla
de la parte superior del administrador de WordPress.

Una vez guardado el men, los elementos trasladados a Quines somos,


aparecern en el sitio como elementos del mega men.
Dos elementos ms, Portfolio y Otros proyectos, se crearon para colocar
dentro de Quines somos y as completar las cuatro columnas, para una
distribucin uniforme en el mega men.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 195


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Vea el vdeo tutorial en el cual se muestra paso a paso la creacin de un mega
men aqu (en ingls).

Formatos de entrada de blog


Divi soporta todos los formatos de entrada principales.
Cuando escribe una entrada en el blog para ser incluida en uno de nuestros
mdulos Blog, puede crear uno de seis formatos de entrada diferentes: Estndar,
Vdeo, Audio, Cita, Galera y Enlace. Cada uno de estos formatos estructura la
entrada de manera distinta, poniendo mayor nfasis en el tipo de contenido que
dicho formato representa.

Cuando cree una entrada del blog, notar un panel a la derecha del editor de
texto, titulado Formato. Dentro de este panel estn las seis opciones de formato.
Si elige Estndar, el resultado ser una entrada de blog con un estilo normal, en

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 196


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
tanto que las dems opciones poseen un diseo nico asociado con el tipo de
formato.

Usar el formato de entrada Vdeo


Si selecciona el formato de entrada Vdeo, se mostrar un vdeo en la parte
superior de la entrada. Tambin reemplazar la miniatura estndar en las
pginas ndice con un vdeo incrustado. Luego de seleccionar el formato de
entrada Vdeo del panel Formato, lo siguiente que deber hacer ser agregar un
vdeo a la entrada.
El tema usar automticamente el primer vdeo en la entrada como formato de
vdeo. Para agregar un vdeo a la entrada, simplemente introduzca la URL de
YouTube o Vimeo dentro del editor de texto, o use el botn Aadir objeto para
cargar e incrustar un archivo de vdeo propio.

Usar el formato de entrada Audio


Si selecciona el formato de entrada Audio, se mostrar un reproductor de audio
en la entrada. Tambin reemplazar la miniatura estndar en las pginas ndice
con el reproductor de audio. El reproductor de audio reproducir el primer
archivo de audio que incruste en la entrada.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 197


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Para agregar un archivo de audio a la entrada, use el botn Aadir objeto y
cargue el archivo. No es necesario incrustarlo. Una vez subido, el tema
automticamente lo usar para la entrada que est creando o editando. El
archivo de audio debe ser cargado mientras edita la entrada.

Usar el formato de entrada Cita


El formato de entrada Cita mostrar una frase entre comillas, dentro de un
recuadro con estilo especial en la parte superior de la entrada. La cita tambin
reemplazar la miniatura estndar en todas las pginas ndice. Una vez
seleccionado, el formato de entrada Cita usar el primer bloque de cita de la
entrada como contenido de la cita.
Los bloques de citas (N. de T.: de la etiqueta HTML blockquote) pueden agregarse
fcilmente desde el editor. Simplemente seleccione el texto y luego haga clic en
el botn Cita para darle el formato.

Usar el formato de entrada Galera


El formato de entrada Galera mostrar una galera de imgenes en la parte
superior de la entrada. Tambin reemplazar la miniatura estndar en todas las
pginas ndice con un carrusel de imgenes. Una vez seleccionado, el formato de
entrada Galera usar la primera galera que se agregue a la entrada.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 198


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Las galeras se pueden agregar con el editor de medios de WordPress.
Simplemente haga clic en el botn Aadir objeto para crear una galera, e
insrtela en la entrada.

Usar el formato de entrada Enlace


El formato de entrada Enlace crear un enlace con un estilo especial y lo
agregar en la parte superior de la entrada. Esto es til para compartir
informacin breve con sus lectores. Una vez seleccionado, el formato de entrada
Enlace usar como URL principal la del primer enlace que haya en la entrada. El
enlace se mostrar en la parte superior de la entrada y tambin reemplazar la
miniatura estndar en todas las pginas ndice.
Para agregar un enlace a la entrada, puede usar el botn Aadir/editar enlace del
editor de texto de WordPress.

Traducir su sitio
Puede usar los archivos .po y .mo incluidos en la carpeta /lang/ del tema para
traducir las palabras en ingls que estn presentes en el diseo. Puede aprender
ms sobre cmo traducir WordPress aqu: Traducir WordPress (solo disponible
en ingls).

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 199


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Crear pginas en blanco
Activar la plantilla Blank Page
La plantilla Blank Page (Pgina en blanco) oculta la cabecera y el pie de pgina de
una pgina especfica, dejando visible nicamente todo aquello que se cree con
el constructor. Esta es una buena manera de crear pginas de destino nicas,
que estn separadas del resto de su sitio. Por ejemplo, podra crear una pgina
de destino para sus ventas, una pgina Prximamente, una pgina para
suscripcin, o una pgina para mostrar en modo mantenimiento.
Cuando cree una pgina nueva, notar un panel llamado Atributos de pgina en
el lado derecho de la pantalla. En este panel busque la opcin Plantilla, y del
men desplegable seleccione la plantilla Blank Page.

Una vez que actualice la pgina, ver que la cabecera y el pie de pgina han sido
eliminados. Esto le brinda un lienzo en blanco en la pgina individual para que
pueda crear diseos verdaderamente nicos. Vea esta elegante pgina de
destino:

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 200


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Qu tal una pgina Prximamente, con una cuenta regresiva y un formulario
de suscripcin? Existen innumerables posibilidades!

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 201


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Sitios de una sola pgina
El navegador lateral de pgina nica de Divi es simple. Cuando cree una nueva
pgina, podr activar la navegacin por puntos en una pgina nica de Divi, el
cual les dar a sus visitantes una representacin del progreso de la pgina
donde puede ir haciendo clics. Tambin puede usar anclajes de enlaces
personalizados e ID de secciones para crear mens de una sola pgina en el
paquete completo de pgina nica.

Activar el navegador de pgina nica


Activar el navegador de pgina nica es sencillo y se puede lograr en cualquier
pgina que se cree con el constructor. Cuando cree o edite una pgina, busque
el panel Ajustes de pgina de Divi en la parte derecha del editor de texto. Dentro
de este panel ver la opcin Navegacin por puntos. Seleccione S del men
desplegable y luego guarde o actualice la pgina. Notar entonces que se ha
agregado una barra de navegacin flotante en el margen derecho de la pgina.
La barra navegadora lateral aade un enlace en el que se puede hacer clic para
visitar cada seccin de la pgina. Cuando agregue una seccin nueva, se aadir
un nuevo crculo automticamente al navegador lateral flotante. Los visitantes
pueden hacer clic en los crculos para ir saltando hacia las diferentes secciones
de la pgina. Tambin es ms sencillo para identificar en qu lugar de la pgina
est el visitante, y simplifica la comprensin y la navegacin de pginas con gran
longitud.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 202


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Crear enlaces personalizados en el men para los
sitios de una sola pgina
Adems de la navegacin lateral, tambin es posible transformar el men
primario de navegacin en un men para una sola pgina. Si est creando un
sitio de una sola pgina, no necesitar que los enlaces apunten a pginas
distintas. Por el contrario, estos enlaces pueden apuntar a secciones relevantes
dentro de la misma pgina. Al hacer clic sobre ellos, podr visitar la seccin
correspondiente de la pgina presentando un efecto de desplazamiento suave.
Esto se puede lograr con las ID personalizadas. Se puede asignar una ID a
cualquier elemento de la pgina que se haya creado con el constructor. Puede
asignar una ID a la seccin haciendo clic en el icono de ajustes de seccin, y
buscando la opcin ID CSS en la pestaa CSS personalizado. Una vez que haya
asignado la ID, puede crear un enlace desde el men de navegacin. Por
ejemplo, si tiene una seccin llamada Quines somos y quiere enlazar a esa
parte de la pgina en donde se describe su empresa, edite la seccin que
contiene el bloque Quines somos, escriba quienessomos en el campo ID CSS, y
haga clic en Guardar y salir. Ahora que la ID est asignada, puede crear un enlace
que apunte a ella.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 203


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Apuntar un enlace del men a una ID
Para crear un enlace personalizado del men, deber aadir un nuevo enlace al
men utilizando la opcin Apariencia > Mens del men de WordPress. Si no est
familiarizado con el sistema de Mens, puede visitar este tutorial (en ingls).
Una vez que ha creado el men nuevo y lo ha asignado a la ubicacin Men
principal, puede comenzar a agregar enlaces a la cabecera. En este caso,
crearemos un enlace personalizado, por medio de la pestaa Enlaces
personalizados de la parte izquierda de la pgina. Una vez abierta, ver dos
campos (URL y Enlace de texto). Para el enlace de texto simplemente escriba el
texto que desea mostrar en el men (por ejemplo: Quines somos). Para la
URL, deber enlazar a la ID que asign a esa seccin con anterioridad. En
nuestro caso, hemos agregado la ID quienessomos, pero usted puede darle a la ID
cualquier nombre que desee. Como hemos usado quienessomos, podremos
enlazar a esa ID creando una URL que apunte a /#quienessomos.
Puede usar este mismo mtodo para crear todos los enlaces personalizados que
quiera. Simplemente escriba en el campo URL /# seguido de la ID a la que quiere
enlazar.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 204


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 205
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Divi Leads: sistema de pruebas
multivariable
Qu es Divi Leads?
Divi Leads es un muy til sistema de pruebas multivariable (tambin conocidas
como Pruebas A/B), respaldado por eficaces estadsticas y anlisis, que le
ayudar a aprovechar al mximo el potencial oculto de su sitio web. Por medio
de simples pruebas, podr tomar decisiones de diseo significativas para lograr
un mayor compromiso del usuario y ms ventas. Todos deberan usar las
pruebas multivariable!

De qu tratan las pruebas multivariable?


La idea detrs de las pruebas multivariable es simple: usted hace algn cambio
en su pgina (por ejemplo, modifica el contenido, tamao, color o ubicacin de
un texto) y luego prueba ese cambio en contraste con la versin original para ver
cul de las variables presenta los mejores resultados.
Vamos a considerar una pgina clsica de ventas. En la parte superior tenemos
el anuncio comercial en forma de encabezado (usando el mdulo Encabezado de
ancho completo), seguido por una lista de testimonios de clientes (usando el
mdulo Testimonios), seguido por un botn de compra (usando el mdulo
Llamado a la accin). El objetivo de esa pgina es conseguir que la mayor
cantidad de visitantes posible haga clic en el botn de compra y adquiera sus
productos. Pero, cmo puede saber si su pgina de ventas es verdaderamente
efectiva? Cmo pueden influir distintas ubicaciones del encabezado en el
porcentaje de rebote*? De qu manera distintos testimonios predisponen al
visitante a comprar o no? Qu consecuencia tiene el color, tamao y ubicacin
del botn de compra sobre el inters del visitante en hacer clic? Cada uno de
estos elementos se puede transformar en un sujeto de prueba para averiguar
cmo afecta exactamente en el porcentaje de conversin del objetivo planteado.

*Porcentaje de visitas a una sola pgina, es decir, visitas en las que el usuario ha abandonado su
sitio en la pgina de entrada sin interactuar con ella

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 206


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Las pruebas multivariable consisten en dos elementos principales: el sujeto y el
objetivo (o meta). El sujeto es el elemento que est evaluando, y el objetivo es la
manera en que le atribuye xito a la pgina. En el ejemplo anterior, podramos
usar el Encabezado de ancho completo como sujeto de prueba y el mdulo del
botn como nuestro objetivo. Luego podr configurar distintas variantes del
encabezado para averiguar cul de las versiones influye en las estadsticas de
captacin de clientes. Un encabezado ms efectivo dar como resultado un
mayor inters de los usuarios y un menor porcentaje de rebote, y esos usuarios
interesados son los que en definitiva harn clic en el botn de compra con

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 207


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
mayor frecuencia. Ya que nosotros hemos elegido el mdulo Llamado a la accin
como objetivo, Divi Leads rastrear los clics en el botn del CTA (adems de otras
estadsticas bsicas). Cada versin de un sujeto de prueba se mostrar a
distintos visitantes y despus de un tiempo la diferencia en las tasas de
conversin se volver ms evidente. Al usar estas estadsticas, podr tomar una
decisin informada acerca de cul resulta el encabezado ms exitoso. Esta
prueba nos mostrar cmo dos versiones distintas de nuestro encabezado
afectan el porcentaje de clics en el botn, y podremos decidir a conciencia cul
de las dos es la mejor.
Se pueden efectuar pruebas multivariable similares para cada elemento de la
pgina, para aumentar la tasa de conversin.

Comenzar la primera prueba


Para iniciar una prueba multivariable, abra los Ajustes de pgina del constructor
de Divi y active esta herramienta. Despus de hacer clic en Guardar, estar en
condiciones de configurar la prueba. Durante este proceso se le pedir que haga
dos cosas: 1) Elegir el sujeto de prueba, y 2) Elegir el objetivo. El sujeto es el
elemento que desea probar. Este elemento ser duplicado para que pueda
configurar diferentes variantes, cada una de las cuales ser mostrada a visitantes
distintos. El objetivo es aquello que desea que los visitantes hagan en la pgina.
De acuerdo con el objetivo que haya elegido, Divi Leads rastrear las estadsticas
correspondientes. Por ejemplo, si est haciendo una prueba en una pgina de
aterrizaje (landing page) y su intencin es captar seguidores por medio de un
mdulo de Suscripcin, deber seleccionar el mdulo Suscripcin como su

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 208


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
objetivo. Entonces Divi Leads rastrear cada una de las variantes del sujeto de
prueba y la manera en que afecta el porcentaje de conversiones. Si el objetivo de
la pgina es vender artculos en una tienda de WooCommerce, deber
seleccionar como objetivo el mdulo Tienda. En este caso, Divi Leads rastrear las
ventas. Si tiene una pgina simple con un botn estndar de llamado a la accin
en el cual desea que los usuarios hagan clic, deber asignar el mdulo Llamado a
la accin o Botn como el objetivo y Divi Leads rastrear el porcentaje de clics.
Cualquier mdulo, fila o seccin se puede establecer como objetivo. Hasta puede
asignar el sujeto de prueba como objetivo.

Elegir el sujeto de prueba


Lo primero que le pedir Divi Leads es elegir un sujeto de prueba.
Cualquier componente de la pgina puede ser puesto a prueba. En Divi, el sujeto
puede ser un mdulo, fila o seccin. Una vez que se ha elegido el sujeto y la
prueba multivariable se ha iniciado, el sujeto ser duplicado y podr comenzar a
configurar la versin alternativa. De esta manera, puede hacer y probar un
sinnmero de cambios, inclusive distinto contenido, diseo y ubicacin. Puede
crear un nmero ilimitado de variantes, simplemente duplicando/clonando el
sujeto de prueba. Por ejemplo, puede evaluar diez encabezados diferentes a la
vez con una prueba en el mdulo Encabezado de ancho completo, duplicando el
sujeto de prueba y configurando un total de diez variantes.
Con un clic del ratn, seleccione el sujeto de la prueba multivariable.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 209


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Seleccionar el objetivo
A continuacin, Divi Leads le pedir que seleccione un objetivo.
Cualquier componente de la pgina puede ser usado como objetivo. En Divi, el
objetivo puede ser cualquier mdulo, fila o seccin. De acuerdo con el elemento
que haya elegido como objetivo, Divi Leads rastrear las estadsticas de usuario
correspondientes. Despus de un tiempo, tendr la posibilidad de ver cul de las
versiones del sujeto de prueba afecta el porcentaje de conversin en el objetivo
especificado. Por ejemplo, si ha seleccionado un Encabezado de ancho completo
como sujeto de prueba y un mdulo Llamado a la accin como objetivo, Divi
Leads mostrar diferentes versiones del encabezado a distintos usuarios y
rastrear la frecuencia en que esos usuarios hacen clic en el mdulo CTA.
Transcurrido un tiempo, ser evidente cul de las versiones del encabezado es la
que aumenta el porcentaje de clics.
Con un clic del ratn, seleccione el objetivo.

Ver los resultados de las pruebas


Una vez configurado el sujeto de prueba, tendr que esperar a que se recopilen
las estadsticas de trfico. Divi Leads mostrar cada variante del sujeto de prueba
a distintos visitantes y recolectar informacin para cada una. Puede ver los
resultados actuales de la prueba haciendo clic en el icono de estadsticas en la
parte superior del constructor de Divi.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 210


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
De acuerdo con el objetivo que haya elegido, Divi Leads rastrear distintas
estadsticas:
Clics Esto muestra con qu frecuencia se ha hecho clic en el objetivo. El
porcentaje de clics se calcula sobre la relacin Clics / Impresiones.
Ventas Esto muestra con qu frecuencia los usuarios compran un
producto en WooCommerce. El porcentaje de ventas se calcula sobre la
relacin Ventas / Impresiones.
Conversiones Esto muestra con qu frecuencia se enva un formulario
(tal como el formulario de contacto o el formulario de suscripcin). El
porcentaje de conversin se calcula sobre la relacin Conversiones /
Impresiones.
Porcentaje de rebote Esto muestra con qu frecuencia los visitantes
permanecen en la pgina y con qu frecuencia la abandonan. Se
considera que un visitante rebota cuando abre la pgina y la cierra de
inmediato, sin consumir nada del contenido. El porcentaje de rebote se
calcula sobre la relacin Rebotes / Impresiones. Los porcentajes bajos de
rebote son superiores a los porcentajes altos.
Lecturas Esto muestra con qu frecuencia los visitantes leen el objetivo.
Por ejemplo, si asigna un mdulo de Texto en la parte inferior de la pgina
como objetivo, el porcentaje de lectura le dir cuntos visitantes
realmente se han desplazado hasta abajo y han ledo el mdulo de texto.
El porcentaje de lectura se calcula sobre la relacin Lecturas / Impresiones.
Compromiso con el objetivo Esta estadstica es un poco distinta, y no
toma en consideracin el sujeto de prueba. El nico propsito de esta
estadstica es determinar cun efectivo es el objetivo,
independientemente de otros factores. El porcentaje de compromiso se
calcula sobre la relacin Lecturas del objetivo / Impresiones del objetivo. Por

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 211


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
ejemplo, un sujeto de prueba exitoso puede ser frustrado por un objetivo
que es completamente ignorado y poco atractivo.

Finalizar una prueba multivariable


Una vez que la prueba ha recopilado suficientes estadsticas, y usted ha decidido
cul de las variantes es la ms efectiva, podr finalizar la prueba y elegir la
versin que desea mantener.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 212


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Para finalizar una prueba, simplemente haga clic con el botn derecho del ratn
sobre el sujeto de prueba y seleccione Finalizar prueba multivariable, o desactive
la prueba multivariable dentro de los Ajustes de pgina del constructor de Divi.
Una vez que haya elegido finalizar la prueba, Divi Leads le pedir que seleccione
un ganador. Simplemente haga clic en el sujeto de prueba que desea mantener.
Divi Leads borrar los sujetos restantes y la prueba se habr completado.

Opciones adicionales
Una vez que se ha activado la prueba multivariable en la pgina actual,
aparecern algunas opciones condicionales dentro de la ventana emergente de
los ajustes de pgina del constructor de Divi. Estas opciones son:

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 213


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Lmite de porcentaje de rebote Este porcentaje afecta aquello que se
considera o no el rebote de un visitante. Los visitantes que abandonan la
pgina determinan su porcentaje de rebote, lo cual es un buen parmetro
para evaluar los niveles generales de compromiso de los usuarios. Cuando
un visitante llega a su pgina y la abandona en seguida, ese visitante se
considera un rebote y el porcentaje de rebote entonces aumenta.
Cuanto ms bajo sea el porcentaje de rebote, mejor. El lmite de
porcentaje de rebote determina aquello que se considera un abandono
efectivo de la pgina. De manera predeterminada, cualquier visitante que
llega a la pgina y la abandona dentro de los 5 segundos se considera un
rebote. Sin embargo, puede cambiar este valor con el ajuste Lmite de
porcentaje de rebote.
Intervalo de actualizacin de estadsticas Cuando se est ejecutando
una prueba multivariable, Divi Leads rastrea estadsticas relevantes del
comportamiento del usuario en la pgina para mostrarlas en la ventana
de estadsticas. De manera predeterminada, estas estadsticas se
actualizan una vez por hora y se guardan en la cach de la base de datos
de WordPress. Sin embargo, si desea reducir el uso de recursos del
servidor por parte de Divi Leads, puede disminuir esta frecuencia a una vez
por da.
Seguimiento de cdigo abreviado El seguimiento de cdigo abreviado
es usado para rastrear objetivos externos a la pgina. Coloque el cdigo
abreviado de seguimiento de Divi Leads en cualquier pgina de su sitio, y
Divi Leads rastrear las visitas a esa pgina como un parmetro de
conversin aparte. Para ms detalles, lea a continuacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 214


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Seguimiento de cdigo abreviado para objetivos
externos a la pgina
El seguimiento de cdigo abreviado se puede usar para rastrear objetivos
externos a la pgina. Estos son objetivos que existen fuera de la pgina en la que
se est ejecutando una prueba.
Por ejemplo, digamos que est evaluando la pgina principal de una empresa de
software. Ha creado una nueva prueba con un mdulo Encabezado de ancho
completo como sujeto y un formulario de suscripcin como objetivo. El objetivo
de esta pgina es recolectar direcciones de correo electrnico para que puedan
ser importadas a su sistema CRM (Administracin basada en la relacin con los
clientes). Una vez importadas al sistema CRM, se lanza una campaa de
mercadotecnia por medio de boletines de correo, cuyo objetivo es animar al
usuario a que compre el producto de software desde una pgina aparte. Luego
de que se completa la compra, los clientes son referidos a una pgina de
agradecimiento/confirmacin en su sitio web.
Esta serie de eventos es conocida como embudo de ventas. En este caso, la
prueba multivariable inicial se enfoca en los parmetros internos de la pgina
para la primera pgina de nuestro embudo. Pero usando el seguimiento de
cdigo abreviado, tambin puede rastrear cunta gente ha seguido toda la serie
de pasos dentro del embudo de ventas y finalmente comprado el producto.
Simplemente copie y pegue el cdigo abreviado de seguimiento en el contenido
de la pgina final (agradecimiento/confirmacin), y Divi Leads rastrear esos
parmetros.
Si aplica esta misma lgica, el seguimiento de cdigo abreviado puede ser usado
en un sinnmero de cosas. Puede ser usado para rastrear ventas en plugins
externos de comercio electrnico, suscripciones generadas por sistemas
externos, etc.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 215


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 216
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Cmo instalar el tema
Descargar el tema
En este tutorial, instalaremos el tema con la herramienta del administrador de
WordPress Subir. Antes de que pueda subir el tema, debe descargarlo desde el
rea de usuario. Inicie sesin en su cuenta y haga clic en el botn Download del
primer bloque dentro de la pestaa Downloads para comenzar la descarga.

Tambin puede hacer clic en el botn View All Downloads para abrir la lista
completa de temas. All haga clic en DOWNLOAD y seleccione Theme Package.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 217


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Subir el tema en el administrador de WordPress
Para subir el tema, antes debe haber iniciado sesin en su sitio WordPress.
Luego de conectarse, haga clic en la opcin Apariencia > Temas para ir a la pgina
de Temas. Haga clic en el botn Aadir nuevo de la parte superior de la pantalla.

En la siguiente pgina, haga clic en el botn Subir tema de la parte superior. Ver
una nueva pgina con un enlace para cargar archivos. Haga clic en el botn
Examinar... (Seleccionar archivo en Chrome) para abrir un cuadro de dilogo y
seleccionar la ubicacin en su equipo. Busque el archivo Divi.zip que ha
descargado del rea de usuario y seleccinelo.

Luego de seleccionar el archivo, el cuadro de dilogo se cerrar. Haga clic en el


botn Instalar ahora para instalar el tema. La pgina se recargar y una vez
subido el tema correctamente, se le presentar un enlace Activar tema. Haga clic
en este enlace para activar el tema y completar la instalacin.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 218


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 219
Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Cmo actualizar su tema
Nota: Si usa una versin anterior de Divi, es probable que no contenga la
pestaa Actualizaciones en la seccin Opciones del tema. En ese caso, puede
actualizarlo con el plugin Elegant Updater. Obtenga ms informacin aqu.
Tambin podr actualizar el tema borrando la versin actual y subiendo la
nueva copia descargada del rea de usuarios de la pgina de Elegant
Themes.
Los productos de Elegant Themes pueden ser actualizados por medio del
sistema de actualizaciones de WordPress. Cuando sale una nueva versin de un
tema o plugin, aparecen las notificaciones en la seccin Escritorio >
Actualizaciones del administrador de WordPress, as como tambin en las
correspondientes secciones de Temas y Plugins. Es importante mantener los
temas y plugins siempre actualizados para garantizar la compatibilidad con la
ltima versin de WordPress, preservar la seguridad de su sitio y beneficiarse
con las ltimas caractersticas aadidas.
Antes de poder actualizar, deber autenticar su suscripcin de Elegant Themes,
introduciendo su nombre de usuario y clave API en la pestaa Actualizaciones de
las Opciones del tema. Solo los miembros con una cuenta activa de Elegant
Themes tienen acceso a las ltimas versiones de nuestros productos. Su nombre
de usuario es el mismo que utiliza para iniciar sesin en ElegantThemes.com, y
su clave API se encuentra en el rea de usuario, en la pgina Account > Your API
Key. Una vez autenticada su cuenta, podr hacer clic en el enlace de actualizacin
al momento de recibir una notificacin, para descargarla e instalarla de manera
automtica.

Notificaciones de actualizacin
Cuando hay disponibles nuevas actualizaciones para un tema o plugin,
aparecer una notificacin en la seccin Escritorio > Actualizaciones del
administrador de WordPress.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 220


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Autenticar su membresa
Antes de poder actualizar, deber autenticar su suscripcin de Elegant Themes.
Solo los miembros con una cuenta activa de Elegant Themes tienen acceso a las
actualizaciones de nuestros productos. Para autenticar su cuenta, se le pedir
que introduzca dos datos en el panel de Opciones del tema: 1) Su nombre de
usuario, y 2) Su clave API. Su nombre de usuario es el mismo que utiliza para
iniciar sesin en ElegantThemes.com, y su clave API es un identificador nico que
se usa para autorizar el acceso desde su cuenta, y solo estar disponible cuando
inicie sesin. Para localizar su clave API, inicie sesin en el rea de miembros de
Elegant Themes y haga clic en el enlace Account > Your API Key.
Copie la clave API mostrada en esa pgina. Luego la pegar en la pgina de
opciones del tema.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 221


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Una vez copiada la clave API, deber pegarla en la pgina Divi > Opciones del tema
para poder autenticar su cuenta.

Una vez cargada la pgina de opciones del tema, busque la pestaa


Actualizaciones. Haga clic en esa pestaa para mostrar los campos Nombre de
usuario y Clave API. Introduzca su nombre de usuario en el primer campo y pegue
su clave API previamente copiada, en el segundo. Deber asegurarse de que no
copi ningn espacio extra por error. Haga clic en el botn Guardar cambios para
completar la autorizacin de su cuenta.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 222


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Luego de introducir sus credenciales, estar listo para actualizar el tema. Haga
clic en el enlace Escritorio > Actualizaciones y actualice el tema en la interfaz de
WordPress de la misma manera en que lo hara con cualquier otro. Si no ve
ninguna notificacin de actualizacin o si recibe un error de autenticacin,
aguarde unos momentos e intntelo de nuevo. Algunas veces WordPress guarda
en cach las notificaciones de actualizaciones y puede transcurrir un rato hasta
que aparezcan correctamente.

Usar el plugin Elegant Updater


Para actualizar el tema debe usar el administrador de WordPress, al igual que
para cualquier otro tema. Sin embargo, antes de poder hacer una actualizacin,
deber autenticar su suscripcin a Elegant Themes con el plugin Elegant Themes
Updater. Una vez autenticado, podr actualizar el tema desde la interfaz estndar
de WordPress.
Para autenticar su suscripcin primero debe descargar e instalar el plugin
Elegant Themes Updater. Descargue el archivo ZIP aqu, y luego instlelo desde la
opcin del men de WordPress Plugins > Aadir nuevo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 223


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Haga clic en el enlace Subir de la pgina de Plugins.

En la siguiente pantalla haga clic en el botn Examinar... (Seleccionar archivo en


Chrome) y busque en su equipo el archivo elegant-themes-updater.zip que acaba
de descargar. Seleccinelo y luego haga clic en el botn Instalar ahora para subir
e instalar el plugin. Una vez que se ha cargado correctamente, haga clic en el
enlace Activar plugin para activarlo.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 224


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com
Autenticar su membresa
Lo siguiente ser autenticar su membresa en Elegant Themes. Solo los
suscriptores activos tienen acceso a las actualizaciones de temas. Una vez
instalado el plugin, haga clic en Ajustes > Generales y desplcese hasta la parte
inferior de la pgina. Notar que se ha agregado una nueva seccin denominada
Ajustes de actualizaciones automticas de Elegant Themes. Aqu deber introducir
su nombre de usuario y su clave API de Elegant Themes. Puede encontrar su clave
API de Elegant Themes aqu, o luego de iniciar sesin en su cuenta de Elegant
Themes, desde la opcin Account > Your API Key.

Una vez introducidas sus credenciales, estar listo para actualizar el tema. Haga
clic en la opcin del men Escritorio > Actualizaciones para actualizar el tema
normalmente a travs de la interfaz de actualizacin de WordPress.

Confeccionada y traducida por Ana Ayeln Martnez caribdis.net Pgina: 225


Divi 3.0 por Elegant Themes - Documentacin elegantthemes.com

You might also like