Support » Allgemeine Fragen » Vollbild auf Startseite – wie realisieren?

  • Hallo!

    Bei der Programmierung meiner ersten Webseite stoße ich noch auf so manche Probleme – vorallem weil ich ziemlich genaue Vorstellungen habe wie die Seite aussehen soll. Ich würde mich sehr freuen wenn mir jemand weiterhelfen könnte.

    Akutell beschäftigt mich folgendes:

    Ich möchte daß die Webseite, wenn sie geöffnet wird, zunächst ein großes Bild anzeigt das den kompletten Bildschirm ausfüllt. Von dieser Ansicht aus kann nach unten gescrollt werden. Unter dem großen „Vollbild“ möchte ich dann viele quadratische Bilder anordnen die jeweils der Link zu einer Weiteren Seite sind. Zunächst beschäftigt mich jedoch vorallem das Problem wie ich es schaffe daß die Startseite ein komplettes Bild anzeigt das am unteren Bildschirmrand endet. Das ganze sollte sich möglichst von selbst an die jeweils benutzte Bildschirmgröße oder Browserfenstergröße anpassen. Seitlich darf das Bild dann auch ruhig beschnitten werden – kein Problem.

    Meint Ihr das ist machbar? Oder stecke ich mir da zu hohe Ziele?

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Klar ist das machbar.

    Zur Einstimmung ist das hier lesenswert, aber eigentlich möchtest Du Dir das hier anschauen; vielleicht hilft auch das hier.

    Wenn es bei einem einzigen Hintergrundbild bleibt, wäre das leicht mit einem Beitragsbild zu realisieren. Größe nicht mehr als Full-HD (und dann bitte optimiert, z.B. mit dem hier).

    Für die Vorschau-Bildchen zur Seitennavigation würde ich auch Beitragsbilder nehmen. Neue WP_Query() und dann nur Bilder und den Link zur Seite ausgeben … Alles ganz einfach.

    PS: Dieser wertvolle Beitrag von mir ist heute besonders suchmaschinenfreundlich gestaltet worden. Ist halt schon spät … 😉

    PPS: Welches Startertheme verwendest Du? Underscores.me?

    Thread-Starter Seiml

    (@seiml)

    Super! Vielen Dank – werd mir das alles durchlesen.

    Ich hab mich ehrlichgesagt noch nicht entschieden welches Startertheme ich verwende. Tatsächlich bastel ich im Moment gerade an „Underscores“ rum (wie hast Du das erraten???). Aber ich weiß nicht ob das Theme das optimale ist.

    Doch, ist es. Es sei denn, Du brauchst ein großes Framework. Dann möchtest Du JointsWP.com

    Thread-Starter Seiml

    (@seiml)

    OK! Super! Vielen Dank für Deine Meinung. Das hilft, denn ich hab grad niemanden der mich hier beraten kann.

    Ob ich ein großes Framework brauche weiß ich nicht.

    Was ich weiß is wie die Seite aussehen soll. Ich versuch´s mal zu beschreiben:

    Startseite: Vollbild, mittig das Logo der Webseite, oben zentriert das Hauptmenue (das auf ALLEN Seiten gleich bleibt und an der selben Stelle steht – oben zentriert). Das Hauptmenue sollte auch nur aus Schrift bestehen – ohne Hintergrund. Die Startseite läßt sich nach unten scrollen. Dort gibt es Quadrate mit Bildern einzelner Projekte. Klickt man auf diese Quadratbilder kommt man zu einer neuen Seite auf der das Projekt beschrieben ist. Es soll ein leichtes sein neue Projekte hinzuzufügen – wie in einem Blog – nur daß jedes Projekt seine eigene Seite hat. Übers Hauptmenue kommt man noch zu einigen zusätzlichen Seiten wie „Über uns“, „Kontakt“, etc…

    Das wars im Groben schon. Keine Untermenues, Keine Seitenmenues, Eigentlich brauch ich nix außer der großen Vollbild-Startseite, einem Hauptmenue und den Links zu den Projekten.

    Brauch ich dafür ein großes Framework?

    Thread-Starter Seiml

    (@seiml)

    also „Supersized“ wär schon mal interessant. Das läßt sich aber leider nicht installieren. Warum? Weiss ich nicht. Wenn ich die aktuellste Datei im WordPress hochlade und installieren will kommt die Fehlermeldung:

    Installiere Plugin aus Datei: buildinternet-supersized-v3.2-37-gd6ed282.zip

    Entpacken des Pakets…

    Das Plugin wird installiert…

    Das Paket konnte nicht installiert werden. Es wurden keine funktionsfähigen Plugins gefunden.

    Die Plugininstallation ist fehlgeschlagen.

    Zurück zur Plugin-Seite

    Das jQuery-Plugin kannst Du auch nicht installieren. Dazu musst Du ein WordPress-Plugin schreiben, mit dem Du das einbindest – oder Du verwendest das WordPress-Plugin, dass ich erwähnt hatte.

    Deine Gedanken zum Layout klingen soweit gut, vorausgesetzt, Du hast auch an die Darstellung auf diversen (mobilen) Endgeräten gedacht. Hierfür kann man ein Gridsystem wie Foundation nehmen, muss man aber nicht.

    Übrigens schreibt Florian Brinkmann gerade auf t3n.de eine Serie von Blogbeiträgen zur Themeerstellung. Vielleicht sind noch hilfreiche Informationen für Dich dabei?

    Thread-Starter Seiml

    (@seiml)

    Welches WordPress-Plugin meinst du, das Du erwähnt hast? das hier: https://wordpress.org/plugins/envoke-supersized/ ? Das hab ich installiert. Ich schaffs aber leider trotzdem nicht „Supersized“ zu installieren. Gibts dafür irgendwo ne sehr ausführliche Anleitung? Leider finde ich nirgends etwas brauchbares.

    Ich weiß auch nicht ob Supersized wirklich das richtige ist. Aber ausprobieren würd ich´s gerne.
    Wichtig wäre daß es folgendes kann:
    Beim Öffnen der Startseite wird ein Bild als Vollbild angezeigt (Keine Diashow, sondern nur ein einziges Bild). Die Startseite läßt sich aber scrollen so daß unter dem Vollbild noch Inhalte (Links) erscheinen.

    ***

    Du hast geschrieben:
    „Wenn es bei einem einzigen Hintergrundbild bleibt, wäre das leicht mit einem Beitragsbild zu realisieren. Größe nicht mehr als Full-HD (und dann bitte optimiert, z.B. mit dem hier).

    Für die Vorschau-Bildchen zur Seitennavigation würde ich auch Beitragsbilder nehmen. Neue WP_Query() und dann nur Bilder und den Link zur Seite ausgeben … Alles ganz einfach.“

    Das klingt recht einfach, aber leider krieg ich auch das bisher noch nicht hin. Ich krieg keine Beiträge angezeigt.

    Ich dacht mir vielleicht könnte man das Vollbild auch irgendwie durch die Statische Startseite realisieren. Man müßte ihr nur irgendwie sagen können daß sie das Bild zentriert und so groß macht wie der Bildschirm ist und es dabei egal ist wenn das Bild seitlich beschnitten wird.

    Noch besser wär´s wenn man ein Bild hochladen könnte in dem ein bestimmter Bereich markiert werden kann der auf jeden Fall so groß wie möglich am Bildschirm zu sehen sein soll. Alles außen rum kann dann nach bedarf beschnitten werden so daß das komplette bild auf den Bildschirm passt. Das wär dann wirklich perfekt. Aber das is vielleicht zu viel verlangt.

    Bitte entschuldige meine Anfängerfragen, aber ich bin Anfänger. Das Ganze ist gerade noch ziiiemlich verwirrend für mich. Ich hoffe Ihr habt Verständnis.

    Hi Seiml,

    für den Anfang hast du dir wirklich etwas viel zu komplexes aufgebürdet.
    Wenn ich dich richtig verstehe, dann benötigst du als Screen füllendes Element einen Container (div), der die ganze Breite einnimmt. Und das Menü müsste über dem Container liegen und durchsichtig sein. Mit CSS bekommt man den Container inkl. Hintergrundbild so hin, dass es den ganzen Bildschirm ausfüllt. Hinzu kommt, dass es nur auf der Startseite so aussehen soll? Dann müsstest du das CSS speziell für die Startseite so schreiben und für die folgenden Seiten anders. Vielleicht auch per functions.php den Container nur auf der Homepage einbinden.

    Du siehst es ist sehr umfangreich und sprengt auch irgendwie den Rahmen hier.

    Vielleicht solltest du dir besser ein Theme suchen, das am ehesten deinen Erwartungen entspricht und dort ein paar Anpassungen vornehmen.

    Das ist jetzt keine Empfehlung von mir (aber auch keine dagegen!), ich hatte das nur letztens gesehen und denke, das ist genau das in der Art, wie du es haben möchtest, zumindest, was den oberen Teil anbelangt?

    https://themify.me/demo/themes/landing/

    Dann ist das, was ich oben geschrieben habe, passend dazu.

    Thread-Starter Seiml

    (@seiml)

    Hi Angelika!

    Vielen Dank! Super! Das Theme „Landing“ von „Themify“ is ziemlich genau das was ich suche. Zumindest – wie Du auch schreibst – der obere Teil. (Was unter den rechteckigen Links kommt bräuchte ich alles nicht.)
    Ich behalt das mal im Hinterkopf für den Fall daß mein Selbstbauversuch (oder die Suche nach einem vergleichbaren kostenlosen Theme) scheitern sollte.

    Danke auch für Deine Meinung, daß mein Entwurf noch zu komplex für den Anfang ist. Ich kann das echt noch nicht einschätzen – und die Meinungen gehen ja stark auseinander (Beitrag 2: … Alles ganz einfach.). Ich werd´s trotzdem erst mal noch weiter probieren. Vielleicht schaff ich´s ja.

    Ich vermute, Bego hatte ein Hintergrundbild für den body, für html oder den allumfassenden Container im Sinn, wobei das Hintergrundbild aber immer sichtbar ist und nicht weg scrollt. Das ist etwas anderes.

    Ich kann mich aber auch irren :).

    Thread-Starter Seiml

    (@seiml)

    ja – das hintergrundbild sollte auf jeden fall hochscrollen!

    Mal abwarten, was Bego dazu schreibt.

    Sorry für die Verwirrung … Ob es einfach ist, Layout-Wünsche in einem Theme umzusetzen, hängt sicher auch sehr stark von den Vorkenntnissen ab. Die sind nach einem Foren-Beitrag schwer einzuschätzen. Sorry, wenn ich hier übers Ziel hinausgeschossen bin.

    Wie Angelika schon richtig vermutet, bin ich außerdem davon ausgegangen, dass das Hintergrundbild dauerhaft browserfüllend dargestellt werden soll. Das ist wie gesagt grundsätzlich schon etwas kniffeliger, deshalb zunächst der Hinweis auf den Beitrag bei css-tricks.com. Andererseits gibt es bereits Lösungen wie das genannte jQuery-Plugin. Dieses Plugin lässt sich aber in WordPress nicht direkt installieren, sondern muss über ein WordPress-Plugin eingebunden werden – was wiederum Programmierkenntnisse voraussetzt.

    Möchtest Du lediglich, dass ein Bild den Bildschirm in der Breite füllt, lässt sich das bereits mit wenig CSS realisieren: img { width: 100; height: auto; }. Allerdings würde ich mir auch Gedanken machen, wie die Inhalte auf kleineren Displays (Smartphone) aussehen sollen – deshalb der Hinweis auf Grid-Systeme wie Zurb Foundation.

    Für den Einstieg ist es sinnvoll, bereits bestehende Themes zu verwenden, die dem gewünschten Aussehen schon weitgehend entsprechen, wobei Funktionalität wichtiger ist als verwendete Inhalte (also nicht auf schicke Fotos schielen – die eigenen Fotos sehen dann ganz anders aus). Bereits mit ein paar Anpassungen im Stylesheet lässt sich das Layout stark verändern. Vor allem aber muss man das Rad nicht neu erfinden und alle Templates von Null schreiben.
    Die nächste Stufe sind Child Themes, bei denen Änderungen an dem einen oder anderen Template vorgenommen werden. Auch hier verwendet man die Vorgaben des Theke-Entwicklers, was die Sache vereinfacht.
    Erst wenn man ganz eigene Vorstellungen hat und kein passendes Theme findet, macht es Sin ein eigenes Theme zu erstellen. Aber selbst dann sollte man das Rad nicht neu erfinden wollen, sondern auf ein Startertheme zurückgreifen. Underscores.me ist hier eine ausgezeichnete Wahl, setzt aber entsprechende Kenntnisse beim Erstellen des Stylesheet voraus.

    Schau, wie weit du kommst und frag Dich, wie weit Du in die Materie vordringen möchtest. Nur weil man einen Liter Milch trinken möchte, sollte man nicht gleich eine Kuh kaufen.

    Möchtest Du lediglich, dass ein Bild den Bildschirm in der Breite füllt, lässt sich das bereits mit wenig CSS realisieren: img { width: 100; height: auto; }

    Hallo Bego, nein, das ist nur Teil des Plans.
    Das Bild soll Monitor-Bildschirm-füllend sein, das Menü soll darüber platziert werden und wenn man nach unten scrolled, soll anderer Inhalt sichtbar werden. Und das nur! auf der Homepage.

    Daher muss ein zusätzlicher Container her, das Menü auf der Homepage absolut positioniert werden (inkl. responsive Menü), möglicherweise das Theme an dem Punkt (Container) umgeschrieben werden, da nicht maximale fixed Breite sondern komplette Breite für das Bild notwendig ist.

    OK, OK, ich hab’s verbockt. Halten wir fest: Es ist doch nicht so einfach.

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 17)
  • Das Thema „Vollbild auf Startseite – wie realisieren?“ ist für neue Antworten geschlossen.