• Hallo zusammen,

    ich hab heute ein kleine Design-Frage. Ich würd bei meiner Schooltools-Webseite gern am Design schrauben und auf drei Spalten umstellen. Das sieht nun auch schon besser aus.

    Jetzt fehlt aber ein Bereich, wo man auf aktuelle Aktionen aufmerksam macht (in meinem Fall zB ein Vorschaubild zu Oster-Tools) oder auch ein Werbebild zur Anmelde-Seite meiner Hochschule. Also dass man oberhalb der aktuellen Beiträge noch angeheftet etwas platziert. Es sollen aber nicht unbedingt angeheftete Beiträge sein, sondern eher aktuelle Aktionen etc..

    Wie würdet ihr das am besten umsetzen?
    ich benutze GP (es gibt vermutlich mehrere Methoden, ich bin für jede praktikable dankbar)

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 14 Antworten – 1 bis 14 (von insgesamt 14)
  • Ich würde mit Custom Post Type UI eine Inhaltsart „Aktionen“ einrichten und dann auf der Webseite eine Block „Abfrage-Loop“ einfügen, der die Beiträge dieser Inhaltsart ausgibt.

    Alternativ kannst du auch mit „oben gehaltenen“ Beiträgen arbeiten. Du kannst dann zwei Abfrage-Loop-Blöcke verwenden, in denen einmal nur oben gehaltene Beiträge angezeigt werden und einem keine (um die Inhalte getrennt auszugeben). Über die Block-Einstellungen kannst du festlegen, dass z.B. nur ein einzelner oben gehaltener Beitrag angezeigt wird, was passiert wenn es aktuell keinen oben gehaltenen Beitrag gibt usw.

    Kleine gestalterische Anmerkung: wenn du die Website alleine pflegst, solltest du die Autorenangabe herausnehmen. Das sieht sonst merkwürdig aus.

    Anonymous User 20597857

    (@anonymized-20597857)

    Dh. du hast von der ehem. 2:1 Startseite (2 Teile Inhalt + 1 Sidebar Spalte (wie immer in den Kategorien/Beiträgen)) auf eine 3-spaltige Startseite umgestellt.

    Ob das besser aussieht, hm, deine Entscheidung. Bedenke auch, dass andere, insb. kleinere Bildschirme das eh wieder auf 2 oder 1 Spalte reduzieren.

    Nun fehlt dir also eine Startseiten-Sidebar, wo man früher alles mögliche unterbringen konnte.
    Wenn das so bleiben soll, kannst diese Elemente nur in einem (Widget) Bereich oberhalb einbauen. Aber wieder beobachten, wo sich dieser hin verkrümelt, wenn man am Tablet oder Handy guckt.

    Meine Meinung, falls interessant: Ich würde es eher umgekehrt machen: Eine großzügige aber gut eingeteilte, aufgeräumte Startseite, breit (1-spaltig), unübersehbar, inkl. eben wichtigen Aktionen, usw.
    In den Kategorien, ja da können auch 3 Spalten kommen, wenns der Platz erlaubt
    Und die Beiträge so als Mittelmaß, also wie sie jetzt sind.


    oder so, ja, …

    • Diese Antwort wurde geändert vor 8 Monaten, 3 Wochen von Anonymous User 20597857.

    Ich empfinde das aktuelle Layout (besonders mit dem grauen Hintergrund von Navigation und Beitrags-Kästen) auch als etwas monoton, wobei wir uns hier eigentlich gar nicht so im Detail über die Gestaltung auslassen wollen. Dem einen gefällt’s, der anderen nicht …

    Die Idee einer Sidebar mit Widget für Ankündigungen/aktuelle Aktionen finde ich grundsätzlich OK, wobei Widgets durch die vermehrte Nutzung von Smartphones nicht mehr so angesagt sind. Das, was du vielleicht als besondere Aktion hervorheben möchtest, erscheint dann ganz unten unter den Beiträgen, wo vielleicht ein Drittel der Besucher gar nicht mehr hinscrollt.

    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .one-container .container,
    .separate-containers .paging-navigation,
    .inside-page-header {
      border: 1px solid lightgrey;
      border-radius: 5px;
      box-shadow: 2px 2px 3px lightgrey;
    }

    😀

    Thread-Starter helmutpecher

    (@helmutpecher)

    danke für eure Anregungen. Bzgl. Sidebar-Spalte: irgendwie empfinde ich diese nicht mehr wirklich als nutzbringend und ich bin mir auch nicht sicher, ob Nutzende da wirklich oft drauf schaun.

    Viele Layouts von Webseiten verwenden derzeit drei oder sogar vier Inhaltsblöcke und packen Unterstrukturen eher in Header-Menüs.

    Wobei mir die Inhaltsdarstellung eines einzelnen Posts wieder „zu breit“ erscheint (auf PC-Bildschirmen), da würde ich also eine Sidebar nehmen, aber eben eine reduzierte (über deren Inhalt ich mir auch noch nicht klar bin).

    mario: wo genau soll der von dir gepostete Code hin?

    • Diese Antwort wurde geändert vor 8 Monaten, 3 Wochen von helmutpecher.

    Wir beurteilen hier eigentlich nicht die Gestaltung von Websites, weil die Wahrnehmung recht subjektiv ist. Ich hatte mir aber einen Spaß erlaubt und mit der oben geposteten CSS-Regel ein wenig das Aussehen der Beitragskästchen verändert. Wenn du magst, kannst du den Code im Customizer unter Zusätzliches CSS einfügen (und bei Nichtgefallen jederzeit gefahrlos auch wieder entfernen).

    Thread-Starter helmutpecher

    (@helmutpecher)

    … sieht natürlich toll aus, danke. was müsste ich ergänzen, um auch die Inhaltselemente / Boxen zB der Sidebar so darzustellen?

    • Diese Antwort wurde geändert vor 8 Monaten, 3 Wochen von helmutpecher.

    Im Moment gibt es noch keine Sidebar. Grundsätzlich: Browser mit Webseite öffnen, mit F12 Entwicklertools anzeigen lassen, zu gestaltendes Element anklicken und aus dem zugehörigen HTML die CSS-Klasse notieren. Dann …

    .css-klasse,
    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .one-container .container,
    .separate-containers .paging-navigation,
    .inside-page-header {
      border: 1px solid lightgrey;
      border-radius: 5px;
      box-shadow: 2px 2px 3px lightgrey;
      background-color: #f0f0f06b;
    }

    Die letzte Zeile hellt den Hintergrund noch etwas auf, was dann etwas „leichter“ aussieht.

    In der Einzelansicht der Beiträge gibt es eine Sidebar. Da sollte der richtige Selektor .sidebar .widget sein. Also

    .sidebar .widget,
    .separate-containers .inside-article,
    .separate-containers .comments-area,
    .separate-containers .page-header,
    .one-container .container,
    .separate-containers .paging-navigation,
    .inside-page-header {
      border: 1px solid lightgrey;
      border-radius: 5px;
      box-shadow: 2px 2px 3px lightgrey;
      background-color: #f0f0f06b;
    }

    … und dann noch

    #secondary-navigation {
      background-color: #d1d1d1;
      border-bottom: 1px solid #9b9b9b;
      box-shadow: 2px 2px 3px lightgrey;
      border-radius: 5px;
    }
    
    #ajaxsearchpro2_1.asp_compact, #ajaxsearchpro2_2.asp_compact, div.asp_m.asp_m_2.asp_compact {
      border-radius: 0 5px 5px 0;
    }
    

    So, jetzt aber Schluss! 😀
    CSS ist bekanntlich nicht unser Thema hier.

    Thread-Starter helmutpecher

    (@helmutpecher)

    danke, das sieht wirklich gut / besser aus. Lasse ich so. Am WE sehe ich mir das mit dem Custom Loop näher an…

    Thread-Starter helmutpecher

    (@helmutpecher)

    mario: ich hab das jetzt mal versucht und mich in die Loops etwas eingearbeitet (es gibt offenbar auch einen Kadence Block, der ähnlich funktioniert). Nur bin ich dann auf einige Probleme gestoßen:

    Ich habe mit der Elements-Funktion ein Element mit einem Hook erstellt und dort an der passenden Stelle das mit den Loops probiert, ich habe dann auch nur eine Kategorie definiert und das hat geklappt, aber die Vorschau-Beiträge sahen vom Layout nie wirklich gut aus bzw. passten nicht zum Rest der Webseite. Außerdem ist mir aufgefallen, dass das nicht übernommen wird, dass ich Bild und Überschrift nur als Link verwende. Das Bild wurde dann gleich mal gar nicht angezeigt.

    Es ist aber durchaus möglich, dass ich das nicht verstehe oder falsch anwende.

    Am aller einfachsten wärs wohl, wenn ich nur die Oben-Fixieren-Funktion verwende. Aber dann ist das halt vom Rest der Startseite nicht optisch trennbar (?)

    Ich habe mit der Elements-Funktion ein Element mit einem Hook erstellt und dort an der passenden Stelle das mit den Loops probiert, …

    Sorry, aber … keine Ahnung, wovon du sprichst. 😀

    Elements-Funktion? Element mit Hook? Vielleicht magst du etwas ausführen, was du da gemacht hast und was wo und weshalb nicht funktioniert?

    Am aller einfachsten wärs wohl, wenn ich nur die Oben-Fixieren-Funktion verwende. Aber dann ist das halt vom Rest der Startseite nicht optisch trennbar

    Deshalb hatte ich geschrieben, dass du dann zwei Abfrage-Blöcke verwendest: einen, der nur oben angeheftete Beiträge zeigt und einen, der keine angehefteten Beiträge zeigt. Dazwischen kannst du einen Abstands-Block, einen Linien-Block, ein großes Bild oder sonst was als optische Trennung einfügen.

    Ich hab gerade nochmal geschaut: Beim Plugin Kadence kannst du den Block „Posts“ verwenden. In der Sidebar stellst du dann die gewünschte Beitragsart ein:

    Screenshot
Ansicht von 14 Antworten – 1 bis 14 (von insgesamt 14)
  • Das Thema „Info-Buttons“ ist für neue Antworten geschlossen.