Kursthemen

• 

  Wir laden Sie ein, Ihren Moodlekurs mit uns umzugestalten!

  • In diesem Kurs erhalten Sie fertige Vorlagen für Ihre Kursgestaltung, die Sie je nach Einsatzzweck nutzen, kombinieren und erweitern können - Ihren Designideen sind kaum Grenzen gesetzt. Die Vorlagen basieren auf Bootstrap und Layoutit und können ohne Pro­gram­mier­kennt­nisse verwendet werden. Eine Schritt-für-Schritt-Anleitung finden Sie im nächsten Abschnitt. Darüber hinaus steht Ihnen das HessenHub-Team für Fragen und Anregungen gerne zur Verfügung!

    
    Online illustrations by Storyset
  • 
    

    Schritt-für-Schritt-Anleitung
    

    So meistern Sie das Erstellen beeindruckender Websites mit Bootstrap-Vorlagen.
    

    
    

  • 
    

    Nachfolgend bieten wir Ihnen folgende Designvorlagen an:

    • Bild- und Text-Kombination

    • Carousel: eine Bildergalerie für drei Bilder mit Bildbeschreibung

    • Carousel: eine Bildergalerie für drei Bilder ohne Bildbeschreibung

    • Zwei Karten, inkl. Bild und Bildunterschrift sowie Button

    • Drei Karten, inkl. Bild und Bildunterschrift sowie Button

    • Zwei Kacheln, mit Bild- und Text-Kombination (jeweils links und rechts kombiniert)

    • Vier Kacheln, inkl. Bild und Bildunterschrift

    • Accordion: aufklappbarer Bereich für Text und eingebettete PDF
      

• 

  Bild- und Text-Kombination

  • 

    Hier können Sie Ihren Text hinzufügen.

  • Hierzu klicken, um den Bootstrap-Code für Bild- und Text-Kombination anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <figure class="figure">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/11255/mod_label/intro/SDG_Poster_DE_No-UN-Emblem-WEB-1024x727.png" alt="Die 17 Nachhaltigkeitsziele der Vereinten Nationen" class="img-responsive atto_image_button_text-bottom" width="1024"
                        height="727">
                    <figcaption class="figure-caption"> Hier die Beschreibung für das Bild einfügen.</figcaption>
                </figure>
            </div>
            <div class="col-md-6">
                <h5>Hier können Sie Ihren Text hinzufügen.</h5>
            </div>
        </div>
    </div>
• 

  Carousel: eine Bildergalerie für drei Bilder mit Bildbeschreibung

  
  

  • Carousel (drei Bilder mit Titel und Text)

    

    First Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    

    Second Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    

    Third Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Previous Next
  • Hierzu klicken, um den Bootstrap-Code für Carousel (drei Bilder mit Titel und Text) anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" id="carousel-391666">
                    <ol class="carousel-indicators">
                        <li data-slide-to="0" data-target="#carousel-391666" class="active">
                        </li>
                        <li data-slide-to="1" data-target="#carousel-391666">
                        </li>
                        <li data-slide-to="2" data-target="#carousel-391666">
                        </li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" alt="Carousel Bootstrap First" src="https://lehrportal.uni-kassel.de/pluginfile.php/12135/mod_label/intro/SDG%201_%20Keine%20Armut%2C%20SDG%202_%20Kein%20Hunger%2C%20SDG%203_%20Gesundheit%20und%20Wohlergehen.png">
                            <div class="carousel-caption">
                                <h4>
                                    First Thumbnail label
                                </h4>
                                <p>
                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://lehrportal.uni-kassel.de/pluginfile.php/12136/mod_label/intro/SDG%204_%20Hochwertige%20Bildung%2C%20SDG%205_%20Geschlechtergleichheit%2C%20SDG%206_%20Sauberes%20Wasser%20und%20Sanit%C3%A4r%C2%ADeinrichtungen.png">
                            <div class="carousel-caption">
                                <h4>
                                    Second Thumbnail label
                                </h4>
                                <p>
                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                </p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://lehrportal.uni-kassel.de/pluginfile.php/12137/mod_label/intro/SDG%207_%20Bezahlbare%20und%20saubere%20Energie%2C%20SDG%208_%20Menschenw%C3%BCrdige%20Arbeit%20und%20Wirtschaftswachstum%2C%20SDG%209_%20Industrie%2C%20Innovation%20und%20Infrastruktur.png">
                            <div class="carousel-caption">
                                <h4>
                                    Third Thumbnail label
                                </h4>
                                <p>
                                    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                                </p>
                            </div>
                        </div>
                    </div> <a class="carousel-control-prev" href="#carousel-391666" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-391666" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
                </div>
            </div>
        </div>
    </div>
