Element auf jeder Seite immer am gleichen Ort

22.03.2018 20:31

sgrafik
#1

Ich möchte gerne auf der Seite ein Element (Bildmarke mit evtl. einem Link) einsetzen, das auf allen Seiten immer am gleichen Ort erscheint (>unten links), ähnlich wie der Hilfe-Button bei Jimdo

Ich hoffe ihr versteht was ich meine - Kann mir da jemand helfen?
Vielen Dank
SG

Antworten

Beitrag melden

#2

23.03.2018 12:24 (zuletzt bearbeitet: 23.03.2018 12:24)

...das ist relativ einfach: setze das Element in die Sidebar, dann erscheint es auf jeder Seite. Dann brauchst Du es nur noch zu positionieren. Dazu kannst Du den Container des Elementes mit position:absolut; oder fixed; aus der Sidebar befreien.

Noch eleganter ist es, wenn Du ihn mit jQuery verschiebst: Google mal nach ".appendTo"

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#3

24.03.2018 12:23 (zuletzt bearbeitet: 25.03.2018 18:03)

sgrafik
#3

sgrafik

Vielen Dank! hat mir schon recht geholfen ...

Zitat
Noch eleganter ist es, wenn Du ihn mit jQuery verschiebst: Google mal nach ".appendTo"

soviel Wissen bringe ich leider nicht mit ... die Suche bringt mir viele Infos - aber verstehen tu ich nichts ...

Work in Progress
mit folgendem Versuchs-Code habe ich aber noch kleine Probleme - wie bringe ich die noch weg?

1
2
3
4
5
6
7
8
9
10
 
<iframe src="https://image.jimcdn.com/app/cms/image/transf/dimension=1000x10000:format=png/path/s901bbc630718c617/image/ieff9fa7c6bf1c8b6/version/1521889232/image.png" 
scrolling="no" 
style="border: none; 
  overflow: none; 
  width: 33%; 
  position: fixed;
  top: 40px; 
  left: 5px; 
  z-index: 9999;�>
</iframe>
 

- wieso erscheint mir eine Lupe und das Logo ist vergrösserbar? sollte nicht sein
- wieso überdeckt das Logo in der Mobilen Ansicht die Navigation, sodass diese nicht mehr anwählbar ist?

Vielen Dank!
LG
SG

Antworten

Beitrag melden

#4

25.03.2018 19:11 (zuletzt bearbeitet: 25.03.2018 19:19)

az_
#4

az_

...den iframe brauchst Du nicht.

- nimm ein Jimdo-Standardbildelement.
- dieses setzt Du als erstes Element in die Sidebar deiner Seite
- im Ansuchtsmodus klickst Du auf dieses Element mit der rechte Maustaste und wählst "Element untersuchen" (Chrome)
- jetzt holst Du Dir die ID des Elementes:

- die nimmst Du jetzt (statt "#123456789") mit einer Raute davor als ID-Bezeichner für das CSS und das JS-Skript.

Beispiel (s. https://designtest-tokyo.jimdo.com/) - hier habe ich ein "Bild mit Text"-Element benutzt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 

<style type="text/css">
	/*<![CDATA[*/
	
	#cc-m-11853479657 {
		position: absolute;
		top: 150px;
		z-index: 9999;
		color: white !important;
		text-align: center;
	}
	
	#cc-m-11853479657 img {
		max-width: 150px;
		-webkit-border-radius: 150px;
		-moz-border-radius: 150px;
		border-radius: 150px;
	}
	
	/*]]>*/
 
</style>
 
<script type="text/javascript">
	//<![CDATA[
	
	$('#cc-m-11853479657').appendTo('.jtpl-logo').addClass('pseudologo');
	
	//]]>
 
</script>
 
 

Die Skripte kannst Du entweder als html-Widget hinter dem Element (...auch in der Sidebar) anordnen oder in den head-Bereich Deiner Webseite einsetzen.

Ggf. musst Du das CSS für mobile Ansichten noch anpassen. Google dafür nach "@media (max-width: 767px)"

LG, az

PS: Schrift-Logos sind nicht unbedingt empfehlenswert

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html