Bei Malaga gibt es eigentlich kein Header, vermutlich hast einen Slider eingebaut, versuch es doch mal mit Miami, Stockholm, Rome, Zürich, da gibt es standart einen Header, diese Vorlagen kann man auch per CSS programmieren, ( Headerhöhe, Breite, usw. ) poste doch mal die URL

OK, veruche folgenden Code:

<style type="text/css">
/*<![CDATA[*/
/* Slider volle breite */

#cc-m-11011442752 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
top:-50px;
}
.cc-m-gallery-slider ul img {
height: auto !important;
}
/*]]>*/
</style>

#cc-m-11011442752 ist die ID deines Sliderelements, mit dem top:-50px; kannst den noch nach oben schieben wenn erwünscht mit entsprechenden px

Der Code passt nur auf das Sliderelement deiner Webseite, ( fügst du z. Beispiel einen zweiten Slider ein, hat dieser wieder eine andere ID ) jedes Element hat eine Andere ID ( rot Markiert oben ) füge den Code mal ein im Head auf deiner Seite unter dem Code für die Verbreiterung, kann nichts passieren. das top-50 kannst auch auf null stellen oder ändern:

Code angepasst:


<style type="text/css">
/*<![CDATA[*/
/* Slider volle breite */

#cc-m-13897522727 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
top:-0px;
}
.cc-m-gallery-slider ul img {
height: auto !important;
}
/*]]>*/
</style>
PS: ich hatte im ersten Code die ID von einer Testseite ohne realen Inhalthttps://kilios.jimdofree.com/ drinnen, vergessen zu ändern, kannst du mal anschauen, 2. Element auf Startseite.

liegt vermutlich an den Bildern, zu klein, sollten ca 1950 px breit sein, sind nur etwa 1300 px breit, die vor- rückwärtspfeile sind jedenfalls am Bildschirmrand

Zitat von R. Hurni im Beitrag #6

---

Der Code passt nur auf das Sliderelement deiner Webseite, ( fügst du z. Beispiel einen zweiten Slider ein, hat dieser wieder eine andere ID ) jedes Element hat eine Andere ID ( rot Markiert oben ) füge den Code mal ein im Head auf deiner Seite unter dem Code für die Verbreiterung, kann nichts passieren. das top-50 kannst auch auf null stellen oder ändern:

Code angepasst:


<style type="text/css">
/*<![CDATA[*/
/* Slider volle breite */
@media (min-width: 768px) {
#cc-m-13897522727 {
width: 100vw;
left: calc(-50vw + 50%);
position: relative;
padding: 0px;
top:-0px;
}
.cc-m-gallery-slider ul img {
height: auto !important;
}
/*]]>*/
</style>
PS: ich hatte im ersten Code die ID von einer Testseite ohne realen Inhalthttps://kilios.jimdofree.com/ drinnen, vergessen zu ändern, kannst du mal anschauen, 2. Element auf Startseite.

---

Da steht viel Arbeit dahinter.

habe hier noch einen Code gebastelt für Malaga betreff Navi, kannst mal einfügen, vielleicht hilft das;

<style type="text/css">
/*<![CDATA[*/

.jtpl-content, .jtpl-header, .jtpl-navigation, .jtpl-sidebar {margin: 0 none!important;max-width:none!important;}
.jtpl-navigation__inner {display: block; min-width: 90%!important;margin: 0 auto;}
.jtpl-section {padding-left: 50px!important; padding-right: 50px!important;}
.jtpl-topbar-section{display: block; min-width: 90%!important;margin: 0 auto;}
.jtpl-section {padding-left: 50px!important; padding-right: 0px!important;}

/*]]>*/
</style>

Pfeile und mehr findest du HIER:
den Code dafür kopieren und im Text in HTML einfügen

Design Zürich wäre auch interessant, um Unternavis direkt anzuzeigen,
MUSTERSEITE

für die anderen Fragen später

"zu den vier Bildern auf der Testseite":
der Code für vier Spalten, Inhalt einfügen in die Spalten, Text/Bilder, usw.

füge diesen Code auf der entsprechenden Seite ein,

<style type="text/css">
/*<![CDATA[*/
/*Element 4-spaltig*/

#cc-matrix-xxxxxxxxxx {
background-color:#ffffff; border:rgb(146, 197, 122) 1px solid; padding: 15px 15px 15px 15px; border-radius: 0px 0px 0px 0px; margin-bottom: 20px;}

#cc-matrix-xxxxxxxxxx {
background-color:#ffffff; border:rgb(146, 197, 122) 1px solid; padding: 15px 15px 15px 15px; border-radius: 0px 0px 0px 0px; margin-bottom: 20px;}

#cc-matrix-xxxxxxxxxx {
background-color:#ffffff; border:rgb(146, 197, 122) 1px solid; padding: 15px 15px 15px 15px; border-radius: 0px 0px 0px 0px; margin-bottom: 20px;}

#cc-matrix-xxxxxxxxxx {
background-color:#ffffff; border:rgb(146, 197, 122) 1px solid; padding: 15px 15px 15px 15px; border-radius: 0px 0px 0px 0px; margin-bottom: 20px;}

/*]]>*/

</style>

