Hinzufügen eines Costum Footers in der PWA

Hinzufügen eines Costum Footers in der PWA

Integration eines eigenen Footers in die PWA

Warning
Wichtig: Dies sollte nur von einer Person mit Fachkenntnis im Bereich HTLM Code umgesetzt werden!

Voraussetzungen

Um starten zu können sind folgende Voraussetzungen zu erfüllen: 
  1. Zugang in destination.data
  2. Berechtigung des Bearbeiten des Pages Builders in der jeweiligen Experience
Sollten diese Voraussetzungen nicht gegeben sein, wende dich bitte an einen Admin in eurer Organisation. Dieser kann dir die Rechte einräumen. 
Wenn die Berechtigungen stimmen einfach mit dem entsprechenden Data-Account einloggen und dann im Menü den Pages Builder wählen:

 
Warning
Achte darauf, dass du in der folgenden Einstellung die richtige Experience auswählst, um nicht den Footer bei anderen Projekten zu überschreiben
Auswahl der Experience wird hier im Dropdown vorgenommen: 

Über die linke Navigationsleiste wählst du "Seiten" aus. 


Hier auf "Liste bearbeiten" gehen und wie im Screenshot angezeigt den Punkt: "footer: Footer" auswählen. Danach die Liste speichern.


Nun ist der Custom Footer angelegt.
Damit man den Inhalt bearbeiten kann, klicke auf den Bearbeitungsstift, um diesen anzupassen. 

Nun kann man das HTML Element bearbeiten und so den Footer individuell anpassen. 
Hierfür auf "HTML-Code" klicken.

Es öffnet sich nun den Code, den man verändern und somit den Footer gestalten kann. 
WarningAlert
Es sollten entsprechende Fachkenntnisse vorhanden sein, da neben den Möglichkeiten, natürlich auch ohne Fachkenntnisse Fehler eingebaut werden können. 


<div style="text-align: center;">Sie haben einen individuellen footer definiert. Bitte bearbeiten Sie diesen unter "Seiten".</div>

<div class='container' style='text-align: center; margin: 0; padding: 0; width: 100%;'>
    <div class='row embedrequestdeletion' style='text-align: center; padding: 0 1rem;'>
        Solltest Du mit der Veröffentlichung Deiner Daten nicht einverstanden sein, kannst Du <a href="#" target="_blank" data-toggle="modal" data-target="#embedProblem" onclick="setEmbedProblemTopicDeletion()">hier</a> eine Löschung beantragen.
    </div>
    <div class='row embedproblem' style='text-align: center;'>
        <a data-target='#embedProblem' data-toggle='modal' href='#' target='_blank'>
            Problem melden
        </a>
    </div>
    <style type='text/css'>
        #footer #pages_qrcode > img { position: absolute !important; left: 16px !important; top: 4px !important; }
        #footer #pages_qrcode > span, #footer #pages_qrcode > a { position: absolute !important; left: 122px; top: 78px !important; }
        .et4_pages_body.wlan #footer #footerleft,  .et4_pages_body.wlan #footer #footercenter { display: none !important; }
        .et4_pages_body.wlan #footer #footerright { width: 100% !important;    }
        .et4_pages_body.wlan #footer #footerright > div { float: none !important; margin: 0 auto !important; }
        @media (max-width: 481px) {
            #footerright > div { width: 100% !important; }
            #footerright > div > .row { display: flex !important; }
            #footerright > div > .row > div:nth-child(1) { width: 50% !important; padding: 0 !important; margin: auto !important; text-align: center !important; }
            #footerright > div > .row > div:nth-child(2) { width: 50% !important; padding-right: 10px !important; margin: auto !important; }
            #footerright > div > .row > div:nth-child(2) > img { width: 100% !important; }
        }
        @media (max-width: 767px) {
            .et4_pages_body.tablet #footer { zoom: 80% !important; line-height: 20px !important; }
        }
    </style>
    <div id='footer'>
        <div id='footerleft' style='float: left; width: 49%; padding: 10px; text-align: center; height: 120px; padding-top: 40px;'>
            <div class='tmb_qr_div' style='width: 376px; float: right; font-size: 10pt;'>
                <div class='row'>
                    <div id='pages_qrcode_container'>
                        <div id='pages_qrcode'></div>
                    </div>
                    <p class='qr_header_text' style='position: absolute; top: -12px; text-align: left; left: 120px;'>
                        <span style='font-size: 1.4em; display: block; padding-bottom: 10px;'>
                            Reisetipps auch für unterwegs?
                        </span>
                        Einfach mit dem Smartphone abscannen oder den Link in den Browser eintippen:
                    </p>
                </div>
            </div>
        </div>
        <div id='footercenter' style='float: left; width: 2%; height: 120px;'>
            <div style='background: #EEEEEE; height: 100px; width: 3px; margin: 0 auto; margin-top: 40px;'></div>
        </div>
        <div id='footerright' style='float: left; width: 49%; padding: 10px; text-align: center; height: 120px; padding-top: 40px;'>
            <div style='width: 420px; float: left; text-align: left;'>
                <div class='row'>
                    <div style='float: left; padding-top: 43px; padding-left: 10px; padding-right: 30px;'>
                        Ein Service von der
                    </div>
                    <div>
                        <img src='~config/secondary_image' style='width: 200px;'>
                    </div>
                </div>
            </div>
        </div>
        <div style='clear: both;'></div>
        <div style='width: 90px; height: 90px; margin: 0 auto; position: relative; top: 50px;'></div>
        <div style='margin: 0 auto; position: absolute; height: 50px; width: 100%; right: 0;'>
            <div style='margin: 0 auto; width: 150px; position: relative; top: -30px;'>
                <img alt='' src='' style='height: 80px;'>
            </div>
        </div>
        <div style='background-color: #EEEEEE; height: 100px; padding-top: 58px; text-align: center;'>
            <p>
                <a href='~config/about_url' rel='nofollow' target='_blank'>Impressum</a>
                |
                <a class='privacy-link' href='~config/privacy_url' rel='nofollow' target='_self'>Datenschutzerklärung</a>
                |
                <a data-target='#embedProblem' data-toggle='modal' style='cursor: pointer;' target='_blank'>
                    Problem melden
                </a>
            </p>
        </div>
    </div>
