Constructor visual

El constructor de Divi se presenta en dos formas: el constructor estándar de la interfaz de administración y el Constructor visual. Ambas interfaces le permiten construir el mismo tipo de sitios web, con los mismos elementos y ajustes de diseño para el contenido. La única diferencia es la interfaz. El constructor estándar 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 páginas predeterminado. Es muy bueno para hacer cambios rápidos mientras se encuentra dentro del escritorio, pero también está limitado ya que se visualiza como una representación del sitio web basada en bloques. Este tutorial se enfocará únicamente en el constructor visual.

El flamante constructor visual, por otro lado, le permite crear páginas desde la interfaz de usuario. Es una experiencia asombrosa y ofrece un proceso de diseño mucho más rápido. Cuando añade contenido o ajusta las opciones de diseño dentro del constructor visual, los cambios se ven de forma instantánea. Puede hacer clic en la página y comenzar a escribir. Puede resaltar texto y ajustar la fuente y el estilo. Puede agregar contenido nuevo, construir la página y observar cómo todo sucede ante sus ojos.

Activar el constructor visual

Si ha iniciado sesión en WordPress, puede navegar hacia cualquier página del sitio en la interfaz de usuario y hacer clic en el botón Activar constructor visual de la barra de herramientas.

Si está editando una página en la interfaz de administración, puede cambiar al constructor visual haciendo clic en el botón 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 botón azul aparezca).

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 módulos. Al emplear estos tres al unísono podrá crear incontables diseños de páginas. Las secciones son los bloques de construcción más grandes, y albergan un grupo de filas; las filas se colocan dentro de las secciones y se usan para contener módulos, y los módulos van dentro de las filas: esta es la estructura de todo sitio web hecho con Divi.

Repasemos los conceptos:

Secciones

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

Filas

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

Módulos

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

 

Ajustes del constructor

Personalizar la barra de herramientas

La barra de herramientas del constructor visual es personalizable, permitiéndole controlar cuáles serán los modos de interacción y de visualización, que estarán fácilmente accesibles al construir una página. Obtenga acceso rápido al modo de vista de estructura, al Modo clic, al Modo grilla, al zoom y a todas las vistas previas adaptables con un solo clic. También estos modos se pueden eliminar de la barra de herramientas para liberar espacio, o en caso de que no planee usarlos.

Modo de interacción

De manera predeterminada, la principal forma de interacción del constructor visual se centra en el hover (la acción de posar el puntero/cursor del ratón sobre un elemento del diseño). Al posar el puntero sobre los módulos, filas y secciones se muestran sus controles correspondientes, los cuales se accionan mediante clics. Esto es muy bueno para acceder rápidamente a los controles, y es nuestro método preferido para construir páginas. Dicho esto, nos hemos dado cuenta de que no todos disfrutan por igual de esta modalidad de interacción, y que puede ser frustrante cuando se está por hacer un clic y el botón o el área desaparecen durante el movimiento del ratón.

Es por eso que creamos un modo de interacción nuevo para el constructor visual, denominado Modo clic. A diferencia del Modo “hover”, cuando active el Modo clic, los controles se mostrarán al hacer clic en el elemento, en lugar de aparecer al posar el ratón. Una vez hecho clic sobre el elemento, los controles permanecen visibles hasta que se hace clic en otra área o se sale.

El Modo clic también facilita la búsqueda de elementos en la página, proporcionando un contorno claro de todos al posar el puntero del ratón. Esto hace que encontrar y hacer clic en el elemento exacto sea mucho más simple, en especial cuando se trabaja con una serie de módulos pequeños.

Además del Modo clic y el Modo “hover”, hemos añadido el Modo grilla. Cuando este está activado, todos los controles de los módulos, filas y secciones de la página se muestran juntos. No hay necesidad de hacer clic ni de posar el puntero del ratón. Una vez abiertos los ajustes del elemento, la grilla desaparece y se verá un panorama más claro de la página mientras hace los ajustes en el diseño. Incluso si nota que el Modo grilla lo distrae en el uso continuo, es útil activar y desactivar este modo sobre la marcha para apreciar mejor la estructura de la página, en especial cuando se trabaja con muchas personalizaciones de tamaños y espaciados.

Elegir el modo de interacción predeterminado

Con la introducción del Modo grilla y el Modo clic, el constructor visual ahora presenta tres maneras únicas en las que podrá interactuar con el contenido. La predeterminada cargará el Modo “hover”, pero si prefiere algún otro de los métodos, puede definirlo como predeterminado. La próxima vez que abra el constructor, la interacción deseada se activará automáticamente.

