Zeile über Logo

    Hallo,


    zuerst einmal muss ich ein Lob an Zeta aussprechen. Die 15er Version ist super!


    Allerdings finde ich leider keine Möglichkeit über dem Logo einen Container oder Zeile einzufügen wie in nachfolgendem Beispiel.

    https://www.krams-immobilien.de/


    Kann mir hier jemand helfen?


    Kennt jemand ein Widgets wo man einen Counter anzeigen kann. Nicht für die zugriffe auf die Webseite sondern ich möchte

    einen animierten Counter der die Anzahl verschiedener Bereiche anzeigt.

    Zbsp: Anzahl Kunden, Anzahl Filialen usw...


    Hoffe auf Hilfe, Danke!

    Hallo Mario,


    dies versteh ich nicht


    Dieses Script per Widget > Quelltext am Ende der Seite einfügen und anpassen.


    Wo bitte ist das Ende?


    Die ersten beiden Script funktioniern aber wo soll ich das am Ende einfügen? Hab auf der Seite beim letzten Container "widget" eingefügt aber es tut sich nichts.

    ergänzende Idee hierzu:


    mit F8 umschalten in den Spaltenmodus und dann das Widget "Quelltext" im Bereich "Footer" einfügen. Danach mit F8 wieder zurück in den normalen Ansichtsmodus. Wenn sich keine weiteren Artikel im Footer befinden, wäre damit sichergestellt, dass sich der Quelltext immer ganz unten auf der Seite befindet.

    Hallo Mario,

    hallo Thomas,


    danke für den Tipp mit F8...hat funktioniert. :)

    Wie bekomm ich nun drei nebeneinander?

    Und wie bekomm ich die falsch gesetzten widgets wieder weg?


    Auch über F8?


    Ich verwende das Layout Campfire... leider stimmt hier auch etwas nicht... Bei der Navigaton ist ein Unterstrich dieser wird bei Zeta am unteren Rand angezeigt. Sobald ich in die Vorschau hängt dieser über dem Rand. Auch sind die Menuebuttons nicht mehr mittig zum Logo. Bei anderen Layouts konnte man die Höhe der Navigation bestimmen... hier leider nicht. Geht dies auch nur über ein CSS-File?


    Hier der Link zur Seite. Ist nur eine Testseite zum Funktionen ausprobieren bis ich alles zusammen habe.


    https://hosting.zeta-producer.com/6329971245/index.html


    Anbei noch 2 Fotos einmal bzgl. Logo und Navi


    und einmal Zeile über Logo wie es aussehen soll.


    Über Eure Hilfe würd ich mich sehr freuen.

    Vielen Dank Mario !


    Die Counter funktionieren jetzt ... kann man jeden einzelnen Counter farblich hinterlegen? Im Script kann ich nur die Textfarbe ändern.

    Sorry das ich hier so viel Fragen muss... Ich bin kein Webprogramierer sondern nur ein Grafiker...und lege viel Wert auf das Erscheinungsbild einer Webseite.

    Hier der angepasste Code nach deinen Wünschen und für dein Layout. Farbcodes, Links, Text usw. musst du natürlich noch anpassen.


    Hier das Ergebnis.


    Die Topbar, dreispaltig "Campfire".

    Einstellungen > CSS


    Erweitert > Attribute > Standard > body_start

    Code
    1. <div class="topbarzp">
    2. <a class="spaltentopbarzp" href="tel:+491234555555"><i class="fa fa-volume-control-phone icon" aria-hidden="true"></i><span>+491234555555</span></a>
    3. <a class="spaltentopbarzp" href="mailto:webmaster@testseite.com"><i class="fa fa-envelope-o icon" aria-hidden="true"></i><span>test@testseite.com</span></a>
    4. <a class="spaltentopbarzp" href="https://goo.gl/maps/3eSCZpeq6nv" target="_blank"><i class="fa fa-map-marker icon" aria-hidden="true icon"></i><span>Anfahrt</span></a>
    5. </div>



    Die Counter 3 Stück nebeneinander mit verschiedenen Hintergrundfarben:

    Einstellungen > CSS

    Code
    1. <style>
    2. .title {
    3.   color: #fff;
    4.   font-size: 53px;
    5.   text-align: center;
    6. }
    7. .title p {
    8.   font-size: 23px;
    9. }
    10. </style>


    Erster Counter:

    Code
    1. <div class="title" style="background-color:#006600;">
    2.   <div class="box" data-duration="5000">
    3.      5000
    4.   </div>
    5.   <p>Menschen</p>
    6. </div>


    Zweiter Counter:

    Code
    1. <div class="title" style="background-color:#000066;">
    2.   <div class="box" data-duration="5000">
    3.      3200
    4.   </div>
    5.   <p>Zombies</p>
    6. </div>


    Dritter Counter inkl. Script:

    Was spricht denn dagegen, das ganze etwas einfacher gehalten mit Bordmitteln zu lösen und dafür den Banner-Bereich zu nutzen und dessen zu große Höhe ggf. mit etwas CSS anzupassen?

    Hallo Stefan,


    es spricht nichts dagegen wenn man weiß wie man dies bewerkstelligen kann. Ich hab keine Ahnung wie ich das mit css anpassen könnte.

    Da ich davon keine Ahnung habe. Es ist mir ein Rätsel wieso man nicht einfach in den Einstellungen so etwas wie Höhe einfach in Pixel angeben kann. Dann wäre es einfach.

    Ich sitze nun schon seit über eine Stunde daran, herauszufinden wie man die Höhe eines Containers definiert. Ich finde keine Möglichkeit. Auch dies muss wohl über das Inline-Css

    gemacht werden.

    Für einen Laien ist dies schon ziemlich kompliziert. In der 15er Version sind schon mal ganz gute Ansätze bzgl. grafischer Veränderungen aber leider immer noch zu wenig.


    Meine Frage wäre nun, wie kann ich die Höhe des Containers verändern.

    Und kann ich im Banner-Bereich auch mehrere Spalten setzen und dies mittig ausrichten ?


    Pfffff.... so einfach ist das nicht eine grafisch ansprechende Webseite zu erstellen, wie Ihr damit auf Eurer Hompage wirbt.

    Hallo Mario,


    tausend Dank für die Codes, hatt alles wunderbar geklappt. Kann man die Abstände der Texte im Banner oben auch weiter zusammen ziehen ,

    oder wenigstens so anpassen, dass Sie bündig zum Logo (anfang) und Navi (Ende) stehen?


    LG

    Ja, im Banner-Bereich können Artikel auch nebeneinander angeordnet werden, wie im Inhaltsbereich auch.


    Die Höhe eines Containers ist grundsätzlich flexibel, der muss sich ja an den Inhalt anpassen. Die Mindesthöhe, die manchmal etwas groß erscheinen mag, hängt meist bestimmt vom den Innenabständen ab (padding).


    Am besten mal alles so wie gewünscht in den Banner-Bereich einfügen und dann auf den Testserver veröffentlichen und dazu sagen, was an den Höhen ggf. noch nicht stimmt, dann können wir ggf. relativ einfach ein paar Zeilen CSS liefern.


    Oder natürlich einfach den Code von Mario nutzen.

    Hallo Stefan,

    Hallo Mario,


    Habe nun den ersten Rohentwurt der Startseite fertig folgende Dinge funktionieren nicht so wie ich mir das vorstelle:


    Ich fange von oben her an:

    Banner: Die Texte sind zu weit auseinander und die Schrift zu dünn. Bündig zum Logo wäre gut oder mittig und enger zusammen.

    Kann man auch zwei Orte als Mapsymbol anzeigen ?


    Kopfgrafik: In Vollbildansicht alles ok... aber bei Tablet oder Smartfon... rutscht der Text voll ins Bild und das Menue ist ebenfalls im Bild. Das Menue könnte etwas größer sein und das Logo etwas kleiner. Die Tablet und Smartfonansicht ist gar nicht gut.


    Unter der Kopfgrafik der Text "Tennis Academy..." hat einen grauen Hintergrund (Container). Dieser ist mir zu hoch. Wie kann die Höhe verändern?


    Counter: läuft alles wunderbar, allerdings ist er schon durchgelaufen bis man zu ihm runtergescrollt hat. Kann man bestimmen, dass er erst anfängt zu zählen wenn man auf einer bestimmten Seitenhöhe ist?


    Footer: die socialmediabuttons beinhalten leider weder Youtube noch Instagram wie kann ich dies im gleichen Stil hinzufügen ?


    So ich hoffe es gibt für diese paar Mäkel eine Lösung.

    Würde mich über Eure Hilfe sehr freuen.


    LG


    Hier der Link


    https://hosting.zeta-producer.com/6333631401/index.html

    Hallo,


    hier wird aktuell ja keinInhalt im Banner-Bereich genutzt, sondern der Code von Mario. Da bin ich also erstmal raus.


    Zitat von fotora

    Kopfgrafik: In Vollbildansicht alles ok... aber bei Tablet oder Smartfon... rutscht der Text voll ins Bild und das Menue ist ebenfalls im Bild. Das Menue könnte etwas größer sein und das Logo etwas kleiner. Die Tablet und Smartfonansicht ist gar nicht gut.

    Dass der Text ins Bild rutsch ist halt nun mal so, bei responsive design. Da muss man sich schon von pixelgenauer Platzierung verabschieden um all die anderen Vorteile genießen zu können. Ich finde, das sieht in Ihrem Beispiel auch nie wirklich schlecht aus.

    Dass ein Menü in die Kopfgrafik rutscht, kann ich hier nicht entdecken, ggf. einen Screenshot hier anhängen.


    Zitat von fotora

    Unter der Kopfgrafik der Text "Tennis Academy..." hat einen grauen Hintergrund (Container). Dieser ist mir zu hoch. Wie kann die Höhe verändern?

    In den Layout-Einstellungen unter "Allgemein > Container" den Wert für "Container-Rand-Vertikal verringern. Das wirkt sich dann aber auf alle Container aus.

    Alternativ in den Darstellungs-Eigenschaften des Container die Innenabstände (oben und unten) festlegen. Das wirkt sich dann nur auf den jeweils gewählten Container aus.


    Footer – Social-Media: YouTube bietet kein standardisiertes Interface um etwas zu über deren Website zu teilen und ebensowenig tut das Instagram. Daher fehlen diese Dienste vermutlich im Shariff-Plugin von heise.de (das wir hier nutzen). Siehe: https://github.com/heiseonline…44#issuecomment-172631980

    Zitat von Stefan S

    Was spricht denn dagegen, das ganze etwas einfacher gehalten mit Bordmitteln zu lösen und dafür den Banner-Bereich zu nutzen und dessen zu große Höhe ggf. mit etwas CSS anzupassen?

    Stefan S , wir hatten das hier schon einmal LINK. Da es dazu keine Lösung gab bin ich zu dieser Variante übergegangen. Ob sich das mittlerweile anders verhält habe ich noch nicht getestet.

    so sieht es aus...auch auf meinen Samsung S7 bis auf die Scrollbalken

    wenn dies gut aussieht...ich weiss nicht


    Schade das man dies so einfach hinnehmen muss.


    Zum Social-Media Footer; dann macht diese Option keinen Sinn, ich denke die meisten sind auch in Youtube und Instagramm vertreten

    und möchten hierzu einen Link.

    Auch hier muss man wieder sich selber etwas einfallen lassen.

    Sorry, habe die letzte Stunde damit verbracht dir einen neuen Code zu schreiben.


    Erst mal zu den Abständen, Stefan hatte geschrieben "von pixelgenauer Platzierung verabschieden". Wenn du das machst rutscht der Menü-Button auch nicht in das Logo.

    Im Layout-Designer unter Logo / Hauptmenü bei Abstand horizontal anstatt 150px mal 10% angeben dann passt das und am Desktop schaut es genau so aus.


    Aus dieser Grundlage auch der neue Code.

    Einstellungen CSS:


    Erweitert > Attribute > Standard > body_start

    Code
    1.         <div class="topbarzp">
    2.     <div class="spaltentopbarzp">
    3. <a class="linktopbarzp" href="tel:+491234555555"><i class="fa fa-volume-control-phone icon" aria-hidden="true"></i><span>+491234555555</span></a>
    4. <a class="linktopbarzp" href="mailto:webmaster@testseite.com"><i class="fa fa-envelope-o icon" aria-hidden="true"></i><span>test@testseite.com</span></a>
    5. <a class="linktopbarzp" href="https://goo.gl/maps/3eSCZpeq6nv" target="_blank"><i class="fa fa-map-marker icon" aria-hidden="true icon"></i><span>Anfahrt</span></a>
    6.     </div>  
    7.         </div>

    Einen zweiten Ort mit Map-Symbol kannst du einbinden.




    Zur Textdarstellung im Header. Da kann auf einem kleinen Bildschirm immer nur das das angezeigt werden was rein passt. Deshalb werden hier die Scrollbalken angezeigt. Das ist Responsive. Schick finde ich das auch nicht.


    Abhilfe kann hier schaffen:

    1. Das Widget Slider als Header nutzen. Hier wird der Text unter dem Bild angezeigt wenn er nicht mehr rein passt.
    2. Überschrift "oder und" Text kleiner darstellen. Bzw. weniger Text.
    3. Versuchen mit CSS Überschrift "oder und" Text für kleine Bildschirme kleiner darzustellen.
    4. Versuchen mit CSS Überschrift "oder und" Text für kleine Bildschirme auszublenden.



    Zum Counter. Kann ich versuchen aber nichts versprechen.

    Hallo Mario,


    ganz herzlichen Dank für die Codes. Nun passt es und ich kann Größe Farbe selbst bestimmen.


    Das widget Slider habe ich als Header benutzt, aber der Text unter dem Bild wird nicht angezeigt.

    Wenn das nicht anders geht, dann wäre die Variante 3 zur Not 4 mir am liebsten.


    Leider kann man den Text im Header nicht in der Größe verändern. Nur die Überschrift und diese auch nur eingeschränkt.


    Alles nicht so easy....


    Nochmals vielen Dank für Deine Hilfe


    LG


    PS : Wenn das mit den Countern noch funktionieren würde, wäre echt super !

    Mit folgendem CSS kannst du die H3 Überschrift und den Text im Header für kleine Bildschirme anpassen.

    Die Größen habe ich schon für deine Bedürfnisse angepasst, kannst du natürlich noch ändern.

    Die Seitenbreiten würde ich so belassen weil diese auch die Seitenbreiten sind welche im Layout verwendet werden, somit werden diese überschrieben.


    Einstellungen CSS:

    Code
    1. <style>
    2. @media screen and (max-width: 1064px) {
    3. #slider h3 {font-size: 4.5rem;}
    4. #slider {font-size: 1.1rem;}
    5. }
    6. @media screen and (max-width: 736px) {
    7. #slider h3 {font-size: 2.5rem;}
    8. #slider {font-size: 1.0rem;}
    9. }
    10. </style>

    Hallo Mario,


    erst einmal herzlichen Dank, für Deine ganze Mühe.

    Leider ist das Ergebnis für die mobile Ansicht immer noch nicht zufriedenstellend.

    Hast Du Dir die Seite mal auf Deinem Handy angeschaut?

    Also bei sieht es immer noch übel aus. Auch die Textumbrüche gehen gar nicht.


    So langsam gebe ich auf... man ist echt sehr stark eingeschränkt mit Zeta. Vor allem wen man keine CSS - Codes schreiben kann.


    Unter einem anderen Editor ist vieles sehr einfacher und umfangreicher. Vielleicht werde ich wohl den Editor wechseln.


    Nochmals vielen Dank für Deine Hilfe. Was wäre Zeta ohne Dich!


    LG

    Thread geschlossen, was bitte soll das?


    Ich habe für das Produkt Zeta viel Geld bezahlt. Es wurde einem suggeriert, dass man mit ein paar Klicks professionelle Seiten erstellen kann. Dies ist einfach so nicht ganz richtig.

    Ich verbringe nun ca. 1 Woche damit, das Grundlayout einer Webseite zu erstellen und stoße dabei an Grenzen.


    Hanabi

    Nur weil ich erwähnt habe das Zeta ein nicht so umfangreicher Editor ist wie andere (werde jetzt mal keine nennen) wird einem der Thread geschlossen.

    Sorry dies ist ein Kleinkindverhalten. "Du sagst was schlechtes über mich, ich mag Dich nicht mehr, dann geh doch zu Bert" und tschüss.

    Was bitte ist das für eine Art???

    Übrigens weiß ich sehr wohl das Mario nicht bei Zeta arbeitet, sondern dies aus freien Stücken tut und dies weiß ich im Gegenteil zu manch anderen hier, sehr zu schätzen.


    Mario


    Es geht mir doch nicht nur um diesen Umbruch, den ich wie Du sagst selber gemacht habe.

    Entweder habe ich was mit den Augen oder Ihr. Das Headerbild ist abgeschnitten der Text hängt irgendwo...

    Das kann doch nicht sein... Wieso kann man denn nicht einfach sagen bei Smartphoneansicht so und so viel % wird das Foto kleiner skaliert und wenn der Text nicht drauf passt dann soll er einfach nicht angezeigt werden.

    Und dies sollte meiner Meinung auch machbar sein und zwar ohne CSS Kenntnisse oder Deiner Hilfe. Ich sagte ja, was wäre das Forum hier ohne Dich und Deiner Arbeit.

    Hallo,


    Zeta Producer ist ein Website-Baukasten und kein WYSIWYG-Tool für Webentwickler. Wenn man sich an die Funktionalität des Baukastens hält, kann man damit sehr ansprechende und einfach zu pflegende Websites erstellen. Ohne jegliche Fachkenntnisse.


    Wenn man darüber hinaus noch Sonderwünsche hat, was die Gestaltung angeht, so bieten wir sogar die entsprechende Entwickler-Dokumentation an um eigene Layouts oder Widgets entwickeln zu können. Das nötige Fachwissen vorausgesetzt.


    Ihnen stehen hier also alle Möglichkeiten offen. Wenn Ihnen das nötige Fachwissen fehlt, müssen sich sich wohl die vorgegebenen Möglichkeiten halten. Das haben Sie nicht getan und versucht Ihre Gestaltungswünsche mit Fremdcode umzusetzen, den Sie nicht verstehen. Das schreit natürlich mittelfristig nach Ärger (vor allem wenn die Fremdlösung unbezahlt ist), für den Sie aber bitte nicht unsere Software verantwortlich machen sollten.


    Wenn Sie komplette gestalterische Freiheit suchen und weniger die CMS-Funktionalität zur Pflege der Website benötigen, ist ein anderer Editor ggf. die bessere Wahl.

    Hallo,


    ich habe auf den Thread eben geantwortet und den Thread wieder geöffnet. Jeder hat mal einen schlechten Tag und das gestehen wir vor allem unseren freiwilligen Helfern zu, die hier Tag und Nacht aufopfernd helfen.

    Zitat von fotora

    Ich habe für das Produkt Zeta viel Geld bezahlt. Es wurde einem suggeriert, dass man mit ein paar Klicks professionelle Seiten erstellen kann. Dies ist einfach so nicht ganz richtig.

    Ich verbringe nun ca. 1 Woche damit, das Grundlayout einer Webseite zu erstellen und stoße dabei an Grenzen.


    Wir bieten eine kostenlose Testversion an, es kann also theoretisch ausgiebig getestet werden, ohne einen Euro zu investieren.

    Wir verstehen uns als CMS. Sie benötigen anscheinend aber eher ein WYSIWYG-Webentwicklungs-Tool (siehe mein Post von vorhin).

    Hallo Stefan,


    vielen Dank für Ihre Antwort, schön dass Sie diese in einem sachlich ruhigen Ton geschrieben haben ohne gleich meinen Thread zu schließen.


    Ja ich habe nicht das nötige Fachwissen bzgl. Programmierung und bin gestalterisch hier an meine Grenzen gestoßen.

    Ich bin Fotograf und Grafiker aber kein Webprogrammierer und mache ab und zu für Freunde eine Internetseite. Bisher kam ich gut damit klar.

    Hab nun dank der Diskussionen und Hilfe von Mario, einen Weg gefunden das auch auf dem Smartphone das Headerbild und der Text halbweg gut aussehen.