Anatomía de un enlace

La analogía más común de un enlace es compararla a un voto. Si una página A enlaza a una página B, entonces la página A está sugiriendo que la página B es una buena página: a la página A le gusta la página B. La única pequeña complicación es la etiqueta nofollow. En pocas palabras, la etiqueta nofollow permite que se añadan enlaces a las páginas sin pasar un voto. Estos son utilizados para enlazar publicidad, por ejemplo, donde envían tráfico a otra página sin pasar un voto. O bien, dentro de la misma estructura de tu sitio Web para evitar contenido repetido y así evitar penalización por Google.

¿Por qué son importantes los enlaces?

Habiendo establecido que los enlaces son como votos, no es difícil entender por qué los enlaces son importantes. Al igual que un político gana una elección asegurando más votos que otros candidatos, las páginas aseguran las primeras posiciones en el resultado de una búsqueda asegurando más votos que otras páginas. Sin embargo, a diferencia de una elección política donde todos los votos son iguales, los motores de búsqueda dan más peso a ciertos votos que a otros.

¿Por qué no todos los enlaces son iguales?

Para poder explicar esto, vamos a seguir con la analogía de los votos. Cuando se piensan sobre enlaces como votos es útil considerarlos en términos de votos por bloque o votación por bloque. Más comúnmente asociados con sindicatos, los bloques de votos infieren a una persona los derechos de voto de todos los miembros de una organización.

Digamos que hay 4 personas en una habitación y cada uno representa a un grupo de personas.

Se presenta una propuesta ante el grupo y el Sr. Suárez, el Sr. Jiménez y el Sr. Sánchez todos votan a favor, mientras que el Sr. Castro vota en contra. Aparentemente los votos son 3 a favor y 1 en contra y la propuesta debería llevarse a cabo. Sin embargo, el Sr. Castro representa a un grupo de 5,000 personas, 500 más que el número representado en conjunto por Suárez, Jiménez y Sánchez. Entonces la moción no se lleva a cabo porque queda derrotada por 5,000 votos contra 4,500.

Esto es básicamente lo que sucede con los enlaces. Cada enlace lleva diferentes derechos de voto y es perfectamente posible que una página con sólo 3 o 4 enlaces tenga una posición más alta en los resultados de Google, que una página con varios cientos o incluso varios miles de enlaces.

¿Cómo asegurar enlaces correctos?

Hay algunas personas quienes afirman que vale la pena tener cualquier tipo de enlace. Quizá estén en lo correcto. Sin embargo, dado que ahora entendemos que no todos los enlaces cargan el mismo peso, debemos ser claros en que asegurar enlaces que acarrean mucho peso tendrán mucho mayor impacto en tus páginas Web que enlaces que cargan poco peso o ninguno ¿Entonces cómo puedes asegurar enlaces que carguen peso? Simple: creando algo que valga la pena enlazar. El problema es que esto no es tan simple, sino de hecho es muy difícil. Requiere pensar, planear, investigar y mucho arduo trabajo y por estas razones es que muchas gentes optan por enlazar spam.

Enlaces Spam

La vasta mayoría de las empresas que construyen enlaces operan creando enlaces spam. En términos simples, crean enlaces de sitios tales como foros, granjas de enlaces, directorios, blogs, hubs, bookmarks sociales, y una cada vez más grande cantidad de otras maneras. También hay cientos de directorios de artículos que aceptan publicaciones de baja calidad a cambio de un enlace. Si crees que todo lo que importa es la cantidad de enlaces, entonces encontrarás miles de compañías que te construirán un número de enlaces por una tarifa mensual.

Para que puedas tomar una decisión informada, vamos a ver algunas de las técnicas de construcción de enlaces más comunes y discutamos por qué podrían no valer la pena el esfuerzo:

