WebSite X5Help Center

 
Rosemarie H.
Rosemarie H.
User

Bild über ganzen Bildschirm  de

Автор: Rosemarie H.
Просмотрено 852, Подписчики 1, Размещенный 0  

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.)

Размещено
27 Ответы - 3 Полезно - 1 Корректно
Rosemarie H.
Rosemarie H.
User
Автор

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.)

Читать больше
Размещено От Rosemarie H.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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:

  • Simple Separator (Höhe: 700)
  • Titel
  • Text

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".

----------------------

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Andreas S.
Andreas S.
Moderator
Лучший пользователь месяца DE

Du musst die Ränder des Simple Separator Objekts links und rechts auf 0px stellen sonst wird ein Rand angezeigt.

Читать больше
Размещено От Andreas S.
Rosemarie H.
Rosemarie H.
User
Автор

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.

Читать больше
Размещено От Rosemarie H.
Andreas S.
Andreas S.
Moderator
Лучший пользователь месяца DE

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.

Читать больше
Размещено От Andreas S.
Rosemarie H.
Rosemarie H.
User
Автор

Hi Andreas, danke dir! Wie hast du das gemacht, bzw. kannst du mir deine Einstellungen zeigen?

Читать больше
Размещено От Rosemarie H.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Andreas S.
Andreas S.
Moderator
Лучший пользователь месяца DE

Bis auf weisse Hintergrundfarbe beim Text unten ist alles perfekt erklärt!

Читать больше
Размещено От Andreas S.
Rosemarie H.
Rosemarie H.
User
Автор

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:

Читать больше
Размещено От Rosemarie H.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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.

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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

-----

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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)

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

@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.

Читать больше
Размещено От Daniel W.
Andreas S.
Andreas S.
Moderator
Лучший пользователь месяца DE

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.

Читать больше
Размещено От Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

... 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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Rosemarie H.
Rosemarie H.
User
Автор

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?

Читать больше
Размещено От Rosemarie H.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

Änderung der Höhe des Content Sliders auf der Testseite.

Höhe: 800

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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

Читать больше
Размещено От Daniel W.
Daniel W.
Daniel W.
User
Лучший пользователь месяца EN

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)

Читать больше
Размещено От Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

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

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

... 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>

.....................................................

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Rosemarie H.
Rosemarie H.
User
Автор

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.

Читать больше
Размещено От Rosemarie H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Лучший пользователь месяца PT

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...wink

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