Bild über ganzen Bildschirm 
Autor: Rosemarie H.Hallo, ich bin etwas am verzweifeln... ich versuche die Darstellung wie hier zu kopieren: https://www.luxus-liegenschaften.de/objekt/Best-place-to-be---Architektonisches-Highlight-in-Stuttgarts-sonniger-Hoehe/4247-DEU-125 also Bilder in einer Slideshow, die den ganzen Bildschirm füllen ...
(Darunter dann Text und andere Elemente, dh Full Height Modus ist also nicht geeignet. Die Bilder hab ich alle auf einer Größe von 1920x1080.)
Möglichkeit 1 via Zeilenstil:
a)Wenn ich einen Simple Separator nehme, den auf eine Höhe von 500px setze und unter Zeilenstil eine Bildliste verwende, sieht man zu wenig vom ganzen Bild. So wie hier
So sieht das Grid aus:
und hier die Zeilenstil Ansicht
wenn ich alles genauso mache nur die Höhe des Simple Separators auf 1000 setze, wird es unschaf und man sieht noch weniger vom ganzen Bild:
Wenn ich im Grid das Galerie-Element nehme, hab ich links und rechts Ränder, auch denn ich das Element auf die Breite des Browserfensters erweitere:
Hat jemand eine Idee, was ich noch probieren könnte?
Vielen Dank... (ps. hab zigmal auf veröffentlichen geklickt, aber es tut sich nichts...falls der beitrag jetzt mehrfach erscheinen sollte.)
Autor
Hallo, ich bin etwas am verzweifeln... ich versuche die Darstellung wie hier zu kopieren: https://www.luxus-liegenschaften.de/objekt/Best-place-to-be---Architektonisches-Highlight-in-Stuttgarts-sonniger-Hoehe/4247-DEU-125 also Bilder in einer Slideshow, die den ganzen Bildschirm füllen ...
(Darunter dann Text und andere Elemente, dh Full Height Modus ist also nicht geeignet. Die Bilder hab ich alle auf einer Größe von 1920x1080.)
Möglichkeit 1 via Zeilenstil:
a)Wenn ich einen Simple Separator nehme, den auf eine Höhe von 500px setze und unter Zeilenstil eine Bildliste verwende, sieht man zu wenig vom ganzen Bild. So wie hier
So sieht das Grid aus:
und hier die Zeilenstil Ansicht
wenn ich alles genauso mache nur die Höhe des Simple Separators auf 1000 setze, wird es unschaf und man sieht noch weniger vom ganzen Bild:
Wenn ich im Grid das Galerie-Element nehme, hab ich links und rechts Ränder, auch denn ich das Element auf die Breite des Browserfensters erweitere:
Hat jemand eine Idee, was ich noch probieren könnte?
Vielen Dank... (ps. hab zigmal auf veröffentlichen geklickt, aber es tut sich nichts...falls der beitrag jetzt mehrfach erscheinen sollte.)
Ich habe für meinen Versuch die Evo-Version verwendet, damit es auch bei der einfachen Version klappt, aber ich habe auch noch die Pro-Version.
-----
Getestet auf einem Notebook (1600x900px).
Verwendetet wurden 2 Bilder mit 1920 x 1080px
Seitenaufbau bei meiner Testseite:
Alle normale Breite, das "Erweitern" wurde erst bei "Zeilenstil" gemacht, siehe Screenshot unten
Testseite >>http://finde-links.de/test123-volle-breite/volle-breite.html (nur Test-Domain)
-----
Am Anfang hat es geklappt, dann wollte es auf einmal nicht mehr klappen, aber dann hat es irgendwie wieder geklappt, also immer mit der Ruhe und evtl. eine Pause zwischendurch zur Entspannung.
Auch auf der Startseite ist auch ein Test (mit Simple Separator (Höhe: 600)).
Die Testseite ist mit "Paralaxe" und die Startseite ohne "Paralaxe".
----------------------
Wenn es nicht klappt will, denn 2 Bilder 1920x1080 als ZIP hier unter anhängen und evtl. auch Mustertexte (als Text und/oder Titel?) nennen, dann könnte ich eine Testseite erstellen.
Evtl. Dateien und Verzeichnisse auf dem Webspace löschen, aber keine Verzeichnisse, die der Hoster erstellt hat und nicht die Datei .htaccess, dann die Webseite komplett neu hochladen.
Zur Sicherheit eine Sicherheitskopie (> 5 Export > Projekt exportieren) erstellen, sollte man immer mal wieder machen und auch auf USB-Stick o.ä. speichern, falls die Festplatte die Geist aufgibt.
Du musst die Ränder des Simple Separator Objekts links und rechts auf 0px stellen sonst wird ein Rand angezeigt.
Autor
Hi Daniel und Andreas, danke für die Tipps... und Daniel vielen Dank für die Mühe, die du dir gemacht hast!
bis jetzt funktioniert es noch nicht, aber die Seite ist auch noch nicht hochgeladen... mal sehen, wie es nach dem upload aussieht.
Hallo Rosemarie,
die Seite (Nachbau) sieht bei mir so aus......LINK
Wenn ich Parallax noch dazu aktiviere, müsste man größere Bilder einbauen, damit es mehr anzeigt.
Autor
Hi Andreas, danke dir! Wie hast du das gemacht, bzw. kannst du mir deine Einstellungen zeigen?
Genaueres von Andreas S.
Grundaufbau der Raster in meinem Test:
Text / Bild / HTML (leer)
Simple Separator (Höhe: 600)
Text (Stil: graue Hintergrundfarbe, Deckkraft: 80)
-----
A) Alle 3 Zeilen mit Schloss verbunden und "Erweitert".
B) Bei "3 Sitemap" bei "Eigenschaften" im Reiter "Grafik" den [ Header ] auswählen und ...
[x] Auf dieser Seite verbergen
... markieren, falls der Header unsichtbar sein soll.
Bis auf weisse Hintergrundfarbe beim Text unten ist alles perfekt erklärt!
Autor
super danke euch vielmals!
Ich hatte es in der zwischenzeit so gemacht https://luxusimmobilie-stuttgart.de
Weil ich ja oben auch die navigation / das Menü brauche (auch wenn mir eure version besser gefällt;).
Das Grid sieht so aus:
Hinter dem ersten separator (600px) sind die Bilder im Zeilenstil.
Allerdings:
1) Wie kann ich es machen, dass ich den Bildwechsel per Klick erreiche (so wie auf der Orignalseite die Pfeiltasten)?
2) Wie schaffst du es, dass die Bilder bei dir Andreas so scharf sind und bei mir unschärfer? Hast du die Bilder einfach downgeloadet und 1:1 übernommen ohne Komprimierung?
3) Wie schaffst du es, dass du eine solche pagespeed erreichst?
Bei mir sind die Werte viel schlechter, obwohl ich alle bilder komprimiert habe:
Einzelheiten von Andreas S.
-----
Zu Pagespeed - wurde auch das WebP-Format verwendet?
----- WebSite X5 Pro -----
1 Einstellungen > SEO
Suchmaschinenoptimierung
[x] Bild in WebP-Format konvertieren
-----
Manchmal verhält sich WebSite X5 etwas seltsam und liefert nicht das was man eingestellt hat.
Vielleicht WebSite X5 schließen und wieder starten bzw. etwas ändern und die Webseite hochladen oder evtl. Webseite vom Webspace löschen und komplett neu hochladen.
Woran es manchmal hakt? - keine Ahnung, meist liefert es dann doch das gewünschte Ergebnis.
Wegen der Schärfe, vielleicht mehrere Zeilen bei "Zeilenstil" über das Schloss miteinander verbinden.
Bei meiner Testseite habe ich die oberen 3 Zeilen über das Schloss miteinander verbunden.
Testseite mit Header >> http://finde-links.de/test123-volle-breite/volle-breite.html
-----
Zum Schluss ein Test mit dem Bildergalerie-Objekt, damit es Pfeile für die Bildergalerie gibt, siehe
Testseite >> http://finde-links.de/test123-volle-breite/bildergalerie.html
-----
Verwendete Objekte im Raster:
Bildergalerie
Titel
Text
(Zeilen nicht mit dem Schloss verbunden)
-----
Einstellungen bei WebSite X5 für das Bildergalerie-Objekt:
1) "Erweitert" markieren
2) "Ränder" - hier Außen- und Innenabstand auf 0 setzen
3) "Stil" anklicken und:
a) Im Reiter "Stil" [ Farbiger Hintergrund ] Hintergrundfarbe: Schwarz
b) Im Reiter "Text" bei Text und Bild [ Headerbild ] auswählen
Bilddatei: logo.png (mit durchsichtigem Hintergrund)
Ausrichtung: 2 - Zentriert
Rand: 20 (oben oder alle 4 Richtungen)
@Incomedia: Beim Bildergalerie-Objekt kann man die Bilder zwar auch automatisch wechseln lassen, aber es fehlt die Auswahl für den weichen Übergangseffekt beim automatischen Wechsel.
Diese Option sollte man noch hinzufügen, so wie bei der Bildliste für die Hintergrundbilder.
Das Problem ist, weil es ein Hintergrundslider ist und hier kann man nichts im Vordergrund wie die Pfeile einfügen, denn sonst wäre es kein Hintergrundslider. Man sieht den Slider zwar, aber eben nur deshalb weil ein Seperator Objekt davor ist und unsichtbar.
Die Bilder habe ich 1:1 von der Website genommen und eingefügt! Die Maße sind ca. 1400x1000 px und haben höchstens 252k! Wieso das so scharf ist kann ich auch nicht sagen. Ich habe aber keinen Parallaxeffekt aktiviert, so wie bei der Musterseite, denn dann würde es sich vergrößern und unscharf werden.
Wegen der Pagespeed...es ist ja nur der Hintergrundslider mit 3 Bildern und ein kleines Bild drinnen, sonst nichts. Nicht mal das Template muss es laden, deshalb.
... x Rosemarie H., ...(It > De) ... ... Entschuldigung, ich weiß nicht, ob ich verstanden habe, was Sie erreichen wollen ...
... jedenfalls gebe ich dir eine Idee ...
... Sie könnten das Objekt "Content Slider" + meine Erfindung mit EXTRA-Code verwenden, um ein ähnliches Ergebnis wie dieses > Online-Beispiel von einem anderen Benutzer zu erhalten...
...(...eine Variante würde es Ihnen ermöglichen, den Schieberegler mit einer halbtransparenten Kopfzeile nach oben zu bringen...)...
.
ciao
.
Autor
Daniel:
1) Zu Pagespeed - wurde auch das WebP-Format verwendet?
Ja
2) Galerie-Element:
Danke für den test, leider funktioniert das Galarie-Element nicht vollflächig
Andreas:
3) Genau, der Paralaxe-Effekt macht das Ganze unscharf! Wieder was gelernt:)
Ich hab es jetzt mit dem content slider element, ohne ränder, auf ganze seite erweitert gemacht:
https://luxusimmobilie-stuttgart.de
(Das einzig negative ist, dass ich keine Alt-Texte den Bilder hinzufügen kann.)
Bis auf die Höhe der Bilder/ des Content Sliders denke ich passt es.Aber das wird vermutlich das Problem sein, dass es nicht geht, oder?
@KolASim: Danke für das Angebot. Das sieht gut aus. Wenn ich den Content Slider / die Bilder nicht höher darstellen kann, würde ich dein Angebot gerne nutzen. Was muss ich machen?
Änderung der Höhe des Content Sliders:
1) Doppleklick auf Content Slider
2) Den Reiter "Stil" anklicken
Höhe: 700 (oder mehr)
Testseite >> http://finde-links.de/test123-volle-breite/content-slider.html
Änderung der Höhe des Content Sliders auf der Testseite.
Höhe: 800
Als Nachtrag meine Einstellung bei WebSite X5 für die Testseite.
-----
Seitenaufbau der Testseite:
Content Slider
Titel
Text
-----
Content Slider Einstellungen:
1) Erweitert
2) Ränder: Außen- und Innenrand = 0
3) Stil: Reiter "Text" anklicken
Bei "Text und Bild" das [Headerbild ] auswählen und ...
Bilddatei: logo.png (durchsichtiger Hintergrund)
Ausrichtung: 2 - Zentriert
Rand: 20
Hier für Alle, die es nachbauen wollen, die kompletten Einstellungen für meine Testseite. Ich hoffe, dass ich nichts vergessen habe.
Verwendet wurden kostenlose Bilder von Pixabay in der Größe 1920 x 1080px.
-----
Seitenaufbau der Testseite:
Content Slider
Titel
Text
-----
Content Slider Einstellungen:
1) Content Slider Objekt nur markieren
a) Erweitert
b) Ränder: Außen- und Innenrand = 0
c) Stil: Reiter "Text" anklicken
Bei "Text und Bild" das [Headerbild ] auswählen und ...
Bilddatei: logo.png (durchsichtiger Hintergrund)
Ausrichtung: 2 - Zentriert
Rand: 20
2) Content Slider Objekt doppelt klicken
a) Im Reiter "Inhalte":
- Für jedes Bild auf [ Hinzufügen ] klicken, keine Angaben bei Bild, Beschreibung und Button-Text.
- Eintrag bei "Titel" löschen, dadurch Eintrag in der Liste oben unsichtbar, aber noch vorhanden.
- Statt einer Auswahl bei "Bild" wird eine Bildauswahl bei Hintergrund gemacht.
b) Im Reiter "Stil":
Höhe: 800
[x] Automatische Wiedergabe (bei Bedarf)
Anzeigedauer: 3 (leider keine weichen Übergänge einstellbar)
(Sonst hier nichts eingetragen oder geändert bei meiner Testseite)
Hallo Rosemarie, ... versuche so viel wie möglich WEBP-Bilder zu vermeiden, weil ich sie nicht sehe ...
... wenn Sie mir ein Beispiel mit jpg-Bildern vorbereiten, wird es besser ...
... jedenfalls habe ich meinen Code mit "Content Slider" an diese Deine Seite angepasst...
... was Sie erhalten sollten, ist das im Vollbild geöffnete Bild, dh Vollbild in jeder Auflösung, und beim Scrollen wird der darunter liegende Inhalt gescrollt ...
.
ciao
.
... dies ist der Code zum Kopieren/Einfügen:
<script>
//--------------f--K-----------------------
$( document ).ready(function() {//K>
/** -- Content Slider Full Screen by KolAsim -- **/
fullscreenK()
}); //K<<
//--------------f--K1-----------------------
$( window ).resize(function() {//K1>
setTimeout(function(){ //K2>
fullscreenK()
}, 1000); //K2<<
});//K1<<
//--------------f--K3-----------------------
function fullscreenK() { //K3>
hK = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
hhK=$("#imHeader").height();
$("#imCell_38 div").css("max-height",hK-hhK);
$("#imCell_38").css("height",hK-hhK);
} //K3<<
</script>
.....................................................
.
... müssen Sie den Code in Schritt 3 in den Seiteneigenschaften einfügen, also in diesem Abschnitt:
>> Schritt 3 - Sitemap > 'Eigenschaften der Seite' Fenster > Funktionen im Bereich Erweitert >
▪Benutzerdefinierter Code: > 3. (dritte) Option > Vor dem </HEAD> Tag
...
ciao
.
.
Autor
Danke Daniel, das war der entscheidende Hinweis!:)
Ich glaube, damit hab ich das Thema erledigt und denke, dass es so passt für eine Freigabe.
Sollte dem nicht so sein, sehe ich mir gerne deine Lösung an KolAsim!
Bin begeistert von eurem tollen Support, Andreas, Daniel und KolAsim. Ganz ganz vielen Dank für eure Bemühungen. Werde den Thread dann noch als gelöst markieren.
ciao, ... OK ... (It > De) ... wie Sie es bevorzugen ...
... wenn und wenn Sie meinen exklusiven Code ausprobieren, werden Sie den großen Unterschied im Aspekt des Vollbildmodus verstehen...
... im Falle einer Klärung komme ich hierher zurück, ansonsten ist das in Ordnung und eine gute Fortsetzung der von Ihnen getroffenen Wahl...
.
ciao
.