Cómo usar Divic Builder para construir un sitio personalizado (paso a paso)

¿Desea utilizar el complemento Divi Builder para crear los aspectos de su sitio web? Div es uno de los complementos más populares para los generadores de páginas, que facilita su creación y personalización de hermosos modelos para sus sitios web. En este artículo, le diremos exactamente cómo usar Divi Builder para crear sus modelos. Pero antes de eso, echemos un vistazo rápido a lo que es el complemento Divi Builder. ¿Qué es Divi Builder?

El complemento Divi Builder es un generador de páginas de WordPress que le permite crear, personalizar y editar los aspectos de su sitio web sin escribir una sola línea de código. Una de las ventajas de usar este generador de página es que le permite crear modelos totalmente personalizados, que son totalmente únicos.
Además, puede obtener una vista previa de los cambios que realiza mientras trabaja en ellos. Esto significa que, a diferencia de trabajar con el editor de texto tradicional de WordPress, el uso de DIV no implica cambios constantes en las pestañas para verificar su progreso. Él es un editor de Wysiwyg (lo que ves es lo que obtienes) en el verdadero sentido. Divi Builder funciona maravillosamente con el tema Div, pero incluso si no los usa juntos, funciona bien con cualquier otro tema de WordPress. Proporciona una gran flexibilidad en términos de texto en línea y edición receptiva. También puede usar 40 elementos de sitios web, más de 800 modelos preconstruidos, más de 100 paquetes de sitio web completos, diferentes divisores de forma y más. Además, incluso puede agregar su propio código si desea opciones de estilo avanzado.
Para obtener más información sobre la división, lea nuestra revisión detallada aquí. En los próximos pasos, le mostraremos cómo usar Divi para crear sus dibujos. Paso 1: nociones introductorias sobre Divi Builder Para comenzar con Divi Builder, primero debe instalar y activar el complemento en su sitio web. Si no sabe cómo hacer esto, lea este artículo sobre cómo instalar y activar un complemento. Una vez que el complemento está instalado y activado, puede comenzar a usarlo para construir sus aspectos. Creemos una nueva página con Div. Paso 2: Construyendo su primera página con Divi Builder para construir su primera página con DIV, vaya al tablero de WordPress y haga clic en Páginas »Agregar nuevo. Ahora aparecerá una nueva página en la pantalla con un botón que use Divi Builder. Haga clic en este botón: luego haga clic en el útil botón Divi Builder:

Esto lo llevará a una nueva pantalla donde tendrá 3 opciones. Si desea crear su diseño desde cero, sin usar planes preconstruidos, seleccione la primera opción. Si desea usar un aspecto preconstruido, seleccione la segunda opción. Al seleccionar la segunda opción, puede comenzar de inmediato, porque todo ya está creado para usted. La tercera opción le permite reutilizar un diseño existente.

Puede seleccionar lo que piense que es la mejor opción para usted. Paso 3: Importar un sitio de demostración / de demostración si no desea construir su sitio desde cero, puede seleccionar un aspecto prefabricado. Para esto, solo debe seleccionar la opción Elija un aspecto prefabricado. Esto mostrará la biblioteca de diseño que se construye para usted:

Dependiendo del nicho de su sitio web, recomendamos buscar modelos en una categoría particular. Para hacer esto, puede seleccionar una categoría desde la izquierda o puede usar el campo de búsqueda para buscar una categoría. Diva mostrará todos los aspectos que coincidan con sus requisitos. Luego puede seleccionar el aspecto que le guste. Esto le mostrará una vista previa del aspecto con 2 opciones diferentes. Visite la demostración en vivo

Usa este aspecto
Seleccione la opción Use este aspecto. Esto le pedirá que autentique el complemento. Use el nombre de usuario y la API para autenticarlos:
Después de eso, puede comenzar a personalizar su aspecto. Sin embargo, en aras de este tutorial, seleccionaremos la primera opción, comenzar a construir, lo que nos permitirá construir todo desde cero. Paso 4: Agregar filas y módulos Una vez que haya seleccionado la primera opción, lo llevarán a una nueva página donde puede seleccionar la cantidad de líneas que desea agregar.

Aquí verá varias opciones. Dependiendo de sus necesidades, seleccione las líneas que desea agregar a su página para seleccionar la opción Tres -Row. Ahora verá una ventana emergente que muestra todos los módulos que se pueden agregar. Seleccione el módulo deseado haciendo clic en él. Puede ser un clip de audio, una exhortación, botones, formularios de contacto y más.

Puede usar el cuadro de búsqueda para encontrar un módulo si considera ciertas opciones.

Aquí agregué módulos de texto, imagen y botones en tres filas diferentes. Ahora nuestra página se ve así:
Aquí hay una recapitulación rápida de la forma en que hice esto:

Para agregar más filas, puede usar el icono “+” debajo de la fila actual. Paso 5: Personalizar las filas y los módulos ahora que se agregan las filas y los módulos, es hora de personalizarlas. En primer lugar, trabajaremos en el módulo de texto. Para editar el texto, haga doble clic en el módulo de texto y haga clic en el icono de configuración. Verá una pequeña ventana emergente que aparece con diferentes opciones de personalización. Puede usarla para funcionar en cómo desea su texto aquí tendrá 3 pestañas:

Contenido

Diseño

Avanzado
En la pestaña Contenido, puede trabajar en el texto, puede agregar enlaces al texto, puede cambiar el fondo y más. En la pestaña Design, puede trabajar en la forma en que aparece su módulo aquí puede trabajar para cambiar los títulos, agregar espacios, bordes, animaciones y más.
Si necesita más opciones de configuración, también puede usar la pestaña avanzada. Para imágenes, seleccione el módulo haciendo clic en él. Ahora haga clic en el icono de configuración. Verá una nueva ventana emergente en la pantalla. Haga clic en el espacio de la imagen y suba una imagen desde su computadora. También puede usar una de su biblioteca de medios.
Una vez que se agrega la imagen, puede agregar un enlace a la imagen corriendo hacia abajo. Verá otras opciones, como abrir el enlace de la imagen en una nueva pestaña, abrir el enlace de la imagen en una caja de la caja de luz, entre otras. También puede agregar un color de fondo a su imagen desde el enlace que está justo al lado. Para las opciones de diseño, haga clic en la pestaña Diseño. Aquí tiene opciones para agregar animaciones, espacio, filtros y más. La pestaña avanzada le permite agregar su propia ID y clases de CSS, así como CSS personalizado. Esta opción es para usuarios avanzados que desean agregar su propio código. Pero si no es un programador, puede omitir esta pestaña.
No olvide presionar la marca verde para guardar su configuración. La personalización de los botones funciona de la misma manera que la adición de texto e imágenes. Simplemente seleccione el módulo de botón haciendo clic en él. Luego comience a personalizarlo utilizando las opciones que aparecen en la ventana emergente en la pantalla.

Luego presione el Bifa verde para guardar su configuración. Puede hacer esto para cualquier forma que desee agregar y personalizar. Paso 6: Configuración de la página Ahora, que sabe cómo agregar y personalizar sus líneas y módulos, analice cómo trabajar en la configuración de la página. Para cambiar la configuración de la página, debe hacer clic en los 3 puntos Violet en la parte inferior de la página.
Esto expandirá la barra de configuración de la opción múltiple. Haga clic en el icono de la rueda (set):
Verá una ventana emergente con 3 pestañas:

Contenido

Diseño
Avanzado

En la pestaña Contenido, puede trabajar en el título de la página, puede agregar una imagen presentada, puede agregar un fondo a su página y también puede realizar una prueba dividida para ver qué tan bien funciona su página: para agregar una imagen presentada, presentada, Haga clic en el signo “+” y agregue una imagen desde su biblioteca de medios o cargue una nueva desde su computadora. La pestaña de diseño sigue. Aquí puede trabajar en el esquema de color, espaciar su página y el color del texto. Simplemente haga clic en la opción en la que desea trabajar y realice los cambios:
Finalmente, tienes la pestaña avanzada. En esta pestaña, puede agregar CSS personalizado y activar la opción de generación de archivos CSS estática. También puede elegir cómo desea su página para sus usuarios después de hacer cambios, haga clic en el BIFA verde a continuación para guardar los cambios. También puede cancelar los cambios usando el botón MOV y restaurar los cambios usando el botón azul junto a la verificación verde. Paso 7: Guardar su propio aspecto para el futuro Después de haber creado su propio aspecto, puede guardarlos para su uso posterior. Esto se guardará en la biblioteca de la Divica. La próxima vez que desee usar este aspecto, puede seleccionarlo y agregar el texto inmediatamente. Para guardar el aspecto, pase el mouse sobre su página y haga clic en el icono de la biblioteca en la barra de configuración de la página. Aparecerá una ventana emergente en la que puede agregar un nombre a su aspecto. También tiene la opción de agregar una categoría a esto:
Luego haga clic en la opción Guardar en la biblioteca. Su apariencia ahora se guardará para su uso posterior. Una vez que se haya agregado un elemento a la biblioteca, aparecerá en la pestaña Agregar desde la biblioteca cuando agrega nuevos modelos, secciones, filas y módulos. También puede guardar un cierto módulo siguiendo el mismo proceso. Asegúrese de colocar el cursor sobre el elemento para encontrar el botón de rescate en la biblioteca. Paso 8: Comprobación de la capacidad de respuesta DIV DISEMH Una vez que haya creado los aspectos, Div le permite verificar cómo aparecería en diferentes tamaños de pantalla. Para verificar la sensibilidad de su apariencia, haga clic en los iconos de la pantalla en la parte inferior de la pantalla: el primer icono le muestra una vista de estructura alámbrica. Tenga una vista aumentada. El siguiente icono ofrece su aspecto en su aspecto, seguido de una tableta y visualización de la pantalla móvil. Puede hacer clic en cada uno de estos iconos para ver si su aspecto es lo suficientemente receptivo. Paso 9: Publicar su aspecto de la Divica Una vez que todo esté listo y está seguro de que desea publicar su página con el aspecto que creó, haga clic en el botón Publicar en la esquina inferior derecha: