-
Forum: Allgemeine Fragen
Als Antwort auf: Gutenberg Text Block zentrierenBesten Dank
Auch ich finde zentrierten Text scheusslich. Meine Frage war nicht, den Text sondern den Textblock oder den Gruppenblock unter den Bildern in derselben Breite zu haben.
Oder einfacher: Wie kann ich die Breite eines Gruppen- oder Absatzblock festlegen?
PS: Das ganze ist nur ein Problem, wenn das Brouserfenster gross ist – bei mir 4K
Bin gespannt und Danke
ThomasHallo Threadi
Ich habe offenbar mein Anliegen zu wenig klar geschildert. Sorry!
Ich möchte das die Hintergrundfarbe (im Header) wechselt, wenn ich 100px runter scrolle.Das ist meine Test URL:
https://project-space.modular4web.ch/uniblock/kontakt/
Das ist mein mini js Script dazu:var header-bg = document.getElementByID('header-bg'); var oldColor = header-bg; document.body.addEventListener('scroll', () => { let yPosition = document.body.scrollTop; if (yPosition > 100) { header-bg = "teal"; } else { header-bg = oldColor; } })
Die BackgroundFarbe ist mit einem GruppenBlock im HeaderBlock definiert. Diesem GruppenBlock habe ich die ID „header-bg“ gegeben.
Die Idee wäre, dass wenn ich 100px runter scrolle, die Header Farbe von Schwarz (GruppenBlock Voreinstellung) zu „teal“ Petrol wechselt.
Leider funktioniert das Ganze nicht! Was übersehe ich?
Herzlichen Dank für deine Hilfe
PeterForum: Allgemeine Fragen
Als Antwort auf: Ränder farbig gestaltenHallo,
Jetzt möchte ich gerne die Ränder rechts und links neben dem Inhalt einfärben – aber NICHT den Hintergrund der Website (der soll weiß bleiben).
sorry, aber mir ist nicht klar, was genau du meinst.
Im Grunde sollte das über den Inhalts-Block im Template bei Twenty Twenty-Three möglich sein.Im folgenden Beispiel habe ich einen Gruppenblock im Template (hier Seite). Dieser Gruppenblock (den ich hier als Block für die Kontaktdaten verwende) hat eine Hintergrundfarbe (das helle blau).
Darüber ist der Beitragsinhalt-Block, den ich in einem Gruppen-Block eingebunden habe und der keine Hintergrundfarbe hat.
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Sollte ich das nicht richtig verstanden haben, dann erläutere das doch bitte noch etwas genauer.
Viele Grüße
Hans-GerdForum: Themes
Als Antwort auf: Menü vertikalGeht es um den Inhalt und Layout der Website unter der angegebenen URL? Das ist mit dem Block-Editor in maximal drei Stunden reproduziert.
- Wenn der Slider sein muss, Slider-Block aus dem Plugin CoBlocks,
- Überschriften-Block
- Medien mit Text-Block
- Überschriften-Block
- Spalten-Block, dreispaltig, darin drei Überschriften und Fließtext
- Gruppenblock
- Überschrift
- Spaltenblock, zweispaltig
- Beitragsblock
- Überschriftenblock
- Fließtext
- Formular-Block, z.B. mit Contact Form 7
Forum: Allgemeine Fragen
Als Antwort auf: Absatz-Block ändern in einen bestehenden wiederverwendbaren BlockHallo,
ein wiederverwendbarer Block ist ein Block, den man z. B. als Kontakt-Block immer wieder einfügt, ohne irgendwelche Änderungen an dem Block vorzunehmen. Man kann zwar Änderungen vornehmen, diese werden aber dann bei allen Beiträgen mit diesem wiederverwendbaren Block geändert. Wenn du also z. B. umgezogen bist und du hast deine (alte) Adresse in einem wiederverwendbaren Block verwendet, dann brauchst du lediglich in einem Beitrag diesen wiederverwendbaren Block einzufügen, änderst die Adresse und damit wird die Änderung bei allen Beiträgen mit diesem Block wirksam. Mehr Infos zu wiederverwendbaren Blöcken findest du z. B. in dem folgenden Beitrag.Alternative sind die Block Patterns. Bei Block Patterns hat man eine Vorlage, die man z. B. immer in gleicher Form (Design) verwenden kann. Wenn also ein Bild in einem Gruppenblock in voller Breite mit rotem Hintergrund gezeigt werden soll, dann kann man solch einen Block Pattern vorbereiten und da immer entsprechend das Bild ändern.
Was man in welcher Form mit Block Patterns alles machen kann, habe ich z. B. in der folgenden Beitragsserie beschrieben.Viele Grüße
Hans-GerdForum: Themes
Als Antwort auf: 2023: Elemente vor Hintergrundbild immer vertikal mittig?Edit (oh kann gar nicht mehr editieren) Problem ist doch noch nicht gelöst. Die Navigation ist immer noch nicht ganz oben.
Habe ich einen großen weißen Bereich zu Beginn der Seite. Habe im Firefox mal geschaut, welche Regel das macht und es ist folgender Befehl gesetzt
--wp--style--root--padding-top: var(--wp--preset--spacing--40);
Sobald ich den im Firefox Inspektor deaktivere, verschwindet der weiße Bereich oben in der Kopfzeile. Nur wie kriege ich das in WordPress in CSS weg?
https://www.aeropano.net/wordpress-img/padding-top.JPGNoch ein kleiner Zusatz zu deiner Anleitung, falls irgendjemand das selbe Problem hat, denn mich hat es jetzt einige Zeit gekostet, das herauszufinden.
https://haurand.com/navigation-mit-zeile-am-oberen-rand-in-wordpress-full-site-editing/
Volle Fensterbreite mittels Gruppenblock funktioniert nur, wenn Inhaltsbreite aktiviert und Außenabstand 0 eingestellt wird:
https://www.aeropano.net/wordpress-img/Gruppenblock_volle_Breite.jpgForum: Themes
Als Antwort auf: Custom Fields in Gutenberg-Theme anzeigenHallo Steffen,
spannende Frage, denn bisher scheint es keinen Theme-Block zu geben, mit dem sich ein Custom Field einfach* ausgeben lassen würde:
Angeblich soll es irgendwelche Premium-Plugins geben, die dafür einen eigenen Block zur Verfügung stellen, aber Geld ausgeben wollte ich jetzt dafür nicht. Also, was tun?
Da Plugins wie Advanced Custom Fields eigene Shortcodes liefern, um Custom Fields auszugeben, erscheint es mir naheliegend, einen eigenen Shortcode zu schreiben. Den kannst du und z.B. mit dem Plugin Code Snippets oder gleich in der
functions.php
eines Child-Themes einbinden:add_shortcode( 'metablock', 'metablock_shortcode' ); function metablock_shortcode() { $out = ''; // Hole den Wert des Custom Field "helloworld" – bitte CF-Name anpassen $meta = get_post_meta( get_the_ID(), 'helloworld', true ); // Wenn das Feld einen Eintrag hat, speichere die Ausgabe in einer Variablen. if( $meta ) { $out = '<p>Custom Field: ' . esc_attr( $meta ) . '</p>'; } // Ausgabe des Shortcodes return $out; }
Nun kann ich im Theme-Editor z.B. im Templates „Singular“ einen Shortcode-Block und dprt den Shortcode
[metablock]
einfügen. Damit der im Theme Twenty Twenty-Three nicht an der Bildschirmseite klebt, sondern bündig mit dem übrigen Text abschließt, packe ich ihn noch in einen Gruppenblock, den ich nicht weiter formatieren muss:Wenn du sowieso schon ACF nutzt, kannst du natürlich einfach den Shortcode des Plugins nutzen und brauchst nicht selbst einen zu erstellen.
* Für die Nerds unter uns:
Das Beispiel hier ist etwas vereinfacht. Das letzte Attribut in get_post_meta() sorgt dafür, dass nur ein Wert zurückgegeben wird. Sollen mehrere Werte ausgegeben werden, müsste der Code entsprechend erweitert werden.Forum: Allgemeine Fragen
Als Antwort auf: Mehrere Blöcke in eine Gruppe packenForum: Themes
Als Antwort auf: Plugin gesucht: Gallerie mit Klickbarem Overlay pro BildHallo,
das sollte mit einem Gruppenblock, der einen Spalten-Block (3 Spalten) mit Bildern enthält, ohne Plugin machbar sein.Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Ich habe das auf der folgenden Testinstanz entsprechend als Beispiel erstellt – den Hover-Effekt siehst du, wenn du mit der Maus über das linke Bild fährst.
Den Hover-Effekt kann dann mit einer CSS-Regel unter Design > Customizer > Individuelles CSS eingestellt werden (Beispiel):
.wp-container-2.wp-block-column:hover { opacity: 0.1; }
Das kann man sicher alles noch viel schöner gestalten. Aber es geht ja hier um eine grundsätzliche Lösung.
Noch besser ist die Verwendung einer zusätzlichen CSS-Klasse (mit Pfeil gekennzeichnet). Dann müsste man die CSS-Klasse noch entsprechend ändern.
Viele Grüße
Hans-GerdForum: Allgemeine Fragen
Als Antwort auf: Image map funktioniert in Widget nichtHallo,
wenn ich das richtig verstehe, sollte das normalerweise mit einem Gruppenblock und zwei Spalten funktionieren. In jede Spalte kann dann ein Bild eingebunden werden. Gegebenenfalls auch noch den Reihen-Block mal testen.BTW: Ich musste deine Antwort erst freischalten. Akismet wollte die nicht freigeben.
Viele Grüße
Hans-GerdNachtrag: ich habe das gerade auch mal nachgestellt – das klappt in der Tat auch nicht mit meinem Vorschlag. 😲
- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Hans-Gerd Gerhards.
Forum: Themes
Als Antwort auf: Unterschiedliche Textausrichtung Desktop/MobileHallo,
ich möchte, dass mein Text entweder rechts vom Bild (Desktop) oder unter dem Bild steht (Mobile).
Dafür kannst du ohne Verwendung von CSS-Regeln auch den Gruppen-Block nutzen. Innerhalb des Gruppen-Blocks kannst du dann einen Spalten-Block einfügen, wo du rechts das Bild und links den Text einbindest (oder umgekehrt):
Hier ein Screenshot dazu (bei Klick auf das Bild, wird das Bild vergrößert):
Rechts habe ich in dem Screenshot die weiteren Optionen für den Gruppen-Block gelb markiert (in Zeile bzw. in Stapel umwandeln).
Ich habe schon gelesen, dass man hierfür wohl die style.css anpassen muss. Dies habe ich mit dem Theme-Datei-Editor gemacht.
das ist keine gute Idee, weil beim nächsten Update diese Änderungen wieder überschrieben werden. Wie du den Customizer verwenden und CSS-Regeln bei einem Block Theme wie Twenty Twenty-Two ändern kannst, habe ich in diesem Beitrag beschrieben.
Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.Wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen. Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.
Viele Grüße
Hans-Gerd- Diese Antwort wurde geändert vor 1 Jahr, 10 Monaten von Hans-Gerd Gerhards.
Forum: Allgemeine Fragen
Als Antwort auf: Untermenüs werden unterhalb der Elemente des Folgeblocks dargestslltHallo,
ah, jetzt habe ich gesehen, was du meinst und konnte das Problem nachvollziehen.Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
Ich werde das aber mal testen. Auf der folgenden Testinstanz von mir habe ich ebenfalls einen Cover-Block unter dem Menü. Wenn ich das richtig sehe muss ich da noch einen zusätzlichen Navigations-Block im Gruppenblock einrichten.
Viele Grüße
Hans-GerdForum: Allgemeine Fragen
Als Antwort auf: expliziten Seiteninhalt verlinkenDu kannst zum Beispiel mit „Wiederverwendbaren Blöcken“ arbeiten: In der Seite, die du an anderer Stelle ausgeben möchtest, Inhalt in einen Gruppenblock setzen, Gruppenblock zu wiederverwendbaren Blöcken hinzufügen, an anderer Stelle den Block einfügen. Änderst du jetzt etwas in dem Block, ändert sich der Inhalt in allen Stellen, an denen du den wiederverwendbaren Block eingefügt hast.
Wiederverwendbare Blöcke in der Gutenberg-Fibel: https://gutenberg-fibel.de/bloecke/wiederverwendbar/
Forum: Allgemeine Fragen
Als Antwort auf: Überschrift in Startseiten wird nicht dargestellt !Also die Lösung heißt „Gruppenblock“. Ich werde das gleich testen.
Danke !
Forum: Allgemeine Fragen
Als Antwort auf: Überschrift in Startseiten wird nicht dargestellt !Hallo,
ich vermute mal, dass du mit deiner Äußerung „nur ca. 1/3 des Bildschirms gross“ dei Breite der einzelnen Blöcke meinst.
schau mal bitte in den folgenden thread: Da hat Bego sehr ausführlich beschrieben, wie man das anhand des Gruppen-Blocks beim Block-Editor gestalten kann.
Viele Grüße
Hans-Gerd