Design Plus 135 vorher und nachher - Teil 1

Auf dieser Seite werden die einzelnen Arbeitsschritte als Bilderfolge dargestellt. Zunächst geht es um die grundlegenden Anpassungen.

So sieht die Ausgangsversion der Designvorlage Plus 135 aus. Bei einer Bildschirmbreite von 1024 Pixel muss man leider nach rechts scrollen, sie ist also zu breit.

Wenn man alle Grafiken die zur Designvorlage gehören, deaktiviert, dann sieht das Design so aus. Außerdem wurden in einem ersten Schritt Gesamtbreite, Breite der Navigation und des Inhaltsbereiches und einige Höhenangaben angepasst und eine andere Schriftart aktiviert.

Dieses Bild zeigt das Design mit einem selbst über die Design-Einstellungen hinzugefügten Banner. Diese Banner Grafik hat eine Größe von 950x170 Pixeln. Um diese Grafik gut ausgerichtet zu positionieren mussten einige CSS-Einstellungen angepasst werden

Ganz neue Möglichkeiten ergeben sich, wenn man die Sitewide-Optionen nutzt, dann damit kann man auch HTML-Code einfügen. Ohne weitere CSS-Einstellungen werden Inhalte, die über Sitewide - Anfang jeder Seite eingefügt werden, direkt vor dem Inhalt der eigentlichen Textseite angezeigt.

Zunächst wurden zwei Platzhaltergrafiken eingefügt und mit negativen Vorgaben für den oberen und den linken Rand verschoben. Durch das Floaten stehen zwei getrennte Elemente nebeneinander.

Auch im unteren Teil der Seite wurde über die Sitewide-Einstellungen zusätzlicher HTML-Code eingefügt, der zunächt mit zwei Platzhaltergrafiken besetzt wurde. Leider ist es nicht möglich, diesen Bereich über die gesamte Seitenbreite zu auszudehnen, da es dann zu einem Konflikt mit dem Menübereich kommen könnte.

Die weiteren Bearbeitungsschritte kann man visuell auf der Fortsetzungsseite verfolgen.

Partnerwebsites

• SKYWALK-WEBDESIGN.DE
• FREEHOST-PROFI.DE
• Virtueller Reiseführer Bolivien
• Forum Paint.Net

Websites mit Mobirise

1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

$(document).ready(function($){
  var url = window.location.pathname;
  $('.navi_cont a[href="'+url+'"]').addClass('current');
});

<style>
  .current, a>.current, a.current   { color:yellow !important}
</style>