Tutorial completo sobre cómo crear un pie de página profesional utilizando bloques HTML en el tema Woodmart.

Woodmart incorporado Bloque HTML Las capacidades de edición se adaptan a diversos escenarios de diseño, siendo los pies de página personalizados una de las aplicaciones más comunes. Utilizando el Page Builder, se pueden combinar de forma flexible logotipos, iconos sociales, listas de menús, formularios de suscripción e información de pago para lograr una mayor coherencia estructural en todas las páginas. Este tutorial describe el proceso completo, desde la creación de bloques HTML hasta la habilitación de pies de página dentro del tema.

Crear un bloque HTML dedicado al pie de página

Accede al backend para crear un nuevo bloque.

Accede al panel de control, selecciona Bloques HTML, haz clic en Añadir nuevo y establece un título para el bloque. A continuación, abre la interfaz de edición del Page Builder para comenzar a estructurar el diseño.

Crear pie de página superior: logotipo e iconos sociales.

Añadir un contenedor e insertar el logotipo.

Añade un contenedor a la página, que sirva comopies de páginaLa estructura de la primera línea.
Seleccione el componente de imagen de la lista de elementos e inserte el archivo del logotipo.
Establezca el ancho en la configuración «Avanzada», con la unidad establecida en px, para facilitar el control sobre las proporciones visuales.

Añadir módulo de iconos sociales

Inserta los botones sociales en el mismo contenedor:

• Introducir texto de etiqueta
• Seleccione el tipo adecuado.
• Cambiar el estilo del icono a color
• Establecer el tamaño del icono en Pequeño
• Establezca la etiqueta en «Inline» (En línea) en «Style» (Estilo) para mostrar el icono junto al texto en la misma línea.

Ajustar el diseño y el espaciado

Para logotipo Los iconos están ordenados de forma clara y se pueden modificar:

• Justificar contenido: Espacio entre
• Alinear elementos: Centrar

Además, incorpore márgenes superiores y relleno inferior en la configuración avanzada para lograr una mayor armonía general.

Construcción del área principal del pie de página: menú y sección de suscripción.

Establecer la estructura del contenedor principal.

Añade un nuevo contenedor como segunda sección del pie de página, dividiéndolo en columnas izquierda y derecha.
El lado izquierdo está reservado para mostrar varios conjuntos de menús, mientras que el lado derecho está destinado a mostrar títulos, formularios de suscripción e información sobre métodos de pago.

Izquierda: Estructura de menú plegable (Alternar + Lista de menús adicional)

Añade un elemento Toggle y configura el menú.

Añade un pequeño contenedor a la columna izquierda e inserta un elemento Toggle.
Después de establecer el título, incorpore la lista de menús adicionales internamente.
Elimine el título predeterminado; los elementos del menú se pueden editar como enlaces, texto o iconos.

Configurar el escritorio para que siempre esté visible

Establezca el estado en «Siempre expandido» en Alternar para que los elementos del menú sean directamente visibles en el entorno de escritorio.

Duplicar para generar tres conjuntos de menús.

Duplica dos veces todo el contenedor del menú, modificando el contenido del encabezado de cada grupo para aclarar la categorización del menú en tres columnas.

Ajustar la disposición

Edita el contenedor principal y establece la orientación en alineación horizontal:

• Dirección: Horizontal
• Alinear: Centro

El menú se mostrará en la misma línea.

Lado derecho: sección de encabezado, formulario de Mailchimp y detalles de pago.

Añadir área de título de texto

Inserte el título de la sección, habilitando solo los campos de título y texto.
Establece la alineación a la izquierda en Estilo y configura la combinación de colores.

Establecer el estilo del contenedor de fondo

Añadir esta área:

• color de fondo
• Aproximadamente 20 píxeles de relleno
• esquina redondeada

Haz que el aspecto visual general sea más enfocado.

Únete a Mailchimp formulario (documento)

Añade el formulario de Mailchimp dentro del contenedor de fondo, cambia su orientación a alineación horizontal y organiza los campos de entrada y los botones del formulario en una sola fila:

• Dirección: Remar
• Justificar contenido: Espacio entre
• Alinear elementos: Centrar

Añadir iconos de métodos de pago y cuadros informativos.

Añade un icono de método de pago debajo del formulario, luego inserta un cuadro de información y habilita los campos de título y contenido.
El ancho y el alto de los iconos se pueden personalizar para que se adapten mejor al diseño.

Compatible con tabletas y dispositivos móviles.

Ajustar el ancho del contenedor y el comportamiento de apilamiento

En los modos tableta y móvil, establezca el ancho del contenedor en 100 % para habilitar los saltos de línea automáticos para las columnas.
La orientación principal del contenedor se ha cambiado a vertical, lo que ha dado lugar a que las columnas se dispongan una encima de otra.

Incorpore espacios en blanco adecuados.

Añade un relleno inferior al contenedor del menú para mejorar la legibilidad.

Habilitar pie de página personalizado en el tema Woodmart

Seleccione el bloque HTML como contenido que se mostrará en el pie de página.

Entra en Configuración del tema y localiza Woodmart (utilizado como expresión nominal) Pie de página En la página, selecciona el bloque HTML que acabas de crear en el área de contenido del pie de página.
Después de guardar y actualizar la interfaz, el pie de página aparecerá tal y como se ha configurado.

Inspección exhaustiva tras la finalización

Por último, revisa cómo se ve la página en ordenadores de sobremesa, tabletas y dispositivos móviles, y confirma que las transiciones del menú, la posición de los iconos, la visualización de los formularios y el espaciado se ajustan a lo esperado.
Siguiendo los pasos anteriores, se ha creado un pie de página totalmente funcional, claramente estructurado y visualmente coherente.

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