Controlar la frecuencia de creación de estados del historial

De manera predeterminada, el constructor visual creará un estado de historial para cada acción que se lleve a cabo el constructor. Puede así revertir a un estado guardado con la ventana de ajustes del historial. Luego de una larga sesión de edición, esta lista de puntos de restauración puede tornarse un tanto excesiva, y localizar el punto deseado puede dificultarse. La opción Intervalo de estados del historial le permitirá usar una lista más reducida para mejorar el rendimiento en equipos más antiguos.

Elegir la posición predeterminada de la ventana modal

Las ventanas de ajustes en el constructor visual son personalizables. Se puede cambiar la posición, el tamaño, y se pueden llevar a los lados de la pantalla. De manera predeterminada, el constructor recordará la última posición y tamaños usados, y la próxima vez que edite un módulo, la ventana aparecerá de esa misma manera. Con la opción Posición predeterminada de ventana modal de ajustes podrá definir qué modalidad se ajusta mejor a sus necesidades: Última posición usada, Tamaño mínimo de ventana flotante, Pantalla completa, Barra lateral izquierda fija, Barra lateral derecha fija o Panel inferior fijo.

Flujo de creación de páginas

Este ajuste es totalmente opcional, y le permite elegir la modalidad para usar al momento de crear una página nueva con el constructor visual: comenzar de cero, elegir un diseño predefinido, o clonar una página existente. Si no desea que se le presente la pantalla con las tres alternativas al activar el constructor, seleccione aquella que prefiera. Si quiere que el constructor funcione como siempre, elija Construir de cero como opción predeterminada. Si cree que con mayor frecuencia comenzará buscando un diseño predefinido de la biblioteca, elija Cargar diseño predefinido. Y si suele trabajar a partir de páginas ya creadas, la opción Clonar página existente será la más conveniente.

Eliminar las animaciones de la interfaz del constructor

La interfaz del constructor contiene algunas animaciones tenues. En equipos y navegadores más antiguos estas animaciones pueden afectar el rendimiento y quitarle respuesta al constructor. Al seleccionar No en la opción Animaciones de la interfaz del constructor se desactivarán todas las animaciones para acelerar el uso.

Ocultar por completo los módulos desactivados

El constructor de Divi le permite ocultar módulos en algunos o todos los dispositivos. En el constructor visual, los módulos desactivados se muestran con una opacidad del 50%. Esto significa que el elemento está oculto pero aun le permite verlo en el constructor para que pueda tener acceso a los controles y hacer cambios de diseño de manera visual. Sin embargo, esto puede ser una distracción ya que no le permite ver exactamente cómo quedará la página en la interfaz del usuario. Al seleccionar No en la opción Mostrar módulos desactivados al 50% podrá ocultar por completo los módulos desactivados dentro del constructor visual.

Abrir todas las opciones de manera predeterminada

Cuando se abre una ventana modal de ajustes del constructor, todas las opciones están organizadas en grupos. Estos grupos están cerrados de manera predeterminada y se pueden desplegar con un clic. Con el ajuste Agrupar ajustes en conmutadores cerrados puede cambiar este comportamiento. Al seleccionar No, todos los grupos estarán abiertos de manera predeterminada, mostrando todas las opciones juntas.

Añadir contenido demo al insertar nuevos módulos

Cuando añada elementos al constructor visual, los módulos se llenarán con una cantidad mínima de contenido demo, para que pueda tener una idea gráfica de los mismos dentro de la página. Esto permite que todos los ajustes de diseño más relevantes estén en uso tan pronto como se añade el módulo, además de facilitar la manera de entender su funcionamiento para los usuarios principiantes.

Podrá desactivar esta herramienta en la interfaz del constructor, al seleccionar No en la opción Añadir contenido de marcador de posición a los módulos nuevos.

Construir la primera página

De manera predeterminada, al crear una página nueva con el constructor visual, se le presentarán tres opciones distintas: puede comenzar de cero, puede abrir directamente la biblioteca de diseños predefinidos, o puede duplicar una página que haya creado con anterioridad.

Ver más información en la sección de ajustes del constructor.

Los tres bloques básicos de construcción (secciones, filas y módulos) se usan para construir las páginas.

Añadir la primera sección

Antes de poder agregar algo a la página, tendrá que añadir una sección. Las secciones se pueden agregar haciendo clic en el botón azul (). Cuando pose el ratón sobre una sección que ya existe, un botón azul aparecerá debajo. Si se hace clic en el botón, se añadirá debajo una nueva sección.

