Moodle Theme Edutor - Fragmentos HTML útiles para la sección promocional

Nuestro nuevo tema Edutor Moodle 4.x viene con muchas secciones diseñadas profesionalmente en la página principal para que pueda promocionar su sitio y cursos. Cada sección se puede configurar a través de la página de configuración del tema y se puede habilitar o deshabilitar según sus necesidades.

En este tutorial, compartiremos fragmentos de código HTML que puede usar para configurar el tema"Sección promocional de la página de inicioexactamente como se muestra en nuestra demostración del tema de Moodle.

La sección de promoción de portada le permite agregue hasta seis artículos promocionales y los elementos agregados se deslizarán automáticamente como controles deslizantes de carrusel. Cada elemento contiene un área de contenido configurable donde puede agregar texto sin formato o código HTML más avanzado (consulte los ejemplos a continuación). También puede cargar una imagen y agregar un video opcional para mostrar junto al área de contenido de cada elemento.

Cómo agregar el código

Ir al sitio web administration > Appearance > Themes > Edutor > Frontpage Promo Section Debe activar el modo de editor de código antes de ingresar el código HTML como se muestra en el screencast a continuación.

diseñar uno

Vista de frente:

Configuración de temas:

Fragmento de código HTML:

<p class="mb-5">Intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien quis dolor aliquam lacinia at nec enim. Sed pulvinar fermentum eros eget bibendum.</p>
<a class="theme-card-link" href="#link1">
    <span class="theme-card-content">
        <span class="theme-card-title">For Learners</span>
        <span class="theme-card-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        <span class="arrow-holder"></span>
    </span>
</a>
<a class="theme-card-link" href="#link1">
    <span class="theme-card-content">
        <span class="theme-card-title">For Instructors</span>
        <span class="theme-card-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        <span class="arrow-holder"></span>
    </span>
</a>
<a class="theme-card-link" href="#link1">
    <span class="theme-card-content">
        <span class="theme-card-title">For Sponsors</span>
        <span class="theme-card-intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
        <span class="arrow-holder"></span>
    </span>
</a>

diseño dos

Vista de frente:

Configuración de temas:

Fragmento de código HTML:

<p>Intro goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac sapien quis dolor aliquam lacinia at nec enim. Sed pulvinar fermentum eros eget bibendum.</p>

<ul class="theme-checklist">
    <li><i class="list-check-icon fa fa-check-circle mr-2"></i>List item example lorem ipsum</li>
    <li><i class="list-check-icon fa fa-check-circle mr-2"></i>List item example lorem ipsum</li>
    <li><i class="list-check-icon fa fa-check-circle mr-2"></i>List item example lorem ipsum</li>
</ul>

¿Quiere crear sus propias imágenes de sección promocional similares a las utilizadas en nuestra demostración de tema? Nosotros tenemos Plantilla de diseño PSD de Photoshop original incluida en el archivo zip del tema para que pueda personalizar y exportar fácilmente sus propias imágenes promocionales para esta sección.

Plantilla PSD de Photoshop incluida:

Reemplace con sus imágenes: