Webseiten werden heute öfter auf mobilen Endgeräten angeschaut, als am Desktop. Divi bietet schon ein grandioses Responsive Design, bei dem das Layout automatisch auf die verschiedenen Displaygrößen dargestellt wird. Bei größeren Webseiten macht ein Hamburger-Menü auch Sinn, doch wollte ich bei meiner neuen Webseite eine Art App-Erlebnis schaffen mit einem Symbol-Menü am Ende der Seite, so wie wir es gewohnt sind von Smartphone-Apps.

In diesem Tutorial zeige ich die Grundschritte, die nötig sind, um eine mobile App-Version einer Divi-basierten Webseite zu erstellen.

Vorbereitung

Als erstes benötigen wir ein neues Menü, das nur für die mobile Ansicht gilt. Öffne hierzu im Backend Design/Menüs und klicke auf „erstelle ein neues menü“. Als Namen habe ich das Menü „mobile app nav“ genannt, um es später leichter zu bearbeiten.

Da ein Smartphone nur begrenzt Platz in der horizontalen Ansicht bietet, sollten wir uns auf max. 4 bis 5 icons beschränken. Die entsprechenden Menülinks können schon hinzugefügt werden. In meinem Fall waren das „home“, „portfolio“, „kontakt“ und „anruf“.

Icons

Für die Icons greifen wir auf die Standardsymbole von Elegantthemes zurück. Eine detailierte Auflistung aller Symbole und wie diese auch im Content eingebunden werden können gibt es hier: The Elegant Icon Font
Natürlich können auch eigenen Fonts oder Bilder verwendet werden. Der Freiheit sind keine Grenzen gesetzt und so kann jede Webseite den individuellen Bedürfnissen angepasst werden.

Es gibt mehrere Möglichkeiten diese zu gestalten. In diesem Beispiel habe ich jedem Link-Namen einen span-tag mit einer eigenen Klasse vorangesetzt, um diese per css später leichter zu bearbeiten.

Bei „Anruf“ habe ich einen „individuelln Link“ gewählt und als URL „tel:+12345…“ einetragen. Hier kann jede beliebige Telefonnummer eingetragen werden. Das Smartphone erkennt dies und wählt bei Klick automatisch die eingegebene Nummer.

Icon Font einbinden –
NUR WENN DIVI NICHT VERWENDET WIRD

Falls ein anderes Theme als Divi verwendet wird, kann der heruntergeladene Font in jedes andere Theme eingebunden werden. Hierzu ladest du den Font hier runter. Entpacke das Zip und lader mittels ftp den font-Folder „fonts“ aus dem Verzeichnis HTML-CSS in das Verzeichnis deines Child Themes. Im Zip-File befindet sich außerdem ein styles.css. Nenne diese Datei um in elegant-icons.css und lade auch diese Datei in das Verzeichnis deines Child-Themes. Nun füge noch folgenden Code in die functions.php ein:

function elegant_icon_styles() {
wp_enqueue_style( 'elegant-icon-style', get_stylesheet_directory_uri() . '/elegant-icons.css', '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts', 'elegant_icon_styles');
CSS Code für Symbole

Den folgenden CSS-Code habe ich über „Design/Editor“ in die „styles.css“ meines Child Themes eingefügt. Sollte kein Child Theme vorhanden sein, kann dieser Code auch über die „Divi-Theme-Options“ in „Custom CSS“ eingefügt werden. Die Angaben im Bereich „content:“ stellen den Unicode für die Symbole dar (siehe The Elegant Icon Font ).

/*---globale Einstellungen für alle Symbole---*/
.ff_icon_house::before, 
.ff_icon_contact::before, 
.ff_icon_portfolio::before, 
.ff_icon_phone::before {
 position:relative;
 font-family: 'ETmodules';
 font-size: 1.8em;
 display: block;
 line-height: 0.1em;
 }
.ff_icon_house::before {
 content: "\e074"; /*Haussymbol*/
 }
 .ff_icon_portfolio::before {
 content: "\e072"; /*Glühbirnensymbol*/
 }
.ff_icon_contact::before {
 content: "\e076"; /*Umschlagsymbol*/
 }
.ff_icon_phone::before { 
content: "\e090"; /*Telefonhörersymbol*/
}

Navigation auf Seiten platzieren

Als nächstes benötigen wir einen Platz für die Navigation. Hierzu öffnen wir eine Seite, auf der später die mobile Navigation zu sehen sein soll. Unten am Ende, an letzter Stelle der Seite, erstellen wir eine „Fullwidth Section“ mit einem „Fullwidth Menu“ Modul. Beim „Fullwidth Menu Modul“ wählen wir unter „General Settings“ unser „mobile app nav“ aus, das wir zu Anfang erstellt haben.

Die „Fullwidth Section“ wandeln wir mit einem Rechtsklick in ein „Globales Element“ um (Farbe ändert sich in Grün), damit wir das Menü auf allen Seiten aus der Divi-Bibliothek platzieren können, es aber nur einmal anpassen müssen. Als letztes weisen wir dieser Sektion noch eine eigene „CSS-ID“ zu, damit wir das aussehen und Verhalten bearbeiten können. In meinem Falle habe ich die ID „ff-mobile-nav“ gewählt.

CSS Code für das mobile menü

Nun benötigen wir wieder CSS-Code, den ich über „Design/Editor“ in die „styles.css“ meines Child Themes eingefügt habe, bzw. kann dieser Code auch über die „Divi-Theme-Options“ in „Custom CSS“ eingefügt werden.

Als erstes blende ich das mobile menü komplett aus. Es soll ja nur auf der mobilen Seite sichtbar sein, dazu benötigen wir die zuvor festgelegte „ID“ der „Fullwidth Section“:

#ff-mobile-nav {
 display: none;
}

Der folgende CSS-Code definiert das Aussehen der App-Navigation mit Abständen und Farben, wie es auf meiner Seite www.flyingfox-web.com zu sehen ist. Die einzelnen Werte können und sollen natürlich den eigenen Bedürfnissen angepasst werden.

/*-ausblenden des mobilen Hamburgermenüs-*/
#ff-mobile-nav .et_mobile_nav_menu {
 display: none;
}
/*-einblenden des normalen Menüs-*/
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav { 
display: block !important; 
}
/*-Abstände und Höhe der Box ul li-*/
#ff-mobile-nav .et_pb_fullwidth_menu .et_pb_row {
 min-height: 50px;
}
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav > ul.upwards > li {
 padding-top: 20px;
}

#ff-mobile-nav .fullwidth-menu li > a { padding-bottom: 0; }
/*-Spalte / Row Mobiles Menü auf volle Displaybreite-*/
#ff-mobile-nav.et_pb_fullwidth_section .et_pb_row {
 margin: 0 !important;
 padding: 2px 0 5px !important;
 width: 100%;
}

/*-Section Mobiles Menü auf volle Displaybreite und feste Position-*/
#ff-mobile-nav {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9999999;
}
/*-Abstand des Textes zum Symbol-*/
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav > ul.upwards {
 padding: 0 0 2px !important;
}
/*-gleichmäßige Verteilung der Icons auf volle Breite-*/
#ff-mobile-nav .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-flow: row wrap;
 flex: 1 1 60%;
 /* Android 2.3 understands the first declaration and ignores the second */
 justify-content: space-between;
 /* Modern browsers overwrite the first declaration with the second */   
 justify-content: space-around;
padding: 20px 0 0 !important; }
/*-Schriftgröße und zentriert-*/
#ff-mobile-nav .fullwidth-menu li {
    display: inline-block;
    font-size: 14px;
    text-align: center;
    padding-right: 0;
}
/*-Linkfarbe-*/
#ff-mobile-nav ul li.current-menu-item a, #ff-mobile-nav ul li.current-menu-item a:hover{
 color: rgba(209, 0, 90, 1) !important;
}
#ff-mobile-nav .et_pb_bg_layout_dark.et_pb_fullwidth_menu ul li a:hover {
 color: rgba(255, 255, 255, 1);
}
#ff-mobile-nav .fullwidth-menu a:hover {
 opacity: 1;
}

Einblenden der Navigation – Media Queries

Zum schluß müssen wir der Seite nur noch beibringen, ab welcher Displaygröße die normale Seitennavigation ausgeblendet werden soll und ab wann unsere App-Navigtaion angezeigt werden soll. Hierzu benötigen wir die Media Queries unseres Themes, welches definiert ab wann welches Device welche CSS anzeigt. Kopiere den folgenden CSS code und füge ihn am Ende deiner „styles.css“ ein.

Wenn nur Smartphones in Portrait- und Landscapemode angezeigt werden sollen, löscht man „, all and (max-width: 768px)“ aus der oberen Zeile. „(max-width: 768px)“ wird benötigt, um ein iPad z.B. auch im Hochformat in den App-Modus zu zwingen. Im Landscape-Modus zeigt das iPad die normale Webseite an.

/*---Responsive Styles Smartphone Portrait-----*/
@media all and (min-width: 300px) and (max-width: 767px), all and (max-width: 768px) {
/*-ausblenden der Standardnavigation im Header-*/
.et_header_style_left .et-fixed-header #et-top-navigation, .et_header_style_left #et-top-navigation {
display: none;
}
/*-Einlbenden des Footer mobilen Menüs auf voller Breite-*/
#ff-mobile-nav {
 display: block !important;
}
}

Abschließende Bemerkungen

Die Anzahl der hochauflösenden Endgeräte im Taschenformat wachsen natürlich täglich. Es kann durchaus sein, dass der Code in Zukunft entsprechend angepasst werden muss oder kleine Korrekturen den Code noch verbessern. Auch verändert sich das Verhalten der Webseite, wenn bei einem iPad Pro z.B. zwei Apps gleichzeitig angezeigt werden. In dem Falle wechselt das iPad zur mobilen Ansicht. Das Beispiel mit obigem Code und Abänderungen findet ihr hier: www.flyingfox-web.com.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.