Kontaktdaten im Kopfbereich anzeigen

Hallo zusammen,

ich möchte ganz oben im Kopfbereich (neben dem Praxisnamen) Kontaktdaten wie Telefonnummer, Adresse und Öffnungszeiten platzieren.

Da das normale Webnamen-Feld das nicht hergibt, habe ich mir mit einem HTML/CSS-Baustein geholfen, den ich über body_start ganz oben reinschiebe. Das klappt am Desktop und am Handy auch super – fühlt sich aber wie eine ziemliche Bastellösung an.

Gibt es in Zeta Producer oder direkt in den Layout-Einstellungen vielleicht einen einfacheren, offiziellen Weg, um so eine Infoleiste im Header unterzubringen, ohne dass man Code von außen einschmuggeln muss?

Meinen aktuellen Code packe ich unten in den Spoiler. Vielleicht hat ja jemand einen Tipp für mich, wie das innerhalb der Zeta-Logik sauberer geht!

Viele Grüße

Zeta Producer Business V17.2.1
Layout: Campfire Responsive

<div id="zeta-custom-top-bar" class="custom-global-infobar" style="display: none;">
<div class="infobar-inner">

<div class="infobar-brand">
<span class="brand-text">Praxis Dr. med. Max Mustermann</span>
</div>

<div class="infobar-right-wrapper">
<div class="infobar-item">
<span class="infobar-icon icon-phone"></span>
<div class="infobar-text">
<a href="tel:0123456789" class="info-link-item">Telefon: 01234 56789</a>
</div>
</div>

<div class="infobar-item">
<span class="infobar-icon icon-location"></span>
<div class="infobar-text">
<span>Musterstra&szlig;e 123, 12345 Musterstadt</span>
</div>
</div>

<div class="infobar-item">
<span class="infobar-icon icon-clock"></span>
<div class="infobar-text">
<span>Mo-Fr 08:00-12:00</span>
<span>Mo+Di+Do 15:00-18:00</span>
</div>
</div>
</div>

</div>
</div>

<script>
(function()
{
function injectInfobar()
{
var infobar = document.getElementById('zeta-custom-top-bar');
if (!infobar) return;

var siteBody = document.body;
if (siteBody)
{
siteBody.insertBefore(infobar, siteBody.firstChild);
infobar.style.setProperty('display', 'block', 'important');
}
}

if (document.readyState === 'loading')
{
document.addEventListener('DOMContentLoaded', injectInfobar);
}
else
{
injectInfobar();
}
})();

</script>

<style>
/* ==========================================================================
CSS STYLE-SYNTAX (Browserübergreifend stabil für Chrome & Edge)
========================================================================== */
    
:root {
--bar-teal: #10a3a6; --bar-text: #333333; --bar-border: #e5e7eb; --bar-bg: #ffffff;
}
/* Der weiße Hauptbalken ganz oben */
    
.custom-global-infobar {
display: block !important; width: auto !important; position: relative !important; left: 0 !important; right: 0 !important; background-color: var(--bar-bg) !important; border-bottom: 1px solid var(--bar-border) !important; padding: 15px 0 !important; box-sizing: border-box !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; z-index: 999999 !important;
}
/* Innerer Container: Grid-Ausrichtung für die Flucht */
    
.infobar-inner {
display: grid !important; grid-template-columns: 1fr auto !important; align-items: center !important; width: 100% !important; max-width: 1140px !important; margin: 0 auto !important; padding: 0 15px !important; box-sizing: border-box !important;
}
/* Linker Bereich: Name linksbündig */
    
.infobar-brand {
text-align: left !important; display: block !important;
}
    
.brand-text {
font-size: 22px !important; font-weight: 700 !important; color: var(--bar-teal) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; white-space: nowrap !important;
}
/* Rechter Bereich: Infos rechts gebündelt */
    
.infobar-right-wrapper {
display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 30px !important;
}
/* Einzelne Info-Boxen */
    
.infobar-item {
display: flex !important; align-items: center !important; gap: 12px !important; position: relative !important;
}
/* Vertikale Trennstriche für Desktop */
    
.infobar-item:not(:last-child)::after {
content: "" !important; position: absolute !important; right: -15px !important; top: 50% !important; transform: translateY(-50%) !important; width: 1px !important; height: 26px !important; background-color: var(--bar-border) !important;
}
/* Textelemente */
    
.infobar-text {
display: flex !important; flex-direction: column !important; font-size: 14px !important; color: var(--bar-text) !important; line-height: 1.3 !important; text-align: left !important;
}
    
.info-link-item {
color: var(--bar-teal) !important; text-decoration: none !important; font-weight: 600 !important;
}
    
.info-link-item:hover {
text-decoration: underline !important;
}
/* SVG Icons via CSS */
    
.infobar-icon {
width: 22px !important; height: 22px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; flex-shrink: 0 !important;
}
    
.icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310a3a6' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.387a12.035 12.035 0 01-5.547-5.547c-.145-.44.02-1.211.386-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z'/%3E%3C/svg%3E") !important;
}
    
.icon-location {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2310a3a6' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") !important;
}
    
.icon-clock {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2310a3a6' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm1 14h-2V7h2v9z'/%3E%3C/svg%3E") !important;
}
/* ==========================================================================
MEDIA QUERIES (Responsive Steuerung)
========================================================================== */
/* --- TABLETS & LANDSCAPE --- */
    
media screen and (max-width: 1024px) {
.infobar-inner {
grid-template-columns: 1fr !important; gap: 15px !important; text-align: center !important;
}
.infobar-brand {
text-align: center !important;
}
.infobar-right-wrapper {
width: 100% !important; justify-content: center !important; gap: 25px !important;
}
}
/* --- TABLETS PORTRAIT --- */
    
media screen and (max-width: 768px) {
.infobar-right-wrapper {
flex-wrap: wrap !important; gap: 12px 20px !important;
}
.infobar-item:not(:last-child)::after {
display: none !important;
}
}
/* --- SMARTPHONES --- */
    
media screen and (max-width: 480px) {
.brand-text {
font-size: 20px !important;
}
.infobar-right-wrapper {
flex-direction: column !important; align-items: flex-start !important; width: auto !important; margin: 0 auto !important; gap: 10px !important;
}
.infobar-text {
font-size: 13px !important;
}
}

</style>

Hallo Stefan,

vielen Dank für den Tipp mit dem Banner-Bereich! Ich habe den Code aus body_start entfernt und das Quelltext-Widget stattdessen direkt in den Banner-Bereich gesetzt.

Der Vorteil:
Der gesamte JavaScript-Teil konnte komplett rausfliegen. Die Leiste läuft jetzt über HTML und CSS im Layout, was natürlich viel sauberer ist. Ich muss den Artikel jetzt mit allen Seiten verknüpfen, aber das ist ja schnell gemacht.

Allerdings brachte der Banner-Bereich riesige Abstände nach oben und unten mit sich. Ich musste die negativen Margins im CSS ziemlich hoch ansetzen (margin-top: -45px und margin-bottom: -100px), um den weißen Block zusammenzuziehen, damit er an das Logo und die Navigation andockt.

Dazu meine Fragen an das Team:

1. Gibt es im System vielleicht eine direktere Einstellung, um diese Standard-Abstände des Banners zu verringern, damit ich nicht so stark mit negativen Werten im CSS gegensteuern muss?

Viele Grüße
Armin