Entwurf sieht anders aus als Veröffentlichung

Gelöst bfoettin
(@bfoettin)

vor 1 Monat

Guten Tag!

Ich bin neu bei WordPress und muss sagen, dass ich es mehr als umständlich empfinde. Leider habe ich eine bestehende Website übernommen, in welcher ich NUR eine Seite ändern möchte. Ich habe es nach mehreren Stunden hinbekommen (Bild links in einer Spalte, Text dazu rechts in einer Spalte).

Bei Veröffentlichung ist aber die Breite eine völlig andere als im Entwurf, sodass die der rechte BEreich der Spalte (Liste) extrem lang nach unten verzerrt wird.

Wie kann ich denn den Bereich ändern? Das ist sehr lästig. Ich benutze das Design McLuhan

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

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

Moderator threadi
(@threadi)

vor 1 Monat

Um welche Seite geht es genau? Die 5 Seiten in deiner Website sehen für mich alle identisch aus. Ich bin auch unsicher, was du mit „nach unten verzerrt“ meinst. Gerne kannst du das mal als Screenshot zeigen, siehe: https://de.wordpress.org/support/topic/wie-kann-man-bilder-in-einen-forenbeitrag-einfuegen/

Weiterhin wäre der Website-Bericht, um dessen Bereitstellung vor dem Erstellen neuer Fragen hier explizit gebeten wird, noch hilfreich um dir konkretere Tipps geben zu können: https://de.wordpress.org/support/topic/bevor-du-ein-neues-thema-thread-erstellst/

Und schonmal vorweg als Info: das von dir genutzte Theme McLuhan ist 2022 zuletzte aktualisiert wurden: https://wordpress.org/themes/mcluhan/ – auf Grund des Alter kann (muss es aber nicht) zu Problemen kommen. Es scheint jedoch auch eher einfach gestrickt zu sein, weshalb ich erstmal aktuell nicht von dem Theme-Alter als Grund für Probleme ausgehe.

Tipp: ein Projekt zu übernehmen kann durchaus verwirrend sein. WordPress kann auf unterschiedlichste Weise eingesetzt werden. Die einen bauen es so, die anderen so. Es ermöglicht eine enorme Vielfalt an Möglichkeiten – und ja, das kann einen etwas aus der Bahn werfen, wenn man erstmals mit einem an sich fertigen Projekt zu tun hat. Ein Rat wäre, dir mal im Playground ein frisch installiertes WordPress anzuschauen: https://playground.wordpress.net/ – da kannst du innerhalb einer Browser-Sitzung testen und schauen was WordPress noch so kann und dich auch in Abläufe einarbeiten, die vielleicht auch deiner Seite zugute kommen.
Thread-Starter bfoettin
(@bfoettin)

vor 1 Monat
Vielen Dank für die Rückmeldung!

Im Entwurf sieht es so aus (Bild links – Text rechts)

Im Endergebnis allerdings alles unterhalb (weil die breite zu gering ist).

McLuhan hätte ich eigentlich letzte woche aktualisiert auf den neuesten Stand…
```
` wp-core

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

wordpress_path: /home/rechtsanwalt-kirchdorf/public_html
wordpress_size: 90,44 MB (94836693 bytes)
uploads_path: /home/rechtsanwalt-kirchdorf/public_html/wp-content/uploads
uploads_size: 7,73 MB (8110524 bytes)
themes_path: /home/rechtsanwalt-kirchdorf/public_html/wp-content/themes
themes_size: 27,96 MB (29315907 bytes)
plugins_path: /home/rechtsanwalt-kirchdorf/public_html/wp-content/plugins
plugins_size: 38,92 MB (40812674 bytes)
fonts_path: /home/rechtsanwalt-kirchdorf/public_html/wp-content/uploads/fonts
fonts_size: directory not found
database_size: 14,16 MB (14843904 bytes)
total_size: 179,21 MB (187919702 bytes) wp-active-theme

name: McLuhan (mcluhan)
version: 2.1.1
author: Anders Norén
author_website: https://www.andersnoren.se
parent_theme: none
theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, post-thumbnails, custom-background, title-tag, menus, html5, align-wide, editor-color-palette, editor-font-sizes, editor-style
theme_path: /home/rechtsanwalt-kirchdorf/public_html/wp-content/themes/mcluhan
auto_update: Deaktiviert wp-themes-inactive (8)

Twenty Nineteen: version: 1.5, author: WordPress-Team (latest version: 3.2), Automatische Aktualisierungen deaktiviert
Twenty Seventeen: version: 2.3, author: WordPress-Team (latest version: 4.0), Automatische Aktualisierungen deaktiviert
Twenty Twenty: version: 1.3, author: Das WordPress-Team (latest version: 3.0), Automatische Aktualisierungen deaktiviert
Twenty Twenty-Five: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
Twenty Twenty-Four: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
Twenty Twenty-One: version: 1.3, author: Das WordPress-Team (latest version: 2.7), Automatische Aktualisierungen deaktiviert
Twenty Twenty-Three: version: 1.6, author: Das WordPress-Team, Automatische Aktualisierungen deaktiviert
Twenty Twenty-Two: version: 1.2, author: Das WordPress-Team (latest version: 2.1), Automatische Aktualisierungen deaktiviert wp-plugins-active (6)

Akismet Anti-spam: Spam Protection: version: 5.6, author: Automattic - Anti-spam Team, Automatische Aktualisierungen aktiviert
Cookie Notice & Compliance for GDPR / CCPA: version: 2.4.12, author: Hu-manity.co (latest version: 2.5.14), Automatische Aktualisierungen aktiviert
Disable Comments: version: 2.6.2, author: WPDeveloper, Automatische Aktualisierungen aktiviert
Limit Login Attempts Reloaded: version: 2.26.28, author: Limit Login Attempts Reloaded, Automatische Aktualisierungen aktiviert
Wordfence Security: version: 8.1.4, author: Wordfence, Automatische Aktualisierungen aktiviert
Yoast SEO: version: 20.6, author: Team Yoast (latest version: 27.1.1), Automatische Aktualisierungen aktiviert wp-media

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1691
imagemagick_version: ImageMagick 6.9.11-44 Q16 x86_64 2020-11-30 https://imagemagick.org
imagick_version: 3.4.4
file_uploads: 1
post_max_size: 8M
upload_max_filesize: 2M
max_effective_size: 2 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 31 GB
imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
imagick::RESOURCETYPE_FILE: 768
imagick::RESOURCETYPE_MAP: 31 GB
imagick::RESOURCETYPE_MEMORY: 16 GB
imagick::RESOURCETYPE_THREAD: 4
imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVS, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, 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, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, 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: 8.70 wp-server

server_architecture: Linux 2.6.32-754.35.1.el6.x86_64 x86_64
httpd_software: Apache/2.2.15
php_version: 7.2.34 64bit
php_sapi: cgi-fcgi
max_input_variables: 1000
time_limit: 30
memory_limit: 128M
admin_memory_limit: 256M
max_input_time: 60
upload_max_filesize: 2M
php_post_max_size: 8M
curl_version: 7.19.7 NSS/3.44
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true
static_robotstxt_file: false
current: 2026-03-09T14:05:59+00:00
utc-time: Monday, 09-Mar-26 14:05:59 UTC
server-time: 2026-03-09T15:05:57+01:00 wp-database

extension: mysqli
server_version: 5.5.55
client_version: mysqlnd 5.0.12-dev - 20150407 - $Id: 3591daad22de08524295e1bd073aceeff11e6579 $
max_allowed_packet: 33554432
max_connections: 151 wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/rechtsanwalt-kirchdorf/public_html/wp-content
WP_PLUGIN_DIR: /home/rechtsanwalt-kirchdorf/public_html/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
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: utf8mb4
DB_COLLATE: undefined wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: does not exist disable-comments

