Abschnittsübersicht

• Abschnitt Wir laden Sie ein, Ihren Moodlekurs mit uns umzugestalten! auswählen

  Einklappen Ausklappen

  Wir laden Sie ein, Ihren Moodlekurs mit uns umzugestalten!

  Alles einklappen Alles aufklappen

  • Aktivität In diesem Kurs erhalten Sie fertige Vorlagen für I... auswählen

    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
  • Aktivität Schritt-für-Schritt-Anleitung So meistern Sie das ... auswählen

    
    

    Schritt-für-Schritt-Anleitung
    

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

    
    

  • Aktivität Nachfolgend bieten wir Ihnen folgende Designvorlag... auswählen

    
    

    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
      

    • Button
      

• Abschnitt Bild- und Text-Kombination auswählen

  Einklappen Ausklappen

  Bild- und Text-Kombination

  • Aktivität Hier die Beschreibung für das Bild einfügen. Hier ... auswählen

    

    Hier können Sie Ihren Text hinzufügen.

  • Aktivität ... auswählen

    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>
• Abschnitt Carousel: eine Bildergalerie für drei Bilder mit Bildbeschreibung auswählen

  Einklappen Ausklappen

  Carousel: eine Bildergalerie für drei Bilder mit Bildbeschreibung

  
  

  • Aktivität Carousel (drei Bilder mit Titel und Text) First Th... auswählen

    Carousel (drei Bilder mit Titel und Text)

    

    First Thumbnail label

    Hier ist Ihr Beispieltext.

    

    Second Thumbnail label

    Hier ist Ihr Beispieltext.

    

    Third Thumbnail label

    Hier ist Ihr Beispieltext.

    Previous Next
  • Aktivität Hierzu klicken, um den Bootstrap-Code für Carousel... auswählen

    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" style="color: black;">
                                <h4 style="color: black;">
                                    First Thumbnail label
                                </h4>
                                <p style="color: black;">
                                    Hier ist Ihr Beispieltext.
                                </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" style="color: black;">
                                <h4 style="color: black;">
                                    Second Thumbnail label
                                </h4>
                                <p style="color: black;">
                                    Hier ist Ihr Beispieltext.
                                </p>
                            </div>
                        </div>
                        <div class="carousel-item" style="color: black;">
                            <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 style="color: black;">
                                    Third Thumbnail label
                                </h4>
                                <p style="color: black;">
                                    Hier ist Ihr Beispieltext.
                                </p>
                            </div>
                        </div>
                    </div>

    <a class="carousel-control-prev" href="#carousel-391666" data-slide="prev" style="filter: invert(100%);"><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" style="filter: invert(100%);"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>

    </div>
            </div>
        </div>
    </div>
• Abschnitt Carousel: eine Bildergalerie für drei Bilder ohne Bildbeschreibung auswählen

  Einklappen Ausklappen

  Carousel: eine Bildergalerie für drei Bilder ohne Bildbeschreibung

  • Aktivität Carousel (drei Bilder ohne Text) Previous Next auswählen

    Carousel (drei Bilder ohne Text)

    

    

    

    Previous Next
  • Aktivität Hierzu klicken, um den Bootstrap-Code für Carousel... auswählen

    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" style="filter: invert(100%);"><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" style="filter: invert(100%);"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
                </div>
            </div>
        </div>
    </div>
• Abschnitt Zwei Karten, inkl. Bild und Bildunterschrift sowie Button auswählen

  Einklappen Ausklappen

  Zwei Karten, inkl. Bild und Bildunterschrift sowie Button

  • Aktivität Zwei Karten Titel 1 Inhalt Weitere Informationen T... auswählen

    Zwei Karten

    

    
    

     Titel 1

     Inhalt

    Weitere Informationen

    

    
    

     Titel 2

     Inhalt

    Weitere Informationen

  • Aktivität Hierzu klicken, um den Bootstrap-Code für Zwei Kar... auswählen

    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 d-flex"> <div class="card flex-fill d-flex flex-column">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/9744/mod_label/intro/sdg-image-01-data.png" alt="SDG 1: Keine Armut" width="877" height="879" class="img-fluid atto_image_button_text-bottom">
                    <div class="card-block">
                         <br>
                        <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 d-flex"> <div class="card flex-fill d-flex flex-column">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/9744/mod_label/intro/sdg-image-02.png" alt="SDG 2: Kein Hunger" width="877" height="879" class="img-fluid atto_image_button_text-bottom">
                    <div class="card-block">
                        <br>
                        <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>
    </div>
• Abschnitt Drei Karten, inkl. Bild und Bildunterschrift sowie Button auswählen

  Einklappen Ausklappen

  Drei Karten, inkl. Bild und Bildunterschrift sowie Button

  
  

  • Aktivität Drei Karten Titel1 Inhalt Weitere Informationen Ti... auswählen

    Drei Karten

    

    
    

     Titel1
    

     Inhalt

    Weitere Informationen

    

    
    

     Titel2
    

     Inhalt

    Weitere Informationen

    

    
    

     Titel3

     Inhalt

    Weitere Informationen

  • Aktivität Hierzu klicken, um den Bootstrap-Code für Drei Kar... auswählen

    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 d-flex"> <div class="card flex-fill d-flex flex-column">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/17730/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">
                         <br>
                        <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 d-flex"> <div class="card flex-fill d-flex flex-column">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/17730/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">
                        <br>
                        <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 d-flex"> <div class="card flex-fill d-flex flex-column">
                    <img src="https://lehrportal.uni-kassel.de/pluginfile.php/17730/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">
                        <br>
                        <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>
• Abschnitt Zwei Kacheln, mit Bild- und Text-Kombination (jeweils links und rechts kombiniert) auswählen

  Einklappen Ausklappen

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

  
  

  • Aktivität Zwei Kacheln Auf der linken Seite können Sie ein B... auswählen

    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.

    
  • Aktivität ... auswählen

    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>
• Abschnitt Vier Kacheln, inkl. Bild und Bildunterschrift auswählen

  Einklappen Ausklappen

  Vier Kacheln, inkl. Bild und Bildunterschrift

  • Aktivität Vier Kacheln Titel 1 Titel 2 Titel 3 Titel 4 auswählen

    Vier Kacheln

    Titel 1

    

    Titel 2

    

    Titel 3

    

    Titel 4

    
  • Aktivität ... auswählen

    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>
• Abschnitt Accordion: aufklappbarer Bereich für Text und eingebettete PDF auswählen

  Einklappen Ausklappen

  Accordion: aufklappbarer Bereich für Text und eingebettete PDF

  • Aktivität Titel 1 Text 1 Titel 2 Text 2 Titel 3 Text 3 Titel... auswählen

      Titel 1

    Text 1

      Titel 2

    Text 2

      Titel 3

    Text 3

      Titel 4

    Text 4

  • Aktivität Hierzu klicken, um den Bootstrap-Code für Accordio... auswählen

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

    ×

    Hinweis:

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

    <div class="container mt-5">

    <div id="accordion">

    <!-- Erstes Accordion -->

    <div class="card">

    <div id="headingF1" class="card-header">

    <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #c7105c;" type="button" data-toggle="collapse" data-target="#collapseF1" aria-expanded="false" aria-controls="collapseF1"> <!-- Schriftgröße und Farbe für Titel 1 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 1 </button></h4>

    </div>

    <div id="collapseF1" class="collapse show" aria-labelledby="headingF1" data-parent="#accordion">

    <div class="card-body">

    <h5><span style="font-weight: normal;">Text 1</span></h5>

    </div>

    </div>

    </div>

    <!-- Zweites Accordion -->

    <div class="card">

    <div id="headingF2" class="card-header">

    <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #eac372;" type="button" data-toggle="collapse" data-target="#collapseF2" aria-expanded="false" aria-controls="collapseF2"> <!-- Schriftgröße und Farbe für Titel 2 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 2 </button></h4>

    </div>

    <div id="collapseF2" class="collapse" aria-labelledby="headingF2" data-parent="#accordion">

    <div class="card-body">

    <h5><span style="font-weight: normal;">Text 2</span></h5>

    </div>

    </div>

    </div>

    <!-- Drittes Accordion -->

    <div class="card">

    <div id="headingF3" class="card-header">

    <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #4aac96;" type="button" data-toggle="collapse" data-target="#collapseF3" aria-expanded="false" aria-controls="collapseF3"> <!-- Schriftgröße und Farbe für Titel 3 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 3 </button></h4>

    </div>

    <div id="collapseF3" class="collapse" aria-labelledby="headingF3" data-parent="#accordion">

    <div class="card-body">

    <h5><span style="font-weight: normal;">Text 3</span></h5>

    </div>

    </div>

    </div>

    <!-- Viertes Accordion -->

    <div class="card">

    <div id="headingF4" class="card-header">

    <h4 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" style="font-size: 1.8rem; color: #5095c8;" type="button" data-toggle="collapse" data-target="#collapseF4" aria-expanded="false" aria-controls="collapseF4"> <!-- Schriftgröße und Farbe für Titel 4 --> <img class="img-responsive" src="https://lehrportal.uni-kassel.de/pluginfile.php/10186/mod_label/intro/Icon_ausklappen-removebg-preview%20%281%29.png" alt="Icon_ausklappen" width="18" height="18">  Titel 4 </button></h4>

    </div>

    <div id="collapseF4" class="collapse" aria-labelledby="headingF4" data-parent="#accordion">

    <div class="card-body">

    <h5><span style="font-weight: normal;">Text 4</span></h5>

    </div>

    </div>

    </div>

    </div>

    </div>
  • Aktivität ... auswählen

    Accordion mit PDF
  • Aktivität ... auswählen

    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>
  • Aktivität Hinweis zum Code Alle Accordions klappen sich auf,... auswählen

    Hinweis zum Code

    Alle Accordions klappen sich auf, obwohl Sie nur eines angeklickt haben?

    Dies tritt auf, wenn Sie mehrere Accordions im Kurs verwenden. Um zu vermeiden, dass alle bei einem klick aufklappen, sollte die Nummerierung im Code für jedes verwendete Accordion unterschiedlich gewählt werden!

    Im nachfolgenden Beispiel haben wir die erforderliche Nummerierung an 5 Stellen exemplarisch hervorgehoben.
    

    
    
• Abschnitt Button auswählen

  Einklappen Ausklappen

  Button

  • Aktivität ein responsiver Button mit Link auswählen

    ein responsiver Button mit Link

  • Aktivität Hierzu klicken, um den Bootstrap-Code für den resp... auswählen

    Hierzu klicken, um den Bootstrap-Code für den responsiven Button mit Link anzuzeigen.

    ×

    Hinweis:

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

    <a style="text-align: center;" href="" class="btn btn-primary" type="button" target="_blank"><h5><span style="font-weight: normal;"> Button mit Link</span></h5></a>
  • Aktivität ein Block-Button mit Link auswählen

    ein Block-Button mit Link

  • Aktivität Hierzu klicken, um den Bootstrap-Code für den Bloc... auswählen

    Hierzu klicken, um den Bootstrap-Code für den Block-Button mit Link anzuzeigen.

    ×

    Hinweis:

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

    <a style="text-align: center;" href="" class="btn btn-primary btn-block" type="button" target="_blank"><h5><span style="font-weight: normal;"> Block-Button mit Link</span></h5></a>
• Abschnitt Verwendete Quellen auswählen

  Einklappen Ausklappen

  Verwendete Quellen

  • Aktivität Bootstrap: https://getbootstrap.com/docs/5.2/getti... auswählen

    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/

• Abschnitt Fotos auswählen

  Einklappen Ausklappen

  Fotos

  • Aktivität Icons zum Downloaden auswählen

    

    Icons zum Downloaden Verzeichnis
  • Aktivität Text- und Medienfeld auswählen

    
    

  • Aktivität Text- und Medienfeld auswählen

    
    

  • Aktivität Text- und Medienfeld auswählen

    
    

  • Aktivität Text- und Medienfeld auswählen

    
    

  • Aktivität Text- und Medienfeld auswählen

    
    

  • Aktivität Text- und Medienfeld auswählen