Bienvenido a la Sección 2 del Curso de capacitación mundial en sitios web para principiantes.
Al finalizar esta sección, usted podrá:
- Crear un banner animado
- Agregar texto superpuesto a un banner animado
Creando un banner animado
Para crear un banner animado, primero necesitas crear al menos dos banners estáticos. Esto puede hacerlo un diseñador gráfico o, para este curso, puedes crear uno en Canva gratis. El tamaño del banner variará según la plantilla web que hayas elegido. El sitio web de ejemplo que estamos creando para este curso utiliza la plantilla Decor Theme, con un tamaño de 1200 x 480 px.
Aquí están los banners que usamos, que tú también puedes descargar y usar si lo deseas (haz clic derecho y selecciona Guardar como en cada enlace):
Seleccione el botón Diseño y luego la opción Imagen/Presentación de banner. Verá que ya hay cuatro banners predeterminados: uno principal y tres animados. Los cuatro se desplazan, mostrando cada banner durante un número determinado de secciones antes de pasar al siguiente.
Para esta sección del curso, solo tendremos tres banners, por lo que podemos eliminar uno de los banners debajo del título animado haciendo clic en el cuadro del ícono rojo y luego guardar su trabajo hasta ahora haciendo clic en el botón Publicar.
Ahora puedes reemplazar los tres banners predeterminados restantes por tres propios. Para ello, haz clic en el icono de imagen debajo de cada banner. Se abrirá el Asistente de imágenes, donde podrás volver a explorar y subir la imagen desde tu dispositivo. Completa este proceso para subir los tres banners.
Desplázate hacia abajo en la página y verás un cuadro donde puedes editar los efectos predeterminados de los banners animados. Aquí puedes elegir el estilo y la velocidad de la animación, la velocidad de transición entre diapositivas, dónde se mostrará el banner y la posición de los subtítulos que desees. En este curso, seleccionaremos la opción Centrar para mostrar subtítulos, dejando las demás opciones predeterminadas.
Cómo agregar subtítulos a sus banners animados
Vuelve a la página anterior para ver tus tres banners. Junto a cada banner, verás tres cuadros: URL del enlace, Título y Llamada a la acción. Aquí es donde introduces el texto que se mostrará en cada banner.
La URL del enlace que usaremos será la misma para cada banner. Puedes encontrar el enlace correcto haciendo clic en el cuadrado azul con tres puntos. Esto abrirá el Asistente de URL, donde podrás encontrar una página en tu sitio de prueba, o copiar y pegar una URL en el recuadro inferior. En este ejemplo, haremos clic en la opción "Enlazar a una página de este sitio" y luego seleccionaremos la página de la Tienda.
La URL del enlace aparecerá en el recuadro junto al banner. Repita este paso para los dos banners restantes.
A continuación, añadiremos un título y una llamada a la acción para los tres banners. Un título es una breve información atractiva sobre un elemento de tu sitio web o negocio. Una llamada a la acción indica al visitante qué hacer a continuación. Esto es lo que añadimos:
Observa que en la vista previa de escritorio, puedes ver la superposición de texto en un recuadro gris claro y la llamada a la acción en un recuadro gris oscuro más pequeño dentro. Este enlace ahora es accesible para los visitantes de tu sitio web.
Ya has completado la Sección 2 del Curso de Nivel Principiante. ¡Bien hecho! Es hora de pasar a la siguiente: Sección 3 para Principiantes.