Si está comenzando una página de cero, la primera sección estará presente de manera automática.

Añadir la primera fila

Después de que haya agregado la primera sección, puede comenzar a añadir filas y columnas. Una sección puede contener un número indefinido de filas, y puede mezclar y combinar filas de varios tipos de columnas con una gran variedad de diseños.

Para añadir una fila, haga clic en el botón verde () de una sección vacía, o haga clic en el botón verde que aparece al posar el puntero del ratón sobre cualquier fila ya creada. Una vez que haya hecho clic en el botón verde, aparecerá una lista de tipos de columnas. Elija el que desee y así estará listo para añadir el primer módulo.

Añadir el primer módulo

Los módulos se pueden agregar dentro de las filas, y cada fila puede contener un número indefinido de módulos. Los módulos son elementos de contenido dentro de la página, y Divi incluye 40 elementos distintos con los que puede construir. Puede usar módulos básicos como el de Texto, Imagen o Botón, o módulos más avanzados como Carruseles, Galería y Tienda. Existen tutoriales individuales para cada módulo de Divi, así que si desea saber más sobre los tipos de módulos disponibles, asegúrese de visitar la sección Los Módulos.

Para agregar el primer módulo haga clic en el botón gris () que se encuentra dentro de cualquier columna vacía, o el botón que se ve al posar el puntero del ratón sobre un módulo de la página. Una vez que haya hecho clic en el botón gris, aparecerá la lista de módulos. Elija el que desee, el cual se agregará a la página y mostrará el panel de ajustes desde donde podrá configurar el módulo.

Configurar y personalizar secciones, filas y módulos

Cada sección, fila y módulo 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 ratón sobre cualquier elemento de la página.

Esto lanzará el panel de ajustes para el elemento específico. Cada panel de ajustes se divide en tres pestañas: Contenido, Diseño y Avanzado. Como ya es sabido, todo lo necesario para construir un gran sitio está en la pestaña Contenido. Aquí puede hacer cosas tales como ajustar el contenido y diseño del módulo, y hasta aplicar algunas opciones básicas de diseño como el color de la fuente y del fondo. Si necesita un control adicional sobre el diseño, puede ir a la pestaña Diseño. Allí podrá personalizar absolutamente todo. Para un vistazo más profundo sobre esta pestaña, visite el tutorial sobre diseño avanzado.

Finalmente, si desea más control puede ir a la pestaña Avanzado y aplicar CSS personalizado a cualquier parte del módulo.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Estilos adaptables y Contenido activo.

Tal vez el más útil es el de Estilos modificados. Una vez seleccionado, aparecerán solo los ajustes de diseño que hayan sido editados, permitiéndole localizar rápidamente las opciones deseadas y hacer los cambios correspondientes a medida que el diseño se desarrolla. Si necesita hacer un ajuste rápido al diseño personalizado, no tendrá que explorar miles de opciones para encontrar aquellas que están actualmente en uso. El filtro de Estilos modificados lo llevará directamente a los estilos activos y podrá trabajar desde allí. Si está familiarizado con las herramientas de desarrollador del navegador, tales como el Inspector de Google, esta característica es como los “computed styles”, o en otras palabras, los estilos que actualmente afectan la apariencia de un elemento en particular.

Así como el de Estilos modificados, el filtro de Contenido activo lo llevará directamente a todo el contenido que haya añadido en el módulo. Si quiere cambiar el texto del título de un Encabezado de ancho completo, al filtrar por Contenido activo, solo se mostrarán los elementos de contenido que están en uso actualmente y se eliminará el exceso de “ruido” de tantos elementos sin usar.

El filtro de Estilos adaptables sirve para acceder directamente a todos aquellos ajustes en los que se configuraron valores distintos para la vista de tablet o móvil.

Acceso rápido a elementos de diseño

Las opciones de acceso rápido sirven para comprender cuáles son los ajustes de diseño que afectan a determinados elementos. Además, permite al usuario acceder a esos ajustes más rápidamente.

Al abrir los ajustes de un módulo, parte de la belleza del constructor visual se perdía en la tarea tediosa de buscar dentro de una larga lista de opciones, mientras se intentaban modificar elementos específicos. Por suerte, esto ya no es así.

Ahora, al editar un módulo, podrá apoyar el cursor sobre sus componentes para revelar los subelementos al tiempo que se muestran los botones de acceso rápido de edición. Al hacerles clic, estos botones de acceso lo llevarán directamente a los ajustes de diseño correspondientes a ese elemento del módulo en particular. Ya no hay necesidad de buscar en todos los ajustes para dar con el grupo de opciones deseado. Esto facilita la comprensión de la estructura del módulo y cómo cada opción se relaciona con el elemento de diseño.

