Startseiten- /Smartphone-Optimierung

    Hallo,

    ich möchte meine Startseite u.a für Smartphones optimieren und habe etwas Interessantes bei https://de.wordpress.com/features/ gesehen.
    Die auf der Seite abgebildeten Blöcke (Bild 1) mit ''Blog, Website oder beides'', ''Tarife für jedes Budget'' und ''Individuelle Domains'' möchte ich bei mir genau so darstellen.
    Wenn der Browser dann etwas kleiner wird, rutschen die Blöcke untereinander (Bild2).
    So möchte ich meine Blöcke auch darstellen, bekomme es aber leider nicht nachgebaut. Ist es eine Tabelle?

    Kann mir da jemand helfen oder hat es jemand auf seiner Seite erfolgreich umgesetzt?

    • Gerade eben
    • 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

    Ohne jetzt in den Quelltext der Site geschaut zu haben, denke ich, geht es doch einfach mit 3 DIVs die left gefloatet sind.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Ich hatte den Code aus dem Seitenquelltext ...[COLOR=#881280][FONT=monospace]<div [/FONT][/COLOR][FONT=monospace]class[/FONT][COLOR=#881280][FONT=monospace]="[/FONT][/COLOR][FONT=monospace]features--section[/FONT][COLOR=#881280][FONT=monospace]">... testweise bei mir eingegeben, welches bei mir aber nicht im Ansatz so aussieht.[/FONT][/COLOR]

    So wie maxe sagt: 3 Div-Container mit float: left. Über media-query setzt du die dann auf float: none. Natürlich musst du mit der width noch spielen. Und dem übergeordneten Element evtl. noch ein display: flex verpassen.

    Sagt dir das alles nichts, dann schau dir mal Shortcodes Ultimate an. Damit kannst du unter anderem Rows und Cols per Shortcode einfügen.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Ich möchte ungern mit Plugins arbeiten. Wie sieht so ein Code für WordPress denn genau aus?
    Ich habe mehrere HTML-Codes diverser Hilfeseiten ausprobiert. Leider sehen diese immer anders aus, als auf der Hilfeseite.

    Zitat von SirEctor

    So wie maxe sagt: 3 Div-Container mit float: left. Über media-query setzt du die dann auf float: none. Natürlich musst du mit der width noch spielen. Und dem übergeordneten Element evtl. noch ein display: flex verpassen.

    Habt ihr vielleicht eine Quelle für mich, wo ich mir anschauen kann, wie ich diese Codes erstellen und im WordPress verwenden kann?
    Bisher habe ich leider keinen passenden Code gefunden.

    Zitat von Radolski

    Habt ihr vielleicht eine Quelle für mich, wo ich mir anschauen kann, wie ich diese Codes erstellen und im WordPress verwenden kann?
    Bisher habe ich leider keinen passenden Code gefunden.

    Das ist CSS. Einfach mal die genannten Stichworte googeln (display, float, Media-Queries).

    Ansonsten gibt es hier eine umfassende Anleitung zu CSS im allgemeinen:
    https://wiki.selfhtml.org/wiki/CSS

    Es gibt unterschiedliche Möglichkeiten, (eigenes) CSS in WordPress einzubinden. Am einfachsten geht es über Design -> Customizer -> Zusätzliches CSS.

    Ich bin mit diesem Thema etwas überfordert :(
    Muss man bei der Erstellung der DIV-Container immer auch die CSS anpassen oder kann man es auch direkt im DIV-Container?
    Könnte mir vielleicht jemand, wie hier beschrieben:

    [COLOR=#333333]3 Div-Container mit float: left. Über media-query setzt du die dann auf float: none. Natürlich musst du mit der width noch spielen. Und dem übergeordneten Element evtl. noch ein display: flex verpassen.
    [/COLOR]
    diese Codes freundlicherweise erstellen?

    Dafür gibt es z. b. unsere Jobbörse.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden