Full-Width Intro mit regulierbarer Höhe, Bild im Hintergrund und Overlay. Klicken Sie auf den Text, um ihn zu bearbeiten.
Mobirise verfügt über mehrere Themen, die Slider, Gallerien, Artikel, Counters, Countdowns, Full-Screen-Intros und viel mehr enthalten.
Ziehen Sie Blocks auf Ihre Seite, bearbeiten Sie den Inhalt und veröffentlichen Sie Ihre Website – da braucht keine technischen Fähigkeiten.
Mobirise ermöglicht Ihnen auch so viele Websites zu erstellen, wie Sie möchten.
Ich habe hier die aktive Navigation gelb markiert, indem ich in der ersten Zeile der Navi, im "section" Tag, das Attribut "global" entfernt habe und an dem jeweiligen Seiten-Link, anstelle der Bootstrap class="text-white", die class="text-success" vergeben habe.
Weiterhin habe ich den Hintergrund bei Hover geändert:
1) Class "navbar" das "padding" entfernt:
.navbar {
background: @menuBgColor;
transition: none;
min-height: 77px;
border-bottom: 2px solid #fff;
}
2) Class "nav-item" das "padding" geändert:
.nav-item {
& span {
padding-right: 0.4em;
line-height: 0.5em;
vertical-align: text-bottom;
position: relative;
text-decoration: none;
}
& a {
display: flex;
align-items: center;
justify-content: center;
padding: 2.2rem 0 !important;
margin: 0rem .65rem !important;
}
}
3) die Hover-Farbe auf gelb geändert:
.nav-link:hover, .dropdown-item:hover {
color: #ffbb33 !important;
}
4) und zusätzlich der Class "nav-item" bei Hover einen Transition-Effekt sowie eine Hintergrundfarbe gegeben:
.nav-item:hover {
transition: background-color 1.5s ease;
background-color: rgba(15, 118, 153, 1);
}
5) außerdem habe ich jedem <li> der jeweiligen aktiven Seite eine abgedunkelte Hintergrundfarbe mit 50% Deckkraft in Form dieser zusätzlichen class="activeMenu" gegeben:
<li class="nav-item activeMenu">
.activeMenu {
background-color: rgba(15, 118, 153, 0.5);
}
Siehe auch dieses weitere Beispiel für eine hervorgehobenen Navi Link.
Für eine Lösung mit JavaScript und globaler Menüleiste guckt auch hier.
Die weiße Linie unter dem Navi-Block habe ich hier lediglich als CSS-Anweisung der class:
.navbar {
border-bottom: 2px solid #fff;
}
hinzugefügt.
Mobirise verfügt über viele Blocks in vorhandenen Themes. Obwohl diese Blocks bereits voreingestellt sind, sie sind sehr flexibel.
Mobirise ermöglicht Ihnen auch so viele Websites zu erstellen, wie Sie möchten.
Veröffentlichen Sie ihre Webseite lokal, via FTP oder in Github Pages. Lassen Sie sich nicht auf nur eine Plattform nur eines Herstellers beschränken.
Ziehen Sie Blocks einfach auf Ihre Seite, bearbeiten Sie den Inhalt und veröffentlichen Sie Ihre Website – da braucht keine technischen Fähigkeiten.
Liste über "Code Editor"
Website Baukasten eignet sich ausgezeichnet für alle nicht technisch begabten, die sich nicht in die Webentwicklung einarbeiten wollen oder können oder aber auch für Designer, die visuell, ohne Code verändern zu müssen, arbeiten wollen. Es eignet sich aber auch für alle professionellen Coder, die schnell Prototypen oder kleine Projekte basteln wollen.
Die Hauptunterschiede zu herkömmlichen Tools:
* Minimalistisch, extrem einfach zu gebrauchendes Interface
* Mobile-freundlichkeit mit neuester Webseitentechnik und Webframes "out of the box"
* Kostenlos für kommerziellen und nicht kommerziellen Gebrauch