Homepage und Website mit Astroid Framework Two

Liebes Forum.

Ich habe die Hoffnung, dass sich jemand von euch intentiv(er) mit Astroid Framework Template Two (mit Joomla) auskennt. Ich bin nämlich Noobie, kann kein HTML oder CSS und habe den Auftrag, eine Webseite mit Astroid Framework Template Two (mit Joomla) zu gestalten,

• die als Startbildschirm (also als Homepage) immer ein pulsierendes Bild anzeigt (sonst nichts), was nach 5 Sekunden ausgeblendet wird,
• und bei der anschliessend die Website mit Header, Video, Texten, Footer etc. sichtbar wird (One-Pager mit wenigen Unterseiten).

Ich habe aktuell nur unter "Joomla Site Template Stile > Astroid Two > Layout > Layout "eine "Banner Section" mit dem gewünschten Image eingefügt, siehe hier und Screenshot. Nun weiss ich nicht weiter bzw. ob mein Weg überhaupt der richtige ist, um die geforderte Gestaltung so hinzubekommen.

Ich danke euch schon jetzt für jeden Hinweis und Tipp.

LG

Zitat von Elwood

Hast du 'nur' das Template und das AF geladen oder das Quickstart?

Ähm, bin unsicher ... ich habe im joomla backend auf den link "two installieren" geklickt 🙈🤷‍♀️ oh, da steht "install a template to experience Astroid Framework" – hab ich wohl "nur" das Template geladen 🙈🤷‍♀️ Brauch ich denn den Quickstart für meine Gestaltungsvorgaben?

... Recherche ende ... jetzt weiss ich, was du mit Quickstart meinst. Ich habe das Astroid Two Template auf eine unserer Testseiten geladen; diese beinhaltete schon das gesamte Joomla 5.3.2 mit allen Erweiterungen und Plugins, die wir so für unsere Webseiten benutzen. Laut meiner Recherche ist das korrekt so, wie ich es getan habe. Oder was meintest du?!

Zitat von deltapapa

Moin,

meinst du sowas: https://team-lefort.de/

Das ist mit Astroid Template Two umgesetzt, der Slider ist jedoch ein Modul mit Bootstrap 5 und folgenden Code:

Spoiler anzeigen

Code

<div id="carouselExampleIndicatorsFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleIndicatorsFade" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicatorsFade" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleIndicatorsFade" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#carouselExampleIndicatorsFade" data-bs-slide-to="3" aria-label="Slide 4"></button></div>
<div class="carousel-inner">
<div class="carousel-item active"><img class="d-block w-100" src="images/content/promo/slider/bag.webp" alt="bag" width="1200" height="800"></div>
<div class="carousel-item"><img class="d-block w-100" src="images/content/promo/slider/belt.webp" alt="belt" width="1200" height="800"></div>
<div class="carousel-item"><img class="d-block w-100" src="images/content/promo/slider/boxing.webp" alt="boxing" width="1200" height="800"></div>
<div class="carousel-item"><img class="d-block w-100" src="images/content/promo/slider/kick.webp" alt="kick" width="1200" height="800"></div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicatorsFade" data-bs-slide="prev"> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicatorsFade" data-bs-slide="next"> <span class="visually-hidden">Next</span> </button></div>

Die genaue Doku dazu findest du hier: https://getbootstrap.com/docs/5.3/components/carousel/

Das kannst du dann ja in der Größe etc variieren.

Danke dir fürs Beispiel. Leider ist das nicht, was ich erstellen soll. Es geht um solch einen Startbildschirm, der sich dann in eine Webseite, so wie du sie genannt hast, verändert.

Zitat von Rolf Dautrich

Noch mal zu dem "pulsierenden Bild": Wenn Du bei Deinem Besucher einmalig eine gewisse Aufmerksamkeit erreichen willst, würde ich die Erweiterung "EngageBox" von Tassos Marinos nehmen. Damit kannst Du einen beliebigen Inhalt auf dem Bildschirm "über" der Startseite einblenden, der erst nach einer einstellbaren Zeit geschlossen werden kann (ich würde aber nie länger einstellen als maximal die Zeit, die man zum Lesen braucht). Der Vorteil dabei ist, dass EngageBox einen Cookie setzen kann, sodass die Box bei jedem Besucher (bzw. bei jedem Browser) nur einmal erscheint.

Danke dir für den Tipp – ich probiere mich daran, das Bild 2 Sekunden pulsieren zu lassen 😎

Danke auch für deinen Hinweis, wie zeitgemäss solch ein Splash Screen ist. Ich habe recherchiert – scheint nicht nur deine subjektive Meinung zu sein