Guía de modificación del pie de página de WoodMart: optimización de la disposición estructural y del estilo

La sección de pie de página de su sitio web tiene muchas funciones informativas: identidad de marca, pautas de navegación, portales de suscripción, enlaces a redes sociales, e incluso se encarga de las conversiones y aumenta la confianza.

Este post le guiará a través del sistema Pie de página WoodMartEl método de puesta a punto, incluida la reestructuración y la estilización,Optimización de la respuestacon consejos avanzados y otros contenidos para refrescar la parte inferior del sitio.

Guía de modificación del pie de página de WoodMart: optimización de la disposición estructural y del estilo

preliminar

Antes de ponerse manos a la obra con la modificación del pie de página, se recomienda realizar los siguientes preparativos:

Crear con suficiente antelación Bloque HTMLutilizado para el diseño del contenido.

Mantenga WoodMart actualizado a la última versión(se recomienda 8.2.2 o superior) para garantizar su plena funcionalidad;

empezar a utilizarsubtemapara evitar que las actualizaciones posteriores anulen los ajustes personalizados;

Desactivar temporalmente el plugin de cachépara previsualizar instantáneamente las modificaciones;

1. Ajuste del pie de página a través de la configuración del tema WoodMart (versión básica)

Ideal para ajustar rápidamente el diseño, los colores y el contenido del pie de página sin código.

Procedimiento operativo:

  • Ir a Configuración del tema
    • Inicia sesión en el backend de WordPress → haz clic en el menú de la izquierda. WoodMart → Configuración del tema.
  • Ir a la configuración del pie de página
    • En la barra de navegación de la izquierda, seleccione Pie de página.
    • Activar pie de página: Asegúrese de que el interruptor está EN(activado por defecto).
Imagen [2] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • Contenido::
    • Seleccione un estilo de diseño preestablecido (por ejemplo, 4 columnas, 3 columnas, 2 columnas o personalizado).
Imagen [3] - Guía de modificación del pie de página de WoodMart: optimización de la disposición estructural y del estilo
  • Bloque HTML Seleccione Fuente de contenido o Nuevo.
Imagen [4] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • Fondo::
    • Puede establecer un fondo de color sólido (Color) o cargar una imagen (Imagen).
  • Color del texto: Modifica el color del texto del pie de página y del título.
Imagen [5] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo

Widgets: Controla si se muestran los widgets de pie de página (por ejemplo, menús, redes sociales, etc.).

  • Backend de WordPress → Apariencia → Widgets.
    • localice Pie de página 1 / Pie de página 2 / Pie de página 3 / Pie de página 4 etc. (según la disposición temática).
  • widget de arrastrar y soltar a la región correspondiente, por ejemplo:
    • Menú de navegación
Imagen [6] - Guía de modificación del pie de página de WoodMart: optimización de la disposición estructural y del estilo
  • Iconos de las redes sociales (Social Icons)
  • Texto(para información sobre derechos de autor)
  • Cuadro de búsqueda (Buscar)
  • Guardar ajustes

2. Edición visual del pie de página con Elementor (versión avanzada)

Ideal para quienes necesitan libertad para arrastrar y soltar diseños, añadirContenido personalizadode usuarios.

Asegúrese de que está instaladoElementor Pro(matem.) géneroUsar la plantilla "Footer" de Elementor (recomendado)

  • Acceso a la biblioteca de plantillas
    • En el editor de Elementor, haz clic en "Iconos de carpeta" (biblioteca de plantillas).
Imagen [7] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • buscar algo "Pie de página"seleccione la plantilla de pie de página adecuada.
Imagen [8] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • golpe (en el teclado) "Insertar"la plantilla se añade automáticamente a la parte inferior de la página.
  • Modificar el contenido de la plantilla
    • Sustituya el texto, los enlaces, los iconos, etc. para que se ajusten al estilo de su marca.
  • golpe (en el teclado) + (añadir nueva sección)Selección Pie de página o arrastrar y soltar manualmente los componentes:
Imagen [9] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • RúbricaAñade un nombre de empresa o un título de sección.
  • Menú: Insertar enlaces de navegación.
