Tutorial: Build a blurry background Custom Component

Elements Tutorials
1

Hey Weavers,

We’re starting a new series of Element tutorials, hopefully we can build up a nice library overtime that will help new users coming into the platform!

In this tutorial I’ll show you how to build a Custom TailwindCSS Component that displays a customizable blurry background. If you’ve not delved into custom components yet, maybe now is the perfect time :nerd_face:

CleanShot 2024-08-26 at 4 .37.43@2x
CleanShot 2024-08-26 at 4 .37.43@2x1920×1203 562 KB

Blurry Background using TailwindCSS

Watch the video below to see how it’s all put together, and don’t forget to download the project below if you want to follow along at the same time.

Resources:

Feedback

Let me know what you thought of the tutorial, was it helpful? what else would you like to see covered? Let me know in the comments below!

3 Likes
2

Hi @dan - a useful video - thanks. :+1:

3

The link: https://www.realmacsoftware.coml/downloads/elements/components/blurry-background-component.zip

has got a stray l after the .com

4

Doh — All fixed now!

1 Like
5

Dan when I view your project in safari from Elements the AWESOME is faint like its behind, its ok in Elements

I added the extra div, it then worked for me, not sure if its a bug or its me

<div class="bg-gray-50 min-h-screen flex items-center justify-center px-16">
  <div class="relative w-full max-w-lg">
    <div class="absolute top-0 -left-0 w-72 h-72 {{customColor1}} rounded-full mix-blend-multiply filter blur-2xl opacity-70 scaling-element"></div>
    <div class="absolute top-0 -right-0 w-72 h-72 {{customColor2}} rounded-full mix-blend-multiply filter blur-2xl opacity-70 scaling-element animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 {{customColor3}} rounded-full mix-blend-multiply filter blur-2xl opacity-70 scaling-element animation-delay-4000 "></div>
    <div class="absolute inset-0">@dropzone(name: "content")</div>
    </div>
  </div>
</div>```
2 Likes
6

Ah yes, that’s a great addition, works much better!!!

I think I might continue working on this component, I have a few other things I’d like to add… sure is addictive this stuff :nerd_face:

1 Like
7

Very addictive, too addictive, it’s driving my wife mad

1 Like
8

Thank you much for this! works great!

9

OK, I’m playing with this. I’ve added a heading and a grid to the dropzone but struggling to change the size (specifically width) of the dropzone content?

Non-coding me found if I remove w-full max-w-lg from the class it seems to resolve it and allow resizing through Margin.

Is there a way to make this editable through a custom control/slider? I’ve tried adding one without success - I’m not quite sure what and how I should be addressing it.

10

Hi Dan,

Quick question, what specs would you say a Mac should have to run Elements without killing it? (Ram, CPU and so on)

Thanks so much,
Jesse

11

Any Mac that runs macOS Ventura or newer should be fine!

12

So ram isn’t an issue?

13

It shouldn’t be… what Mac do you have?

14

Hi @dan

Just a couple thoughts on doing tutorials:
Focus on one thing in each vid and keep vid under 2 mins. This ‘blurry’ example was a fine example of how to build a custom element, but is really for more advanced users. The vid didn’t address blur at all and the major thing users will want to do is blur an image. Don’t get me wrong, there could be a huge library of technical tutorials for people like me, but I think you should first focus on the super basics for the majority of the users - I’m sure there will be a massive amount of vids I have no doubt.

2 Likes
15

I use a Mac mini 2020 with M1 chip, but it is not mine. I am looking at getting my own laptop and may download ‘elements’ onto it, so I just want to know if I will crash the computer.
The Mac mini copes with Rapidweaver well, but sometimes will just force quit. So I figured that maybe it hasn’t got enough ram.

16

A lot will depend on what else you are running at the time. Mac’s typically handle RAM swapping very well. Your machine may slow down some but typically will not crash. Elements, even in the current pre-release state doesn’t seem to use any more system resources than Rapidweaver so you should be fine.

With that said, if you are using Rapidweaver to build websites you are actually publishing, stick with it for now. Elements is pre-release and not ready to put out websites.

This is all my opinion.

1 Like
17

Thanks James! That is helpful.