• Gelöst yogigoy

    (@yogigoy)


    Hallo Zusammen,

    ich würde gerne bei mir auf der Startseite, die Kursfelder anpassen, so dass die Buttons in den einzelnen Kursangeboten unten gehalten werden und die Bilder oben. Jedes Kursangebot hat somit im Anschluss die gleiche Höhe. Die Felder mit den Texten dazwischen sollen dahingegen flexibel sein aufgrund der Textlänge. Geht das mit Twenty Twenty Three?

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

Ansicht von 14 Antworten – 1 bis 14 (von insgesamt 14)
  • Moderator La Geek

    (@la-geek)

    Wenn du auch einen Website-Zustandsbericht postest, dann muss niemand Detektivarbeit leisten (die übrigens nie so ergiebig ist wie der Bericht), sondern man erhält über diesen Bericht sofort die Informationen darüber, welche „Tools“ eingesetzt werden. So kann man dann meistens auf das Tool abgestimmte Lösungsvorschläge unterbreiten.

    Bevor du ein neues Thema (Thread) erstellst
    und poste die darin erwähnten, benötigten Informationen:
     

    Thread-Starter yogigoy

    (@yogigoy)

    Hier der Website-Zustandsbericht:

    ` wp-core

    version: 6.9.4
    site_language: de_DE
    user_language: de_DE
    timezone: Europe/Berlin
    permalink: /%postname%/
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 2
    dotorg_communication: true wp-paths-sizes

    wordpress_path: /www/htdocs/w01e5212/axelyoga.de
    wordpress_size: 57,82 MB (60629748 bytes)
    uploads_path: /www/htdocs/w01e5212/axelyoga.de/wp-content/uploads
    uploads_size: 36,62 MB (38400977 bytes)
    themes_path: /www/htdocs/w01e5212/axelyoga.de/wp-content/themes
    themes_size: 15,96 MB (16739700 bytes)
    plugins_path: /www/htdocs/w01e5212/axelyoga.de/wp-content/plugins
    plugins_size: 8,50 MB (8911027 bytes)
    fonts_path: /www/htdocs/w01e5212/axelyoga.de/wp-content/uploads/fonts
    fonts_size: directory not found
    database_size: 8,27 MB (8676742 bytes)
    total_size: 127,18 MB (133358194 bytes) wp-active-theme

    name: Twenty Twenty-Three (twentytwentythree)
    version: 1.6
    author: Das WordPress-Team
    author_website: https://de.wordpress.org
    parent_theme: none
    theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates
    theme_path: /www/htdocs/w01e5212/axelyoga.de/wp-content/themes/twentytwentythree
    auto_update: Deaktiviert wp-mu-plugins (1)

    NinjaFirewall WP (mu-plugin): version: 1.0, author: The Ninja Technologies Network wp-plugins-active (8)

    Brevo - Email, SMS, Web Push, Chat, and more.: version: 3.3.2, author: Brevo, Automatische Aktualisierungen aktiviert
    CF7 Apps: version: 3.4.0, author: CF7 Apps, Automatische Aktualisierungen aktiviert
    Contact Form 7: version: 6.1.5, author: Rock Lobster Inc., Automatische Aktualisierungen aktiviert
    NinjaFirewall (WP Edition): version: 4.8.4, author: The Ninja Technologies Network, Automatische Aktualisierungen aktiviert
    Two Factor: version: 0.15.0, author: WordPress.org Contributors, Automatische Aktualisierungen aktiviert
    WP Mail SMTP: version: 4.7.1, author: WP Mail SMTP, Automatische Aktualisierungen aktiviert
    WPvivid Backup Plugin: version: 0.9.124, author: WPvivid Backup & Migration, Automatische Aktualisierungen aktiviert
    Yoast SEO: version: 27.1.1, author: Team Yoast, Automatische Aktualisierungen aktiviert wp-media

    image_editor: WP_Image_Editor_Imagick
    imagick_module_version: 1691
    imagemagick_version: ImageMagick 6.9.11-60 Q16 x86_64 2021-01-25 https://imagemagick.org
    imagick_version: 3.7.0
    file_uploads: 1
    post_max_size: 384M
    upload_max_filesize: 384M
    max_effective_size: 384 MB
    max_file_uploads: 20
    imagick_limits:
    imagick::RESOURCETYPE_AREA: 63 GB
    imagick::RESOURCETYPE_DISK: 9.22337203685E+18
    imagick::RESOURCETYPE_FILE: 786432
    imagick::RESOURCETYPE_MAP: 63 GB
    imagick::RESOURCETYPE_MEMORY: 4 GB
    imagick::RESOURCETYPE_THREAD: 1
    imagick::RESOURCETYPE_TIME: 9.22337203685E+18
    imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DJVU, DNG, DOT, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, EXR, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, GV, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMF, WMV, WMZ, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
    image_format_transforms: image/heic → image/jpeg, image/heif → image/jpeg, image/heic-sequence → image/jpeg, image/heif-sequence → image/jpeg
    gd_version: 2.3.0
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.55.0 wp-server

    server_architecture: Linux 5.15.0-171-generic x86_64
    httpd_software: Apache
    php_version: 8.3.29-nmm1 64bit
    php_sapi: fpm-fcgi
    max_input_variables: 10000
    time_limit: 60
    memory_limit: 384M
    max_input_time: -1
    upload_max_filesize: 384M
    php_post_max_size: 384M
    curl_version: 7.81.0 OpenSSL/3.0.2
    suhosin: false
    imagick_availability: true
    pretty_permalinks: true
    htaccess_extra_rules: true
    static_robotstxt_file: false
    current: 2026-03-13T21:14:34+00:00
    utc-time: Friday, 13-Mar-26 21:14:34 UTC
    server-time: 2026-03-13T22:14:32+01:00 wp-database

    extension: mysqli
    server_version: 10.6.23-MariaDB-0ubuntu0.22.04.1-log
    client_version: mysqlnd 8.3.29-nmm1
    max_allowed_packet: 67108864
    max_connections: 500 wp-constants

    WP_HOME: undefined
    WP_SITEURL: undefined
    WP_CONTENT_DIR: /www/htdocs/w01e5212/axelyoga.de/wp-content
    WP_PLUGIN_DIR: /www/htdocs/w01e5212/axelyoga.de/wp-content/plugins
    WP_MEMORY_LIMIT: 256M
    WP_MAX_MEMORY_LIMIT: 384M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: false
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: undefined
    WP_DEVELOPMENT_MODE: undefined
    DB_CHARSET: utf8
    DB_COLLATE: undefined wp-filesystem

    wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    fonts: does not exist
    mu-plugins: writable wp_mail_smtp

    version: 4.7.1
    license_key_type: lite
    debug: Keine Debug-Hinweise gefunden.
    lite_install_date: Mai 31, 2023 @ 1:25p.m.

    Hallo,
    bei dem Block Theme Twenty Twenty-Three kannst du die Kacheln wie in dem folgendem Screenshot beschrieben mit einer gleichen Höhe im Block Editor erstellen:

    Screenshot Kacheln

    (1): Im Raster (Grid) erstelllst du Gruppen als Stapel mit der Einstellung Zwischenraum.
    (2): Die erste Gruppe im Stapel enthält die Informationen (Überschriften, Absätze, Listen, etc.)
    (3): Die zweite Gruppe im Stapel enthält den Button „Anmelden“.

    Viele Grüße
    Hans-Gerd

    Thread-Starter yogigoy

    (@yogigoy)

    Danke Hans-Gerd für den Screenshot. Kurze Frage: Ich habe die Cards zuerst in Spalten / Reihen angelegt, damit immer 3 Kursfelder nebeneinander sind. Bedeutet das, dass ich die zuerst ändern muss?

    Cards WP.png

    Grundsätzlich kannst du auch statt Grid einen Spaltenaufbau verwenden.
    Es kann allerdings sein, dass je nach Device die Spalten zu schmal werden.
    Das ist an sich der Vorteil bei Verwendung von Rastern (Grid).

    Moderator La Geek

    (@la-geek)

    Grundsätzlich kannst du auch statt Grid einen Spaltenaufbau verwenden.

    Und wie? Mit dem Aufbau

    Spalten
      | Spalte
        | Gruppe
        | Gruppe
      | Spalte
        | Gruppe
        | Gruppe
      | Spalte
        | Gruppe
        | Gruppe

    und Theme 2023 funktioniert es nicht.

    Ich habe auch
    3 Spalten innerhalb eines Rasters
    sowie Spalten -> Spalte -> Stapel
    getestet, auch nicht.

    Ich bekomme es nur mit Raster – Stapel hin.

    Ich bekomme es nur mit Raster – Stapel hin.

    Dann eben so wie ich das ja bereits beschrieben habe und im Screenshot ersichtlich ist.

    Moderator La Geek

    (@la-geek)

    „Ich bekomme es nur mit Raster – Stapel hin.“, meint, es funktioniert nicht mit Spalten.

    Ja richtig, es geht standardmäßig nur mit Raster (wenn man kein zusätzliches CSS verwenden will).
    Das ist halt eine nützliche Info für @yogigoy (<- kann ggf. aufhören, zu versuchen, das über Spalten zu lösen)

    • Diese Antwort wurde vor 1 Monat, 1 Woche von La Geek geändert.

    Zumindest bei Twenty Twenty-Four funktioniert es auch mit Spalten, wenn man die minimale Höhe bei den Stapeln entsprechend einstellt (im Beispiel 35em) und grundsätzlich sollte es dann auch mit Twenty Twenty-Three funktionieren.

    Screenshot Einstellungen

    Moderator La Geek

    (@la-geek)

    Ja, das ist allerdings eine unschöne Konstruktion, da sich die Höhe aller drei Container nicht mehr nach dem höchsten Container richtet, sondern nach der gesetzten minimalen Höhe. Sobald das Browserfenster schmaler wird als z. B. 1920px (=100%) – 64px (bei der Seite von @yogigoy), werden die Bilder kleiner (auch in der Höhe) und zwischen Button (alle drei Container) und Inhalt entsteht ein immer größer werdender Abstand. Erschwerend kommt noch hinzu dass auf seiner Website keine maximale Breite für den Inhalt angegeben ist (sondern immer 100% – 64px), die (Augangs-)Höhe variiert also enorm, je nach (auch Desktop- !) Viewport-Breite.

    Beim Raster richtet sich die Höhe immer (maximal) nach der Höhe des höchsten Containers.

    Ja, das ist allerdings eine unschöne Konstruktion,

    … sehe ich anders.
    Aber Raster ist natürlich besser. Darauf hatte ich ja schon hingewiesen.
    Aber wichtiger ist ja, welche Lösung der TE haben möchte.
    Mein Ratschlag wäre natürlich umbauen in Raster.

    Moderator La Geek

    (@la-geek)

    Ja, das ist allerdings eine unschöne Konstruktion,

    … sehe ich anders.

    Na ja, lässt sich mit Worten schlecht beschreiben. Das Gif zeigt eine Ausgangssituation mit 1920px Breite (100% – 64px), identisch zu der Website von @yogigoy. Die Höhe der Container (Spalten) ist in Pixeln gerechnet 1035px.

    Bei einer Viewport-Breite von 2560px wäre die Spaltenhöhe geschätzt 200px höher (1235px) und entsprechend auch der Abstand von Button zu Inhalt.

    Moderator La Geek

    (@la-geek)

    @yogigoy

    Benötigst du noch weitere Unterstützung oder kann der Thread auf „gelöst“ gesetzt werden?

    ————
    Update:
    Thread auf gelöst gesetzt.

    • Diese Antwort wurde vor 3 Wochen, 6 Tagen von La Geek geändert.
    Thread-Starter yogigoy

    (@yogigoy)

    Danke für eure Unterstützung, konnte es lösen.

Ansicht von 14 Antworten – 1 bis 14 (von insgesamt 14)

Du musst angemeldet sein, um auf dieses Thema zu antworten.