Академический Документы
Профессиональный Документы
Культура Документы
ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 1
Pgina: 2
ndice
Un vistazo al constructor..........................................................10
Secciones.................................................................................................10
Filas..........................................................................................................10
Mdulos...................................................................................................10
Comenzar................................................................................................11
Opciones de diseo del constructor....................................................12
Guardar en la biblioteca....................................................................................................12
Cargar de la biblioteca.......................................................................................................12
Limpiar diseo....................................................................................................................12
Opciones de seccin..............................................................................13
Aadir y definir una fila.........................................................................16
Aadir un mdulo..................................................................................17
Ampliar el diseo...................................................................................19
Aadir secciones de ancho completo y secciones especiales..........19
Modificar y reorganizar el diseo........................................................20
Guarde y publique!...............................................................................21
Volver al Editor predeterminado..........................................................22
La biblioteca de Divi..................................................................31
Qu es la biblioteca de Divi?...............................................................31
Guardar elementos nuevos en la biblioteca......................................31
Crear y administrar elementos en la biblioteca.................................33
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 3
Cabecera y navegacin..........................................................................46
Formato de cabecera.........................................................................................................47
Barra de men primario....................................................................................................48
Barra de men secundario...............................................................................................48
Ajustes de navegacin fija.................................................................................................49
Elementos de cabecera.....................................................................................................50
Botones...................................................................................................53
Estilo de botones................................................................................................................54
Pgina: 4
Pgina: 5
CSS personalizado..................................................................................90
El editor de perfil.......................................................................92
Controle todo lo que pueden hacer los usuarios dentro del
constructor..............................................................................................92
Privilegios del tema a nivel superior....................................................92
Interfaz del constructor.........................................................................93
Ajustes de la biblioteca..........................................................................93
Pestaas de ajustes...............................................................................94
Tipos de ajustes......................................................................................94
Uso de mdulos.....................................................................................95
Los Mdulos............................................................................104
Anuncio breve.......................................................................................104
Carrusel.................................................................................................106
Tabla de precios...................................................................................110
Testimonio............................................................................................111
Llamado a la accin (CTA, por Call To Action)..................................113
Imagen...................................................................................................114
Galera...................................................................................................115
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 6
Barra lateral..........................................................................................117
Portfolio.................................................................................................118
Blog........................................................................................................119
Barras de progreso..............................................................................120
Suscripcin............................................................................................122
Configuracin en panel de opciones del tema............................................................122
Configuracin del mdulo..............................................................................................122
Texto......................................................................................................124
Conmutador.........................................................................................125
Pestaas................................................................................................125
Formulario de contacto.......................................................................126
Encabezado de ancho completo........................................................128
Portfolio por filtros..............................................................................130
Audio......................................................................................................131
Mapa......................................................................................................132
Ajustes generales del mdulo........................................................................................133
Ajustes de marcador individual......................................................................................133
Redes sociales......................................................................................134
Ajustes generales del mdulo........................................................................................134
Ajustes de botones individuales....................................................................................135
Persona.................................................................................................135
Cuenta regresiva..................................................................................136
Contador circular.................................................................................137
Contador numrico.............................................................................138
Acorden...............................................................................................139
Ajustes bsicos del mdulo............................................................................................140
Ajustes de elementos del mdulo.................................................................................140
Inicio de sesin.....................................................................................140
Men de ancho completo...................................................................142
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 7
Tienda....................................................................................................145
Separador..............................................................................................147
Carrusel de ancho completo..............................................................147
Vdeo......................................................................................................151
Carrusel de vdeo.................................................................................153
Ajustes de vdeo individual.............................................................................................154
Cdigo....................................................................................................154
Ttulo de entrada..................................................................................155
Carrusel de entradas...........................................................................157
Comentarios.........................................................................................159
Navegacin de entradas.....................................................................160
Botn.....................................................................................................161
Bsqueda..............................................................................................162
Caractersticas adicionales.....................................................164
Cargar una imagen para el logo.........................................................164
Crear proyectos para el Portfolio.......................................................164
Crear un proyecto................................................................................165
Usar Mega Mens................................................................................168
Formatos de entrada de blog.............................................................172
Usar el formato de entrada Vdeo.................................................................................173
Usar el formato de entrada Audio.................................................................................173
Usar el formato de entrada Cita....................................................................................174
Usar el formato de entrada Galera...............................................................................174
Usar el formato de entrada Enlace................................................................................175
Traducir su sitio....................................................................................175
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 8
Pgina: 9
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).
Pgina: 10
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.
Pgina: 11
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.
Pgina: 12
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.
Pgina: 13
Pgina: 14
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.
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.
Pgina: 15
Pgina: 16
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.
Pgina: 17
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.
Pgina: 18
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.
Pgina: 19
Pgina: 20
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.
Pgina: 21
Pgina: 22
Pgina: 23
Pgina: 24
Pgina: 25
Pgina: 26
Pgina: 27
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
Pgina: 28
Pgina: 29
Pgina: 30
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.
Pgina: 31
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.
Pgina: 32
Pgina: 33
Pgina: 34
Pgina: 35
Pgina: 36
Pgina: 37
Pgina: 38
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
mdulo global. Los ajustes que se hagan dentro de las pestaas verdes se
compartirn en todas las instancias del elemento global.
Pgina: 39
Exportar la biblioteca
Una vez que haya accedido al panel de exportacin, seleccione los tipos de
elementos que desea exportar (mdulos, filas y/o secciones) y luego haga clic en
el enlace Descargar archivo de exportacin. As descargar un archivo XML que
luego podr importar en otro sitio, usando el plugin Importador de WordPress.
Importar la biblioteca
Una vez que haya descargado el archivo XML de exportacin, es hora de
importarlo al nuevo sitio, mediante el plugin Importador de WordPress. Inicie
sesin en su nuevo sitio y haga clic en el enlace Herramientas > Importar del
men de WordPress. Esto lo llevar a una nueva pgina con una lista de tipos de
importacin de distintos sistemas de gestin de contenido. Haga clic en el enlace
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 40
Pgina: 41
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!
Pgina: 42
Puede hacer casi todo lo que se le ocurra con el personalizador de tema, sin
tocar una sola lnea de cdigo.
Pgina: 43
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.
Pgina: 44
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.
Pgina: 45
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.
Pgina: 46
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 47
Pgina: 48
Pgina: 49
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.
Pgina: 50
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.
Pgina: 51
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.
Pgina: 52
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.
Pgina: 53
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.
Pgina: 54
Pgina: 55
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 56
Pgina: 57
Pgina: 58
Ajustes generales
Pgina: 59
productos.
Pgina: 60
Pgina: 61
Pgina: 62
fecha de creacin, por fecha de modificacin, por ID, por autor y por
nombre).
Pgina: 63
Pgina: 64
Pgina: 65
Pgina: 66
Publicidad
Pgina: 67
Pgina: 68
Pgina: 69
Pgina: 70
Pgina: 71
Pgina: 72
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).
Pgina: 73
Pgina: 74
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.
Pgina: 75
Pgina: 76
Pgina: 77
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.
Pgina: 78
Pgina: 79
Ajustes generales
Pgina: 80
Pgina: 81
Pgina: 82
Pgina: 83
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).
Pgina: 84
Pgina: 85
Pgina: 86
Pgina: 87
Pgina: 88
Pgina: 89
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.
Pgina: 90
Pgina: 91
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.
Pgina: 92
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.
Pgina: 93
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.
Pgina: 94
Uso de mdulos
Por ltimo, 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.
Pgina: 95
Pgina: 96
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.
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
Pgina: 97
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
que se han desactivado en todos los dispositivos aparecen con un 50% de
opacidad dentro del constructor para diferenciarlos del resto.
Pgina: 98
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
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
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 99
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.
Pgina: 100
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.).
Pgina: 101
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.
Pgina: 102
Pgina: 103
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.
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.
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.
Pgina: 104
Pgina: 105
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.
Pgina: 106
URL del botn Si muestra un botn, escriba una URL vlida en este
campo para definir el destino del enlace.
Pgina: 107
Color de fondo Si tan solo desea usar un color slido como fondo, use el
selector de color para definirlo.
Pgina: 108
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.
Pgina: 109
Pausar vdeo Permita que el vdeo sea pausado por otros reproductores
cuando comiencen a reproducir.
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.
Pgina: 110
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).
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.
Pgina: 111
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.
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.
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.
Pgina: 112
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.
URL del botn Escriba una URL vlida en este campo para especificar la
pgina de destino del botn.
Texto del botn Defina el texto del botn aqu, o djelo en blanco si no
desea mostrar un botn.
Pgina: 113
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.
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.
Pgina: 114
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.
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.
Pgina: 115
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.
Pgina: 116
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.
rea de widget El mdulo Barra lateral usa reas de widgets que usted
puede crear desde el men Apariencia > Widgets. Puede seleccionar
cualquiera de sus reas personalizadas de widgets desde este men
desplegable.
Pgina: 117
Portfolio
Con el mdulo Portfolio puede hacer alarde de sus trabajos en cualquier parte
del sitio y en cualquier estructura de columnas.
Pgina: 118
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.
Pgina: 119
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.
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
Pgina: 120
navegar por la pgina, y puede usar dentro de este mdulo todas las barras que
desee.
Color de fondo Puede darles a las barras el color de fondo que desee,
con el selector de color.
Ttulo El ttulo que escriba aqu ser usado para la etiqueta de esta
barra.
Pgina: 121
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.
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.
Pgina: 122
Pgina: 123
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.
Pgina: 124
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.
Pestaas
Las Pestaas son tambin otra herramienta para consolidar y ordenar
informacin, adems de mejorar la experiencia del usuario dentro de la pgina.
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
Confeccionada y traducida por Ana Ayeln Martnez caribdis.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 125
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.
Ttulo El ttulo que escriba aqu se mostrar dentro del botn para esta
pestaa.
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.
Pgina: 126
Pgina: 127
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.
Pgina: 128
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.
Pgina: 129
Pgina: 130
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.
Pgina: 131
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.
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.
Pgina: 132
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.
Pgina: 133
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.
Forma del enlace Aqu puede elegir la forma de los iconos de las redes
sociales. Puede alternar entre Circular o Rectngulo redondeado.
Pgina: 134
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.
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.
Pgina: 135
URL de la imagen Aqu puede subir una foto para usar en el mdulo.
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.
Pgina: 136
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.
Pgina: 137
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.
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.
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 138
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.
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.
Pgina: 139
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).
Pgina: 140
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.
Pgina: 141
Men Seleccione un men que haya creado desde Apariencia > Mens
para usar en 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.
Pgina: 142
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.
Pgina: 143
Pgina: 144
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.
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 145
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.
Pgina: 146
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.
Alto Defina el espacio vertical que se debe agregar debajo del separador
(en pxeles).
Pgina: 147
Pgina: 148
URL del botn Si muestra un botn, escriba una URL vlida en este
campo para definir el destino del enlace.
Color de fondo Si tan solo desea usar un color slido como fondo, use el
selector de color para definirlo.
Pgina: 149
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
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
Pgina: 150
Pausar vdeo Permita que el vdeo sea pausado por otros reproductores
cuando comiencen a reproducir.
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
Pgina: 151
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.
Pgina: 152
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.
Pgina: 153
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.
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 154
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.
Pgina: 155
Pgina: 156
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.
Pgina: 157
Texto del botn Defina el texto que se mostrar en el botn Leer ms.
Deje en blanco para usar el texto predeterminado (Leer ms).
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.
Pgina: 158
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.
Pgina: 159
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.
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 160
misma categora. Esta opcin simple hace que los enlaces sean ms relevantes,
incrementando la probabilidad de que el visitante encuentre contenido de su
inters.
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
Pgina: 161
Divi. Cuando se combina con los Ajustes de diseo avanzado, podr crear
incontables estilos de botones.
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.
Bsqueda
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.
Pgina: 162
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.
Texto del marcador de posicin Escriba el texto que desea usar como
marcador de posicin para el campo de bsqueda.
Nota: Para traducir la etiqueta del botn, vaya a Opciones del tema > Integracin >
Aadir cdigo al <head> de su sitio e introduzca en el campo el siguiente cdigo:
<script>
jQuery(document).ready(function(){
jQuery("input.et_pb_searchsubmit").val('Buscar');});
</script>
Pgina: 163
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.
Pgina: 164
Crear un 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.
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.
Pgina: 165
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.
Pgina: 166
Pgina: 167
Pgina: 168
Pgina: 169
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.
Pgina: 170
Pgina: 171
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
Pgina: 172
tanto que las dems opciones poseen un diseo nico asociado con el tipo de
formato.
Pgina: 173
Pgina: 174
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.com.ar
Divi 2.6 por Elegant Themes - Documentacin elegantthemes.com
Pgina: 175
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:
Pgina: 176
Pgina: 177
Pgina: 178
Pgina: 179
Pgina: 180
Pgina: 181
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.
Pgina: 182
Pgina: 183
Pgina: 184
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.
Pgina: 185