You won't believe WordPress can do this!

Summary

Das Transkript scheint eine Anleitung für die Erstellung von speziellen Effekten auf einer WordPress-Website zu enthalten. Es werden Dinge wie Scroll-Animationen, Übergangseffekte zwischen Cover-Blöcken und Möglichkeiten zum Freistellen von Bildern vorgestellt. Der Autor zeigt Schritt für Schritt, wie diese Effekte mit den standardmäßigen WordPress-Blöcken erstellt werden können und lobt die Flexibilität des Gutenberg-Editors. Insgesamt wirkt es wie ein interessantes Tutorial für die Gestaltung ansprechender Webseiten mit WordPress.

Takeaways

• 🎨 Jeder der Effekte wurde nur mit dem WordPress Cover-Block und etwas Vorstellungskraft erstellt.
• 🔍 Einige Effekte wurden geplant, andere durch Zufall beim Experimentieren entdeckt.
• 📚 Der vorgestellte Effekt erinnert an die beweglichen Bilder in Kinderbüchern und schafft eine natürliche Bewegung im Hintergrund.
• 🛠️ Die Erstellung basiert auf zwei Ebenen im Editor, wobei eine Ebene fixiert ist und die andere beim Scrollen bewegt wird, um Bewegung zu simulieren.
• 🔑 Startpunkt ist das Hinzufügen eines Cover-Blocks über eine Tastenkombination und Auswahl eines Hintergrundbildes aus der Medienbibliothek.
• ⚙️ Anpassungen umfassen das Einstellen der Vollbildhöhe und -breite, das Reduzieren der Überlagerungsopazität und das Entfernen jeglicher Polsterung.
• 🌄 Ein zweiter Cover-Block wird für die Vordergrundebene hinzugefügt, wobei die Hintergrundebene als fixiert eingestellt wird, um eine Trennung zu erzeugen.
• 📏 Die Anleitung beinhaltet Tipps zur Nutzung von CSS für erweiterte Effekte, wie z.B. das Scroll-Snap-Feature.
• 🖼️ Inspiration für einen Animationseffekt wurde von den historischen Fotografien von Edward Moy Bridge und der ersten Filmherstellung genommen.
• 🛠️ Weitere Effekte beinhalten die Nutzung des Free 20 Plugins für Hover-Effekte und die Anwendung des Block Visibility Plugins für eine bessere mobile Darstellung.

Q & A

Was ist der Kernpunkt des Videos, das auf WordPress basiert?

Der Kernpunkt des Videos ist die Demonstration, wie man beeindruckende visuelle Effekte auf einer WordPress-Website nur mit dem Kern-WordPress-Cover-Block und etwas Kreativität erstellt.

Wie werden die beschriebenen Effekte im Video erstellt?

Die Effekte werden durch die Verwendung des WordPress-Cover-Blocks und das Anpassen seiner Einstellungen, wie z.B. Festlegen eines fixierten Hintergrunds und Anpassen der Überlagerungsopazität, erstellt.

Was ist das besondere an dem Effekt mit den Sternen und dem Mond im Video?

Der besondere Effekt besteht darin, dass beim Scrollen der Seite die Sterne und der Mond nach oben bewegt werden, während die Berge fest an ihrer Position bleiben, was eine natürliche Bewegung erzeugt.

Wie wird im Video die Illusion von Tiefe und Bewegung erzeugt?

Die Illusion von Tiefe und Bewegung wird durch die Verwendung von zwei Schichten im Cover-Block erzeugt, wobei eine Schicht einen fixierten Hintergrund hat und die andere beim Scrollen bewegt wird.

Was ist notwendig, um den im Video beschriebenen Parallax-Effekt zu erstellen?

Um den Parallax-Effekt zu erstellen, benötigt man zwei Cover-Blöcke: einen für den Hintergrund mit Sternenhimmel und Mond und einen weiteren für die Vordergrundberge, wobei der Hintergrund fixiert wird.

Wie wird der Scroll-Snap-Effekt im Video erzielt?

Der Scroll-Snap-Effekt wird durch das Hinzufügen mehrerer Cover-Blöcke und das Anwenden von CSS erreicht, um einen nahtlosen Übergang zwischen den Abschnitten beim Scrollen zu schaffen.

Was ist der 'font reverse' Effekt, der im Video erwähnt wird?

Der 'font reverse' Effekt wird erzeugt, indem zwei Cover-Blöcke mit Bildern, die zueinander invers sind, hinzugefügt und beide mit einer fixierten Einstellung versehen werden, um beim Scrollen einen einzigartigen Übergang zu erzeugen.

Wie wird der Animationseffekt inspiriert von Edward Moy Bridge im Video erstellt?

Der Animationseffekt wird durch das Hinzufügen einer sequenziellen Serie von Fotografien als Cover-Blöcke mit fixiertem Hintergrund erstellt, ähnlich der ersten Filmtechnik von Edward Moy Bridge.

Was ist der Zweck des 'Rick roll' Effekts im Video?

Der 'Rick roll' Effekt dient dazu, eine humorvolle oder überraschende Komponente durch das Einblenden eines unerwarteten Elements beim Überfahren eines Bildes mit der Maus hinzuzufügen.

Warum könnte es notwendig sein, ein Plugin wie 'Block Visibility' für iPhone-Nutzer zu verwenden, wie im Video erwähnt?

Es könnte notwendig sein, ein Plugin wie 'Block Visibility' zu verwenden, weil die fixierte Hintergrundeigenschaft auf iPhones nicht korrekt angezeigt wird, was die Notwendigkeit einer alternativen Lösung für Mobilgeräte aufzeigt.

Outlines

00:00

😊 Wie man parallaxen Scroll-Effekte in WordPress erstellt

Dieser Absatz erklärt, wie man parallaxen Scroll-Effekte in WordPress mit dem Cover-Block und geschichteten Hintergründen erstellt. Es wird gezeigt, wie man zwei Ebenen übereinander legt, wobei die obere Ebene fixiert ist und die untere Ebene beim Scrollen mitläuft. So entsteht eine 3D-Illusion mit Tiefe.

05:01

😃 Wie man Snap-Scroll mit CSS in WordPress implementiert

Dieser Absatz demonstriert die Implementierung von Snap-Scroll in WordPress mit CSS und Cover-Blöcken. Mehrere Cover-Blöcke werden gruppiert, mit einer Klasse versehen und die passende CSS wird hinzugefügt, sodass beim Scrollen zwischen den Cover-Block-Abschnitten gesprungen wird.

Keywords

💡WordPress

WordPress is an open-source content management system used to build websites. It is mentioned numerous times in the video as the tool being used to create the visual effects on web pages.

💡cover block

Cover blocks are a type of content block in WordPress's Gutenberg editor. They are sections with images/video backgrounds and overlay content. The presenter explains how creatively using multiple cover blocks enables many of the scroll effects in the video.

💡layers

Layers refers to having multiple cover blocks stacked on top of each other, creating a layered effect with parallax scrolling where some layers move faster than others.

💡transparency

Adding transparency to a cover block layer creates see-through effects that reveal lower layers as you scroll.

💡cutout

A cutout refers to an image with part of it removed to reveal background layers. This is used with the mountain images to create a 3D effect.

💡snap

Snap scrolling means contents snaps exactly into place rather than scrolling smoothly. This is achieved by applying some CSS to grouped cover blocks.

💡transition

Creative transitions between sections are achieved by using cover blocks in different combinations - fixing some and letting others scroll.

💡hover effect

The free Twenty Twenty plugin provides options like reveal content on hover. This is used for the Rick Roll trick effect.

💡Midjourney

Midjourney is an AI image generation tool that the presenter used to easily create graphics for the video.

💡mobile

There are limitations displaying fixed cover blocks properly on mobile devices. Plugins are suggested to swap blocks appropriately.

Highlights

Discovery of beautiful effects created on a WordPress website using the core WordPress cover block and imagination.

Effects include natural movements in the background, such as stars and the moon, while maintaining fixed foreground elements.

The process involves using two layers in the editor, with one layer having a cutout and transparency to create a movement effect.

Detailed steps to create effects using the cover block and keyboard shortcuts.

Techniques to adjust overlay opacity and remove padding for a clean layout.

Adding a second layer for foreground elements and adjusting settings to create a fixed background effect.

Capability to insert different types of blocks within the cover block for added flexibility.

Creation of a 3D effect by layering elements and manipulating the background and foreground.

Introduction of the scroll snap feature for smooth transitions between cover block sections.

Using a series of cover blocks to create a fixed background effect and stack them for visual appeal.

Utilizing CSS for further customization and adding class names for styling.

Implementation of a Rick roll effect with the use of the Hover Effect feature in a plugin.

Adapting techniques from Edward Moy Bridge's work to create film-like effects with sequential photographs.

Utilizing Midjourney to create images with easy-to-use controls for aspect ratio and region variation.

Addressing compatibility issues on iPhone and suggesting alternatives like the Block Visibility plugin.

Encouragement to interact with the content, highlighting the impact of likes on video visibility and treating pets.

Transcripts

Last week I discovered the most beautiful things

that I've ever created on a WordPress website.

They're super easy to do.

I'm gonna show you step by step how to do them,

but first, here they are.

Every single one of those effects was created just using the

core WordPress cover block and a sprinkling of imagination.

Some of them I planned, uh,

but some of them were just discovered by accident

as I toed away and got slightly obsessed for the week,

just pushing the boundaries of what was possible just

with the core WordPress blocks.

Let's start with this one. You can see as I scroll the page

how the background stars move up and the moon moves up,

but the mountains are fixed in their position,

so you get this fantastic natural movement.

It reminds me a little bit of the books that I used

to read my kids at bedtime, but it's expected

and really beautiful.

You get this lovely sort of cutout

and very crafty feel to your pages.

I'm gonna show you how to build this on your own sites when

we dive into Gutenberg.

But to start with a tiny bit of theory on

how this is working, two pieces

of paper, we're going very old school.

So essentially how we're doing this in the editor

and I will take you into it is we've got two layers.

We've got this first layer here and this second layer here.

This first layer has a cutout and a transparency,

and as the user scrolls the page,

the fixed element stays fixed,

but the background moves up naturally with the scroll,

so it creates the effect of movement.

So start by adding the cover block.

So we're gonna use the keyboard shortcut forward slash

cover, then hit return.

Now choose media library,

and we're gonna select our background layer.

Now for us it's gonna be our starry sky and our moon.

Then just click select in the bottom right hand

corner to add that in.

Now we're gonna make this full height by clicking

that little icon on the top,

and we're also gonna make it full width.

Next we're gonna go over to the block settings panel

and we're gonna reduce the overlay opacity

by just sliding that down to the left.

And then finally, we're gonna remove any padding

because each cover block has some natural padding to the top

and the bottom, you won't see it though.

So slide the slider to the right

and then fully to the left

to remove any padding from the top and the bottom.

And then do exactly the same for the left and the right.

Next up we're gonna add our second layer,

which is also gonna be a cover block, so four slash cover.

But this time we're gonna add the foreground

mountains that we've cut out.

I will show you a super easy way

to cut out images in a few minutes time.

And for this one also we want to make it full height

by choosing that little icon on the top.

And we're also gonna make it full width.

And now we have our two layers together,

but you can see as I move at the page,

they're both moving with the scroll.

We need to make the first layer have a fixed background.

So just come across to the right in the block settings

panel, making sure you have the top layer selected,

and just choose fixed background.

Now you can see we've got this lovely separation.

So as we scroll at the page, the background layer moves,

but the foreground remains static.

And of course, because it's the cover block,

we can put any other blocks within it, paragraph block,

or in this case a buttons block, anything you like.

And what I really love about this is you get this

fantastic 3D effect.

You can see the background layer here with our moon,

but our text here, those are both actually on the same

layer, but our mountains are sandwiched between it.

So we get this amazing,

beautiful effect really in no time at all.

It's super easy to do,

but I just think it's absolutely stunning.

Next up is the scroll snap.

You can see as I'm scrolling down the page,

it's snapping exactly to the next cover block.

So you get these wonderful transitions

between each cover block section.

Let's jump into the site editors

to show you exactly how I've done this.

So the first thing is you just add a whole bunch

of cover blocks here.

You can see on the left, the first one I fixed.

So the first one, I set the background

as fixed and I add an image.

The second one, I don't set as fixed background,

and then you get this lovely effect

as it stacks on top of it.

The third one, I also fix the background.

So you can see now as I scroll up, that's fixed,

and then that third one is fixed.

But the fourth one, I don't fix the background.

It's up to you how you play around with those.

That's just what I like to do on this one.

Then you have to group them all.

So you put them all in a group.

And that group you have to put in a tiny bit of CSS first,

you have to give it a class name.

You can see down here, I've given it a class name.

Then you add the CSS.

I will put a link to the exact CSS in a link in the

description, so you can just copy and paste it.

Here's the code snippet that I used.

I actually generated this using chat GPT.

This is the code snippet that I use to do the snap

to scroll, but as I say,

I'll put the link in the description so you can just copy

and paste this into your own insights.

The font reverse is actually super easy.

I saw this effect on somebody else's website

and really liked it and tried to recreate it,

and it's pretty straightforward.

All you have to do is add two cover blocks

and then add two images, one the reverse or the other one,

and then all you need to do is fix each one.

So if I fix the first one

and then fix the second one using our fixed settings.

You see as I scroll up,

you get this amazing transition effect.

The next effect, which I call the animation,

takes inspiration from Edward Moy Bridge's series

of photographs, which he pieced together

to create the first ever film in 1878.

And you can recreate exactly the same effect

using Gutenberg.

Just add a sequential series of photographs

and set each cover block to have a fixed background

To add your Rick roll effect.

We're gonna add two cover blocks,

just like we've done before.

Make them exactly the same size,

but on your top layer, as in Rick, in my case,

you're gonna use the free 20 plugin.

Come across to styles in the cover block, come all the way

to the bottom and you'll see we've got this brand new option

down here, which is Hover Effect.

And you've got different options in here.

Just select Reveal Content, show Untouch devices,

and all the images that you're seeing

that I used today are created using the alpha of Midjourney,

which is just fantastic because you get all these easy

to use controls down here, which normally you'd have

to put in as text prompts, but now you can just use these.

It's super easy. For example,

you can do things like change the aspect ratio just like so.

And you can also do things like very regions, super easy.

So if you wanted to remove the moon here, you can just

circle around it like that.

And then just change the prompt down here.

There is one thing to note though.

The fixed property doesn't display properly on a iPhone.

It'll display, but it just won't be fixed to the background.

It'll look okay, but you might want

to consider using a plugin like the Block Visibility plugin

by Nick Diego, which is free, so you can swap

that out on a mobile phone

and display a different set of blocks

or just a different version of

what you've designed in the block editor.

Hope you enjoyed that one.

If you did, if you can give it a like, that'd be amazing

because it makes a huge, huge, huge,

huge difference in terms of

how many people get to see this video.

It really, really does. So thank you.

If you can also, every time you do hit that like button,

our cats get a little treat.

If you want to see other examples of

what I've just shown you, watch this video.

Otherwise, keep well, and I'll see you soon. Bye for now.

Bye.