mach einen Rechsklick in die Spalte in der Vorschau oder ausgeloggt,am einfachsten Seite nochmal öffnen, dann Element untersuchen, fahre mit der Maus nach oben/unten bis sich die Spalte markiert, da findest du #cc-matrix-xxxxxxxxxx , kopiere die ID und füge diese in den 1. Code ein, usw..
wenn du mehr oder weniger Spalten hast ergänze den Codeinhalt, der hier ist jetzt für vier Spalten.


"zum grünen Balken auf Testseite":

füge ein neues Spaltenelement ein z.B. mit 1 Spalte und füge den Text mittig ein.

<style type="text/css">
/*<![CDATA[*/
/* textstreifen grün */
#cc-matrix-3025907152{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;


background: #003366;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


/*]]>*/
</style>

da musst wie oben die ID des Elements suchen, mit diesem Code wird der gesammte Inhalt Seitenbreit dargestellt.


einfach ausprobieren, viel Spass

habe nochmals am Code für die Navi, Vorlage Miami gearbeitet (gebastelt ) , ist extrem schwierig bei dieser Vorlage, füge den mal zusätzlich ein, kann nichts schief gehen.

<style type="text/css">
/*<![CDATA[*/

.jtpl-content, .jtpl-header, .jtpl-navigation, .jtpl-sidebar {margin: 0px; !important;max-width:none!important;}
.jtpl-navigation__inner {display: block; min-width: 80%!important;0 auto!}
.jtpl-section {padding-left: 50px!important; padding-right: 50px!important;}
.jtpl-topbar-section{display: block; max-width: 90%!important;margin: 0 auto;}
.jtpl-section {padding-left: 0px!important; padding-right: 0px!important;}
.jtpl-navigation {
position: fixed;
top: 40px;
right: 100px;
width: 75%;
z-index: 999999;
border-bottom: 1px solid #006699;
}
/*]]>*/
</style>

TESTSEITE mal mit deinem Logo

Tokyo wird auch Probleme bringen, da du so viele Seiten hast, füge doch mal den Code oben ein und schaue was passiert, ich würde bei einem Layout bleiben mit Aufklappmenü, habe hier mal eine Testseite ein wenig abgeändert mit etwa gleich viel Seiten wie du hast, Vorlage Rome, nur Startseite relevant, kannst mal anschauen, wird demnächst wieder geändert:
TESTSEITE

zu#14, das ist ein Verschreiber, ist natürlich für Malaga,
zu #16, könnte man auch weniger hoch machen, der Content ist verbreitert, die Schrift "Herzlich willkommen" habe ich mit H3 gemacht, mit eigener Programmierung, mit Schatten und kleiner in responsiver Ansicht, die Sprungmarke könnte man auch mit einem Bild oder anderem Pfeil machen, mit einem realen Button wird das schwierig. HEADERBILD KLEINER
Die Navi habe ich hier so, dass diese beim scrollen verschwindet und beim nach oben scrollen wieder erscheint, ist nicht standart.

welchen Browser nutzt du ?, mit Edge geht das meistens nicht, nimm Firefox oder Chrome. dann ein rechtsklick in die Spalte, dann geht der gesammte CSS-Bereich auf, fahre dann mit der Maus ein wenig nach oben oder unten bis sich das gewünschte Element komplett markiert, dort findest du die ID "cc-m-xxxxxxxxxxxxx" diese elfstellige Zahl fügst du in den Code ein, bei nur ein Textfeld müsstest du im Code #cc-matrix-xxxxxxxxx löschen und diese #cc-m-xxxxxxxxxxx und diese ID nehmen. Du musst die ID notieren, dann im Code einfügen, kann man nicht einfach kopieren.

für eine einzelne Spalte in einem Spaltenelement brauchst du diese ID #cc-matrix-xxxxxxxxx
klingt ein wenig kompliziert, wenn man es mal kennt ist es aber einfach

Die Hintergrundfarbe kannst du im Code ändern:

background: #003366;

für mehr Abstand kannst du am einfachsten im Text oben und unten einen Zeilenumruch einfügen

die Schrifthöhe und Textfarbe kannst du einfach im Texeditor bestimmen

diese Codes passen für alle Vorlagen die keine Seitennavi haben.

Habe hier mal ein Beispiel bei deinem Textelement "Liebe Mitglieder, liebe Sportfreunde, ....................." auf der Startseite gemacht mit einem leichten grau (Text mittig ausrichten),
füge mal diesen Code auf deiner Startseite im Head ein:

<style type="text/css">
/*<![CDATA[*/
/* textstreifen Test */
#cc-m-13895118927{
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;


background: #eeeeee;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


/*]]>*/
</style>

Es ist manchmal schwierig, bei Jimdo, je nach Inhaltselemet muss man die Codes wieder neu anpassen,

richte mal den Text mittig aus.


hier noch ein Tip:
wenn du einem Textfeld nur eine Hintergrundfarbe mit Rahmen geben möchtest, füge diesen Code im Textfeld unter HTML bearbeiten vor dem Text ein:

<div style="background-color: #eeeeee; border: #003366 1px solid; padding: 18px; border-radius: 6px 6px 6px 6px;">

die Werte kannst du einstellen

TESTSEITE