Cómo añadir un banner en WordPress (cuatro formas)

desplazamiento horizontalTambién conocido como banner, puede mejorar significativamente la experiencia del usuario y el atractivo visual de su sitio web en las páginas de su sitio web. Puede utilizarlo paraEscaparate Oferta por tiempo limitadoyNovedades editorialesoRefuerzo de la imagen de marcaTodos los banners ayudan a captar la atención de los visitantes, aumentar las conversiones y mejorar la estética de su sitio web.

¿Cómo añadir un banner en WordPress?

1. Utilizar el editor de sitios de WordPress

Si suSitio web de WordPressFull Site Editor (FSE) es soportado por defecto como Twenty Twenty-Four. puedes añadir banners fácilmente a través del editor incorporado en WordPress.

Pasos:

1. Inicie sesión en el panel de control de WordPress.
2. cambiar aApariencia > Editor.

3. Abra la plantilla en la que desea colocar el banner (por ejemplo, la página de inicio o la cabecera).
4. Haga clic en + (añadir bloque)seleccioneBloque de cubierta.

5. Sube o selecciona una imagen de banner.

6. Texto, colores y alineación personalizados.
7. golpe (en el teclado)guardar (un archivo, etc.) (informática).

2. Uso de plug-ins

Mediante el uso del plugin, puede agregar fácilmente banners y también tienen más control sobre ellos, tales comocronometrado (de explosivo, etc.)ygiretal vezCon botonesLa pancarta.

Plugin recomendado:

• Banner simpleAdecuado paraboletínBanner.
• Barra de notificaciones de WPFront: Apto para fijospromuevaBanner.
• Deslizador inteligente 3Adecuado paraanimeBanner.

Empezamos conDeslizador inteligente 3Por ejemplo

Pasos:

1. cambiar aPlugins > Instalar Plugins.
2. Buscar e instalarDeslizador inteligente 3.

3. Active el plugin y vaya al panel de control del plugin para crear un nuevo proyecto.

4. Sube la imagen del banner y guarda los cambios.

Deslizador inteligente 3Es bastante fácil utilizar la plantilla que viene con él.

3. Utilice un constructor de páginas (p. ej.Elementor)

El page builder ofrece más opciones de personalización para añadir banners a través de la interfaz visual.

Pasos:

1. Instalar y habilitarElementor.
2. Edite la página a la que desea añadir el banner.
3. Añade una nueva sección e inserta el widget de banner (busca "imagen").

4. Sube o diseña banners y personalízalos.

5. golpe (en el teclado)Actualizaciones.

4. Adición manual por código

Si eres un experto en código, puedes añadir manualmente banners directamente a través de HTML y CSS.

Pasos:

1. cambiar aApariencia > Editor de archivos de temas.
2. mostrar (una entrada)header.phpu otros archivos de plantilla.

3. Inserte el siguiente código HTML:

<div class="custom-banner"> <img src="tu-banner-image-url.jpg" alt="Banner"> </div>

Qué hace este código:

Crear un div el nombre de la clase es banner personalizado.

En este bloque se inserta una imagen (la imagen de su banner).

tu-banner-image-url.jpg Es un enlace de imagen, sustitúyalo por su propia dirección de imagen de banner cuando lo utilice realmente.

4. existeApariencia > Personalización > CSS extraAñade un estilo al

.custom-banner img { width: 100%; height: auto; }

5. golpe (en el teclado)escriba a.

Por lo general, no se recomiendaEditor de archivos temáticosPuede cambiar el código enFragmentos de códigoPlugin encontradoFuncionesAñadir

Mejores prácticas para añadir banners en WordPress

• Utilice imágenes de alta calidad: Asegúrese de que los banners sean visualmente atractivos y estén optimizados.
• Garantizar la compatibilidad móvilPrueba cómo aparece el banner en diferentes dispositivos.
• Añada un botón de llamada a la acción (CTA)Anime a los visitantes a actuar.
• optimizaciónSEOUtilice el texto alternativo adecuado y comprima las imágenes para aumentar la velocidad de carga.

Siguiendo estas prácticas recomendadas, puede asegurarse de que los banners no sólo tengan un aspecto atractivo, sino que también mejoren el rendimiento del sitio y la experiencia del usuario.

resúmenes

Añadir un banner (pancarta) a WordPress es una forma eficaz de mejorar el atractivo visual y la experiencia de usuario de su sitio web. Ya sea a través del editor de sitios incorporado, plugins, constructor de páginas o escribiendo código manualmente, cada método tiene sus propios escenarios y ventajas.

• Editor del sitio: Adecuado para banners sencillos, funcionamiento intuitivo, no requiere plug-ins.
• plug-in (componente de software)(por ejemplo, Smart Slider 3): rico en funciones, adecuado para banners giratorios, animados o temporizados.
• constructor de páginas(p. ej. Elementor): Proporciona un alto grado de personalización, adecuado para requisitos de diseño complejos.
• código manualPara desarrolladores a los que les gusta dar vueltas a las cosas y son flexibles, pero necesitan una base técnica.