Jimdo-Elemente » Spaltenelement auf fullwidth

01.01.2021 11:13

Rupert
#1

Ru

Hallo
Vor kurzem habe ich eine Anleitung gefunden mit der man angeblich Elemente fullwidth anzeigen kann, ohne den Head bereich verändern zu müssen.

Laut Anleitung erstellt man einfach ein Spaltenelement mit nur einer Spalte, platziert darin z.B. ein Bild und als unterstes Element ein Widget/HTML Element mit folgendem Inhalt:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="f01">
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$('.j-module:has(.f01)').addClass('has-padding is-fullwidth has-custom-caption is-img-maxed');
});
})(jQuery);
//]]>
</script>
 

Oder man verpasst dem Spaltenelement einen farbigen Hintergrund, z.B. um einen Text mit einer bestimmten farbe zu hinterlegen.
Mit diesem Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="f02">
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
$( ".j-module:has(.f02)" ).wrap( "<div class='hs-fullwidth bg-primary color-white link-white white-outline-btn' />" );
});
})(jQuery);
//]]>
</script>
 

Habe beides ausprobiert, aber es funktioniert nicht.
Viel zum falschmachen gibt es ja nicht, deshalb frage ich mich woran es liegen könnte.
Vielleicht hat ja einer von euch eine Idee.

Gruß Rupert

Gruß Rupert

Antworten

Beitrag melden

#2

01.01.2021 14:03

az_
#2

az_

Hallo @Rupert,
...bitte immer das Copyright beachten! Der Autor dieser Programmierung (Matrix-Themes?) hat sie bestimmt nicht freigegeben! Sowas kann bös nach hinten losgehen, wenn man es einfach so kopiert, ohne zu verstehen, was da passiert.

LG, az

PS: wenn Du fullwidth-Spalenelemente mit eigenen Hintergründen anlegen möchtest, habe ich dafür ein Widget programmiert. Das kommt dann auch gleich mit den richtigen Skripten und funktioniert dann auch. Anfrage bitte per e-mail!

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

01.01.2021 19:37 (zuletzt bearbeitet: 01.01.2021 19:42)

Rupert
#3

Ru

Rupert

Hallo
Den Code kann man mit einem einfachen klick auf einen 'copy'-Button aus der Seite von Matrix-Themes kopieren,
deshalb habe ich mir ums kopieren jetzt wirklich keinen Kopf gemacht.
Natürlich hätte ich einen Link zur webseite gepostet, aber mir fehlen noch ein oder zwei Beiträge bis ich externe Links posten darf.

Gruß Rupert

Antworten

Beitrag melden

#4

02.01.2021 13:53

az_
#4

az_

Hallo @Rupert,
Poste doch bitte mal die Seite, wo der Copylink drauf ist. Da werden auch noch andere Hinweise zu finden sein, schätze ich. Sehr interessant! Ich wusste nicht, dass Matrix Teams die Skripte etc. freigegeben hat.

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

#5

02.01.2021 18:49 (zuletzt bearbeitet: 02.01.2021 23:52)

Rupert
#5

Ru

Rupert

Hi @az_
Es erscheint wirklich ganz simpel, mehr Hinweise gibt es nicht.
Nur den Vorschlag einen Fade-in-Effekt zu nutzen, aber das ist ja nicht ausschlaggebend.
Trotzdem klappt's nicht.

In die URL musste ich ein Leerzeichen ins '.com' einfügen, damit ich sie hier posten kann.

https://matrix-themes.com/2019/05/09/pla...idth-sections/#

Gruß Rupert

Antworten

Beitrag melden

#6

03.01.2021 00:27 (zuletzt bearbeitet: 03.01.2021 00:28)

az_
#6

az_

...das mit der URL habe ich korrigiert. Du kannst auch einfach https://... schreiben, dann klappt das schon.

Lösung für Dein Problem: Es fehlen die Skripte. Dazu musst Du ein matrix-theme kaufen, da sind die drin integriert. dann funktionieren auch die fullwidth-Elemente so, wie auf der Seite beschrieben.

Ich hab auch mal so etwas programmiert:
- https://redesign-rome-lc4.jimdofree.com/animationen/

...funktioniert ähnlich, und auf jedem Standard-Design. Braucht aber auch Skripte.

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