Joomla Tutorials

Folge uns auf Twitter

Folge uns auf Twitter

Es lohnt sich, Ahadesign aufTwitterzu folgen, um keine Neuigkeiten zu Bildbearbeitung, Webdesign Tutorials, Reviews, Testberichte, News, Downloads und Verlosungen zu verpassen. Wer Twitter nicht mag oder eine zusätzliche Möglichkeit sucht, um immer auf dem neuesten Stand zu sein, kann auch gerne denAhadesign-RSS-Feedkostenfrei abonnieren.

SeedingUp | Digital Content Marketing

Ahadesign Tutorials

tm-templateNach kurzer Installation sofort mit einer professionellen Joomla-Website starten, die bereits alle notwendigen Erweiterungen enthält, ist eine der Vorteile bei Verwendung eines Templates unseres Partners Templatemonster. Es wird einfach das gelieferte Fullpackage installiert und schon läuft Joomla mitsamt der Vorlage und sämtlichen Erweiterungen, sowie Beispielinhalten. Eine bereits fertige Website also. Die Erweiterungen und Inhalte wie Preistafeln, Counter, Accordions usw. sind dabei schon an das Layout der Vorlage angepasst. Es müssen im Prinzip nur noch eigene Inhalte eingepflegt bzw. die Beispiele angepasst werden. Ideal nicht nur für Web-Agenturen mit wenig Zeit. Nachfolgend wird gezeigt, wie das geht.

Anpassung einer Profi-Vorlage für Joomla!

tm-progress-bars

Wie die Installation abläuft und was dabei zu beachten ist, wurde bereits in dem Artikel "Joomla-Template für Web Design" ausführlich behandelt, wird hier aber auch im notwendigen Umfang nochmals erläutert. Primär geht es in diesem Artikel aber um individuelle Anpassungen des Templates, Joomla und den Erweiterungen, nach der Installation am Beispiel der responsiven Vorlage für Medizin "BeDentist". Die Vorgehensweise bei anderen Joomla-Vorlagen von Templatemonster ist nahezu identisch, da viele gleiche Funktionen und Erweiterungen in allen angebotenen Paketen zu finden sind.

Nach dem Download der Vorlage wird am besten die Datei fullpackage.zip aus dem Ordner "joomla" installiert. Damit wird Joomla, Erweiterungen und Beispielinhalte, in einem Rutsch installiert. So sind spätere Anpassungen sehr viel leichter, zumindest wenn man das nicht schon sehr oft gemacht hat. Dann muss nur noch das deutsche Sprachpaket geladen und aktiviert werden, bevor es schon mit individuellen Anpassungen losgehen kann.

Installation

tm-quickinstaller

Via FTP-Programm wird also die fullpackage.zip und die Datei unzip.php hochgeladen und dann die Domain aufgerufen. Z.B. www.meinedomain.tld/unzip.php. Es erscheint der im oben genannten Artikel bereits gezeigte Dialog und die Daten können mit Klick auf die Schaltfläche "Unzip" komfortabel entpackt werden. Das geht sehr schnell. Dann werden die unzip.php und fullpackage.zip vie FTP-Programm wieder vom Server gelöscht, da sie nicht mehr benötigt werden.

tm-sampletheme

Es folgt die eigentliche Installation durch Eingabe der Domain, gefolgt vom Installations-Ordner, also z.B. www.meineDomain.tld/installation. Im zweiten Installationsschritt für die Datenbank sollte das Tabellenpräfix nach jos_ geändert werden, damit alle Beispielinhalte sauber installiert werden können. Im dritten Schritt wird dann unbedingt "sample_theme3326" für die Beispielinhalte markiert und die Installation kann abgeschlossen werden. Die sofortige Installation der deutschen Sprachdateien gelingt hier leider nicht. Dies ist aber kein Problem, welches mit dem Template zu tun hat, sondern liegt an Joomla selbst.

Die fertige Seite inklusive hochwertiger Fotos, kann über die Domain jetzt bereits aufgerufen werden. Die mitgelieferten Fotos und Grafiken dürfen übrigens dauerhaft und ohne weitere Kosten für die Website verwendet werden, obwohl man in der Regel wohl doch eigenes Material einbinden wird.

tm-website-bedentist

Joomla Backend und Updates

joomla-loginDas Problem mit den deutschen Sprachdateien kann leicht über das Backend gelöst werden. Auch empfiehlt es sich, gleich sämtliche anstehende Updates durchzuführen. Das ist schnell erledigt und dient natürlich auch der Sicherheit, welche niemals unterschätzt werden sollte. Das Backend bzw. der Administrationsbereich können jetzt über www.meineDomain.tld/administrator aufgerufen werden. Zunächst sollten also alle Updates noch vor dem Anpassen der Sprache durchgeführt werden, um Joomla und die Extensions auf dem neuesten und sichersten Stand zu bringen.

joomla-updates

Dazu wird einfach auf Update Now bzw. View Updates geklickt und den Dialogen gefolgt. Über das Menü System -> Control Panel kommt man immer wieder zur Ausgangsseite des Backend zurück, nachdem zuerst Joomla auf den neuesten Stand gebracht wurde und es können dann auch die Extensions auf den aktuellen Stand gebracht werden. Natürlich ginge das auch immer über Extensions -> Manage.

Hier im Beispiel gibt es neue Versionen der JoomGallery und des Kunena Forum. Sie werden beide markiert und mit einem Klick auf "Update" geht es weiter.

extensions-update

Das geht recht zügig und eine Erfolgsmeldung erscheint.

extensions-update-komplett

Nun wird der Hinweis mit Klick auf "Close" geschlossen. Die JoomGallery bietet dann gleich noch den Download von Sprachpaketen an.

joomgallery-sprachpakete

Mit dem Klick auf die Schaltfläche "Languages" erscheint eine neue Seite mit Auswahl jeder Menge Sprachen. Für Deutsch gibt es eine formale oder informale Sprache. Für eine medizinische Site würde sicher die formale Variante passen, welche mit einem simplen Klick auf die Landesflagge ganz schnell installiert ist.

joomgallery-sprachpakete-installiert

Zurück auf der Startseite des Backends über System -> Control Panel erscheint nochmals ein Update-Hinweis für das Kunena Forum. Hier wird also ein weiteres Mal wie eben vorgegangen. Nun ist alles auf dem neuesten Stand, allerdings fehlt noch die deutsche Sprache für Joomla selbst.

Es muss also zunächst das deutsche Sprachpaket heruntergeladen werden. Das geht z.B. hier im Downloadbereich in der Kategorie Joomla. Ansonsten sind die Pakete auch bei Sourceforge zu finden. Die deutsche Sprachdatei reicht, es muss also nicht das deutsche Full Package installiert werden. Dann geht es über das Menü im Backend zu Extensions -> Manage und in den Bereich Install.

joomla-sprache-hochladen

Dort wird der Reiter "Upload Package File" aufgerufen und nun kann die heruntergeladene Datei einfach mit der Maus im Fenster fallengelassen werden. Nach kurzer Zeit erscheint eine Erfolgsmeldung.

joomla-sprache-hochladen-erfolgsmeldung

Hier steht dann auch gleich, was jetzt noch zu tun ist. Unter Extensions -> Language(s) wird also die deutsche Sprache durch Klick auf den kleinen Stern auf Default gesetzt.

joomla-sprache-default

Wie man in der oberen Leiste des Fensters sieht, ist nun nur die Frontpage, also die zu sehende Website auf Deutsch eingestellt. Dies muss jetzt auch noch für das Backend gemacht werden. Dazu wird über das linke Aufklappmenü von Site nach Administrator gewechselt und wieder auf den Stern geklickt.

Diesen Aufwand muss man künftig nicht mehr betreiben. Bei Updates wird man von nun an immer informiert und geht dann so vor, wie bei anderen Erweiterungen. Nun sollten unter System -> Konfiguration alle Einstellungen vorgenommen werden, die hier nicht weiter erklärt werden, da es ja eher um das Template geht.

Google Maps Erweiterung

Damit sind also alle Vorbereitungen erledigt und es kann um individuelle Anpassungen für Template und Inhalte gehen. Zum Beispiel erscheint auf der Frontpage unter Contacts eine Google-Map. Möchte man diese nicht haben, kann man im Backend über Menüs -> Main menu den Titel "Contacts" anklicken und dann noch den Eintrag "Contacts" anklicken, welcher die Position "map" nutzt.

mapmodul

Hier wird dann einfach der Status auf "Versteckt" gesetzt und gespeichert und die Map erscheint nicht mehr auf der Frontpage.

Oft macht die Google-Map auf der Kontaktseite aber echt was her. Will man sie also benutzen, sollte sie auch konfiguriert werden. Zunächst sollte das Modul noch einen deutschen Titel wie "Kontakt" bekommen, sofern man ihn überhaupt anzeigen lässt. Der Titel erscheint dann auf der Kontaktseite über der Map.

Nach dem Speichern und Schließen des Moduls geht es über Erweiterungen -> Plugins zum Eintrag "System - Google Maps". Ganz wichtig ist hier der Tab mit der Bezeichnung "General settings". Dort muss unbedingt ein Googlemaps API-Key eingetragen werden, sonst funktioniert die Map auf der Frontpage einfach nicht.

joomla-plugin-googlemaps-general-settings

Um den API-Key zu bekommen, muss man ein Google-Konto besitzen und sich dort anmelden. Der Key ist dann ohne großen Aufwand zu bekommen.

Nun sollte man auch noch die Location settings einstellen. Hier geht es darum, wo auf der Karte der Marker stehen soll. Das wird in der Regel der Standort des Geschäfts bzw. der Praxis sein sollen, für welche die Website eingesetzt wird. Dazu werden die Werte für Latitude und Longitude benötigt. Diese erhält man bei Aufruf der Map direkt bei Google. In der Adressleiste des Browsers zeigt der Link dann nach dem @-Zeichen die Latitude und nach einem Komma die Longitude. Alle anderen Zeichen sind unwichtig. Damit dürfte die Google-Map dann funktionieren.

Kontakt anpassen

Nun kann die Kontaktseite noch eingedeutscht werden. Also bekommt auch gleich der Menütitel unter Menüs -> Main menu -> Contacts die Bezeichnung "Kontakt". Dann führt der Weg über das Menü zu Komponenten -> Kontakte, wo der bisher einzige Kontakt geklickt wird.

kontakte-bearbeiten

Unter "Verknüpfte Benutzer" ist noch der Demo-Benutzer aktiviert. Hier empfiehlt es sich natürlich, den eigenen Account zu wählen. Dann können über das Menü unter Benutzer -> Verwalten die überflüssigen User entfernt bzw. deaktiviert werden, so dass nur noch der Super User übrig bleibt, mit dem man sich im Backend auch einloggt. Nun können über Komponenten -> Kontakte noch die E-Mail-Adresse, Postanschrift, Telefonnummer usw. eingetragen und auch der Name des Kontakts geändert werden. Auch im Reiter "Weitere Informationen" befindet sich noch ein englischer Text, welcher angepasst wird.

Im Reiter "Anzeige" kann die E-Mail-Adresse und der Link zur vCard ausgeblendet werden. Das ist durchaus sinnvoll, da die Seitenbesucher ja das Formular verwenden sollen. Auch sollen böse Roboter die Mail-Adresse nicht aufspüren können. Ansonsten wird man sich in kürzester Zeit über viel Spam freuen können.

tm-kontaktseite

Hier wurde nur die E-Mail-Adresse ausgeblendet. Leider verschwindet damit nicht die gleichnamige Überschrift. Dies lässt sich bedauerlicherweise nur etwas umständlich beheben. Man hat es hier mit sogenannten Template-Overrides zu tun, welche das Template in zahlreicher Weise enthält und in aller Regel eine verbesserte Funktionalität und besseres Aussehen ermöglichen.

Der Weg führt jetzt also zu Erweiterungen -> Templates -> Templates. Mit einem Klick auf "Theme3326 - Details und Dateien" erscheint dann ein Fenster in dem der Ordner "html" angeklickt wird. Es folgt ein Klick auf "com_contact", dann auf "contact" und schließlich auf "default_address.php". Der Editor zeigt nun den Inhalt an.

tm-template-anpassen-editor

Der Code ab Zeile 76 muss modifiziert werden. Der originale Codeabschnitt enthält ein JText::_('TPL_CONTACT_MAILTO'). Daraus wird einfach JText::_('') gemacht und abgespeichert. Damit ist die Bezeichnung auf der Frontpage verschwunden. Bei der Anzeige bzw. Nichtanzeige der vCard muss dieser Aufwand nicht betrieben werden.

Allerdings sind jetzt noch die Labels des Kontaktformulars in der falschen Sprache. Das lässt sich über Erweiterungen -> Module ändern. Hier wird das Modul "TM Ajax Contact Form" gesucht und angeklickt. Man würde das Modul aber auch im Haupt-Menü (Main menu) über den Reiter "Modulzuweisung" finden. Dann im Reiter "Module Settings" können die Label eine andere Bezeichnung bekommen. Zum Beispiel wird Phone nach Telefon geändert usw. Auch die Benachrichtigungen die beim Absenden einer Nachricht oder bei einem Fehler angezeigt werden sowie die Beschriftung der Buttons zum Senden und Zurücksetzen, lassen sich hier anpassen.

tm-ajax-contact-form-modulsettings

Damit wäre die Kontaktseite jetzt schön in Deutsch.

tm-kontakt-frontpage

Weitere Anpassungen

Jetzt soll die oberste Leiste des Templates und auch alle weiteren Template-Bereiche in denen Book an Appointment vorkommt, ebenfalls geändert werden.

tm-linkleiste-oben

Der Text ganz rechts stellt einen Link dar, der noch passend zugewiesen werden muss. Natürlich geht das über Menüs -> Book an Appointment und auch über das Menü "Top menu". Zunächst wird diese Menübezeichnung über Menüs -> Verwalten nach "Terminvereinbarung" geändert. Dazu bekommt das Menü ein Häkchen und die Bearbeiten-Schaltfläche wird betätigt.

tm-booking-menu

Der Menütyp wird jedoch nicht geändert.

Nach dem Speichern wird in der Spalte "Veröffentlicht" auf die 1 und dann auf die Menübezeichnung geklickt und gleich der Titel nach "Termin vereinbaren" geändert. Der vorhandene Alias wird gelöscht. Mit dem Speichern wird automatisch eine vernünftige Bezeichnung eingesetzt. Dann soll nicht ein externer Link verwendet werden. Für den Menüeintragstyp wird ein einzelner Kontakt genutzt und eben der einzig vorhandene Kontakt ausgewählt.

kontaktauswahl

Für das bereits erwähnte Top menu wird genauso vorgegangen für den Eintrag mit der externen URL.

appointment-menueeintraege

Diese bekommt natürlich ebenfalls den Kontakt zugewiesen. Der Eintrag mit Trennzeichen bekommt nur eine Änderung der Bezeichnung. Jetzt fehlt noch die Position unterhalb des oberen Haupt-Menüs, also dem Slider-Bereich. Um herauszufinden um welche Position es sich handelt, wird unter Erweiterungen -> Templates -> Templates auf die obere rechte Schaltfläche für die Optionen geklickt und die Vorschau der Modulpositionen kurzzeitig aktiviert.

template-optionen

Jetzt kann die Website mit www.meineDomain.tld?tp=1 aufgerufen und die Modulpositionen angezeigt werden.

tm-modulpositionen

In diesem Fall bringt es aber nichts. Die gesuchten Einträge befinden sich nämlich unter Inhalt -> Kategorien -> Slider. Dort wird wieder auf die Zahl der veröffentlichten Einträge geklickt und alle Slider durchgesehen und entsprechend angepasst.

Nun könnte man sich wundern, warum immer nur das erste Bild des Sliders, der in diesem Fall die Bezeichnung Swiper trägt, angezeigt wird. Unter Erweiterungen -> Module muss natürlich noch das Modul Swiper konfiguriert werden. Dort wird einfach Autoplay auf "Wahr" gesetzt und gegebenenfalls weitere Konfigurationen vorgenommen. Jetzt wechseln die drei Bilder automatisch nach der eingestellten Zeit und die Website wirkt viel dynamischer.

tm-swiper-modul-konfiguration

Hier ist nur ein kleiner Ausschnitt der verfügbaren Optionen zu sehen. Über den ersten Reiter "Modul" kann die Anzahl der wechselnden Bilder bzw. Artikel noch erhöht werden. Obwohl hier bereits 5 eingetragen ist, werden bisher nur 3 gezeigt. Das liegt daran, weil unter Inhalt -> Beiträge nur drei Artikel existieren.

tm-slider-artikel

Jetzt könnte z.B. der Titel des dritten Slider geklickt und dann die Schaltfläche "Als Kopie speichern" genutzt werden.

slide3-kopieren

Dann wird der Slide 3 geschlossen und die Kopie geöffnet und nach Slide-4 umbenannt. Was jetzt noch fehlt, ist ein eigenes Bild für den vierten Slide. Dieses kann mit einem FTP-Programm auf den Server nach /images/slider hochgeladen werden. Dabei empfiehlt es sich, die Abmessungen der bereits vorhandenen Fotos von 1920 x 750 Pixel, zumindest aber das gleiche Format, zu übernehmen. Das neue Bild bekommt für die bessere Übersichtlichkeit außerdem die Bezeichnung "slide-4". Es könnte aber auch völlig anders genannt werden. Das Bild wird dann noch dem neuen Beitrag über den Reiter "Bilder und Links" in der Beitragsbearbeitung mit der Option "Komplettes Beitragsbild" zugewiesen.

So kann man sich im Prinzip durchkämpfen und sämtliche Menüeinträge und Inhalte auf Deutsch umstellen und sortieren und natürlich unbenötigte Sachen einfach deaktivieren oder löschen. Das wird also die meiste Arbeit sein. Ansonsten hat man bereits einen perfekt funktionierenden und fertigen Webauftritt.

Gerade für Agenturen, die Kunden möglichst schnell und effizient mit einem professionellen Webauftritt versorgen müssen, gibt es kaum etwas sinnvolleres, als eine Joomla-Vorlage der hier vorgestellten Art, wovon es tausende zu jedem Genre bei Templatemonster gibt. Mit der Zeit bekommt man ja auch Übung und individuelle Anpassungen für Kunden sind dann recht schnell erledigt, ohne zu viel Zeit zu verlieren.

Der Link zu Templatemonster lässt sich übrigens ganz leicht und erlaubterweise aus der index.php des Templates entfernen und die Verwendung der Templates für eigene Kunden ist ebenfalls ausdrücklich erlaubt. Natürlich muss für jeden Kunden eine extra Lizenz erworben werden.

Viele Fragen werden im Hilfe-Center bei Templatemonster auch in Deutsch beantwortet. Da kommt man auf jeden Fall auch bei vermeintlich kniffligen Sachen weiter. Besonders die Joomla-Tutorials sind hier sehr hilfreich. So würde es auch wenig Sinn machen, hier weitere Ausführungen zu sämtlichen enthaltenen Erweiterungen wie z.B. dem Forum, der Galerie-Komponente oder der Kommentarkomponente usw. zu machen.

Nicht nur zu Joomla gibt es jede Menge Premium-Vorlagen für Websites, weshalb sich ein Besuch bei Templatemonster für Web-Agenturen aller Art lohnen dürfte.

Kommentar schreiben


Kommentare  
2 Top-TemplatesGerhard 2017-08-16 05:37
Hallo Jürg,
aufgrund meiner Zusammenarbeit habe ich auch sehr guten Kontakt mit den Leuten bei Templatemonster . Der Support ist wirklich gut. Schön ist, dass man sich bei einem TM-Template gar nicht mit Code auskennen muss. Vielleicht ein wenig HTML für die eigenen Inhalte. Die Pakete sind recht sorgenfrei für alle Anwender, aber das ist sicher auch dem Bericht hier zu entnehmen. Natürlich muss man sich ein wenig in Joomla einarbeiten, wenn das neu für einen ist. Auf jeden Fall vielen Dank für Deinen netten Kommentar und Templatemonster wird sich sicher über das Lob freuen. Die schauen hier öfter vorbei und lesen das sicher.
Ebenfalls sonnige Grüße,
Gerhard
Zitieren
1 Lobjürg/thaileben 2017-08-15 13:15
an dieser stelle möchte ich ein Lob für Euren Partner Templatemonster aussprechen.
Bei der letzten Aktion die ich in FB zufällig anklickte interessierten mich verschiedene sachen wurde jedoch nicht wirklicch fündig oder anderst gesagt ich hatte keine Lust 100derte designs durchzuklicken. Ich klickte unten rechts den supportbutton an, es ging sehr schnell, und es meldete sich jemand ich bin unerfahren bei solch Chat und entschuldigte mich für mein unwissen -- das erstaunliche, es kam eine Antwort also ein echter Mensch auf der anderen Seite ich gab an was das Design (in etwa) beinhalten sollte der supportmitarbei ter suchte gleich 3 raus und sandte mir die links um diese anzusehen also super-- leider habe ich zur zeit kein Geld über um eines zu kaufen, zudem fühle ich mich mit HTML zur zeit sicherer. Ups wieder viel zu lesen sonnige grüsse Jürg
Zitieren