Cómo funciona
Alva Courses añade un bloque Botón como un único botón de llamada a la acción, por ejemplo un enlace a tu página de reservas. Un bloque HTML coloca tu propio marcado en la lección exactamente como lo escribes, lo que va bien para códigos de inserción iframe de formularios y calendarios. Ambos bloques están incluidos en todos los planes.
Botón está en el menú Agregar contenido tanto del editor de lecciones estándar como del constructor a pantalla completa. HTML solo se ofrece en el constructor a pantalla completa, pero un bloque HTML que ya hayas añadido se puede seguir editando en el editor de lecciones estándar.
Añadir un bloque Botón o HTML
1. Abre la lección
En el panel de administración de Shopify, abre Alva Courses, haz clic en Cursos, selecciona un curso y abre la lección. Para un bloque HTML, haz clic también en Pantalla completa en la cabecera de la página: el constructor a pantalla completa se abre en esa lección.
2. Añade un bloque Botón
Haz clic en Agregar contenido y elige Botón. Los bloques nuevos se colocan al final de la lección; usa las flechas arriba y abajo del bloque para moverlo. En el editor de lecciones estándar, las flechas de un bloque nuevo solo funcionan después de guardar la lección.
3. Introduce el texto y el enlace del botón
Escribe la etiqueta en Texto del botón y la dirección en URL del botón. La etiqueta aparece exactamente como la escribes, así que caracteres como < y & se muestran tal cual. Los alumnos solo ven el botón cuando Texto del botón tiene un valor. Rellena también URL del botón: un botón sin dirección se sigue mostrando, pero al hacer clic en él solo se vuelve a abrir la misma página en una pestaña nueva.
Las direcciones que empiezan por http:// o https://, los enlaces de correo que empiezan por mailto: y las rutas de tu propia tienda que empiezan por / (como /pages/contact) se usan tal como se escriben. A cualquier otra cosa se le añade https:// delante, así que www.example.com funciona, pero los enlaces de teléfono y los #anclas no.
4. Elige la alineación
En Alineación, haz clic en Izquierda, Centro o Derecha; un botón nuevo empieza centrado. Cuando los dos campos tienen un valor, aparece una vista previa en el bloque. La vista previa siempre es azul; el reproductor de cursos usa en su lugar los colores de tu curso.
5. Añade un bloque HTML en el constructor a pantalla completa
En el constructor a pantalla completa, haz clic en Agregar contenido en la barra de herramientas de la lección y elige HTML. Pega tu código en Contenido HTML. Un cuadro Vista previa: bajo el campo se actualiza aproximadamente medio segundo después de que dejes de escribir.
6. Guarda y previsualiza la lección
En el constructor a pantalla completa, haz clic en Guardar esta lección; en el editor de lecciones estándar, haz clic en Guardar en la barra de guardado. Después haz clic en Vista previa para abrir la lección guardada en tu tienda, donde se aplican los estilos propios del reproductor de cursos.
Lo que puede y no puede hacer un bloque HTML
Un bloque HTML se muestra exactamente como lo guardaste. Alva Courses no comprueba ni limpia el código, así que pega solo código de confianza, como advierte la nota bajo el campo. En el reproductor de cursos:
- Los scripts no se ejecutan. El código dentro de etiquetas <script> se ignora en la vista previa del editor y en el reproductor de cursos, así que los códigos de inserción que necesitan un script no se cargan. Si una herramienta ofrece una versión iframe de su código de inserción, usa esa.
- Los iframes funcionan. La mayoría de los marcos incrustados se estiran hasta el ancho completo de la lección, así que define en el código la altura que necesites. Para un vídeo de YouTube, el bloque YouTube es la opción más sencilla.
- Los enlaces toman el color de enlace de tu curso y se abren en una pestaña nueva.
- Las imágenes ocupan el ancho de la lección salvo que tengan un ancho en línea, y los alumnos pueden hacer clic en ellas para ampliarlas.
- Los estilos del reproductor se imponen a muchos estilos en línea. Los encabezados, párrafos, listas y elementos div pierden sus propios colores, fondos, bordes, espaciados y grosor de fuente, y el texto usa la fuente del curso cuando hay una definida. Para cambiarles el estilo, consulta El CSS personalizado no se aplica en el reproductor de cursos.
Qué ven los alumnos
Los alumnos ven un bloque Botón como un botón del color de tu curso. Si Personalización avanzada de colores está activada en el curso, usa en su lugar los colores Button Background, Button Text y Button Hover de Interactive Colors; consulta Personalizar el reproductor de cursos. Al hacer clic en el botón, el enlace se abre en una pestaña nueva, así que la lección sigue abierta detrás. El contenido HTML aparece en su sitio entre los demás bloques de la lección.
Preguntas frecuentes
¿Por qué HTML no aparece en el menú Agregar contenido?
El editor de lecciones estándar no lo ofrece. Haz clic en Pantalla completa, selecciona la lección y abre Agregar contenido en la barra de herramientas de la lección, donde aparece HTML. Los bloques HTML que ya hayas añadido siguen siendo editables en el editor de lecciones estándar.
¿Por qué mi botón es azul en el editor?
La vista previa dentro del bloque siempre usa un azul estándar. En el reproductor de cursos, el botón toma el color de tu curso, o tus colores Button Background, Button Text y Button Hover cuando Personalización avanzada de colores está activada.
¿Puede un enlace de un bloque HTML abrir otra lección?
El bloque HTML no tiene selector de lecciones. Para enlazar a otra lección, añade el enlace en un bloque de Texto y elige la pestaña Lección en su editor de enlaces. Así la lección se abre dentro del reproductor de cursos.
¿La búsqueda de lecciones encuentra el texto de estos bloques?
Sí. La búsqueda de lecciones del editor de cursos encuentra el texto visible de los bloques HTML y las etiquetas de los botones. No encuentra las direcciones de los enlaces ni el código, los scripts y los estilos de dentro de un bloque HTML.
Ver también
¿Te ha resultado útil?
Última actualización 2026-10-12