Imagen [10] - Guía de modificación del pie de página de WoodMart: optimización de la disposición estructural y del estilo
  • Iconos socialesAñadir enlaces a Facebook, Twitter, etc.
Imagen [11] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • Widget HTML (código HTML)Código personalizable: se puede incrustar código personalizado (por ejemplo, correos electrónicos).Formulario de suscripción)

Ajustar el estilo

  • Seleccione un elemento → Ajustar en el panel izquierdo Estilo(por ejemplo, tipo de letra, color, espaciado).
  • existe Avanzado Las pestañas permiten ajustar márgenes, animaciones, etc.
Imagen [12] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • Guardar y publicarHaga clic en ActualizaciónActualice la página para ver el efecto.
Imagen [13] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo

3. Personalización del pie de página mediante CSS (versión del código)

Ideal para usuarios que necesitan afinar su diseño (por ejemplo, efectos hover, optimización del espaciado).

Procedimiento operativo:

  • Entrar en el editor CSS personalizado de WordPress(o utiliceplugin de código)
    • entrar en Apariencia → Personalizar → CSS adicional.
Imagen [14] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
Imagen [15] - Guía de modificación del pie de página de WoodMart: optimización de la estructura y el estilo
  • Añadir código CSS personalizado
    • Por ejemplo, modificar el fondo del pie de página, el color del texto y los efectos de los enlaces al pasar por encima:
/* Modificar el fondo del pie de página y el color del texto */ .website-footer { background: #222222; color: #ffffff; padding: 40px 0; } /* Ajustar el estilo del subtítulo del pie de página */ .footer-column h5.widget-title { font-size: 18px; text-transform: uppercase; margin-bottom: 20px; color: #fbbd08; /* title-colour */ } /* Modificar el efecto hover para el enlace de pie de página */ .footer-column a:hover { color. #fbbd08 !important; text-decoration: underline; } /* Ajustar la información de copyright en la parte inferior del pie de página */ .footer-copyright { background: #111111; padding: 15px 0; text-align. center; }

4. Consejos avanzados recomendados

Además de los ajustes habituales, prueba los siguientes consejos avanzados para mejorar la profesionalidad:

Variables dinámicas de información

Utilice shortcodes dinámicos soportados por WoodMart, como:

<p>© {{current_year}} {{site_title}}. Todos los derechos reservados.</p>

Actualice automáticamente el año y el nombre del sitio para evitar el mantenimiento manual.

Optimización de la carga de iconos

Se recomienda utilizar iconos SVG en lugar de Font Awesome para reducir la carga de solicitudes y acelerar la carga.

Insertar script o código de seguimiento

El código de seguimiento de Google Analytics, Facebook Pixel, etc. se puede incrustar en el bloque HTML del pie de página sin necesidad de modificarlo. pie.php Documentación.

Pie de página multilingüe

coubicación WPML o Polylang MultiPlug-ins de idiomasAdemás, puede especificar diferentes bloques HTML para páginas en diferentes idiomas para conseguir un pie de página internacionalizado.

Sugerencias prácticas de optimización

  • Hazlo sencillo.Evite demasiados enlaces y limítese a la información importante (por ejemplo, datos de contacto o política de privacidad).
  • Adaptación móvilAsegúrese de que el pie de página se muestra correctamente en móviles (Elementor o CSS puntos de ruptura se puede ajustar).
  • Optimización SEOAñadir datos estructurados al pie de página (por ejemplo, dirección de la empresa, etiquetas Schema).
  • Velocidad de cargaEvite añadir demasiadas secuencias de comandos JavaScript en el pie de página.

resúmenes

Pie de página WoodMartEl sistema es muy flexible, combinando Footer Builder y HTML Block, ya sea un simple enlace de tres columnas, o un texto mixto, enlace a redes sociales, o área de marketing. Utilice estos ajustes y elegir lo que funciona para usted para crear fácilmente profesionales y hermosos pies de página WoodMart.


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
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
© Declaración de reproducción
Este artículo ha sido escrito por Little Lin
EL FIN
Si le gusta, apóyela.
felicitaciones125 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios