Tutorial: Building a Webpage with No Code

Elements Tutorials
1

Hello Again,

In this weeks tutorial I’m going back to basics. I’m “borrowing” a page design from Squarespace and showing you how you could go about recreating it in Elements, but let’s keep this between ourselves and don’t tell Squarespace :shushing_face:

This tutorial is a fairly long one (45mins) as I take my time with it and talk through various options and settings. If you’ve not seen Elements before or are getting started with the private beta, you might find this tutorial very useful.

It’s worth noting, the site I build in this tutorial can be built with the base license of Elements that costs just $59 :scream::exploding_head::smiley:

Get the Project
Download the Fitness Demo project built in today’s demo. This is an Elements link and will open up directly in your copy of Elements. (Scroll effects requires Beta 12, due sept 24th).

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.

Cheers,
Dan & Team Realmac

6 Likes
2

This popped up on my YouTube feed about 45 minutes ago. I highly recommend it to anyone with the beta.

It covers some of the things I’ve been unsure of since the first beta dropped (when to use containers vs grids vs flexes etc) and it does so by replicating a SquareSpace page showing how easy it is to get very professional looking results without much trouble. Of course Dan makes it look easy but it’s a very good example of what can be done.

I’ve had a tumultuous month where I’ve been helping a company shut down but I’m really hoping to get some time devoted specifically to the later betas now things are settling down.

Great work Dan.

3 Likes
3

I am always amazed about the Globals. That is really very powerfull to keep the websites consistent and saves a lot of time.

3 Likes
4

I did notice at one point you were having a slight problem centering the slider on 0 is there going to be a way to enter manually with the keyboard for us with shakey hands

5

Yes, exactly. It’s on our list to change!

1 Like
6

Hi Dan,

Thanks for the detailed explanations. Unfortunately, globals work differently for me. The font size is not changed from base to sm. See video.
The page can be copied and the global works. But when I drag the global onto the page, the font size is not changed.

What am I doing wrong?

7

Hi @Berthold,

Can you upload your document to Elements Cloud and share the Link here?
I’ll take a look and see what’s going on!

8

Hi Dan,

here is the Link.

9

Ah-ha! It’s because you had used the override feature, not the breakpoint feature.

Here’s a video showing you how to make it work. Hopefully you can see what’s going and it all makes sense.

If you need me to go into more detail, just let me know and I’ll record a video with audio to explain things when I’m in the office later!

10

Hi Dan,

Many thanks for the quick help. Now everything works as it should.

1 Like