Der mobile Datenverkehr ist zu einer Hauptquelle für Besuche auf Websites geworden, daher ist es wichtig, eine adaptive mobile Version Ihrer Website zu haben. Bitrix ist eines der beliebtesten CMS, das praktische Tools zum Erstellen und Verwalten einer Website bietet. Eine dieser Möglichkeiten besteht darin, die mobile Version der Website anzupassen.
Durch die Konfiguration der mobilen Version von Bitrix können Sie die Website für die Anzeige auf verschiedenen Geräten wie Smartphones und Tablets optimieren. Ihre Website wird auf mobilen Geräten attraktiv aussehen und einfach zu verwenden sein, was die Benutzerfreundlichkeit erhöht und die Conversion verbessert.
In diesem detaillierten Leitfaden erfahren Sie, wie Sie eine mobile Version Ihrer Website auf der Bitrix-Plattform einrichten. Wir werden Schritt für Schritt alle notwendigen Einstellungen überprüfen, damit Ihre Website auf jedem Gerät optimal funktioniert.
Verpassen Sie nicht die Gelegenheit, Ihre Website mit Bitrix mobilfreundlich zu gestalten und mehr Nutzer mit mobilen Geräten zu erreichen.
Wie erstelle ich eine mobile Version von Bitrix
Sie können mehrere Methoden verwenden, um eine mobile Version von Bitrix zu erstellen:
1. Responsive Design verwenden.
Das responsive Design ermöglicht es Ihnen, eine einheitliche Version der Website zu erstellen, die sich automatisch an verschiedene Gerätebildschirme anpasst. Bitrix verfügt bereits über integrierte Tools zum Erstellen eines ansprechenden Designs. Sie müssen verschiedene Vorlagen für verschiedene Geräte erstellen und die Umschaltung zwischen den Geräten konfigurieren.
2. Verwenden Sie die mobile App.
Sie können eine separate mobile App für iOS und Android entwickeln, um eine mobile Version von Bitrix zu erstellen. Diese Anwendung funktioniert unabhängig von der Hauptseite und ermöglicht eine vollständige Anpassung der Benutzeroberfläche an mobile Geräte.
3. Verwenden einer separaten mobilen Website.
Die dritte Methode besteht darin, eine separate mobile Website zu erstellen. In diesem Fall müssen Sie eine separate Vorlage für die mobile Website erstellen und konfigurieren, dass Benutzer von mobilen Geräten zu dieser Website weitergeleitet werden.
Die Wahl der Methode zum Erstellen einer mobilen Version von Bitrix hängt von Ihren Bedürfnissen und Zielen ab. Es wird empfohlen, sich mit erfahrenen Entwicklern zu beraten, um die beste Option auszuwählen.
Vorbereiten der Website für die mobile Version
Bevor Sie mit der Konfiguration der mobilen Version von Bitrix beginnen, müssen Sie eine Website für diesen Prozess vorbereiten. Führen Sie dazu die folgenden Schritte aus:
1. Analyse des Website-Designs
Bewerten Sie, wie gut Ihre Website auf mobile Geräte zugeschnitten ist. Überprüfen Sie, ob der Inhalt auf verschiedenen Bildschirmen, Größen und Auflösungen korrekt angezeigt wird. Stellen Sie sicher, dass Ihre Website ein responsives Design hat.
2. Optimieren von Bildern
Bilder sind ein wichtiges Element der Website, das die Download-Geschwindigkeit und die Leistung der mobilen Version erheblich beeinflussen kann. Daher wird empfohlen, die Bilder für mobile Geräte zu optimieren. Reduzieren Sie dazu die Bildgröße, verwenden Sie die Komprimierung ohne Qualitätsverlust und wählen Sie das richtige Dateiformat aus (z. B. JPEG, PNG).
3. Adaptives Layout
Beachten Sie die Struktur und das Layout Ihrer Website. Stellen Sie sicher, dass die Website auf unterschiedliche Bildschirmgrößen zugeschnitten ist und auf mobilen Geräten korrekt angezeigt wird. Wenn Ihre Website eine feste Breite hat, müssen Sie möglicherweise Stile und Layout überarbeiten, um Anpassungsfähigkeit zu erzielen.
4. Vereinfachte Navigation
Mobile Benutzer suchen in der Regel schnell und einfach nach den gewünschten Informationen auf einer Website. Stellen Sie sicher, dass die Navigation auf Ihrer Website intuitiv und einfach für die Verwendung auf mobilen Geräten ist. Möglicherweise müssen Sie Links zu den Hauptbereichen der Website anbringen oder ein separates Menü für die mobile Version erstellen.
5. Testen der mobilen Version
Bevor Sie die mobile Version starten, müssen Sie einen Test durchführen, um sicherzustellen, dass die mobile Version ordnungsgemäß funktioniert und angezeigt wird. Überprüfen Sie, ob die Website auf verschiedenen mobilen Geräten und Betriebssystemen funktioniert.
6. Installieren des Moduls "Mobile Version"
Nachdem Sie die Website vorbereitet haben, fahren Sie mit der Installation des Moduls "Mobile Version" in Ihrem Bitrix-Site-Management-System fort. Mit diesem Modul können Sie eine mobile Version Ihrer Website erstellen und konfigurieren.
7. Inhalt der mobilen Version
| Inhalt | Die Beschreibung |
|---|---|
| Textinhalt | Erstellen Sie Textinhalte für die mobile Version, wenn Sie die Anzeigefunktionen auf kleinen Bildschirmen berücksichtigen. Versuchen Sie, die Textgröße zu reduzieren und kürzere Sätze zu verwenden. |
| Bilder | Wählen Sie die Bilder aus, die in der mobilen Version verwendet werden sollen. Beachten Sie, dass die Größe der Bilder für mobile Geräte angepasst werden muss. |
| Das Menü | Erstellen Sie ein vereinfachtes Menü für die mobile Version, in dem Sie die Hauptkategorien und Seiten Ihrer Website platzieren können. |
| Funktionalität | Berücksichtigen Sie die Besonderheiten mobiler Geräte und die eingeschränkten Eingabemöglichkeiten. Vereinfachen Sie Formulare, fügen Sie Schaltflächen hinzu, um schnell auf grundlegende Aktionen zuzugreifen. |
Die Vorbereitung der Website für die mobile Version ist ein wichtiger Prozess, der es Ihrer Website ermöglicht, für mobile Benutzer bequem und zugänglich zu sein. Befolgen Sie die obigen Schritte und das Ergebnis wird nicht lange auf sich warten lassen.
Auswählen einer Vorlage für die mobile Version
1. Gehen Sie zum Bitrix Site Control Panel und wählen Sie «Einstellungen».
2. Wählen Sie im angezeigten Menü den Punkt «Aussehen» aus.
3. Wählen Sie im Abschnitt »Mobile Version« die Option »Moduleinstellungen" aus.
4. Die Einstellungsseite für das Modul «Mobile Plattform» wird geöffnet.
5. In diesem Abschnitt können Sie eine der verfügbaren Vorlagen für die mobile Version auswählen. Vorlagen können von verschiedenen Typen und Gestaltungsmöglichkeiten sein.
6. Um eine Vorlage auszuwählen, klicken Sie einfach auf ihren Namen.
7. Nachdem Sie eine Vorlage ausgewählt haben, können Sie ihre Einstellungen nach Belieben anpassen.
8. Speichern Sie Ihre Änderungen, und überprüfen Sie, wie Ihre Website auf mobilen Geräten aussehen wird.
Die Auswahl einer Vorlage für die mobile Version hängt von Ihren Vorlieben und Zielen ab, daher wird empfohlen, mehrere Optionen zu testen und die beste Option für Ihre Website auszuwählen.
Anpassen der Anpassungsfähigkeit von Websiteelementen
Sie können die folgenden Methoden verwenden, um die Anpassungsfähigkeit von Websiteelementen in Bitrix anzupassen:
1. Media-Anfragen:
Mit Medienabfragen können Sie verschiedene Stile für verschiedene Geräte basierend auf ihrer Bildschirmauflösung festlegen. In einer Site-Stildatei (normalerweise style.css) Sie können verschiedene Stile für unterschiedliche Auflösungen mit der folgenden Syntax festlegen:
@media (max-width: 768px) 2. Flexibles Netz:
Durch die Verwendung eines flexiblen Rasters können Websiteelemente ihre Breite und Position automatisch an die Bildschirmgröße des Geräts anpassen. In Bitrix können Sie vordefinierte Klassen verwenden, um ein flexibles Raster zu erstellen, z. B. die Klassen "col-xs-", "col-sm-", "col-md-" und "col-lg-", mit denen Sie unterschiedliche Lautsprechergrößen für verschiedene Geräte festlegen können.
3. Reduzieren der Anzahl der Elemente:
Es wird empfohlen, die Anzahl der angezeigten Elemente auf einer Seite auf mobilen Geräten zu reduzieren. Sie können beispielsweise einige Blöcke oder Links ausblenden, um die Seite auf Smartphones benutzerfreundlicher zu machen.
4. Adaptive Bilder:
Mithilfe von adaptiven Bildern können Sie Bilder in der optimalen Größe für das Gerät des Benutzers hochladen. In Bitrix können Sie Technologien wie srcset und sizes verwenden, um verschiedene Bildvarianten für unterschiedliche Bildschirmauflösungen zu definieren.
Die Auswahl und Kombination dieser Methoden hängt von den Bedürfnissen und Besonderheiten der jeweiligen Website ab. Es wird empfohlen, die mobile Version der Website zu testen und zu optimieren, um die besten Ergebnisse zu erzielen.
Erstellen eines mobilen Menüs
Um die mobile Version einer Website in Bitrix zu konfigurieren, müssen Sie ein mobiles Menü erstellen. Das mobile Menü ist eine kleine Leiste mit einer Schaltfläche, auf die sich eine Dropdown-Liste mit Navigationspunkten öffnet, wenn Sie darauf klicken.
Führen Sie die folgenden Schritte aus, um ein mobiles Menü zu erstellen:
- Öffnen Sie die Vorlage Ihrer Website im Bitrix-Editor.
- Suchen Sie im Ordner mit der Websitevorlage nach der Header-Datei.php und öffne es zur Bearbeitung.
- Fügen Sie den folgenden Code an der gewünschten Stelle in der Datei ein, die durch den Kommentar "Menü" gekennzeichnet ist:
Nachdem Sie den Code eingefügt haben, sollten Sie eine mobile Menüschaltfläche auf Ihrer Website haben. Jetzt müssen Sie dem mobilen Menü Navigationselemente hinzufügen. Führen Sie dazu die folgenden Schritte aus:
- Gehen Sie zum administrativen Teil Ihrer Website.
- Gehen Sie zu "Menü" und erstellen Sie ein neues Menü für die mobile Version.
- Fügen Sie dem erstellten Menü die gewünschten Navigationselemente hinzu.
- Fügen Sie den folgenden Code an der richtigen Stelle in der header-Datei ein.php , um die Navigationselemente im mobilen Menü anzuzeigen:
Nachdem Sie den Code eingefügt haben, werden die Navigationselemente im mobilen Menü angezeigt, die Sie im erstellten Menü angegeben haben.
Jetzt haben Sie ein mobiles Menü auf Ihrer Website in Bitrix erstellt. Sie können seine Stile und Positionierung mit CSS anpassen.
