Análisis en profundidad del editor Elementor: Creación de un sitio web personalizado con el tema WoodMart (04)

En el último número hablamos de cómo configurarCarteles temáticos de Woodmart(banner), en esta entrega hablamos del editor de Elementor para renovar el tema Woodmart, nos sumergiremos en cómo utilizar el editor de Elementor para personalizar y optimizar aún más tu tema WoodMart. Con este tutorial, aprenderás a utilizar los módulos multifuncionales de Elementor para crear un front-end de sitio web que sea a la vez bonito y funcional.

Acceda al modo de edición como se muestra arriba

Cada plantilla tendrá diferentes módulos en su interior, como se muestra a continuación, esta es una captura de pantalla de uno de los módulos, pero la aplicación real no significa que cada módulo es adecuado para la

A continuación se muestra la misma plantilla, pero con un efecto diferente

No se ve mucho mejor, no tan monótono pero con personalidad propia

A continuación, hablaremos sobre el efecto de cada función del editor Elementor y los métodos específicos.

Primero vamos a explicar todo el diseño de la plantilla anterior, entramos en la plantilla a la derecha de la página de edición verá todo el diseño, de la siguiente manera

Layout como se muestra arriba son Container (contenedor) composición, el contenedor dentro de los diversos módulos

¡Como se muestra arriba, por ejemplo, por el título y el módulo de clasificación de dos implementaciones, a la derecha se corresponderá con la pantalla, editor de Elementor, más adecuado para los principiantes, pero si desea ajustar el más hermoso y mejor aspecto, sino que también necesitan un poco de experiencia!

Tomemos como ejemplo dos módulos más específicos

¡Desde la imagen de arriba, se trata de un cartel o imagen más un módulo de visualización de productos a la derecha, el diseño es 1:3, de hecho, son los dos contenedores en el interior del módulo añadido!

Primero mira el lado izquierdo, el siguiente símbolo de caja es el contenedor (Container), el símbolo de la pluma es el editor de módulos, este es un módulo Promo Banner (banners promocionales)

Pasos: Website front-end → seleccionar el módulo correspondiente → caja (contenedor) Contenedor.

Entrando en el contenedor, podemos ver algunas configuraciones del contenedor como sigue

Existen tres ajustes principales

Disposición: Disposición

Estilo

Avanzado: Configuración avanzada (avanzada)

Disposición del contenedor: el estilo del contenedor, dividido en cajas flexibles y cuadrículas (cajas rojas).

Anchura del contenido: la disposición del contenedor, dividido en centro y ancho completo, ancho completo es pantalla completa, de acuerdo con la traducción y el efecto real será capaz de entender (cuadro amarillo)

Anchura: la anchura de todo el contenedor. (cuadro azul)

Altura mínima: altura de todo el contenedor (recuadro azul)

Usted puede ver el cuadro azul para ajustar la parte posterior se puede ajustar de acuerdo con el porcentaje de ajuste o ajuste de píxeles, pero hay otros, un total de cuatro formatos, los más comúnmente utilizados o he dicho que los dos, nos ajustamos de acuerdo a la situación real, sino también ver el patrón de dispositivo, lo que indica que es posible ajustar de acuerdo a cada dispositivo de forma individual, si el adaptativo no es ideal, puede ir a ajustar el

Huecos: columnas, entendidas como huecos antes del contenedor (recuadros verdes)

Estilo, como se muestra arriba.

Aquí el contenedor se ajusta al color de Fondo (background), ¡los demás temporalmente no necesitan moverse!

Como se muestra arriba.Avanzado: Configuración avanzada (avanzada)

Layout→Margen: ajusta el desplazamiento del marco exterior

Layout→Padding: ajuste el desplazamiento del marco interior

¡En general, no es necesario ajustar, si usted necesita para el estilo no es el mismo, o llenar la necesidad de ajustar, es decir, la necesidad de obtener mejores resultados, pero no se recomienda que los novatos conseguir, puede conducir a una buena sensación de la parte de la computadora, pero otros dispositivos parecen estar en mal estado por la sensación!

¡Responsive: sensible, puede hacer que este módulo, por lo que el dispositivo para mostrar, o sólo se muestran en un dispositivo, muy flexible, e incluso se puede configurar dos de la misma, pero para diferentes dispositivos, ha llegado a un efecto muy bueno, sino también para evitar la auto-adaptación o ajustar al efecto de una solución!

Lo anterior es el contenedor (Contenedor¡) El uso básico de los fundamentos de contenedores son más o menos lo mismo, habrá diferencias sutiles, pero no el módulo, la diferencia será grande!

Esto es lo que tenemos que decir sobre este módulo

General: En general, este módulo muestra la posibilidad de insertar enlaces.

Antecedentes.

Fuente: Antecedentes

choose imae: elige imagen, pero sólo si tu fuente es choose image, puedes ir a la biblioteca de medios o subir imagen

Banner height: altura del módulo

Posición de la imagen: posición de la imagen mostrada

Como se ha indicado anteriormente, Contenido

Correspondiente a la ubicación del módulo de la derecha, esto es relativamente simple para no decir lo mismo, también puede ser traducido de acuerdo a entender el

Estilo: estilo, aquí se puede tratar con el estilo de cada componente, es para hacerlos más bellos, como el título de la descripción del botón, así como más efectos del módulo, vamos de acuerdo a la traducción para entender el

Avanzado: ajustes avanzados (advanced), básicamente los mismos que los contenedores, pero los novatos no necesitan retocarlos.

A continuación, hablaremos del lado derecho.

Pasos: front-end del sitio web → contenedor correspondiente (icono de caja) o módulo (símbolo de bolígrafo).

Como muestra la figura anterior, que se compone de un contenedor en el interior del módulo de título y el módulo de botón añadido, el contenedor por debajo de la adición de un módulo de producto

Como se muestra arriba, al tocar el título aparecerá el símbolo del lápiz para entrar en el editor, y lo mismo ocurre con el módulo de botones, como se muestra a continuación

Como la imagen de arriba, el significado es muy bien entendido de acuerdo a la traducción. A través de la introducción detallada en este tema, creo que usted tiene una comprensión más profunda de la aplicación del editor Elementor en WoodMart tema personalizado. Mostramos cómo mejorar el efecto visual y la funcionalidad de su sitio web con diferentes módulos y contenedores. Permanece atento a nuestro próximo artículo, en el que seguiremos explorando más consejos sobre el uso de módulos y contenedores básicos para ayudarte a mejorar aún más el diseño de tu sitio web. Gracias por leer, ¡y nos vemos en la próxima entrega!