Hinzufügen eines Custom Footers in der PWA
Integration eines eigenen Footers in die PWA
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:
- Zugang in one.data
- 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.
Wo kann ich den Footer ändern?
Wenn die Berechtigungen stimmen einfach mit dem entsprechenden Data-Account einloggen und dann im Menü den Pages Builder wählen:
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.
Hierfür auf "HTML-Code" klicken.
Es öffnet sich nun den Code, den man verändern und somit den Footer gestalten kann.
Es sollten entsprechende Fachkenntnisse vorhanden sein, da neben den Möglichkeiten, natürlich auch ohne Fachkenntnisse Fehler eingebaut werden können.
HTML Code für den Standard-Footer
<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>
<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>
Bereits existierenden Custom Footer als Vorlage verwenden
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.