• Foros – La técnica de construcción de enlaces más común al utilizar foros es crear una página de perfil y una firma con enlace. Los enlaces en las firmas permiten colocar automáticamente un enlace al final de las publicaciones o comentarios que dejas en un foro. Las firmas con enlaces son a lo mucho de muy baja calidad y aunque te pueden enviar algo de tráfico, es difícil que tenga un impacto a largo plazo en las páginas que enlaces. Esto es porque estos enlaces no están basados en méritos, como el es el caso de todos los métodos de enlace de spam, y es aceptado que los motores de búsqueda prefieren ignorar este tipo de enlaces asignándoles un valor muy bajo o nulo.
• Granjas de enlaces – Estas son empleadas por muchas empresas de construcción de enlaces. Una granja de enlaces a veces puede tener un vasto número de sitios Web y páginas Web, todas bajo el control de la empresa de construcción de enlaces. Mediante la construcción de una granja de enlaces, las empresas constructoras de enlaces pueden ofrecer un número de enlaces por una cantidad fija ya que tienen suficiente espacio a su disposición para construir los enlaces. El problema con las granjas de enlaces es que pueden ser descubiertas por los motores de búsqueda y cuando esto sucede, los enlaces dentro de ellas dejan de tener cualquier impacto positivo sobre los sitios que enlazan. Existen muchas variaciones a este tema que incluyen una técnica donde las empresas constructoras de enlaces compran páginas dentro de sitios Web legítimos en un intento para aparecer creíbles.
• Directorios – Estos son útiles y pueden crear enlaces que llevan algún valor en el sentido de atraer tráfico a tu sitio Web. Pero, en otro sentido, son una forma de spam; y, como las otras técnicas de spam, los enlaces de los directorios generalmente no están basados en méritos, y como tales, rara vez llevan peso para ayudarte a incrementar tu posición SEO. Existen, sin embargo, algunas excepciones notables tales como el directorio DMOZ y el de Yahoo.
• Hubs – Hay  páginas creadas en servicios tales como Squidoo. En teoría, las páginas hub enSquidoo o «lentes» como soy llamadas por este servicio en particular, son una gran idea y permiten a las personas crear páginas sobre algo que les interese. Desafortunadamente los spammers también se han dado cuenta que es una manera fácil para crear páginas para construir enlaces de modo que es una buena suposición que utilizar hubs como este no tendría un gran impacto positivo en tu sitio Web.
• Blogs – A veces referidos como SPLOGS (spam blogs), los blogs son favoritos entre los spammers de enlaces que buscan blogs con la esperanza de dejar un comentario y un enlace asociado para el sitio Web de su cliente. Al igual que los anteriores, estos enlaces no están basados en méritos a menos que el blog sea administrado activamente por su propietario y utilizando algún software de blog popular como WordPress que automáticamente añade etiquetas nofollow a los comentarios. Esto hace que los enlaces sean de poco valor para los motores de búsqueda, con la excepción del limitado tráfico que te pudiera generar a menos que tu comentario sea aceptado en un blog popular con alto tráfico.
• Bookmarks sociales – En el pasado, los sitios de bookmarks sociales pudieron haber sido una fuente de enlaces valiosos pero los spammers de enlaces le han puesto fin a eso. Los sitios con más credibilidad (como Digg, Sphinn, etc.( reconocen que sus  plataformas estuvieron siendo abusadas por los spammers de enlaces y como resultado ahora añaden etiquetas nofollow a los enlaces para combatirlos.

Podemos seguir viendo los métodos y plataformas utilizadas por los spammers de enlaces, pero para este momento debes haberte construido una idea general. Los spammers de enlaces generalmente crean enlaces que no están basados en méritos y como tales, los enlaces que compras de ellos pueden funcionar por un tiempo pero eventualmente dejarán de funcionar. Pueden durar semanas para dejar de funcionar (días en casos extremos), pueden tomar meses, y ocasionalmente puede tomar años, pero eventualmente dejarán de funcionar porque los motores de búsqueda cada vez se programan mejor para filtrar los enlaces spam para darle más prioridad a los que están basados en méritos.

Comprar enlaces

Hay muchas maneras de comprar enlaces. Puedes comprar un enlace a una empresa constructora de enlaces pero también puedes comprar enlaces directamente a los dueños de sitios Web. Si compras un enlace y el enlace no está etiquetado con un nofollow, caes en incumplimiento directo con los lineamientos de Google. En pocas palabras, si Google descubre que compraste enlaces hacia tu sitio Web, tu sitio puede ser removido de su directorio. En general, simplemente eliminan cualquier valor de los  enlaces que has comprado en vez de penalizarte directamente, aunque el efecto final puede ser el mismo.

Entonces ¿quién compra enlaces? Desafortunadamente muchas compañías compran enlaces y así como la construcción de enlaces en general, existe una gran industria ofreciendo enlaces para venta en algunos sitios Web impresionantes, incluyendo algunos con altos perfiles populares. Dicho esto, comprar enlaces puede ser muy costoso, y no es raro encontrar a algunas empresas cobrando muchos miles de dólares al año por un solo enlace. Además, algunos vendedores de enlaces requieren un pago continuo para mantener el o los enlaces que compraste. Si decides ir por este camino, necesitarás mucho dinero para mantenerte.

¿Cómo identificar un buen objetivo de enlace?

El término objetivo de enlace simplemente significa una página Web que te gustaría que te enlazara (que tuviera un enlace hacia tu sitio Web). Dejando a un lado los spammers de enlaces, quienes ven todos los iguales como iguales, identificar un buen objetivo de enlace es muy simple. Un buen objetivo de enlace es una página Web cuyos lectores estarían interesados en el contenido de una página de tu sitio Web. Así de simple.

Elaborando sobre esto, podríamos decir que un buen objetivo de enlace es una página Web con autoridad informativa cuyos lectores podrían estar interesados en el contenido de una página en tu sitio Web. Existen muchas maneras de establecer la autoridad de un sitio Web, incluyendo la tecnología de PageRank de Google, la tecnología MosRank de SEOMoz, TrustRank, Spam Signals y otros más que simplemente deberías simplemente considerar una página solamente sobre la simple regla ofrecida arriba ¿estarían los lectores de esta página interesados en mi página?

Si adoptas esta filosofía en tu labor de construcción de enlaces, construirás enlaces que te enviarán un tráfico valioso mientras que al mismo tiempos construyes la autoridad de tu página. Es una técnica ganar ganar. Por supuesto que los spammers de enlaces argumentarán que esta sugerencia consume demasiado tiempo y es muy difícil, y estarían en lo correcto. Estos mismos expertos no dudarían en querer venderte tu maravillosa técnica de dominación de motores de búsqueda. Sin duda te dirán que han descubierto los secretos de construir enlaces duraderos y efectivos con un mínimo de esfuerzo y con sólo unos cuantos cientos de dólares. Pero pregúntate esto:  si es verdad que han encontrado una manera infalible de construir enlaces valiosos ¿por qué simplemente no están dominando los resultados de las búsquedas ellos mismos y haciendo una fortuna en mercadeo de afiliados?

¿Los sistemas de construcción de enlaces funcionan?

Sí. No hay duda que algunas personas sí descubren métodos para crear enlaces efectivos rápida y económicamente. También no hay duda que estos métodos usualmente son descubiertos por los motores de búsqueda y rápidamente cesa de ser efectivos. Para el momento en el que tienes acceso a estos esquemas es muy probable que la persona que hizo el descubrimiento ha hecho su dinero y ahora está tratando de exprimir unos cuantos dólares más vendiéndote la técnica a ti. Como la mayoría de las cosas en la vida, no hay nada gratis y estos esquemas deberían ser evitados.

Anatomía del enlace perfecto

Si sigues leyendo esto, habrás comprendido qué es un enlace, por qué es valioso, y por qué son necesarios como como parte de tu estrategia de mercado en línea. Entonces ¿cómo debería ser el enlace perfecto? El enlace perfecto debería:

1. Enviar tráfico valioso a tu sitio Web
2. Decirle a los motores de búsqueda que tu sitio es una autoridad informativa

Digamos que hay una empresa empresa llamada Buceo Pulmo, S.A. y que ofrece escapadas de buceo en Cabo Pulmo, México. Sus tours de buceo  son único y han sido mencionados en varios programas de televisión y artículos sobre la empresa, y su singular enfoque ha aparecido en varios diarios nacionales. Esto ha resultado que el sitio Web de la empresa haya asegurado un número de enlaces de calidad, y Google frecuentemente la coloca entre los primeros resultados cuando las personas buscan temas sobre buceo.

Tu empresa, Especialistas en Buceo, S.A., ofrece muy buenos precios en equipo de buceo y estás tratando de construir enlaces hacia el sitio Web de tu empresa para poder incrementar su autoridad informativa y el tráfico que recibe desde los motores de búsqueda. Existen muchos sitios Web que venden equipo de buceo, y no hay ninguna razón por la que Buceo Pulmo S.A. vaya a enlazar tu sitio en particular. Llamarles y pedirles un enlace simplemente porque tú vendes equipo no tiene sentido, quizá reciban varias de esas peticiones cada semana. Quizá estarían más inclinados a ofrecerte vender un banner publicitario que darte un enlace, y aunque un banner publicitario dentro del mercado meta puede ser muy efectivo, no te ayudará con los motores de búsqueda (SEO), a menos que te den un enlace directo a tu sitio y el enlace no esté etiquetado con una etiqueta de nofollow. Ese enlace comprado podría incluso tener un impacto negativo en tu sitio Web y podría ser también una violación a los lineamientos de Google. Un método más creativo es necesario.

Como Buceo Pulmo SA se especializa en vacaciones de buceo en Cabo Pulmo, tú te pones a investigar. Estableces las temperaturas promedio del agua en el año. Estableces las profundidades de algunas de las inmersiones más populares, compartes las cartas más exactas de las aguas de Cabo Pulmo que muestran los mejores sitios de interés y encuentras los videos de YouTube de Buce Pulmo S.A. sobre sus expediciones de buceo.

Utilizando toda esta información, creas la guía definitiva para bucear en Cabo Pulmo. Tú estableces los mejores equipos basados en las temperaturas de agua y las profundidades de buceo en la zona, muestras algunos de las mejores buceadas y compartes videos contándoles a tus visitantes acerca de Buceo Pulmo SA y sus geniales paquetes vacacionales. Nota que no has ligado al sitio Web de Buceo Pulmo SA en tu nueva página, aunque sí los has mencionado.

Ahora te acercas a Buceo Pulmo SA y les pides un enlace para tu página especializada sobre buceo en Cabo Pulmo. Al revisar la página ellos ven el valor de enlazarte y ¡lotería! te has asegurado un gran enlace a tu sitio Web de un sitio que es autoridad en el tema de buceo. El valor del enlace a tu página especializada es pasada a otras páginas en tu sitio Web, por ejemplo, a la página que vende el traje de buceo que tú recomendaste en tu página especializada.

Este es un ejemplo simple y requiere algo de trabajo, pero el resultado final es un enlace genuino de calidad que te ayudará a construir la autoridad de tu sitio Web.

En Conclusión

Existen dos caminos claros para construir enlaces: enlaces spam y enlaces por mérito. Debería ser claro que los enlaces de spam requerirán menos esfuerzo, pero no construirán enlaces duraderos, mientras que los enlaces basados en mérito requieren más esfuerzo pero construyen enlaces que desafiarán el tiempo. El camino que elijas dependerá de muchos factores, incluyendo los recursos que tengas disponibles y tu apetito para construir un negocio duradero.

Los motores de búsqueda continuamente están tratando de purgar los resultados de sus búsquedas de las páginas que  emplean técnicas de enlaces de spam, aunque es claro que no tienen un éxito total. Los métodos de construcción de enlaces que adoptes dependerán de tu visión sobre qué tan efectivos serán los motores de búsqueda para detectar los enlaces de spam en el futuro. Si crees que ellas tienen los recursos para vencer, no te quedará opción que construir enlaces basados en méritos. Por otro lado, si planeas que tu empresa o negocio dure sólo un tiempo breve, quizá consideres que es innecesario invertir tanto tiempo en un enlace que durará más tiempo que el tiempo de vida que tienes planeado para tu negocio. O bien, si como muchos, crees que los motores de búsqueda tienen la batalla perdida contra el spam, quizá quieras aventarte al ruedo con los spammers de enlaces.

Espero que después de leer este artículo puedas tomar una decisión más informada.

Haz que tu sitio Web aparezca en Google

Un gran contenido anima a las personas a enlazar tus páginas y muestra a Google que tus páginas son interesantes e informativas. Esto lleva al éxito en la búsqueda de una mejor posición en los resultados de Google, porque Google quiere mostrar páginas interesantes e informativas en sus resultados. Es así de simple.

¿Cómo categoriza Google las páginas?

Google promueve hasta los primeros lugares a las páginas más informativas sobre el tema buscado, de modo que es tu trabajo crear páginas que se conviertan en páginas informativas. Esto significa escribir contenido que la gente encuentre útil porque el contenido útil es compartido en blogs, en Twitter, etc., y al paso del tiempo Google localiza esas señales informativas. Este círculo virtuoso crea clasificaciones fuertes y sustentables en Google.

¿Cómo obtener mejores resultados?

La Optimización de Motores de Búsqueda o SEO es la simple actividad de asegurarse que un sitio Web pueda ser encontrado en los motores de búsqueda por palabras y frases relevantes para lo que el sitio está ofreciendo. En muchos aspectos es simplemente un control de calidad para los sitios Web.

¿Cómo obtengo enlaces?

Los enlaces son importantes, pero no debemos confundir calidad con cantidad y no pensemos sólo en enlaces como parte aislada de tu contenido. Es vital comprender que tener un gran contenido aumentará enormemente tus oportunidades de asegurar enlaces naturales de páginas relevantes de alta calidad. Estos enlaces son los que te ayudarán más.

En pocas palabras, si tienes algo que valga la pena enlazar, podrías obtener enlazamientos que valgan la pena tener. Los mejores sitios de calidad no enlazan contenido pobre.

Resumiendo

Haz tu tarea y comprende qué tipo de contenido están buscando tus clientes potenciales. Crea un sitio Web grandioso, crea contenido que la gente necesite y haz que sea fácil para ellos compartirlo. Haz esto y comenzarás a ver que tu tráfico se incrementa.

Introducción

Los Deslizadores (Sliders) pueden ser colocados donde sea, abarcando la anchura completa de cualquier columna que estén. Los Deslizadores Divi soportan fondos con efecto de paralelaje, así como también fondo de video.

Ejemplo

Introducción

El módulo Anuncio (Blurb) es una combinación simple y elegante de texto e imágenes. Los Anuncios son una excelente manera de mostrar pequeños textos de información importante, y frecuentemente se usan para mostrar características e incluso títulos. Los Anuncios pueden ser colocados en cualquier columna que puedas crear.

Ejemplos de Anuncio

Opciones

Acceso Rápido a las Funciones del Constructor Divi

Cuando hagas click con el botón derecho de tu ratón sobre algo dentro del Constructor Divi, ya sea un Módulo, una Fila o una Sección, obtendrás una lista de diversas acciones que puedes realizar. Estas acciones incluyen: Cambiar de Nombre, Guardar en la Biblioteca, Deshacer y Re-Hacer, Colapsar y Expandir, Copiar y Pegar, y Previsualizar. Quizá ya estés familiarizado con muchas de estas funciones que han sido agregadas al control de Click Derecho para tu conveniencia. De esta manera no tendrás que entrar a las configuraciones de los módulos para accesar características comúnmente utilizadas. Sin embargo, algunas de estas funciones son especiales para el Click Derecho y solamente están disponibles cuando lo utilices. Estas incluyen: Copiar y Pegar, Bloqueo, Colapsar e Inhabilitar.

Cambiar el nombre de (Rename)

A cualquier Módulo, Fila o Sección se le puede dar un nombre. Este nombre aparece en el Constructor, y puede ser utilizado para identificar el artículo en la página. Cuando edites páginas grandes, esto te puede ayudar a organizar elementos dentro del Constructor. Por ejemplo, si tienes 20 módulos de texto distintos en la página, puedes querer darle un nombre a cada uno de ellos para que sepas dónde están antes de abrir su ventana de configuración.

Guardar en biblioteca (Save To Library)

La opción de guardar un elemento en la Biblioteca Divi ha sido añadida al centro de Click Derecho para conveniencia. Usando esta funcionalidad puedes guardar artículos a la biblioteca sin tener que abrir la caja de configuración relevante.

Hacer y Deshacer (Undo & Redo)

Cualquier acción que tomes dentro del Constructor Divi puede ser deshecha, y cualquier acción deshecha también puede rehacerse. Los controles de Hacer y Deshacer, que están disponibles utilizando el botón de Deshacer y Rehacer arriba de la interface del Constructor Divi, también pueden ser acusados cuando se hace Click Derecho.

Deshabilitar (Disable)

Deshabilitar es una opción que sólo está disponible por medio de los controles de Click Derecho de Divi. Cualquier Módulo, Fila o Sección puede ser inhabilitada. Una vez que un artículo ha sido inhabilitado, ya no aparecerá en la página de tu sitio Web. Sin embargo, el artículo permanecerá activo dentro de la interface del Constructor Divi. Inhabilitar un artículo es una forma de eliminar cosas de la página sin borrarlas del constructor. Pueden ser habilitadas nuevamente en el futuro. Los artículos que han sido inhabilitados aparecen al 50% de opacidad en el Constructor para informarte que han sido inhabilitados.

Bloqueo (Lock)

El Bloqueo es una función que sólo está disponible por medio del control de Click Derecho de Divi. Una vez que un artículo ha sido bloqueado, no puede moverse, editarse o borrarse sin antes desbloquearlo. Sólo los usuarios con roles de Administrador tienen la habilidad de bloquear y desbloquear artículos. Esto significa que tú puedes asignar a tus colaboradores un rol menor, tal como Editor, y no podrán editar ningún artículo que haya sido bloqueado. Esta es una excelente manera de controlar lo que los demás usuarios puedan editar o no. Algunas veces podrías querer bloquear todo excepto los módulos de texto, por ejemplo, lo que permitiría a tus colaboradores editar su contenido, pero no les permitiría ajustar la configuración de módulos más avanzados.

Collapsar y Expandir (Collapse & Expand)

Colapsar es una característica que sólo está disponible vía Click Derecho. Cualquier Sección o Fila puede ser colapsado dentro de la interface del Constructor. Cuando un artículo ha sido colapsado, sus elementos dependientes serán escondidos y la Fila o Sección se colapsar en un rectángulo más pequeño. Si estás trabajando en una página muy grande, colapsar artículos con los que ya hayas terminado puede hacerse más sencilla de manejar.

Copia y Pega (Copy & Paste)

Copiar y Pegar es otra función que sólo está disponible por medio de los controles de Click Derecho de Divi. Puede copiar un Módulo, Fila o Sección de un área, y luego pegarla en otra área. Incluso puedes copiar y pegar artículos de una página a otra página. Esto puede ahorrarte mucho tiempo, y frecuentemente será mucho más conveniente que guardar artículos a la Biblioteca, especialmente cuando sólo quieres utilizar ese artículo en una nueva página una sola vez.

Vista Previa (Preview)

La habilidad de previsualizar artículos dentro del Constructor ha sido agregada al control de Click Derecho para conveniencia. Cuando elijas previsualizar un artículo, puedes tener una vista rápida de la apariencia de un elemento específico dentro del Constructor, en vez de tener que previsualizar toda la página completa.

Las Filas Pueden Ser Extremadamente Versátiles

Las Filas son los diversos diseños de columnas que pueden ser colocadas dentro de las secciones. Muy similar a los Módulos, las Filas tienen varias configuraciones que pueden ser accesadas haciendo click en el ícono en la esquina superior izquierda de la fila. En este tutorial estaremos viendo sólo algunas de las características y cómo pueden ser usadas para crear algunos diseños interesantes.

La Configuración General

HACER QUE ESTA FILA TENGA ANCHURA COMPLETA (MAKE THIS ROW FULLWIDTH): Habilita esta opción para extender la anchura de esta fila hasta el borde de la ventana del navegador.

USAR ANCHURA PERSONALIZADA (USE CUSTOM WIDTH): Cámbialo a Sí si deseas ajustar la anchura de esta fila a una anchura no estándar.

EL USO PERSONALIZADO DE CANALÓN DE ANCHO (GUTTER WIDTH): Habilite esta opción para definir canalón ancho de esta fila.

RELLENO PERSONALIZADO (CUSTOM PADDING): Ajusta el relleno a valores específicos o déjalo en blanco para usar el relleno por defecto.

CONSERVAR EL RELLENO PERSONALIZADO EN DISPOSITIVOS MÓVILES (KEEP CUSTOM PADDING ON MOBILE): Permitir que el relleno personalizado se conserve en pantallas de dispositivos móviles

IDENTIFICADOR CSS (CSS ID): Introduce un identificador CSS opcional que usar para este módulo. Puede usarse un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones determinadas de tu página.

CLASE CSS (CSS CLASS): Introduce clases CSS opcionales que usar para este módulo. Puede usarse una clase CSS para crear un estilo CSS personalizado. Puedes añadir múltiples clases separadas por un espacio.

DISEÑADOR DE ADMINISTRACIÓN: Aquí puedes agregar un nombre descriptivo para esta sección de manera que puedas reconocerla fácilmente.

Ajustes avanzados de diseño

Imagen de fondo (Background Image) – Si está definida, esta imagen será utilizada como el fondo para esta Sección. Para eliminar la imagen de fondo, simplemente borra el URL del campo de esta configuración.

Las imágenes de fondo de Sección abarcan el ancho del navegador, así que recomendamos que tus imágenes de fondo sean por lo menos de 1080 pixeles de ancho.

Color de Fondo Transparente (Transparent Background Color) – Habilitar esta opción eliminará el color de fondo de esta sección, permitiendo que se muestre el color o imagen de fondo del sitio Web.

Color de Fondo (Background Color) – Si sólo deseas utilizar un color sólido para el fondo de tu sección, utiliza el seleccionador de color para elegir un color de fondo, o escribe el código HEX manualmente.

Video MP4 de Fondo (Background Video MP4) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .MP4 aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato MP4 puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Video WEBM de Fondo (Background Video WEBM) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .WEBM aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato WEBM puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Anchura de Video de Fondo (Background Video Width) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la anchura exacta en pixeles de tu video.

Altura de Video de Fondo (Background Video Height) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la altura exacta en pixeles de tu video.

Pausar Video (Pause Video) – Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.

Usar Efecto de Paralelaje (Use Parallax Effect) – Cuando esté habilitado, tu imagen de fondo se quedará fija cuando te desplaces, creando un divertido efecto de paralaje. Habilitar esta opción forzará que todas las columnas en una fila tengan la misma altura.

Igualar las Alturas de las Columnas (Equalize Column Heights) – Esta es una excelente opción, especialmente útil cuando has aplicado colores de fondo a columnas individuales. Habilitar esta opción forzará a todas las columnas en la fila a tener el mismo valor de altura.

Columna Imagen de Fondo (Column Background Image) – Para cada columna en una fila, puedes asignar una imagen de fondo independiente.

Columna Color de Fondo (Column Background Color) – Para cada columna en una fila, puedes asignar un color de fondo independiente.

Columna Relleno (Column Padding) – Para cada columna en una fila, puedes asignar valores de relleno independientes.

Mantener la Columna de Relleno en el Móvil (Keep Custom Padding on Mobile) – ermitir que el relleno personalizado se conserve en pantallas de dispositivos móviles.

CSS Personalizado

Antes (Before) – Agrega aquí el código CSS para ser aplicado en el elemento :before en el div de la fila principal.

Elemento principal (Main Element) – Agrega aquí el código CSS para ser aplicado en el div de la fila principal.

Después (After) –  Agrega aquí el código CSS para ser aplicado en el elemento :after en el div de la fila principal.

Vamos a Probar algunas Configuraciones

Ahora que hemos visto varias de las configuraciones, vamos a probar algunas en combinación para mostrarte lo que es posible hacer cuando cada configuración es utilizada creativamente. En este ejemplo, estaremos jugando con la Fila de Anchura Completa como introducción. La opción para hacer «Anchura Completa» es una de las opciones más versátiles en el kit de herramientas. Esta extenderá el ancho de la columna a los bordes de la ventana del navegador, similarmente a una sección de Ancho Completo. Sin embargo, a diferencia de la Sección de Anchura Completa, las Filas de Anchura Completa pueden tener estructuras de columnas y pueden hospedar cualquier tipo de módulo.

En el ejemplo siguiente se creó una Fila de 4 Columnas y se agregó una imagen a cada columna. Después se habilitó la opción de «Hacer Fila de Anchura Completa» para extender la fila a los extremos de la ventana del navegador.

Después se redujo a 1 el «Espacio Entre Columnas» que aparece cuando se elige «Sí» en la configuración de «El Uso Personalizado de Canalón de Ancho» (Gutter Width), para eliminar el espacio entre las columnas en la fila.

Finalmente se eliminó el espacio «Superior» y «Base» de la fila cambiando la opción de «Relleno Personalizado» (Custom Padding) a cero las dos.

El resultado es una transformación completa de la fila, convirtiendo nuestra fila normal de 4 columnas con imágenes en una galería que luce espectacular sobre la sección verde debajo de ella. Este mismo efecto puede ser creado utilizando colores de fondo personalizados en las columnas y módulos de texto ¡Las posibilidades son infinitas!

Las Secciones son tu Elemento Organizacional más Grande

Las Secciones son los bloques de construcción más grandes en el Constructor Divi. Puedes considerarlos como bloques horizontales apilables que pueden agrupar tu contenido en áreas visualmente distinguibles. En el Constructor Divi todo lo que construyas comienza con una sección. Este «envoltorio» de contenido tiene varias configuraciones que pueden ser utilizadas de formas muy interesantes.

Imagen de fondo (Background Image) – Si está definida, esta imagen será utilizada como el fondo para esta Sección. Para eliminar la imagen de fondo, simplemente borra el URL del campo de esta configuración.

Las imágenes de fondo de Sección abarcan el ancho del navegador, así que recomendamos que tus imágenes de fondo sean por lo menos de 1080 pixeles de ancho.

Color de Fondo Transparente (Transparent Background Color) – Habilitar esta opción eliminará el color de fondo de esta sección, permitiendo que se muestre el color o imagen de fondo del sitio Web.

Color de Fondo (Background Color) – Si sólo deseas utilizar un color sólido para el fondo de tu sección, utiliza el seleccionador de color para elegir un color de fondo, o escribe el código HEX manualmente.

Video MP4 de Fondo (Background Video MP4) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .MP4 aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato MP4 puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Video WEBM de Fondo (Background Video WEBM) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .WEBM aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato WEBM puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Anchura de Video de Fondo (Background Video Width) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la anchura exacta en pixeles de tu video.

Altura de Video de Fondo (Background Video Height) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la altura exacta en pixeles de tu video.

Pausar Video (Pause Video) – Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.

Mostrar Sombra Interna (Show Inner Shadow) – Aquí puedes escoger si tu sección tiene o no sombra interna. Esto puede tener un aspecto genial cuando tienes fondos de colores o imágenes de fondo.

Usar Efecto de Paralelaje (Use Parallax Effect) – Cuando esté habilitado, tu imagen de fondo se quedará fija cuando te desplaces, creando un divertido efecto de paralaje. Ten en cuenta que cuando esta configuración esté habilitada, tus imágenes se ajustarán a la altura del navegador.

NOTA: Si habilitas el efecto de paralelaje, te recomendamos que tus imágenes sean al menos del tamaño de una pantalla estándar ya que tus imágenes tomarán la anchura o la altura de la ventana del navegador (por ejemplo, 1280 pixeles por 768 pixeles).

Relleno Personalizado (Custom Padding) – Ajusta el relleno a valores específicos o déjalo en blanco para usar el relleno por defecto.

Conservar el Relleno Personalizado en Dispositivos Móviles (Keep Custom Padding on Mobile) – ermitir que el relleno personalizado se conserve en pantallas de dispositivos móviles.

Identificador CSS (CSS ID) – Introduce un identificador CSS opcional que usar para este módulo. Puede usarse un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones determinadas de tu página.

Classe CSS (CSS Class) – Introduce clases CSS opcionales que usar para este módulo. Puede usarse una clase CSS para crear un estilo CSS personalizado. Puedes añadir múltiples clases separadas por un espacio.

Diseñador de Administración – Aquí puedes agregar un nombre descriptivo para esta sección de manera que puedas reconocerla fácilmente.

Usando Secciones de Anchura Completa

Las secciones de Anchura Completa te dan acceso a un nuevo grupo de Módulos de Anchura Completa. Estos módulos actúan un poco diferente, porque toman ventaja de la anchura completa de la ventana del navegador que se esté utilizando para ver la página. Los módulos de Anchura Completa sólo pueden ser colocados dentro de las Secciones de Anchura Completa.

Una vez que agregues una sección de Anchura Completa a tu página o entrada de blog, podrás hacer click en el botón «Insertar Módulo(s)»  (Add Modules) en la sección para agregar un módulo de Anchura Completa. A diferencia de una sección normal, no existe un concepto de filas o columnas, ya que los módulos de anchura completa siempre toman ventaja del 100% de la pantalla.

Un gran ejemplo de un módulo de Anchura Completa es el «Control Deslizante de anchura completa» (Fullwidth Slider), que funciona igual que un Control Deslizante normal, excepto que se expande al 100% de la ventana.

Usando Secciones Especiales

Las Secciones Especiales fueron creadas para permitir estructuras de columnas más avanzadas. A diferencia de las secciones normales, cuando se utiliza una Sección Especial, se pueden agregar variaciones de columnas junto a márgenes (sidebars) verticales de altura completa. Estos tipos de diseños no son posibles utilizando las secciones normales.

Una vez que agregues una Sección Especial a la página, notarás que un área tiene un botón de «Añadir Módulo(s)» (Add Module), mientras que en otra área tiene un botón «Insertar fila» (Insert Row). Esta área «Insertar Módulo(s)» representa tu margen (sidebar) o columna vertical. Puedes agregar cuantos módulos desees aquí, en una sola fila, y todos se expandirán a lo ancho del área vertical de esa sección, adyacente a la estructura de la columna en que lo construiste. Haciendo click en «Insertar fila» te permitirá insertar filas adicionales a la izquierda o a la derecha de tu margen (sidebar). Es como agregar filas dentro de filas.

El resultado es la habilidad para crear cualquier tipo de estructura de columnas que puedas imaginarte. A continuación podrás ver un ejemplo de una página creada utilizando Secciones Especiales.

¿Qué es la Biblioteca Divi?

La Biblioteca Divi es el equipo de herramientas para diseño de tu sitio Web. Aquí puedes almacenar tus diseños, secciones, filas y módulos favoritos para utilizarlos después. Cuando guardes un artículo en tu Biblioteca Divi, puedes accesarlo fácilmente desde la ventana modal cuando agregues un nuevo módulo, sección o fila de diseño a la página o entrada. Ahorra horas de tiempo de diseño creando colecciones de tus combinaciones de módulos favoritos ¿Invertiste horas personalizando la configuración de Diseño Avanzado y CSS Personalizado de un módulo para crear una apariencia única para tu sitio Web? ¿Por qué no guardar todos esos módulos personalizados en tu Biblioteca para que puedas utilizarlos en el futuro sin tener que recrearlos? Una vez creada tu colección en tu Biblioteca, encontrarás que comenzar a construir nuevas páginas y entradas te será cada vez mucho más fácil y rápido ¡Incluso puedes exportarlos e importarlos!

La Biblioteca Divi es más que una colección de diseños guardados. Cada artículo de la biblioteca puede ser hueca «Global». Los Módulos Globales se sincronizan donde sea que estén colocados. Cuando un Módulo Global es alterado, se actualiza automáticamente en todas las páginas en donde lo hayas colocado. Por ejemplo, puedes crear una sección Global que sea añadida al calce de cada página en tu sitio, y cada vez que actualices esta sección global, todas sus versiones en el calce se actualizarán automáticamente.

Los módulos en la biblioteca también pueden sincronizar sus configuraciones selectivamente. Por ejemplo, si has personalizado un módulo utilizando las pestañas de Diseño Avanzado y CSS Personalizado, puedes guardar el módulo en la biblioteca mientras sólo guardas la configuración en estas dos áreas. Si este módulo se hace global, tus configuraciones en Diseño Avanzado y CSS Personalizado se sincronizarán, pero la Configuración General (que contiene el contenido de tu módulo) puede ser diferente en cada página en que el módulo se esté usando.

Guardando Nuevos Artículos a la Biblioteca

Cuando edites un módulo, fila o sección en el Constructor Divi, tendrás la opción de guardar dicho artículo a la biblioteca para usarlo después. Mientras edites un artículo en tu página o entrada, verás dos diferentes botones para guardar: «Guardar y añadir a la biblioteca» (Save & Add To Library) y «Guardar y salir» (Save & Exit), y en medio un botón con un ícono en forma de ojo que abre una nueva ventana modal que te permitirá visualizar antes de guardar en tres tamaños distintos de pantalla: teléfono, tablet y computadora.

Ambos botones de guardar almacenan el artículo en el que estés trabajando dentro de tu página actual. Sin embargo, si seleccionas. «Guardar y añadir a la biblioteca», el artículo en el que estás trabajando también será agregado a la biblioteca. Una vez que es agregado a la biblioteca, podrás accesar a ese artículo cuando quieras mediante el enlace Divi > Biblioteca Divi en tu pantalla de administración de WordPress, y podrás agregar el artículo guardado a una nueva pagina por medio de la pestaña «Agregar desde biblioteca» (Add From Library) cuando agregues un nuevo módulo, fila o sección a tu página o entrada.

Una vez que hagas click sobre «Guardar y añadir a la biblioteca» se te pedirá llenar algo de información sobre tu nuevo artículo guardado. Puedes dar al nuevo artículo un nombre para recordarlo, elegir cuáles opciones deseas guardar, y agregar tu artículo a una categoría, así como convertir el artículo en un artículo «global de biblioteca».

Una vez que has llenado toda la información necesaria, haz click sobre «Guardar» para completar el proceso.

Creando y Manejando Artículos en la Biblioteca

Cuando añades un nuevo artículo en tu librería, este artículo puede ser manejado y editado desde la página Divi > Biblioteca Divi en tu pantalla administrativa de WordPress. Cuando accedas a esta página obtendrás una lista de todos los artículos en tu biblioteca. Puedes ordenar tu lista mediante los controles arriba de la página, y puedes editar cualquier artículo de tu biblioteca haciendo click en el enlace «Editar» junto al artículo en la lista.

Puedes construir nuevos artículos desde dentro de la Biblioteca Divi. Una vez que construyas un nuevo artículo, estará disponible en la pestaña de «Añadir desde la biblioteca» (Add From Library) mientras estés utilizando el Constructor Divi. Para crear un nuevo artículo en la biblioteca, haz click en el botón «Agregar nuevo» (Add New)» arriba de la pantalla mientras estás dentro de la página Divi > Biblioteca Divi en tu página de administración en WordPress.

Agregando Artículos de la Biblioteca a tu Página

Una vez que un artículo haya sido añadido a tu Biblioteca Divi, puede ser accedas rápidamente cuando se construyen nuevas páginas o entradas de blog. Cuando agregues un nuevo Módulo, Fila o Diseño a tu página, notarás una pestaña que dice «Añadir desde la librería» (Add From Library). Haciendo click en esta pestaña se te revelarán todos los artículos en tu biblioteca. Haz click en el artículo que desees agregar a tu página.

Lo Básico

El constructor Divi está integrado en la plataforma de WordPress para ayudar a construir visualmente el contenido de Páginas y Entradas.

El constructor utiliza tres bloques principales: Secciones, Filas y Módulos. Utilizando estos tres elementos in unísono permitirá al usuario crear una ilimitada cantidad de diseños de páginas. La jerarquía básica de estos elementos son:

Secciones (Sections)

Los bloques de construcción más básicos y grandes utilizados en los diseños son las Secciones. Estos son usados para crear las áreas de jerarquía más alta en tu página o entrada. Hay dos tipos de secciones: Regulares y Ancho Completo. Las Secciones Regulares están hechas de filas de columnas y las Secciones de Ancho Completo están hechas de módulos de ancho completo. Más sobre esto abajo.

Filas (Rows)

Las filas se colocan dentro de las Secciones y puedes colocar cualquier número de filas en una sección. Existen muchas Tipos de Filas distintos para elegir. Una vez que definas un Tipo de Fila, entonces podrás colocar Módulos en la estructura de columna seleccionada. No hay límite en el número de módulos que puedas poner dentro de una Columna.

Módulos (Modules)

Los Módulos son elementos visuales que hacen tu página o entrada. Cada módulo puede encajar en cualquier ancho de columna y todos se adaptan completamente al tipo de pantalla que el usuario final esté utilizando para ver tu sitio Web.

Comenzando

Después de crear una nueva página o entrada, podrás ver la ventana normal de tu plataforma WordPress. Cuando utilices el constructor de módulos Divi, verás un botón azul que dice [Usar el constructor Divi] ([Use the Divi Builder]). Al hacer click en este botón, se habilitará el Constructor Divi.

NOTA: Si tienes contenido existente en tu entrada o página, el Constructor Divi colocará ese contenido en un Módulo de Texto de ancho completo por defecto. Si deseas separar el contenido en sus respectivos módulos, necesitarás colocarlo en sus módulos individuales manualmente.

Opciones de Diseño del Constructor

Guardar en biblioteca (Save to Library)

En cualquier momento puedes grabar un diseño que hayas construido a tu Biblioteca Divi para ser utilizado en otro momento. Esta opción es excelente para usar el mismo diseño en otras páginas, en otras secciones de páginas, o incluso en otro sitio Web construido con Divi.

Cargar de la biblioteca (Load From Library)

También puedes cargar un diseño que hayas guardado en el pasado en tu Biblioteca Divi en cualquier momento. Divi trae consigo docenas de diseños pre-hechos que pueden ser agregados a tu página o entrada. Cuando cargas un nuevo diseño tienes la opción de elegir de un número de diseños pre-hechos o cualquier diseño que hayas guardado o importado anteriormente.

Vaciar diseño (Clear Layout)

Si en cualquier momento sientes la necesidad de comenzar desde cero, simplemente haz click en el botón Vaciar Diseño. Esta acción eliminará todo lo que has construido en la página o entrada.

Opciones de Sección

Cada vez que agregues una sección necesitarás definir sus propiedades. Podrás ir a los Ajustes de Sección haciendo click en el ícono del menú de sección en la parte superior del panel azul.

Imagen de fondo (Background Image) – Si está definida, esta imagen será utilizada como el fondo para esta Sección. Para eliminar la imagen de fondo, simplemente borra el URL del campo de esta configuración.

Las imágenes de fondo de Sección abarcan el ancho del navegador, así que recomendamos que tus imágenes de fondo sean por lo menos de 1080 pixeles de ancho.

Color de Fondo Transparente (Transparent Background Color) – Habilitar esta opción eliminará el color de fondo de esta sección, permitiendo que se muestre el color o imagen de fondo del sitio Web.

Color de Fondo (Background Color) – Si sólo deseas utilizar un color sólido para el fondo de tu sección, utiliza el seleccionador de color para elegir un color de fondo, o escribe el código HEX manualmente.

Video MP4 de Fondo (Background Video MP4) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .MP4 aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato MP4 puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Video WEBM de Fondo (Background Video WEBM) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .WEBM aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato WEBM puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.

Anchura de Video de Fondo (Background Video Width) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la anchura exacta en pixeles de tu video.

Altura de Video de Fondo (Background Video Height) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la altura exacta en pixeles de tu video.

Pausar Video (Pause Video) – Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.

Mostrar Sombra Interna (Show Inner Shadow) – Aquí puedes escoger si tu sección tiene o no sombra interna. Esto puede tener un aspecto genial cuando tienes fondos de colores o imágenes de fondo.

Usar Efecto de Paralelaje (Use Parallax Effect) – Cuando esté habilitado, tu imagen de fondo se quedará fija cuando te desplaces, creando un divertido efecto de paralaje. Ten en cuenta que cuando esta configuración esté habilitada, tus imágenes se ajustarán a la altura del navegador.

NOTA: Si habilitas el efecto de paralelaje, te recomendamos que tus imágenes sean al menos del tamaño de una pantalla estándar ya que tus imágenes tomarán la anchura o la altura de la ventana del navegador (por ejemplo, 1280 pixeles por 768 pixeles).

Relleno Personalizado (Custom Padding) – Ajusta el relleno a valores específicos o déjalo en blanco para usar el relleno por defecto.

Conservar el Relleno Personalizado en Dispositivos Móviles (Keep Custom Padding on Mobile) – ermitir que el relleno personalizado se conserve en pantallas de dispositivos móviles.

Identificador CSS (CSS ID) – Introduce un identificador CSS opcional que usar para este módulo. Puede usarse un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones determinadas de tu página.

Classe CSS (CSS Class) – Introduce clases CSS opcionales que usar para este módulo. Puede usarse una clase CSS para crear un estilo CSS personalizado. Puedes añadir múltiples clases separadas por un espacio.

Diseñador de Administración – Aquí puedes agregar un nombre descriptivo para esta sección de manera que puedas reconocerla fácilmente.

Previsualización de Diseño

Una vez que hayas diseñado tu Sección con módulos y contenido, podrás previsualizar tu diseño sin cerrar la ventana de la sección que estés editando, con el propósito de poder ver cómo lucirá tu diseño en una pantalla de computadora, en una pantalla de tablet, y en una pantalla de teléfono móvil.

Simplemente haz click en el botón con el ícono de un ojo entre los botones Guardar y Añadir a la biblioteca y el de Guardar y salir que están en la parte inferior de la ventana:

Después podrás elegir ver cómo luce tu diseño en modo de Teléfono, Tablet o Pantalla de Computadora:

Cuando termines, cierra el previsualizador y no olvides guardar tus cambios al diseño haciendo click en Guardar y salir.

Agregar y Definir una Fila

Después de guardar la configuración de tu sección necesitarás insertar una fila y definir el tipo de fila. Haciendo click en Insertar Columnas (Insert Columns) podrás elegir de una selección de tipos de filas. Las filas también tienen muchas opciones que puedes usar para personalizar su apariencia y alterar la estructura del diseño.

Agregar un Módulo

Una vez que hayas elegido un tipo de fila, el constructor Divi te pedirá que insertes módulos en esa fila. En el ejemplo inferior hemos agregado una fila de dos columnas en las cuales puedes insertar módulos.

Cada vez que desees insertar un módulo, necesitarás hacer click en ‘Insertar Módulo’ (‘Insert Module’) y elegir uno de la lista de módulos de Divi. Una vez que has elegido un módulo, serás llevado a la ventana modal con las opciones específicas de ese módulo que elegiste. Cada módulo tiene un propósito diferente y un grupo de opciones distintas.

Expandiendo Tu Diseño

En el ejemplo inferior, hemos llenado las dos columnas con un módulo de imagen a la izquierda y un módulo de texto a la derecha.

Ahora has definido una sección exitosamente con una Fila que tiene Módulos en un tipo de fila de dos columnas. Puedes accesar a cualquiera de las opciones de estos elementos haciendo click en su ícono de menú o borrarla haciendo click en el ícono «X». Para expandir tu diseño puedes elegir agregar una sección a la página, una fila a una sección existente, o un módulo a una columna existente.

Agregando Secciones de Anchura Completa y Secciones Especiales

Debajo de cada sección tienes la opción de agregar una Sección Estándar (Standard Section), una Sección de Anchura Completa (Fullwidth Section), una Sección Especial (Specialty Section) y Añadir desde biblioteca (Add From Library).

Las secciones de Anchura Completa no tienen filas. Debido a esto, sólo funcionarán en ellas los módulos de anchura completa. Las secciones de anchura completa están definidas visualmente por un panel color púrpura y pueden ser colocadas en cualquier parte de tu diseño. En el ejemplo inferior hemos agregado una sección de anchura completa con un ‘Control deslizante de anchura completa’ (Fullwidth Slider) a nuestro diseño.

Las ‘Secciones Especiales’ (Fullwidth Section) tienen una fila horizontal que se expande a la altura de toda la sección completa. Esto te permite crear diseños con el ‘margen’ (sidebar) clásico, donde un margen se coloca adyacente a una estructura de columnas más compleja. En el ejemplo inferior hemos agregado una sección especial hasta abajo del diseño de la página.

También puedes cargar Secciones que hayas guardado en tu Biblioteca en el pasado, haciendo click en el enlace ‘Añadir desde biblioteca’ (Add From Library»).

Modificando y Acomodando tu Diseño

Editar tu diseño es muy sencillo utilizando las características de arrastrar y soltar en el constructor. Si deseas mover una sección por encima o por debajo de otra, simplemente arrástrala y suéltala en lugar deseado. Lo mismo va para filas y módulos. Incluso puedes mover filas a diferentes secciones, y módulos a diferentes columnas. La única limitación es que no puedes arrastrar módulos de Anchura Completa y soltarlos en secciones regulares, y viceversa.

En el ejemplo siguiente puedes ver que hemos movido nuestra sección de Anchura Completa a la parte superior del diseño y hemos movido nuestra Sección Especial en medio de las tres secciones existentes.

¡Guardar y Publicar!

Una vez que hayas terminado de construir tu diseño, asegúrate de hacer click en el botón de Actualizar/Publicar en tu panel de WordPress.

Regresando al Editor Original

Si cambias al editor de página por defecto de WordPress, recibirás una advertencia de que todo el contenido que creaste en el constructor Divi se perderá y que el contenido previamente creado en el editor de WordPress será restaurado. Como seguridad, puedes grabar la página antes de borrar el diseño por si alguna vez deseas restaurar dicha versión.