Este sistema también simplifica la tarea de identificar elementos en la página mientras se exploran los ajustes del módulo. Al buscar en las opciones, Divi indicará a cuál elemento corresponde el grupo de opciones en cuestión. Puede apoyar el cursor sobre la lista de opciones y usar las pistas visuales para identificar los ajustes deseados y comenzar a personalizar cada elemento.

Buscar y reemplazar

Todos los elementos del constructor de Divi incluyen una herramienta Buscar y reemplazar. Simplemente haga clic derecho en un ajuste y elija la opción Buscar y reemplazar. Esto le permitirá hacer una búsqueda de un valor específico en toda la página, o en una parte de la página en particular, y reemplazarlo por uno nuevo. Esto significa que podrá cambiar el esquema de color de la página completa o las fuentes en cuestión de segundos.

 

Cuando busque y reemplace un valor, tendrá el control total sobre el alcance y la ubicación del reemplazo. Puede buscar y reemplazar valores específicos dentro de ciertas áreas, o puede buscar y reemplazar valores en la página entera. Puede limitar el reemplazo a tipos de opciones en particular, o puede reemplazar todos los valores que se encuentran en todos los módulos y opciones.

Siempre habrá ocasiones en las que necesite usar estilos específicos para una página o una sección, y así lograr un diseño armonioso e interesante. Por ejemplo, consideremos las diferencias entre secciones que usan colores de fondo claros u oscuros. Los módulos colocados sobre fondos oscuros deben tener colores de texto claros y pesos de fuente un poco mayores. Hasta se puede elegir variar la familia de fuente para crear una sensación de ritmo. Si aplica individualmente un color de fondo oscuro a una sección que ya contiene varios módulos, tomaría mucho tiempo repasar uno por uno para editar los colores de texto, botones, bordes, etc., para que aparezcan con mayor legibilidad sobre el nuevo color de fondo. Buscar y reemplazar facilita y acelera esta tarea.

Es ideal para editar los paquetes de diseños predefinidos. Una vez insertados desde la biblioteca, cambiar los colores o las fuentes de cada uno de los módulos llevaría bastante tiempo y trabajo. Con la herramienta Buscar y reemplazar se pueden hacer ediciones “en lote” dentro de la página entera, casi al instante. E incluso reemplazar contenidos de texto recurrentes, como los que se encuentran en los botones.

Guardar la página y acceder a los ajustes de página

Para acceder a los ajustes generales de la página, haga clic en el botón morado de la parte inferior de la pantalla. Esto ampliará la barra de ajustes y le proporcionará varias opciones. Puede abrir los ajustes de página con un clic en el icono del engranaje, y allí podrá ajustar elementos tales como el color de fondo de la página y el color del texto. También encontrará los botones Guardar y Publicar, así como los alternadores de vista para dispositivos móviles.

Arranque el diseño desde plantillas

Una manera muy buena de comenzar una página nueva es arrancar desde una plantilla. Divi ofrece 20 diseños predefinidos que cubren la variedad de tipos de página más comunes, tales como “Quiénes somos”, “Contacto”, “Blog”, “Portfolio”, etc. Puede cargar esas plantillas y reemplazar el contenido de demostración con el suyo propio. ¡La página nueva estará terminada antes de que pueda darse cuenta! Para saber más sobre los diseños predefinidos, asegúrese de visitar la sección correspondiente de esta documentación.

Guardar sus propios diseños en la biblioteca

Además de poder usar los diseños predefinidos que incluye Divi, también puede guardar sus propias creaciones en la biblioteca. Cuando se guarda un diseño de Divi en la biblioteca, se puede cargar en páginas nuevas. Cuanto más haga crecer la biblioteca con sus diseños favoritos, más rápido podrá crear nuevos sitios. Para saber más sobre la biblioteca de Divi, asegúrese de visitar la sección correspondiente de esta documentación.

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 ratón.

Perfecto, ya tiene lo básico, ¡y ahora es hora de empezar a diseñar!

Ha añadido sus primeras secciones, filas y módulos a la página; ha ajustado las opciones y comenzado a construir y personalizar su diseño: ya tiene lo básico, pero hay mucho más por aprender. Tenemos decenas de tutoriales que abarcan cada aspecto de Divi. Lo animamos a seguir leyendo cada uno de los capítulos de esta documentación. Cuando termine, será un maestro de Divi.