status: Comments are disabled site-wide for all content types
plugin_configured: Yes
total_comments: 0
global_disable: Yes
disabled_post_type_count: 3 of 3
disabled_post_types: Beiträge, Seiten, Medien
xmlrpc_comments: Enabled
rest_api_comments: Enabled
show_existing_comments: No
network_active: No
sitewide_settings: Not applicable
role_exclusion_enabled: Disabled
excluded_roles: None
```
Moderator La Geek
(@la-geek)

vor 1 Monat

Das vorhandene HTML/Layout ist ein richtiger Murks. Mit viel Aufwand könnte man es mit CSS beheben, aber das wäre lediglich eine Art Pflaster.

Ich würde dir dazu raten, ein anderes Theme auszuprobieren bzw. zu installieren, zumal das derzeit aktive Theme bereits seit Jahren nicht mehr mit Updates versorgt wird, also erhält es auch keine Sicherheits-Updates. WordPress wird weiter entwickelt, die PHP-Version ebenso, es kann passieren, dass irgendwann gar nichts mehr funktioniert.
Moderator threadi
(@threadi)

vor 1 Monat
Du bearbeitest dort offenbar eine Seite, die nicht öffentlich erreichbar ist. Daher ist es schwierig zu prüfen, was nun anders ist.

Allerdings vermute ich, dass du auf eine der Eigenheiten des Block Editors, mit dem du die Inhalte eingibst, gestoßen bist. Dieser dient dazu Inhalt einzugeben. Damit dies ohne Ablenkung geschieht, werden zusätzliche Layout-Elemente wie (bei diesem Theme) die blaue Sidebar links nicht angezeigt. Dadurch siehst du in deinem Editor nur den von dir eingegebenen Inhalt. im Frontend ist dann die Sidebar links zusätzlich zu deinen Inhalten zu sehen, wodurch die Ansicht natürlich anders ist.

Oben rechts siehst du den Text „Entwurf speichern“. Klick mal rechts davon auf das Symbol was wie ein Computer aussieht. Dort gibt es dann eine Option über die du das Template des Themes mit einblenden kannst. Sobald du das gemacht hast, wirst du in deinem Editor die gleiche Ansicht haben wie im Frontend.

Die Breite in der die Inhalte im Frontend zu sehen sind, wird durch dein Theme fest auf 530 Pixel beschränkt. Es gibt, soweit ich sehen kann, dazu auch keine Option um das anzupassen. Es wäre möglich mit individuellem CSS-Styling diese Angabe zu überlagern. Ich denke das hier würde reichen:

body .section-inner { width: 1024px }

Diesen CSS-Code müsstest du in deinem Projekt unter Design > Editor > Stile > Zusätzliches CSS hinterlegen. Es hat aber auch einen Nachteil: vorhandene Inhalte könnten falsch oder zumindest anders ausgegeben werden. Und auf Mobilgeräten sieht das dann auch gar nicht mehr gut aus. Man müsste, wie oben schon angedeutet, weit mehr Energie reinsetzen um das richtig anzupassen.

Somit sehe ich für dich folgende Möglichkeiten:
- Passe die Ansicht selbst per CSS an. Mein hier genannter Code wäre ein Einstieg.
- Oder such dir jemanden der dich dabei unterstützen kann. So jemanden findest du z.B. in der englischen Plattform hier: https://jobs.wordpress.net oder auch in Job-Börsen im deutschsprachigen Internet.
- Oder nimm ein anderes Theme für deine Website. Ja, die Seite sähe anders aus. Aber du hast dann sicherlich weit mehr Möglichkeiten in der Gestaltung von dieser (auch ohne selbst CSS-Code schreiben zu müssen). Eine mögliche Alternative wäre das aktuelle Standard-Theme TwentyTwentyFive. Wechseln kannst du das Theme jederzeit unter Design in deinem Backend.
Moderator La Geek
(@la-geek)

vor 1 Monat

Ich denke das hier würde reichen:

body .section-inner { width: 1024px }

Abgesehen von „fixe Breite verträgt sich nicht mit responsive“, bringt das nichts. Es existiert noch eine max-width, die kleiner ist. Der header ist die linke Seitenleiste mit position: static, wodurch der Bereich main unter der Seitenleiste verschwindet, wenn man nach rechts scrollt. Das meint @bfoettin vermutlich mit „unten nach rechts verzerrt“.

Du bearbeitest dort offenbar eine Seite, die nicht öffentlich erreichbar ist. Daher ist es schwierig zu prüfen, was nun anders ist.

Der Text aus dem Screenshot ist identisch mit dem auf der Startseite. Dort ist das Foto auch nicht links vom Text. Eine größere Breite ändert nichts daran, das Bild bleibt oberhalb. Der Text besteht aus mehreren Elementen (Liste, Absätze) ohne umgebenden Container, sodass mit display:flex nichts zu erreichen ist. Ein float:left für das Bild wäre eine Option, bringt aber nichts, um in Zukunft gescheit damit zu arbeiten, außerdem müssen site-title, footer und main in der Breite korrigiert werden. Übrigens gibt es body (padding-left: 380px) mit einer min-width von 100%, was schon alles sagt 😀

@bfoettin

McLuhan hätte ich eigentlich letzte woche aktualisiert auf den neuesten Stand

Du hast auf ein „Update“ von 2022 aktualisiert, siehe dort, rechte Spalte (zuletzt aktualisiert am 23. Dezember 2022)
https://de.wordpress.org/themes/mcluhan/
Moderator La Geek
(@la-geek)

vor 1 Monat
@bfoettin

Hier ein CSS, das fürs Erste weiterhelfen sollte, allerdings, wie bereits geschrieben: Das Ganze bleibt instabil. Du solltest wirklich ein anderes Theme (mit aktuellen Updates) installieren.
```
body {
    padding: 0;
}
@media (min-width: 1001px) {
	main, footer {
		width: 100%;
		max-width: calc(100% - 380px);
		margin-left: 380px;
	}
	.section-inner {
		max-width: 100%;
		width: auto;
		padding: 0 40px;
	}
	.floatleft img {
		float:left;
		margin-right: 50px;
	}
}

@media (max-width: 1000px) {
    main, footer, .section-inner {
        max-width: 100%;
    }
}
```
Ab 1000px Seitenbreite wird das Bild wieder über dem Text angezeigt, was sinnvoll ist, da die Breite für den Text nicht ausreicht und es unschöne Umbrüche gibt.

Dem Block Bild musst du die CSS-Klasse floatleft geben, damit das CSS richtig funktioniert.
Wie das geht, wird hier beschrieben:
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Nachtrag:
Du kannst es aber erst mal ohne den Eintrag der CSS-Klasse (floatleft) versuchen. Es ist durchaus möglich, dass der Block-Editor (den du vermutlich für die Seite Team verwendet hast), das Bild links anordnet. Sollte es ohne (floatleft) funktionieren, dann kann ein CSS-Eintrag wieder entfernt werden, das CSS würde dann so aussehen:
```
body {
    padding: 0;
}
@media (min-width: 1001px) {
	main, footer {
		width: 100%;
		max-width: calc(100% - 380px);
		margin-left: 380px;
	}
	.section-inner {
		max-width: 100%;
		width: auto;
		padding: 0 40px;
	}
}

@media (max-width: 1000px) {
    main, footer, .section-inner {
        max-width: 100%;
    }
}
```
- Diese Antwort wurde vor 1 Monat von La Geek geändert.
Moderator Support Moderator
(@moderator)

vor 2 Wochen, 3 Tagen

Da seit einiger Zeit keine Rückmeldung mehr vom TE kam, wird der Thread aus administrativen Gründen auf gelöst gesetzt, damit die ungelösten Threads, in denen noch Hilfe benötigt wird, leichter auffindbar sind.

Der Status „gelöst“ kann vom TE jederzeit geändert und der Thread kann mit Nachfragen oder einem Feedback ergänzt werden.

Lösung gefunden? In einem User-helfen-User-Forum wie diesem hier ist das Posten der Lösung für andere User immer hilfreich, danke.