Anpassung Kursfenster
-
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]
-
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:

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:(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-GerdDanke 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.pngGrundsä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).Grundsätzlich kannst du auch statt Grid einen Spaltenaufbau verwenden.
Und wie? Mit dem Aufbau
Spalten
| Spalte
| Gruppe
| Gruppe
| Spalte
| Gruppe
| Gruppe
| Spalte
| Gruppe
| Gruppeund 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.
-
Diese Antwort wurde vor 1 Monat, 1 Woche von
Hans-Gerd Gerhards geändert.
„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.
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.-
Diese Antwort wurde vor 1 Monat, 1 Woche von
Hans-Gerd Gerhards geändert.
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.
Danke für eure Unterstützung, konnte es lösen.
-
Diese Antwort wurde vor 1 Monat, 1 Woche von
Du musst angemeldet sein, um auf dieses Thema zu antworten.



