1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Erstellung eines Kachel-Menus

Dieses Thema im Forum "Design" wurde erstellt von Tigriza, 7. Juni 2016.

  1. Tigriza

    Tigriza Member

    Registriert seit:
    7. Juni 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo zusammen!

    Ich bin Studentin und erstelle im Rahmen eines Medienprojektes eine Website für eine Firma.
    Leider bin ich bei Wordpress neu und brauche eure Hilfe!

    Unter dem Menu möchte ich eine Themenauswahl in Form von Kacheln erstellen.
    (Siehe Anhang)

    Bildschirmfoto 2016-06-07 um 23.07.42.png
    Bildschirmfoto 2016-06-07 um 23.09.08.png

    Diese Kacheln sollten folglich einen Themanamen, einen Icon und einen Link enthalten.
    Ebenfalls sollte sich beim "hovern" die Kacheln wie ein Button färben, so dass der Link als solches erkannt wird.

    Habe bereits versucht ein passendes kostenloses Plugin zu finden, jedoch noch erfolglos.
    Ich habe gehofft ihr könnt mir eins empfehlen? Oder einen anderen Weg ein/mehrere solcher Kacheln zu erstellen.

    Vielen Dank im Voraus!!!

    Liebe Grüße,
    Tatjana
     
  2. La Geek

    La Geek Well-Known Member

    Registriert seit:
    4. April 2014
    Beiträge:
    62
    Zustimmungen:
    0
    Hallo Tatjana,

    eigentlich ist ein Plug-in dafür nicht nötig. Du könntest das ganz normale Menü nehmen und es mit CSS anpassen. Im einzelnen Menüpunkt eine eigene und einzigartige CSS-Klasse vergeben und das jeweilige Icon als Hintergrundbild vor dem Namen anzeigen. Die Größe der Menüpunkte mit padding justieren und das hover halt auch per CSS.
     
  3. Tigriza

    Tigriza Member

    Registriert seit:
    7. Juni 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Ein Menu bzw sogar zwei habe ich ebenfalls (eins oben, wie das typische und eins unten in der Fußzeile). Ich könnte ein neues erstellen, jedoch weiss ich dann nicht wo ich die einzelnen menus-CSS finde?

    1. Wenn ich die Menu-Vorlage ändere... dann wird sich doch das für alle ändern oder nicht?
    2. wie kann man ein Icon als Hintergrund VOR dem Namen anzeigen? Wenn ich doch Hintergrund wähle wird es doch mit background-image auf das ganze ausgedehnt oder nicht?
     
  4. Sen

    Sen Active Member

    Registriert seit:
    6. Juni 2016
    Beiträge:
    28
    Zustimmungen:
    1
    Du musst dem 2. "Menü" eben andere Klassen geben.
    z.B. <div class="kachelmenu"> hier dein Menu </div>

    Lies dich doch bitte erst mal in die basics ein:
    http://www.w3schools.com/css/css_background.asp
     
  5. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    1
    Dann hoffe ich mal, das ich nur ein Beschäftigungsprojekt und nichts wirklich Produktives...


    Du geht einfach so vor wie hier

    http://forum.wpde.org/design/152703-hover-effekt-auf-galleriebildern.html#post655539

    in verschiedenen Varianten für Bildgalerien beschrieben und verlinkst nicht auf die Bilder, sondern auf die jeweiligen Seiten und lässt ansonsten die Menüfunktion von WP link liegen - fertig.
     
  6. Tigriza

    Tigriza Member

    Registriert seit:
    7. Juni 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Es ist ein Medienprojekt, in diesem sollen wir ein komplettes Konzept entwickeln und diesen umsetzen.
    Die Firma möchte das im Nachhinein selbst ändern und anpassen können, folglich müssen wir das in einem CMS machen.
    Wordpress wurde dabei von Ihnen vorgeschlagen. Als Alternative müssten wir die Seite selbst implementieren und dazu eine "Gebrauchsanleitung" schreiben. Dies ist uns zu umfangreich, folglich versuchen wir nun das schnell zu machen.

    Ich weiss wir man im CSS das hovern anwendet, leider finde ich die passende CSS Datei nicht. Das ist für mich sehr verwirrend.
    Ich habe insgesamt drei *.css Dateien gefunden, jedoch sind diese nur die Vorlagen vom Template und nicht von der von mir nun erstellen Website.
     
  7. am3

    am3 Well-Known Member

    Registriert seit:
    11. März 2010
    Beiträge:
    461
    Zustimmungen:
    21
    Die "Basis"-CSS-Datei jedes WP Themes ist einfach das style.css im Ordner des Themes.
    Du kannst aber auch nach Belieben eigene css-dateien einbinden

    Siehe https://codex.wordpress.org/Function_Reference/wp_register_style und https://developer.wordpress.org/reference/functions/wp_enqueue_style/
     
  8. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    1
    Hatte ich mir schon so in etwa gedacht, leider kommen immer noch zu viele Unternehmen damit eine zu lange Zeit durch, aber ich bemerke auch, dass sich mittlerweile zunehmend häufiger diese falsche Spar- und Ausbeutungspolitik langfristig eben doch nicht rechnet, manchmal gar bitter rächst, am meisten büßen dann dafür aber wiederum bedauerlicherweise die kleinen einfach bis kaum qualifizierten Mitarbeiter, die besser qualifizierten und allen voran die Chefs, bringen ihre Pfründe meist noch rechtzeitig ins Trockene…


    Dann weißt Du es also doch nicht so richtig und hättest Du meinen verlinkten Beitrag komplett gelesen, wüsstest Du es spätestens danach, hast Du aber leider wohl nicht, desweiteren wäre Dir dann auch klar geworden, wie man ein solches Vorhaben (Deines aus dem OP) generell auch lösen kann ohne die Menüfunktion von WP zu bemühen, denn darum ging es primär in meiner Antwort und weitere Möglichkeiten für Hovereffekte hatte ich mal hier

    http://forum.wpde.org/plugins-und-widgets/153705-image-mouseover.html#post659043

    beschrieben, falls Du Dich für einen solchen Lösungsweg entscheidest.

    Ansonsten kannst Du natürlich auch einfach zu einem sog. Page Builder greifen, die bringen für genau solche Zwecke direkt oder über AddOns zahlreiche Features mit, die sich auch ohne Kenntnisse in CSS, HTML, JS und PHP stylen und konfigurieren lassen, die gehen dann zwar auf die Performance, aber das kann Dir in Diener Position ja herzlich egal sein...
     
  9. Tigriza

    Tigriza Member

    Registriert seit:
    7. Juni 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo am3,

    den style.css habe ich gefunden, aber da steht nichts drin :(
    Da ist nur ein rieeesen Kommentar (über die Seite und die gesetzlichen Regelungen).
     
  10. am3

    am3 Well-Known Member

    Registriert seit:
    11. März 2010
    Beiträge:
    461
    Zustimmungen:
    21
    Dann schreib doch was rein ;)
    Oder suchst du irgendwelche bestimmten styles zum verändern?
     
  11. Tigriza

    Tigriza Member

    Registriert seit:
    7. Juni 2016
    Beiträge:
    5
    Zustimmungen:
    0

    Nein. Es stand GAR nichts drin. Es war eben der falsche CSS.
    Aber ich habe den richtigen jetzt gefunden.

    An ALLE Danke für die Hilfe!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden