"Layer" am rechten Bildschirmrand möglich in Mobirise?

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

"Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von inno »

Hallo, gibt es die Möglichkeit in Mobirise einen Layer wie im Screen mit einem Bild oder ICON zu platzieren, der immer im Vordergrund bleibt? Also auch beim Scrollen nach unten immer eine feste Position am Rand hat und sichtbar ist?
Dateianhänge
screen.jpg
screen.jpg (10.53 KiB) 470 mal betrachtet
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von Tommy Herrmann »

Du, da gibt es Tausend-und-eine Möglichkeit, fast keine sieht am kleinen Handy-Display gut aus, da sie alle viel zu viel Platz in Anspruch nehmen.

Man kann ja mit der CSS-Anweisung:

position: fixed;

... eben jedes Element auch fixieren. Das hat aber eben am Handy eventuell auch Nachteile, weil es meist zu viel Platz beansprucht.

Ich habe da einige Beispiel erstellt - finde sie aber gerade nicht - war vielleicht auch noch in meiner alten Software "NOF".

Hier mal ein Beispiel das fixiert ist, das ich aber als "Flyout" erst bei Mausüber aktiviere:

https://www.mobirise-tutorials.com/Busi ... t-Box.html


Ich bekomme heute Besuch und muss in die Küche. Bin für heute hier weg ...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ich habe jetzt mal ein Beispiel mit einer fixierten Social-Media Sidebar erstellt:

https://www.mobirise-tutorials.com/Tuto ... debar.html


Social-Media Sidebar in Mobirise.jpg


... oder so dann eben mit der Sidebar am rechten Bildschirmrand.

Dort habe ich dann auch noch diese rechte Position in der class="icon-bar" hinzugefügt:

right: 0;

Code: Alles auswählen

.icon-bar {
  position: fixed;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1000;
}


Social-Media Sidebar rechts in Mobirise.jpg



Wie Du die Sidebar am rechten Bildschirmrand hinzufügst, steht aber auch in meinem Tutorial beschrieben.

Hoffe, es kommt dem nahe was Du suchst.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von inno »

Auf jeden Fall! Bin gerade am Testen.
Kann ich die Icons auch durch eigene Bilder ersetzen?
Finde hier leider nichts https://www.mobirise-tutorials.com/Tuto ... debar.html
Grüße
... und wo kann ich das ICON dann in der mobilen Ansicht ausschalten (/* display: none; */)?
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von Tommy Herrmann »

ja - das sollte gehen - aber warum denn? Es gibt x verschiedene Icons dafür in Mobirise.

Dann müsstest Du wahrscheinlich dieses <span> Tag:

Code: Alles auswählen

<span class="fa fa-facebook"></span>
mit einem <img> Tag ersetzen, also so ähnlich (nicht getestet):

Code: Alles auswählen

<img src="https://www.DeineDomain.de/Bildverzeichnis/facebook.jpg" alt="Facebook" width="20" height="20">
Dann benötigst Du natürlich etliches aus der CSS von mir nicht, wie das "padding" für die Hintergrundfarbe usw. und bist dann aber auch nicht so flexibel bezüglich der Icongröße.


Das Ausblenden habe ich doch in meinem Tutorial beschrieben, dann also so:

Code: Alles auswählen

@media (max-width: 767px) { 
 .icon-bar a { 
  display: none;
 } 
}
display: none = Anzeige: keine


P.S.:

Ich werde jetzt aber mein Tutorial nicht neu schreiben, nur weil Du anstelle eines Icons nun plötzlich ein Bild willst. Das schaffst Du dann auch alleine - und ich empfehle das dafür auch nicht.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von inno »

Funktioniert alles, wie due es beschrieben hast! Vielen Dank für eine Hilfe!
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von inno »

Hi Tommy,
kann man die icon-bar bei der mobilen Ansicht um 50% verkleinern und nicht komplett entfernen?

Code: Alles auswählen

@media (max-width: 767px) { 
 .icon-bar a { 
  display: none;
 } 
}
Grüße
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von Tommy Herrmann »

ja klar - das habe ich bei mir so gemacht - also anstatt den Icons eine Breite ("padding") von 2 x 16px / 32px (am Desktop) zu geben, habe ich diese Breite am Handy auf 2 x 8px / 16px (bis zu einer Display-Größe von 767px) verkleinert, so erscheint dann diese Sidebar nur noch halb so breit:

Code: Alles auswählen

@media (max-width: 767px) {
  .icon-bar a {
    padding: 12px 8px;
  }
}

Media Anweisung Sidebar.jpg


Handy - Ansicht:


Sidebar am Handy.jpg
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: "Layer" am rechten Bildschirmrand möglich in Mobirise?

Ungelesener Beitrag von inno »

... Besten Dank! :tu:
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 17 Gäste