</div>
Du besitzt bereits einen Custom Footer und möchtest diesen als Vorlage anlegen? 
Hierfür gehe auf die jeweilige URL und nutze das Entwicklertool (zu finden in allen gängigen Browsern) um den HTML-Code des Footers zu kopieren. 
Auch hier empfehlen wir, dass das eine Person mit Kenntnissen im Bereich von HTML vornimmt. 

    • Related Articles

    • destination.welcome: Einrichtung PWA

      Im Folgenden wird aufgeführt, wie Du destination.welcome einrichten bzw. bestehende Projekte bearbeiten kannst. destination.welcome kannst Du als PWA (Progrssive Web App) für Deine Gäste, als Landing-Page im WLAN oder als Oberfläche für Terminals, ...
    • destination.pages: Integration in eigene Webseite

      1. Einführung destination.pages Die destination.pages sind Ausgabe-Module für Ihre Webseite zur Darstellung strukturierter touristischer Angebote wie Artikel, Gastgeber, Pauschalen, Veranstaltungen, Gastronomie, POI/Ausflugstipps sowie Touren & Wege. ...
    • destination.pages: Hinterlegen von neuem Inhalte für den Infoscreen im Pages Builder

      In destination.one über den Menüpunkt "Content ausspielen" gelangst Du in den Pages Builder. Bitte wähle danach den Menüpunkt "Infoscreen" im Bereich "Aktionen" aus. Dieser Bereich befindet sich auf der linken Seite, unter der Weltkugel: Jetzt kannst ...
    • destination.pages: Beeinflussung der Ausgabe mit eigener Query im Pages Builder

      Individuelle Ausgaben Um individuelle Ausgaben, wie einzelner POIs mit dem Pages Builder zu erstellen, kann der Bereich " Content-Struktur -> Ribbon / Element auswählen" unter Filter: Tab Query (für Experten) genutzt werden (siehe Anhang). Hier ...
    • Tipps und Tricks zu den Pages Builder Filtern

      Allgemeine Tipps zum Filtern In diesem Artikel geht es um die Filtermöglichkeiten und deren korrekte Anwendung. 1. Sonderzeichen maskieren Da in den Kategorie-Bezeichnungen auch Slashes (Schrägstriche "/") vorkommen, aber Slashes auch feste ...