Elementor con Woodmart para crear una guía de diseño de página de comercio electrónico flexible

en uso WordPress Al crear un sitio web de comercio electrónico, el grado de flexibilidad del diseño de la página afectará directamente al efecto visual del sitio web y a la experiencia de navegación y compra del visitante.Woodmart Como tema WooCommerce premium compatible con Elementor, proporciona un diseño de página flexible y ricas opciones de diseño. Con el constructor de páginas Elementor, puedes personalizar libremente la página de inicio, las páginas de productos, las páginas de categorías y otras páginas sin conocimientos básicos de programación.

Este artículo presenta el proceso y las técnicas de personalización de los diseños de página de Woodmart con Elementor para ayudarle a crear páginas de comercio electrónico que coincidan con el posicionamiento de su marca.

Activar Elementor y la herencia de plantillas

Instale y active el plugin Elementor

Vaya a la página de plugins de WordPress
Haga clic en el menú "Plugins" y seleccione "Añadir Plugin".
Busque e instale "Elementor".
Una vez finalizada la instalación, seleccione "Activar".

Crea una nueva página y activa Elementor.

Vaya a "Páginas" → "Nueva página".
Introduzca el título de la página, por ejemplo "Mi casa".
Haz clic en el botón "Editar con Elementor" para entrar en el editor visual.

Ahora que estás en la interfaz de edición de páginas de Elementor, puedes empezar a personalizar tu diseño.

Comprender la estructura básica de Elementor

El área de edición de Elementor consta de tres partes:

Barra superior: Situada en la parte superior de la página, se utiliza para operaciones como guardar, previsualizar y cambiar las vistas de las respuestas;
Panel: Situada en la parte izquierda, contiene todos los widgets disponibles y las opciones de configuración;
LienzoLa zona central, donde se construye la página y se arrastran y sueltan los componentes.

Puede combinar libremente estos elementos para crear la estructura de página que desee.

IV. Introducción y uso de los componentes más utilizados

He aquí algunos componentes comunes y sus usos:

leyendaAñadir un título o subtítulo principal
editor de texto: Contenido de texto de entrada, fuente ajustable, tamaño, color
fotografíaInserte imágenes de productos, banners, logotipos, etc.
botones: para saltar enlaces, enviar formularios, etc.
vídeoSoporte para incrustar vídeos de YouTube y Vimeo
Cuadro de iconos/bloque de servicios: Adecuado para la presentación de ventajas y la demostración de funciones
Rotación de imágenes/Presentación de diapositivasVisualización de varios contenidos de imagen
Google MapsDirección u oficina de la tienda integrada
formulario (documento)recopilar información del usuario para utilizarla con plugins (por ejemplo, WPForms)

Basta con arrastrar y soltar el componente de la izquierda en el área de la página de la derecha para previsualizar y ajustar el estilo en tiempo real.

V. Ajustar la tipografía y el estilo

Elementor ofrece un gran número de opciones de personalización:

Definir la anchura, los márgenes interiores, la imagen de fondo o el color de fondo de un párrafo/columna

Definir el tipo de letra, el color, el borde, la sombra, el espaciado, etc. de cada componente.

Páginas con capacidad de respuesta que pueden adaptarse a diferentes dispositivos (teléfonos móviles, tabletas y ordenadores).

Además, puede guardar un bloque entero como plantilla para reutilizarlo fácilmente en otras páginas.

VI. Guardar y publicar

No está listo para publicar:.

Puede hacer clic en "Guardar borrador" para guardarlo para una revisión posterior.

Una vez finalizado el diseño de la página:

Pulse el botón "Publicar" en la esquina superior derecha

corto

Con Elementor en conjunción con Woodmart, el contenido de la página ytipográficoLos ajustes flexibles te permiten arrastrar y soltar módulos, ajustar la tipografía y controlar el contenido de la pantalla para crear un estilo visual que coincida con el tono de tu marca, ya sea una página de inicio de marca, una página de categoría o una página de detalles del producto. Con esta combinación, puedes crear rápidamente páginas de tienda WooCommerce de aspecto profesional sin depender de desarrolladores.

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: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres