Zwei verschiedene Home Seiten in einem Projekt
Autor: René M.
Besucht 518,
Followers 1,
Geteilt 0
Ist es überhaupt möglich zwei verschiedene Home Seiten (Desktop/Handy) im Responsive Teil zu erstellen (siehe Beilage)? Unter "Seiten/Responsive Einstellungen" habe ich den Textblock für die Desktop-Version und die Buttons für die 480px Version eingefügt. Leider sehe ich unter 480px nur den Textblock. Bei 994px habe ich nur den Textblock eingeblendet und die Buttons ausgeblendet, jedoch sieht man auf der Homepage den grossen Button "Top Weine" für das Handy trotzdem...
Besten Dank im Voraus für die rasche Hilfe.
Gepostet am
Ich habe mir gedacht, dass deine Art diese Seite zu gestalten nicht funktionieren wird, aber im vorigen Post hattest du ja nur gefragt wegen dem Menü auszublenden. Natülich musst du die mobilen Button dann in der Desktopvariante auch ausblenden. ISt aber sehr viel Code was du da einfügen musst um dies zu erreichen und sehr speziell.
Autor
Die Anforderung unter "Responsive Einstellungen" wäre konkret wie folgt (siehe Beilage):
a) Der Textblock sollte bei Auflösung 994px, 720px und 480px sichtbar sein. Unter 480px Hochformat (z.B Ansicht für iPhone) sollte er nicht sichtbar sein.
b) Die zwei Bilder sollten nur unter 480px Hochformat sichtbar sein (z.B. iPhone, nur Hochformat).
Wie muss ich hier die Einstellung mit ein- und ausblenden durchführen? Ich habe es schon auf verschiedenen Varianten ausprobiert, jedoch ohne Erfolg.
Siehe jetztiges Ergebniss unter: www.test2.wyabig.ch
Besten Dank im Voraus für die rasche Hilfe.
Bei a) ist es einfach, denn du musst nur in den "responsiven" Einstellungen das Text-Objekt eine Stufe vor 480px ausblenden mit dem Button "Objekt einblenden/ausblenden" !
bei b) ist es schwierig denn umgekehrt funktioniert die Methode nicht. Dazu müsstest du gleich in der Desktop Variante die 2 Bilder ausblenden und per CSS Code die zwei Bild-Objekte unter 480px wieder einblenden. Denn im Programm gibt es derzeit keine Möglichkeit. Der Code ist aber schwierig zu erklären denn das ist sehr individuell.
Autor
Das heisst mit anderen Worten, wenn man dies nicht mit einem CSS Code lösen kann, mir die ganze responsive Darstellung von keinem Nutzen ist? Ich müsste also für die Handy Version wieder ein neues Projekt erstellen und alles (Shop/Warenkorb) redundant führen?
Oder du machst eine 2. Startseite (versteckt) und lässt diese durch ein .htaccess Skript automatisch bei Handyversion umleiten auf die 2. Startseite. Müsste mit einem normalen (JAva) Skript auch funktionieren. Damals als wir noch zwei Projekte machen mussten hatte das auch funktioniert. Der Code ist aber im anderen Forum.
Autor
Okay, ich habe jetzt mal eine 2. Startseite vorbereitet. Nun funktioniert aber die interne Weiterleitung nicht. Ich habe unter "Inhalt des Headers" bei 480px (siehe Beilage) einen HTML Code hinterlegt, welcher die Umleitung auf die 2. versteckte Startseite "Home Mobile" führen sollte:
<script type="text/javascript">
if (screen.width < 480) {
window.location.href = "Home Mobile";
}
</script>
Leider funktioniert dieser Code nicht. Was mache ich falsch?
Home Mobile ist keine richtige URL !
Autor
Wie kann ich den korrekten Pfad für die Verlinkung an die 2. Startseite herausfinden?
z.B.
window.location.href = 'http://www.test2.wyabig.ch/home_mobil.html'
Hinten musst du natürlich deine Seite richtig reinschreiben.
Autor
Danke. Irgend etwas mache ich aber immer noch falsch. Mein erster Überlegungsfehler war vermutlich, den HTML Code im Header zu hinterlegen. Ich habe den Code jetzt bei der 1. Home Seite unter "Erweitert" hinterlegt (siehe Beilage). Nun muss aber noch ein Fehler im Code stecken, denn die interne Umleitung auf die zweite Home Seite funktioniert leider nicht.
Die Seite heißt ja HomeMobil. In der weiterleitenden Url aber Home_Mobil. Vieleicht muss der Unterstrich weg.
Gehe in die Seiteneingeschaften und schaue unten was dort für einen "NAmen der erstellten Datei" drinnen steht.
Autor
1. Ob mit Unterstrich oder ohne, es funktioniert in beiden Fällen nicht.
2. Wo genau soll der Name der Datei drin stehen (siehe Beilage)? Falls Du "Home Mobile" meinst, der steht ja bereit in meinem Code drin...
Autor
In der "Vorschau" wird der Name der zweiten Startseite für die mobile Version wie folgt angezeigt (siehe Beilage). Dieser Name steht auch in meinem HTML Code für die interne Umleitung so drin:
<script type="text/javascript">
if (screen.width < 480) {
window.location.href = "http://www.test2.wyabig.ch/Home_Mobile.html";
}
</script>
"Home_Mobile" habe ich auch schon mit kleinen Buchstaben und/oder ohne Unterstrich ausprobiert, jedoch ohne Erfolg. Entweder ist der Code falsch oder die Platzierung des HTML-Codes vor dem Header auf der ersten Home-Seite unter "Erweitert" ist falsch.
In deinem FAll steht "index.html" drinnen ! Ich sehe nirgends dass sie Home_Mobile.html heisst !
Autor
Mit "index.html" funktioniert die Umleitung leider auch nicht...
Dann reden wir aneinander vorbei? ISt der Screenshot von der Home Mobil Seite oder von der Startseite? Irgendetwas ist falsch in der bearbeitung.
Autor
Die zwei letzten Bilder sind von der 2. Home-Seite (Home Mobile). Dies ist eine versteckte, zweite Startseite, welche Du mir unter dem obenen stehenden Punkt 3 empfohlen hast. Hier geht es nochmals darum, dass ein iPhone mit >480px auf meine zweite Home-Seite (versteckt) per HTML Code umgeleitet wird. Die Umleitung sollte intern (im gleichen Projekt) und nicht an ein zweites Projekt durchgeführt werden (siehe Beilage). Der HTML Code müsste demnach in der ersten Home Seite unter "Erweiter" hinterlegt werden. Ich hoffe, somit alle Unklarheiten beseitigt zu haben :-)
P.S. Falls ich diese Umleitung nicht hinkriege, müsste ich wie früher mit zwei verschiedenen Projekten arbeiten und unsinnigerweise auch den Warenkorb doppelt führen...
Gut, du schaust ob du bei der Desktop-Startseite in den Eigenschaften unten die Datei "index.html" heisst ! Dann schaust du ob die Home Mobil in den eigenschaften "index2.html" oder "mobil.html" heisst. Wenn nicht dann musst du es ändern.
Dann kannst du den Code so schreiben.
window.location.href = "http://www.test2.wyabig.ch/index2.html";
oder
window.location.href = "http://www.test2.wyabig.ch/mobil.html";
Autor
Okay, das habe ich jetzt genau so gemacht. Als Resultat wird jetzt der HTML Code vor dem Header angezeigt (siehe Beilage)...
WEnn du nur die eine Zeile einfügst ist das klar ! Ich habe ja nur die eine Zeile rausgepickt die geändert werden muss und nicht den ganzen Code von oben genommen.