• 

  Carousel: eine Bildergalerie für drei Bilder ohne Bildbeschreibung

  • Carousel (drei Bilder ohne Text)

    

    

    

    Previous Next
  • Hierzu klicken, um den Bootstrap-Code für Carousel(drei Bilder ohne Text) anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" id="carousel-508629">
                    <ol class="carousel-indicators">
                        <li data-slide-to="0" data-target="#carousel-508629" class="active">
                        </li>
                        <li data-slide-to="1" data-target="#carousel-508629">
                        </li>
                        <li data-slide-to="2" data-target="#carousel-508629">
                        </li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" alt="Carousel Bootstrap First" src="https://lehrportal.uni-kassel.de/pluginfile.php/12138/mod_label/intro/SDG%2010_%20Weniger%20Ungleichheiten%2C%20SDG%2011_%20Nachhaltige%20St%C3%A4dte%20und%20Gemeinden%2C%20SDG%2012_%20Nachhaltige_r%20Konsum%20und%20Produktion.png">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://lehrportal.uni-kassel.de/pluginfile.php/12139/mod_label/intro/SDG%2013_%20Ma%C3%9Fnahmen%20zum%20Klimaschutz%2C%20SDG%2014_%20Leben%20unter%20Wasser%2C%20SDG%2015_%20Leben%20an%20Land.png">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://lehrportal.uni-kassel.de/pluginfile.php/12140/mod_label/intro/SDG%2016_%20Frieden%2C%20Gerechtigkeit%20und%20starke%20Institutionen%2C%20SDG%2017_%20Partnerschaften%20zur%20Erreichung%20der%20Ziele%2C%20Icon_%20Ziehe%20f%C3%BCr%20nachhaltige%20Entwicklung.png">
                        </div>
                    </div> <a class="carousel-control-prev" href="#carousel-508629" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel-508629" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
                </div>
            </div>
        </div>
    </div>
• 

  Zwei Karten, inkl. Bild und Bildunterschrift sowie Button

  • Zwei Karten

    

     Titel1
    

     Inhalt

    Weitere Informationen

    

     Titel2
    

     Inhalt

    Weitere Informationen

  • Hierzu klicken, um den Bootstrap-Code für Zwei Karten anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10011/mod_label/intro/sdg-image-01-data.png" alt="SDG 1: Keine Armut" class="img-responsive atto_image_button_text-bottom" width="877" height="879">
                    <div class="card-block">
                        <h3 style="text-align: center;"><a href=""><strong></strong></a></h3>
                        <p style="text-align: left;"><strong></strong></p>
                        <h4><strong>&nbsp;Titel1</strong> <br></h4>
                        <h5>&nbsp;Inhalt</h5>
                        <p></p>
                        <p class="card-text" style="text-align: center;">
                        </p>
                        <p>
                            <a href="" class="btn btn-block btn-primary" target="_blank" type="button">Weitere Informationen</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10011/mod_label/intro/sdg-image-02.png" alt="SDG 2: Kein Hunger" class="img-responsive atto_image_button_text-bottom" width="574" height="574">
                    <div class="card-block">
                        <h3 style="text-align: center;"><a href=""><strong></strong></a></h3>
                        <p style="text-align: left;"><strong></strong></p>
                        <h4><strong>&nbsp;Titel2</strong> <br></h4>
                        <h5>&nbsp;Inhalt</h5>
                        <p class="card-text" style="text-align: center;"></p>
                        <p>
                            <a href="" class="btn btn-block btn-primary" target="_blank" type="button">Weitere Informationen</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
• 

  Drei Karten, inkl. Bild und Bildunterschrift sowie Button

  
  

  • Drei Karten

    

     Titel1
    

     Inhalt

    Weitere Informationen

    

     Titel2
    

     Inhalt

    Weitere Informationen

    

     Titel3

     Inhalt

    Weitere Informationen

  • Hierzu klicken, um den Bootstrap-Code für Drei Karten anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10012/mod_label/intro/sdg-image-03.png" alt="SDG 3: Gesundheit und Wohlergehen" class="img-responsive atto_image_button_text-bottom" width="574" height="574">
                    <div class="card-block">
                        <h3 style="text-align: center;"><a href=""><strong></strong></a></h3>
                        <p style="text-align: left;"><strong></strong></p>
                        <h4><strong>&nbsp;Titel1</strong> <br>
                        </h4>
                        <h5>&nbsp;Inhalt</h5>
                        <p></p>
                        <p class="card-text" style="text-align: center;">
                        </p>
                        <p>
                            <a href="" class="btn btn-block btn-primary" target="_blank" type="button">Weitere Informationen</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10012/mod_label/intro/sdg-image-04.png" alt="SDG 4: Hochwertige Bildung" class="img-responsive atto_image_button_text-bottom" width="574" height="574">
                    <div class="card-block">
                        <h3 style="text-align: center;"><a href=""><strong></strong></a></h3>
                        <p style="text-align: left;"><strong></strong></p>
                        <h4><strong>&nbsp;Titel2</strong> <br></h4>
                        <h5><strong>&nbsp;</strong>Inhalt</h5>
                        <p></p>
                        <p class="card-text" style="text-align: center;"></p>
                        <p>
                            <a href="" class="btn btn-block btn-primary" target="_blank" type="button">Weitere Informationen</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10012/mod_label/intro/sdg-image-05.png" alt="SDG 5: Geschlechtergleichheit" class="img-responsive atto_image_button_text-bottom" width="574" height="574">
                    <div class="card-block">
                        <h3 style="text-align: center;"><a href=""><strong></strong></a></h3>
                        <p style="text-align: left;"><strong></strong></p>
                        <h4><strong>&nbsp;Titel3</strong></h4>
                        <h5>&nbsp;Inhalt</h5>
                        <p></p>
                        <p></p>
                        <p>
                            <a href="" class="btn btn-block btn-primary" target="_blank" type="button">Weitere Informationen</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
• 

  Zwei Kacheln, mit Bild- und Text-Kombination (jeweils links und rechts kombiniert)

  
  

  • Zwei Kacheln

    

    Auf der linken Seite können Sie ein Bild oder Video einbetten und auf der rechten Seite können Sie einen Text ergänzen.

    
    
    

    Auf der linken Seite können Sie einen Text einfügen und auf der rechten Seite können Sie ein Bild oder Video einbetten.

    
  • Hierzu klicken, um den Bootstrap-Code für zwei Kacheln anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10097/mod_label/intro/sdg-image-06.png" alt="SDG 6: Sauberes Wasser und Sanitär­einrichtungen" class="img-responsive atto_image_button_text-bottom" width="574" height="574">
            </div>
            <div class="col-md-6">
                <h5>Auf der linken Seite können Sie ein Bild oder Video einbetten und auf der rechten Seite können Sie einen Text ergänzen.</h5>
            </div>
        </div>
        <br>
        <br>
        <div class="row ">
            <div class="col-md-6 ">
                <h5>Auf der linken Seite können Sie einen Text einfügen und auf der rechten Seite können Sie ein Bild oder Video einbetten.</h5>
            </div>
            <div class="col-md-6 ">
                <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10097/mod_label/intro/sdg-image-07.png" alt="SDG 7: Bezahlbare und saubere Energie" class="img-responsive atto_image_button_text-bottom" width="574" height="574">
            </div>
        </div>
    </div>
• 

  Vier Kacheln, inkl. Bild und Bildunterschrift

  • Vier Kacheln

    Titel 1

    

    Titel 2

    

    Titel 3

    

    Titel 4

    
  • Hierzu klicken, um den Bootstrap-Code für vier Kacheln anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <h3>
                    Titel 1
                </h3><a href="" target="_blank"><img src="https://lehrportal.uni-kassel.de/pluginfile.php/10098/mod_label/intro/sdg-image-08.png" alt="SDG 8: Menschenwürdige Arbeit und Wirtschaftswachstum" class="img-responsive atto_image_button_text-bottom" width="574" height="574"></a>
            </div>
            <div class="col-md-6">
                <h3>Titel 2
                </h3>
                <a href="" target="_blank"><img src="https://lehrportal.uni-kassel.de/pluginfile.php/10098/mod_label/intro/sdg-image-09.png" alt="SDG 9: Industrie, Innovation und Infrastruktur" class="img-responsive atto_image_button_text-bottom" width="574" height="574"></a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <h3>
                    Titel 3
                </h3><a href="" target="_blank"><img src="https://lehrportal.uni-kassel.de/pluginfile.php/10098/mod_label/intro/sdg-image-10.png" alt="SDG 10: Weniger Ungleichheiten" class="img-responsive atto_image_button_text-bottom" width="574" height="574"></a>
            </div>
            <div class="col-md-6">
                <h3>Titel 4
                </h3><a href="" target="_blank"><img src="https://lehrportal.uni-kassel.de/pluginfile.php/10098/mod_label/intro/sdg-image-11.png" alt="SDG 11: Nachhaltige Städte und Gemeinden" class="img-responsive atto_image_button_text-bottom" width="574" height="574"></a>
            </div>
        </div>
    </div>
• 

  Accordion: aufklappbarer Bereich für Text und eingebettete PDF

  • Accordion mit PDF
  • Hierzu klicken, um den Bootstrap-Code für Accordion mit PDF anzuzeigen.

    ×

    Hinweis:

    Zur Verwendung des Codes bitte den nachfolgenden Code komplett markieren und in die Textfeld-Aktivität einfügen.

    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="heading11a">
                <h2 class="mb-0">
                    <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse11a" aria-expanded="false" aria-controls="collapse11a">
             <img src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" class="img-responsive atto_image_button_text-bottom" width="18" height="18">Test PDF ansehen/herunterladen
           </button>
                </h2>
            </div>
            <div id="collapse11a" class="collapse" aria-labelledby="heading11a" data-parent="#accordionExample" style="">
                <div class="card-body">
                    <center><iframe src="https://lehrportal.uni-kassel.de/pluginfile.php/9750/mod_resource/content/1/Lorem_ipsum.pdf" style="width: 100%; height: 800px;" quality="high" type="application/pdf"></iframe></center>
                </div>
            </div>
        </div>
    </div>
  • Hinweis zum Code

    Alle Accordions klappen sich auf, wenn eins angeklickt wird?

    Um dies zu vermeiden, sollte die Nummerierung im Code für jedes Accordion (bei Verwendung mehrerer Accordions im selben Kurs) unterschiedlich gewählt werden!

    Die nachfolgenden 5 Stellen sind im Code verschieden zu benennen.
    

    
    
• 

  Verwendete Quellen

  • Bootstrap: https://getbootstrap.com/docs/5.2/getting-started/introduction/

    Layoutit!: https://layoutit.com/

    Icons8: https://icons8.de/

    SDG17: https://www.bmz.de/de/agenda-2030/

• 

  Fotos

  • Icons zum Downloaden Verzeichnis
  • 
    

  • 
    

  • 
    

  • 
    

  • 
    

  •