Análisis exhaustivo del diseño de la página de inicio del tema Avada y consejos para la configuración de contenedores (04)

Cuando se utiliza el tema Avada, muchos novatos pueden estar confundidos acerca de su diseño de página de inicio, especialmente en la selección y configuración de contenedores y módulos. En comparación con otros constructores de páginas como Elementor y WPBakery Page Builder, el editor integrado del tema Avada proporciona una forma más intuitiva y eficiente de diseño. En este post, vamos a explicar en detalle cómo hacer el diseño de página de inicio en Avada para ayudarle a empezar rápidamente y dominar las habilidades de configuración de contenedores y módulos.

Pasos: Website Frontend→Edit Live→ADD COLUMNS

En la primera página podemos ver este símbolo colocado en el centro y a la derecha, así que ¿cómo elegimos?

Si va a añadir la línea que tiene ahora, haga clic en Añadir en el centro

Si desea añadir es abajo, haga clic en el símbolo de añadir a la derecha

Si desea establecer la configuración actual de los contenedores de esta columna, seleccione el símbolo del lápiz de la derecha

¡A continuación, habrá una configuración del contenedor correspondiente, como la anchura, el estilo, el espaciado y qué dispositivo para mostrar ah y así sucesivamente!

¡Como se muestra arriba, Avada tema viene con el editor, para el ajuste del marco exterior e interior que es visual, para elmentor y WPBakery Page Builder editor, también es necesario hacer clic y luego configurar el interior avanzada, puede ser demasiado conveniente!

¡En el camino azul es el marco interior, púrpura es el marco exterior, es directamente extraíble, tanto hacia arriba y hacia abajo o en ambos lados, este punto sigue siendo muy bien hecho!

Después de añadirlo, aparecerá una ventana emergente para seleccionar el estilo del contenedor (como se muestra a continuación)

Creo que también es un buen diseño, no permite que los módulos sean independientes, un contenedor tiene que controlar el módulo, ¡pero elmentor y el editor WPBakery Page Builder son los que permiten que los módulos sean independientes!

¡estilo básicamente cubierto, no es necesario configurar manualmente la disposición de nuevo, la ventaja es que no hay necesidad de preocuparse por sus propios contenedores tendrán una mala disposición del efecto, estoy hablando de si hay más de cuatro columnas o más, donde básicamente cubierto, no hay necesidad de ir a configurar manualmente el contenedor, pero elmentor y WPBakery Page Builder editor es capaz de ir a su propia para añadir más contenedores, por supuesto! ¡Hay más incontrolable, como la disposición de la distorsión o la pantalla front-end no está ordenada, por supuesto, este espacio personalizado es mayor!

Como se muestra arriba, añadimos es contenedor 1/1, también en un diseño de contenedor, a continuación, hacemos clic en añadir módulo, (como se muestra a continuación)

¡No es la sensación de que hay demasiados módulos, a continuación, si usted es un cierto grado de competencia, puede probar la esquina superior derecha de la búsqueda, por supuesto, el consejo novato se encuentra todavía en esta página para encontrar, más acción!

Se trata del bloque de texto, o módulo de texto, que también es el más utilizado

Haga clic en el símbolo de la pluma en el centro (editar) Tenga en cuenta que todos los laterales son ajustes de contenedores, si se trata de un módulo haga clic en el del medio

Pasos: Frontend→Edit Live→ADD COLUMNS→Text Block

Luego hay una serie de ajustes, contenido del texto, posición del texto y presentación del dispositivo

No es recomendable. Podría arruinar el trazado.

¡Haga clic en el signo de interrogación también tendrá la explicación correspondiente, si desea obtener una columna de más de uno, directamente con el contenedor de la disposición de varias columnas en la línea, esto es más compatible, no habrá configuración de front-end no son compatibles con la situación!

Por supuesto, en Diseño (diseño) también tendrá el fondo de color y ajustes de distancia interior, de acuerdo a usted es la situación real a

Módulo pulsador

Pasos: Website Frontend→Edit Live→ADD COLUMNS→Button

A continuación, podemos establecer alguna información del botón en el lado izquierdo, como el enlace, el texto del botón, y el salto de botón es el formato y así sucesivamente (como se muestra a continuación).

Si no entiendes lo que significa cada ajuste, puedes comprobar que se explican los signos de interrogación correspondientes, ¡estos son los detalles de un buen tema!

Diseño: Aquí puede establecer el estilo del botón, así como el icono, el tamaño del botón, etc.

Pasos: Website Frontend→Edit Live→ADD COLUMNS→image

Módulo de imagen

Haz clic en Editar y, a continuación, sustituye la imagen, cárgala en la mediateca o localmente y añade el enlace para completar el salto de imagen básico.

¡En Diseño (diseño) de procesamiento se puede ajustar a la anchura máxima y la posición, etc, hay una imagen se puede establecer fuera, se puede entender una imagen de control de contenedores, es una máscara, o bastante interesante!

También puede establecer la posición de esta máscara, el tamaño, y si la imagen se duplica, etc.

Pie de foto, también puede diseñar un pie de foto para la imagen.

Hay muchos tipos con diferentes posiciones de cabecera, usted elige de acuerdo a su situación real

Rojo porque el color de fondo es rojo

Como se muestra arriba, se puede cambiar

Todos los módulos se animan en el último ajuste (Extras)

Lo siguiente puede ser ignorado, algunos módulos no tienen esto

resúmenes

Con este tutorial, seguro que ha adquirido un conocimiento más profundo de la maquetación de la página de inicio del tema Avada. Desde la selección de contenedores hasta la configuración de módulos, vemos cómo el editor Avada simplifica el funcionamiento de la maquetación. Si este tema le ha resultado útil, le invitamos a que permanezca atento a nosotros, en el próximo número seguiremos explicándole más consejos y trucos sobre el tema Avada para ayudarle a crear sitios web profesionales con mayor flexibilidad.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres