Erstellung eines Kachel-Menus

  • 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)


    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

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • 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.

  • 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?

  • 1. Wenn ich die Menu-Vorlage ändere... dann wird sich doch das für alle ändern oder nicht?


    Du musst dem 2. "Menü" eben andere Klassen geben.
    z.B. <div class="kachelmenu"> hier dein Menu </div>


    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?

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

  • (...)
    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! (...)

    Dann hoffe ich mal, das ich nur ein Beschäftigungsprojekt und nichts wirklich Produktives...


    Zitat


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

    Du geht einfach so vor wie hier

    http://forum.wpde.org/design/152703-…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.

  • Dann hoffe ich mal, das ich nur ein Beschäftigungsprojekt und nichts wirklich Produktives...

    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.

    http://forum.wpde.org/design/152703-…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.

    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.


  • 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.

    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_Refer…_register_style und https://developer.wordpress.org/reference/func…_enqueue_style/

    "Gewinnspiele, Gutscheinaktionen, Werbung, insbesondere kommerzielle, ist sowohl in Signaturen als auch Beiträgen ohne vorherige Genehmigung des Betreibers verboten. Bei Zuwiderhandlung behalten wir uns vor die Beiträge zu löschen und den entsprechenden User zu sperren." Auszug aus den WPDE.org Nutzungsbedingungen

  • 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(…)

    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…


    Zitat

    (…)Ich weiss wir man im CSS das hovern anwendet, leider finde ich die passende CSS Datei nicht. Das ist für mich sehr verwirrend. (…)

    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-wi…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...

  • 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).

  • 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).

    Dann schreib doch was rein ;)
    Oder suchst du irgendwelche bestimmten styles zum verändern?

    "Gewinnspiele, Gutscheinaktionen, Werbung, insbesondere kommerzielle, ist sowohl in Signaturen als auch Beiträgen ohne vorherige Genehmigung des Betreibers verboten. Bei Zuwiderhandlung behalten wir uns vor die Beiträge zu löschen und den entsprechenden User zu sperren." Auszug aus den WPDE.org Nutzungsbedingungen

  • Dann schreib doch was rein ;)
    Oder suchst du irgendwelche bestimmten styles zum verändern?


    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!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!