Hallo Zusammen,
Ich bin gerade dabei meine Webseite anzupassen. Ich würde gerne auf der rechten Seite meines Hauptmenüs ein paar Icons mit Verlinkung hinzufügen. Die Siete sieht wie folgt aus
Wie ich mir jedoch das Ganze vorstelle, habe ich mit Photoshop mal hergestellt:
Mir stellt sich nun die Frage wie genau man das hinbekommt, sprich wo ich diese Icons Rechtsbündig im Hauptmenü hinzufügen kann.
Bitte helft mir ich verzweifel derzeit
Hallo Mirco,
so wie von Dir gezeigt, wird das mit Bordmitteln nicht möglich sein. Das Widget „Sidebar-Icons“ wäre in diesem Zusammenhang aber vielleicht eine denkbare Alternative: Es bietet Dir die gewünschte Funktionalität einschließlich der Icons von Font Awesome, wäre allerdings vertikal angeordnet und scrollend.
Ansonsten müsstest Du Dich mal auf https://www.widget-zp.de/widgets.html umsehen.
Hier wäre vielleicht https://www.widget-zp.de/2022/top-bar.html interessant.
Fragen zu den externen ZP-Widgets bitte im entsprechenden Forum unter https://www.zella.de/forum/forum/ stellen.
Viele Grüße
Tom
Wenn es Dir nur um die Icons geht und diese gleich hinter den restlichen Einträgen des Hauptmenüs stehen dürfen, dann wäre es wohl machbar. Mit welchem Layout arbeitest Du?
Hallo Mirco,
ich erläutere es jetzt mal am Haus-Icon.
Lege eine neue Hauptseite an. Nenne sie bspw. „Haus“.
Jetzt legst Du auf irgendeiner Seite ein Text-Widget an, mit dem Du den Code erstellst.
Füge jetzt im Text-Widget das entsprechende Symbol ein („weitere Richtextformate [+:] > Piktogramme) und ändere anschließend noch die Schriftgröße des Symbols. Welche Größe ist zunächst egal, es geht nur darum für die Schriftgröße schon mal einen Eintrag im Code zu haben.
Jetzt schaltest Du in die Quelltext-Ansicht („< >“) um. Hier steht jetzt bspw.
<p><span style="font-size: 30px;"> <i class="fa fa-home fr-deletable" aria-hidden="true"> </i> </span></p>
Entferne jetzt noch <p> am Anfang und </p> am Ende:
<span style="font-size: 30px;"> <i class="fa fa-home fr-deletable" aria-hidden="true"> </i> </span>
Jetzt kopierst Du diesen Code, gehst in die Eigenschaften der Seite „Haus“ und fügst den Code unter „Name > Name“ ein („Haus“ also überschreiben). Im gleichen Fenster gibst Du unten noch das Weiterleitungsziel an, bspw. Deine Startseite.
Wenn das Symbol nun zu groß oder zu klein ist, kannst Du den Wert im Code mittels „font-size“ anpassen.
Vielleicht ließen sich die Symbole doch noch mittels CSS von den restlichen Einträgen des Hauptmenüs trennen und auf die rechte Seite bringen. Da müsste dann aber auch noch die mobile Ansicht berücksichtigt werden, das könnte also sehr aufwändig werden. Vielleicht äußerst sich ja mal einer der CSS-Cracks …
Viele Grüße
Tom
Hallo,
wenn Sie über entsprechende HTML- und CSS-Kentnisse verfügen, können Sie auch das Layout kopieren und anpassen. Allerdings müssen Sie sich dann selbst auch im Layout-Updates kümmern, ansonsten wird es Probleme mit zukünftigen Versionen geben. Mehr dazu erfahren Sie hier: https://developer.zeta-producer.com/index.html
Nur mit CSS wird das vermutlich eher nicht bzw. nur sehr umständlich und nicht wirklich sauber lösbar sein.
wenn ich die Index.php Datei bearbeite die im Pfad meines Projekts liegt, verändert Zeta diese wieder Rückwirkend sofern ich die Seite hochlade. Gibt es einen bestimmten Workflow wie ich solche Designs anpasse?
Eine Änderung der index.php bringt nichts, da Zeta Producer diese eben neu generiert und überschreibt. Sie müssen, wie auf der von mir verlinkten Seite erklärt, das Layout "Flat Responsive" kopieren. Von diesem können Sie dann den HTML-Code beliebig anpassen, also auch in der Navigation eigene Links einfügen. Wenn in Zeta Producer dann Ihr eigenes, kopiertes Layout ausgewählt ist, wird dieses zur Erstellung der index.php verwendet und die Links werden dort automatisch angezeigt. Das setzt aber wie schon gesagt fundierte HTML-Kenntnisse voraus.
Hallo Mirco,
ich schließe mich Phil an. Die Icons nach rechts zu setzen, verlangt vermutlich recht komplexes CSS. Meine Versuche hierzu sind jedenfalls gescheitert, was natürlich nichts heißt, da meine CSS-Kenntnisse nur befriedigend bis ausreichend sind.
Viele Grüße
Tom
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
