Docs
-
01. Grundlagen
-
02. Anpassungen
-
03. Support-Anfragen
Matrix Builder ist ein leistungsstarkes und flexibles Toolkit, das entwickelt wurde, um Ihre Jimdo-Website zu erweitern und individuell anzupassen. Es bietet eine einfache Möglichkeit, Ihre Website zu optimieren, indem es ein Menü einfügt, über das Sie benutzerdefinierte Widgets, Tools und JavaScript-Plugins problemlos verwalten und hinzufügen können.
Mit diesem Toolkit können Sie Drittanbieterdienste integrieren, zusätzliche Funktionen installieren und auf hilfreiche Dokumentationen zugreifen – alles an einem zentralen Ort.
Im Admin-Menü des Matrix Builders finden Sie einen Abschnitt mit dem Titel „Shortcodes“. Hier können Sie den Code eines beliebigen Widgets auswählen und kopieren und ihn in das Modul „Widget/HTML“ auf Ihrer Website einfügen. Diese Widgets können entweder als eigenständige Elemente verwendet oder innerhalb des Moduls „Spalten“ hinzugefügt werden.
Die Block-Elemente sind volle Breitenabschnitte, die mehr als ein benutzerdefiniertes Widget enthalten können.
Sie müssen ein eigenständiges Modul „Widget/HTML“ verwenden.
Die Block-Elemente können nur im eigenständigen Modul „Widget/HTML“ verwendet werden und können nicht innerhalb der Spalten verwendet werden.
Die fluid Abschnitte sind vorgefertigte, volle Breiten benutzerdefinierte Abschnitte, die den erweiterten Drag-and-Drop-Editor verwenden. Sobald Sie die Schaltfläche „Kopieren“ anklicken, indem Sie einen benutzerdefinierten Abschnitt auswählen, müssen Sie ihn im Modul „Text“ > HTML bearbeiten einfügen. Klicken Sie dann auf die Schaltfläche „Speichern“ und beginnen Sie mit der Bearbeitung mithilfe der Drag-and-Drop-Tools.
Die fluid Abschnitte wurden in der neuesten Version des Matrix Builders deaktiviert und sind derzeit nur in Matrix Themes (Eigenes Layout) verfügbar.
Dieser Abschnitt enthält zusätzliche JS-Plugins, die auf Ihrer Website verwendet werden können. Sie können ein Parallax-Widget, einen Instagram-Feed oder ein anderes Plugin je nach Bedarf installieren.
Alle Add-on-Widgets können im Modul „Widget/HTML“ bearbeitet werden.
In diesem Abschnitt des Matrix Builders finden Sie die folgenden Animationsfunktionen:
Animations
- Global Animations
- Custom Animations
- Folded Animations
- Custom Tag Animations
- Scroll Animations
- Sticky Animations
- Animated Links
- Animated Titles
- Animated Buttons
- Floating Animations
Die eigenen Widgets, einschließlich eines Fotos, können durch Ihr eigenes ersetzt werden.
Gehen Sie zu Eigenes Layout und wählen Sie den Tab Dateien.
Laden Sie Ihr eigenes Bild hoch.
Nachdem Sie Ihre Datei hochgeladen haben (der Dateiname wird in der Dateiliste angezeigt), klicken Sie mit der rechten Maustaste darauf, wählen Sie „Linkadresse kopieren“ und fügen Sie sie in das Widget/HTML ein.
...
<img src="https://u.jimcdn.com/cms/o/s572cf8a914c2631f/userlayout/img/matrix-teaser.jpg?t=1405356750" alt="" /
...
Einige der benutzerdefinierten Widgets im Matrix Builder verwenden Symbole aus dem Font Awesome Framework. Überprüfen Sie den folgenden Link für alle verfügbaren Symbole.
<div class="fa fa-gem fa-4x"> </div>
Symbolgröße
Um die Symbole größer zu machen, können Sie die folgenden Klassen verwenden:
fa-lx, fa-2x, fa-3x, fa-4x, fa-5x
Die andere Methode ist die Verwendung des Inline-Stils:
<div class="fa fa-gem" style="font-size:30px;"> </div>
Farben einstellen
Auf die gleiche Weise können Sie mit dem Inline-Stil die Farbe des Symbols ändern.
<div class="fa fa-gem" style="color:#ad1313;"> </div>
Die globalen Farbeinstellungen für benutzerdefinierte Widgets können im <Head>-Bereich Ihrer Website konfiguriert werden (Menü > Einstellungen > Kopfbereich bearbeiten).
<style>
/*<![CDATA[*/
/*** matrix builder config ***/
:root {
--bg-primary: #2157FA;
--bg-primary-light: #F1EEEE;
--bg-primary-dark: #1E2022;
--bg-secondary: #00ff91;
--bg-secondary-dark: #3B28CC;
--bg-gradient: linear-gradient(to right,var(--bg-primary), var(--bg-secondary));
--bg-btn-01:#2157FA;
--text-btn-01:#fff;
--body-class: ;
}
/*]]>*/
</style>
Für zusätzliche Farben können Sie auf die „Help classes“ zurückgreifen oder Inline-Stile verwenden.
Um die aktuellen globalen Farben, die auf Ihrer Website angewendet wurden, in der Vorschau anzuzeigen, verwenden Sie den folgenden Code im Modul „Widget/HTML“:
Style Guide
<div class="is-matrix bg-white br15 add-20" style="border:3px solid #F4F5F9;">
<h3 style="color:#333;">
Style Guide
</h3>
<div class="hr">
</div>
<br />
<div class="is-matrix gap-15 is-card is-flex is-flex-column center-align cc-clearover">
<div class="col-4 bg-primary color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-droplet fa-4x">
</div>
<p class="hs-center size-20 weight-600 add-top-10">
Color 1
</p>
<p>
bg-primary
</p>
</div>
</div>
<div class="col-4 bg-primary-light br15">
<div class="gutter-20 center-align">
<div class="fa fa-droplet fa-4x">
</div>
<p class="hs-center size-20 weight-600 add-top-10">
Color 2
</p>
<p>
bg-primary-light
</p>
</div>
</div>
<div class="col-4 bg-primary-dark color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-droplet fa-4x">
</div>
<p class="hs-center size-20 weight-600 add-top-10">
Color 3
</p>
<p>
bg-primary-dark
</p>
</div>
</div>
<div class="col-4 bg-secondary br15">
<div class="gutter-20 center-align">
<div class="fa fa-droplet fa-4x">
</div>
<p class="hs-center size-20 weight-600 add-top-10">
Color 4
</p>
<p>
bg-secondary
</p>
</div>
</div>
<div class="col-4 bg-secondary-dark color-white br15">
<div class="gutter-20 center-align">
<div class="fa fa-droplet fa-4x">
</div>
<p class="hs-center size-20 weight-600 add-top-10">
Color 5
</p>
<p>
bg-secondary-dark
</p>
</div>
</div>
</div>
<br />
<h3 style="color:#333;">
Button styles
</h3>
<div class="hr">
</div>
<br />
<a class="hs-button" href="#">Button Style 1</a><br />
<br />
<a class="hs-button br5" href="#">Button Style 2</a><br />
<br />
<a class="hs-button br500" href="#">Button Style 3</a><br />
<br />
<h3 style="color:#333;">
Typography
</h3>
<div class="hr">
</div>
<br />
<h1>
Large Heading H1
</h1>
<div class="c">
</div>
<h2>
Medium Heading H2
</h2>
<div class="c">
</div>
<h3>
Small Heading
</h3>
<div class="c">
</div>
<p>
This is a simple text, Vivamus quis mi. Curabitur a felis in nunc fringilla tristique. Donec posuere vulputate arcu. Nunc sed turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu
nisl dignissim dolor, a pretium mi sem ut ipsum.
</p>
<p>
This is a <a href="/" title="Home">simple link</a>.
</p>
<br />
<h3 style="color:#333;">
Custom widgets
</h3>
<div class="hr">
</div>
<br />
<div class="is-matrix is-card content-teaser bg-primary-light is--flex is-flex-block cc-clearover">
<div class="left-align col-8 add-20 cc-box">
<h3>
Make it Stand Out
</h3>
<p>
Premium Jimdo Theme coupled with advanced functionality and awesome support Aenean imperdiet. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna
dolor sagittis lacus.
</p>
</div>
<div class="right-align col-4 add-20 cc-box">
<a class="hs-button mid-round right-align" href="https://www.matrix-themes.com/" target="">learn more</a>
</div>
</div>
<br />
</div>
Sie können benutzerdefinierte globale Body-Klassen konfigurieren, um weitere Anpassungen für die standardmäßigen Jimdo-Elemente zu ermöglichen oder spezifische Stile zu ändern. Zum Beispiel können Sie, um das Matrix Builder Admin-Menü auszublenden, die Klasse is-white-label hinzufügen.
--body-class: is-white-label;
Für mehrere Body-Klassen trennen Sie diese einfach mit einem Leerzeichen.
--body-class: your-class another-class;
Jeder Admin-Bereich verfügt über ein Gästebuch, in dem Sie einen Kommentar oder eine Support-Anfrage hinterlassen können.
Der E-Mail-Support ist nur im Premium-Plan verfügbar.
Die Hilfsklassen (oder Utility-Klassen) sind benutzerdefinierte CSS-Klassen, die entwickelt wurden, um die Stile von benutzerdefinierten Widgets und Elementen zu ändern. Werfen wir einen Blick auf einige Beispiele:
Dies ist der Standardstil des 'Button'-Widgets, und seine Hintergrundfarbe wird durch die globalen Farben im -Bereich definiert.
<a class="hs-button" href="https://www.matrix-themes.com/" target="">Button</a>
Um es anzupassen, können Sie den Inline-Stil wie folgt verwenden:
<a class="hs-button" style="background:#3b28cc;border-radius:2px;font-size:16px;" href="https://www.matrix-themes.com/" target="">Button</a>
Und hier ist ein Beispiel, um die gleichen Stile mit den Hilfsklassen zu erstellen:
<a class="hs-button bg-pumpkin br2 size-16" href="https://www.matrix-themes.com/" target="_blank">Button</a>
In unserem zweiten Beispiel haben wir die folgenden Hilfsklassen verwendet:
bg-pumpkin - background: #D35400;
br2 - border-radius: 2px;
size-16 - font-size:16px;
Die Hilfsklassen können auf alle Widgets angewendet werden, um verschiedene Stile mit Abständen, Rändern, Farben usw. anzuzeigen. Die vollständige Liste der Hilfsklassen und weitere Beispiele finden Sie im Matrix Builder Menü > Helper classes.
Die Bild Alt-Klassen beziehen sich auf standardmäßig angepasste Jimdo-Widgets, bei denen keine Programmierkenntnisse erforderlich sind. Stattdessen können Sie das Feld „ALT-Text“ verwenden, um verschiedene Aspekte Ihrer Bilder zu bearbeiten, wie z. B. die Einstellung auf volle Breite, das Hinzufügen von Parallax-Effekten und das Anpassen des Wertes des Randradius. Diese Funktionen bieten eine benutzerfreundliche und intuitive Möglichkeit, das visuelle Design Ihrer Website zu verbessern, ohne Code schreiben zu müssen.
Für ein detaillierteres Tutorial mit Screenshots und Beispielen besuchen Sie bitte die Dokumentationsseite.
Documentation
Matrix-Variablen sind benutzerdefinierte Tags, die innerhalb der Spalten verwendet werden, um das gesamte übergeordnete Modul „Spalten“ zu ändern. Sie können beliebige Hintergrundfarben hinzufügen oder die Stile von Elementen ändern, die innerhalb der Spalten angezeigt werden.
Siehe die folgende Anleitung:
Zeigen Sie beliebige Inhalte innerhalb Ihres Moduls „Spalten“ an (Text, Bilder, Kontaktformular oder jedes andere Element).
Füge innerhalb einer Spalte das Modul „Widget/HTML“ mit dem folgenden Tag hinzu:
<var> hs-fullwidth bg-primary color-white </var>
Aktualisiere die Seite, um deine Spalten mit voller Breite, Hintergrundfarbe in Markenfarbe und weißem Text anzuzeigen. Du kannst es weiter anpassen, zum Beispiel deine Buttons oder andere Elemente.
Mit einer spezifischen Jimdo-Vorlage kannst du das Design vollständig anpassen, einschließlich des unterstrichenen Animationsmenüs und des großen Inhaltsbereichs.
So funktioniert es
Kopiere einen der untenstehenden Codes und füge ihn im Abschnitt „Kopfbereich bearbeiten“ ein (Menü > Einstellungen > Kopfbereich bearbeiten).
Die benutzerdefinierten Stile können nur für spezifische Jimdo-Vorlagen angewendet werden!
Malaga template
design kit
<style>
/* <![CDATA[ */
/*** Design kit for Malaga template ***/
.jtpl-header{-webkit-box-shadow:0 0 18px 1px rgb(0 0 0 / 10%);box-shadow:0 0 18px 1px rgb(0 0 0 / 10%)}.jtpl-section-main{margin:85vh auto 0;background:#fff;max-width:inherit!important}@media only screen and (max-width:745px){.jtpl-section-main{margin:45vh auto 0}.jtpl-background-area{position:absolute;height:45vh}}.jtpl-navigation,.jtpl-topbar-section{margin:0 auto;max-width:1170px}.jtpl-navigation .j-nav-level-1,.jtpl-navigation .j-nav-level-2{box-shadow:0 7px 11px 0 rgba(0,0,0,.2);border:0 solid #aaa;border:0 solid rgba(0,0,0,.1);min-width:180px;text-align:left}.jtpl-navigation .j-nav-level-2{border-left:none;left:-100%;top:-1px}.jtpl-navigation li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important;color:inherit!important}.jtpl-navigation .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation .j-nav-variant-nested a:after,.jtpl-navigation .j-nav-variant-nested a:before{position:absolute;-webkit-transition:all .35s ease;transition:all .35s ease}.jtpl-navigation .j-nav-variant-nested a:before{content:'';position:absolute;width:100%;transform:scaleX(0);height:2px;z-index:-1;bottom:0;left:0;background-color:currentColor;transform-origin:bottom right;transition:transform .4s cubic-bezier(.86, 0, .07, 1)}.jtpl-navigation .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation .j-nav-variant-nested .current a:before,.jtpl-navigation .j-nav-variant-nested a:hover:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:scaleX(1);transform-origin:bottom left}.jtpl-navigation .j-nav-variant-nested .current a:after,.jtpl-navigation .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation .jtpl-navigation .j-nav-level-2{left:-100%!important}.jtpl-breadcrumb,.jtpl-content,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-sidebar__inner{max-width:1170px}
/*]]>*/
</style>
Rome template
design kit
<style>
/* <![CDATA[ */
/*** Design kit for Rome template ***/
.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;margin:3px 20px!important}.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation__inner .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:all .35s ease;transition:all .35s ease}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;width:0%;content:"";background-color:currentColor}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation__inner .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%}.jtpl-navigation__inner .j-nav-variant-nested .current a:after,.jtpl-navigation__inner .j-nav-variant-nested a:hover:after{max-width:100%}#cc-inner .jtpl-navigation__inner .jtpl-navigation .j-nav-level-2{left:-100%!important}.jtpl-breadcrumb,.jtpl-content,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-sidebar__inner{max-width:1170px}
/*]]>*/
</style>
Prague template
design kit
<style>
/* <![CDATA[ */
/*** Design kit for Prague template ***/
.jtp-sidebar__inner,.jtpl-breadcrumb,.jtpl-content,.jtpl-footer__inner,.jtpl-header__inner,.jtpl-main__inner{max-width:1170px;border-radius:0;box-shadow:none}.jtpl-mobile-navigation__inner .j-nav-current>a:link,.jtpl-mobile-navigation__inner .j-nav-current>a:visited,.jtpl-mobile-navigation__inner .j-nav-parent>a:link,.jtpl-mobile-navigation__inner .j-nav-parent>a:visited,.jtpl-mobile-navigation__inner a:active,.jtpl-mobile-navigation__inner a:focus,.jtpl-navigation__inner .j-nav-current>a:link,.jtpl-navigation__inner .j-nav-current>a:visited,.jtpl-navigation__inner .j-nav-parent>a:link,.jtpl-navigation__inner .j-nav-parent>a:visited,.jtpl-navigation__inner a:active,.jtpl-navigation__inner a:focus{font-weight:inherit}.jtpl-breadcrumb{margin:0 0 10px}.j-website-title-content,.jtpl-navigation{padding:10px 0}.jtpl-navigation__inner li.jmd-nav__list-item-0{margin:5px 0;padding:0}.jtpl-navigation__inner li.jmd-nav__list-item-0>a{background:0 0!important;padding:0!important;font-weight:400;margin:3px 20px!important}.jtpl-navigation__inner .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation__inner .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation__inner .j-nav-variant-nested a:after,.jtpl-navigation__inner .j-nav-variant-nested a:before{position:absolute;-webkit-transition:all .35s ease;transition:all .35s ease}.jtpl-navigation__inner .j-nav-variant-nested a:before{bottom:0;display:block;height:2px;width:100%;content:"";background-color:currentColor;transform:scaleX(0);transition:.25s linear}.jtpl-navigation__inner .j-nav-variant-nested ul li ul a:before{height:0}.j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation__inner .j-nav-variant-nested .current a:before,.jtpl-navigation__inner .j-nav-variant-nested a:hover:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation__inner .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%;transform:scaleX(1)}.jtpl-navigation__inner .j-nav-level-1::before{left:50%;margin-left:0;border-left:none;border-top:none;opacity:0}.jtpl-navigation__inner .j-nav-level-1,.jtpl-navigation__inner .j-nav-level-2{border:none;border-top:none;padding:0}
/*]]>*/
</style>
Osaka template
design kit
<style>
/* <![CDATA[ */
/*** Design kit for Osaka template ***/
.jtpl-topbar-section{max-width:100%}.jtpl-title{margin:85px auto 50vh}.jtpl-logo,.jtpl-navigation{padding-left:20px;padding-right:20px}.jtpl-section-aside,.jtpl-section-main{max-width:1200px}.jtpl-navigation{box-shadow:none;padding:20px 0}.jtpl-navigation li.jmd-nav__list-item-0>a{background:0 0!important;padding:2px 0!important;margin:5px 20px!important}.jtpl-navigation li.jmd-nav__list-item-1>a,.jtpl-navigation li.jmd-nav__list-item-2>a{padding:10px!important;margin:0!important;border-color:transparent!important}.jtpl-navigation .j-nav-variant-nested *{box-sizing:border-box}.jtpl-navigation .j-nav-variant-nested a{padding:.2em 0;position:relative}.jtpl-navigation .j-nav-variant-nested a:after,.jtpl-navigation .j-nav-variant-nested a:before{position:absolute;-webkit-transition:all .35s ease;transition:all .35s ease}.jtpl-navigation .j-nav-variant-nested a:before{bottom:0;display:block;height:1px;width:0%;content:"";background-color:currentColor}.jtpl-navigation .j-nav-variant-nested ul li ul a:before{height:0}.jtpl-navigation .j-nav-variant-nested a:after{left:0;top:0;padding:.5em 0;position:absolute;content:attr(data-hover);color:currentColor;white-space:nowrap;max-width:0%;overflow:hidden}.jtpl-navigation .j-nav-variant-nested .current a:before,.jtpl-navigation .j-nav-variant-nested a:hover:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-current>a:before,.jtpl-navigation .j-nav-variant-nested ul li.cc-nav-parent>a:before{opacity:1;width:100%}.jtpl-navigation .j-nav-variant-nested .current a:after,.jtpl-navigation .j-nav-variant-nested a:hover:after{max-width:100%}.j-website-title-content:not(:empty):after,.j-website-title-content:not(:empty):before{background:0 0}.jtpl-navigation .j-nav-level-0>li>a:link,.jtpl-navigation .j-nav-level-0>li>a:visited{border-top-width:0}.jtpl-background-area{height:70vh}.jtpl-background-area:after{content:'';display:block;background:rgba(0,0,0,.4);position:absolute;top:0;left:0;margin-bottom:0;width:100%;height:100%}
/*]]>*/
</style>
Eine One-Page ist eine ideale Lösung, um schnell eine Landingpage zu erstellen oder ein neues Produkt zu präsentieren. Um diese Funktion zu nutzen, gehe in den Admin-Modus, blende die Jimdo-Navigation aus und füge dann ein Scroll-Menü als Widget oder HTML-Element in den Inhaltsbereich hinzu.
<style>
/*<![CDATA[*/
.cc-section {
margin-top: -100px;
padding-top: 100px;
}
.cc-section:first-child .section {
padding-top: 100px;
}
@media only screen and (max-width: 1023px){
.cc-section{
margin-top: 5px;
padding-top: 5px;
}
.cc-section:first-child .cc-section {
padding-top: 5px;
}
}
/*]]>*/
</style>
<!-- start scroll nav menu -->
<div class="hs-menu onepager draggable-header">
<nav>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#service">Service</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- end scroll nav menu --><div class="matrix-msg invisible">
One Pager menu
</div>
Wenn die Seite aktualisiert wird, erscheint das Menü direkt unter der Navigationsleiste. Es kann jedoch weiterhin an der gleichen Stelle bearbeitet werden, an der es ursprünglich hinzugefügt wurde.
Um Anker-Abschnitte hinzuzufügen, beginne jeden Abschnitt, indem du ein Modul „Widget/HTML“ mit dem folgenden Code hinzufügst, wobei „anchor-name“ die eindeutige Kennung für diesen Abschnitt ist. Dadurch wird ein verlinkbares Ziel für die Navigation innerhalb der Seite erstellt.
<div class="cc-section" id="home">
<span>Home</span>
</div>
<div class="cc-section" id="about">
<span>About</span>
</div>
<div class="cc-section" id="contact">
<span>Contact</span>
</div>
One-Pager und Jimdo-Vorlagen
Das Scroll-Menü ist mit allen Jimdo-Vorlagen kompatibel. Wenn du jedoch eine Vorlage mit einem vertikalen Navigationsmenü verwendest, musst du die zusätzliche Klasse 'is-vertical' zum 'onepager'-Element hinzufügen, damit es korrekt funktioniert:
<div class="hs-menu onepager is-vertical">
Um eine korrekte Funktionalität zu gewährleisten, sollte der Versatz der Anker-Abschnitte eng mit der Höhe des Headers übereinstimmen. Standardmäßig ist der Versatz auf 100px eingestellt. Um diesen Wert anzupassen, kannst du den folgenden Teil des Codes separat für Desktop- und Mobilgeräte bearbeiten:
<style>
/*<![CDATA[*/
.cc-section {
margin-top: -100px;
padding-top: 100px;
}
.cc-section:first-child .cc-section {
padding-top: 100px;
}
@media only screen and (max-width: 1023px){
.cc-section{
margin-top: 5px;
padding-top: 5px;
}
.cc-section:first-child .cc-section {
padding-top: 5px;
}
}
/*]]>*/
</style>
Externe Seiten
Um externe Seiten in dein Scroll-Menü einzufügen und deine Navigation auf andere Seiten deiner Website zugänglich zu machen (z. B. Datenschutzrichtlinie, 404-Seite, Sitemap, Blogbeiträge usw.), musst du die vollständige URL deiner Website hinzufügen und das Scroll-Menü in der Fußzeile/Seitenleiste deiner Website platzieren.
<li>
<a href="https://www.matrix-themes.com/#home">Home</a>
</li>
Das Problem mit JS
Die Datei 'matrix-builder.js' enthält die neueste Version von jQuery. Wenn du eine andere Version derselben Bibliothek verwendest, könnte es zu einem Konflikt zwischen den beiden Bibliotheken
kommen.
Lösung: Entferne alle jQuery-Bibliotheken von deiner Website, außer derjenigen, die im 'matrix-builder.js'-Bundle enthalten ist.
Documentation
| bg-primary | |
| bg-primary-light | |
| bg-primary-dark | |
| bg-secondary | |
| bg-secondary-dark |
| body | |
| top-header | |
| top-header-inner | |
| header | |
| header-inner | |
| navigation-inner | |
| navigation color | |
| dropdown background color | |
| content |
| background | |
| text color | |
| link color | |
| horizontal line |
| style 1 | |
| style 2 | |
| style 3 | |
| text color |
| background color | |
| navigation color |
| social icons | |
| top header border | |
| header border | |
| nav inner border |
| Template configurations | |
|
|
| Top header inner | |
| Header inner | |
| Navigation inner | |
| Navigation styles | |
| snip-nav --line01 | |
| Sub-menu (breadcrumbs) styles | |
| size-15 | |
| Mobile Navigation styles | |
| size-30 | |
| Content styles | |
| form-white | |
| Footer styles | |
| o-form color-white | |
| Footer background image | |
|
Typography |
|
| Heading H1 | |
| weight-400 | |
| Heading H2 | |
| weight-400 | |
| Heading H3 | |
| weight-400 | |
| Buttons | |
| weight-400 | |
| Advanced settings | |
| Custom CSS | |
|
#cc-inner .my-class { color:#f0f0f0; }
|
Note: All changes made here will be applied to your entire website.
stoobz (Thursday, 28 July 2022 22:43)
Hey hello, I wanted to place a message on top, that I am away on vacation. I put it with the social Media icons into the footer, so that it shows up on top.
And it works, but only for the desktop-version.
On my mobile it appears in the footer.
</style><div class="hs-social left-align new-social small-social size-11 is-circle-border link-bright is-rounded hs-magic">
<font size="4" color="white"><marquee width="600" height="25">Hallo ihr Lieben - wir machen kurz Sommerferien und sind ab dem 18.8.2022 wieder für euch da ;)</marquee></font> <a href=
"https://www.pinterest.de/stubenrauchhamburg/" target="_blank" class="fa fa-pinterest fa-2x add-right-5"></a>
</div>
<div class="only-mobile">
<font size="3" color="white"><marquee width="300" height="25">Hallo ihr Lieben - wir machen kurz Sommerferien und sind ab dem 18.8.2022 wieder für euch da ;)</marquee></font>
</div>
Can you please tell me what I am missing? THanks alot in advance!!
Cheers,
stoobz.
Matrix themes (Friday, 01 July 2022 18:18)
@Stefan B
https://www.matrix-themes.com/support/documentation/#link8
or in Matrix Theme menu >Quick setup
Stefan B. (Friday, 01 July 2022 13:53)
Hello,
how can I move my logo so that it appears in the upper left corner of my website and will then appear within the navigation bar?
Matrix themes (Wednesday, 06 October 2021 10:01)
@Erika no, it's not possible
Erika B. (Wednesday, 06 October 2021 01:38)
Hallo,
thank you for the previous support.
Can you tell me please if it 's possible to get the WHOLE contact page in one color ( not only the header ) , except the contact "window" ( which can stay white ). Have it seen so many times on th internet. And I wonder if it's possible in here.
My theme is New York by the way.
Thank you for you help.
Best Greetings
Matrix themes (Monday, 04 October 2021 09:55)
@Erika https://help.jimdo.com/hc/en-us/articles/115005538586
Erika B. (Monday, 04 October 2021 04:05)
Hallo,
the hero pictures of my website are not responsive on the mobile version/ I see only one part of them. What could be wrong?
Matrix themes (Wednesday, 27 January 2021 22:51)
@Carsten the class lazy should be used for a single module or widget and never for the whole website
Carsten Mueller (Wednesday, 27 January 2021 14:05)
There is LazyLoad installed on our website. Is it working for the whole website, or do we need to add an attribute to every picture to have it function?
Thank you.