Tutorial: Let's rebuild this website in Elements

In this tutorial, I rebuild a site (well, a page of it) that a customer sent to us.

If you’re new to Elements, or haven’t yet got the hang of building things from scratch, then this is probably a must-watch video!

Open the finished Project in Elements — Please remember, this project is not “finished”; it’s just what we did in the video. If you want to use this, you may want to tidy up the styles and make sure everything looks good on all device sizes.

If you have any questions, please ask, and I’ll do my best to help :blush:

2 Likes

If you found the above video useful, you might also like this one I recorded a few months back…

1 Like

Excellent tutorial but I was keen to see how you’d do the quotation mark in the testimonial cards where it protrudes through the top border.

Hmm, great question! There’s probably a few ways to do this, but here’s my first attempt…

This is a great project, the day earlier I started this on a completely different site to play with my new found learning skills that you keep giving. Is there any way I can have a landscape picture on larger screens but changes to Portrait pic on smaller phones. Also text above larger and text below on smaller? My landscape product pics too large for portrait view so want to turn it around? TIA

No Problem!

I’ve just recorded a quick video (sorry it’s a bit waffly), hopefully this is what you wanted — if not, let me know and I’ll record another!

Brilliant on text and pic moving but I want image to rotate as too long on portrait and it goes a lot smaller so what it to rotate 90% on switching from landscape to portrait. TIA

Hey @PMUK I’m really not sure I follow when you want to do.

Do you have an example you can share, maybe a website you’ve seen online that does the thing you want?

Let me know and I’ll show you how to do it in Elements :blush:

Apple new iPhone SE is an example on first page.

Ah-ha!

Okay, here’s how to do the ole image switcheroo…

These are the classes for your landscape image (you want hidden on Mobile)
hidden sm:block

And this is the class you on your Mobile image (to hide it on large screen sizes)
sm:hidden

Open Project in Elements

3 Likes

You’re a star! Totally amazing and just what I wanted! I’ll play next time Im in front of my computer over weekend! THANKS!!!

I did something similar as shown below.

But I used negative values on the margins of the SVG to move it. Not sure if it is a valid approach but it seems to work just fine.

2 Likes

Changing the global SVGs didn’t work for me. I followed along to the instructions by selecting each SVG icon and breaking the link so that I could put a new icon in from resources but the brain icon doesn’t want to leave.

I even used the clear button to before dropping another image in but when I did that the brain icon just came back.

I love that command D now lets you duplicate page elements instead of entire pages ! ! !

I started this tutorial late and when I did 0.6.3 came out with that feature NICE!

I have always wondered why Classic would dedicate that shortcut for making an entire new page. Could you also apply the duplicate to globals? When the new version came out I was just in the part of the tutorial where we started using globals and noticed it wouldn’t apply to those page elements. It seems like duplicating globals would be a very common procedure.

Yes you can duplicate Globals :smiling_face_with_three_hearts:

1 Like

Oh it worked that time! Not sure what happened before. Sweet!

1 Like

As I have continued with the tutorial I noticed that duplicating elements doesn’t work 100% of the time. When trying to duplicate the cards neither command D or edit > duplicate worked. Going to “page layout” and bringing up the menu to select duplicate will work. When I restarted elements it appears that everything is working again.

Also “duplicate without content” is interesting! I can see that coming in handy a lot most likely.

1 Like

Make sure you have the editor selected and in focus when you try to use the copy, paste and duplicate keyboard shortcuts.

We also need to add keyboard shortcut support to the node editor. Once this is done, the copy and paste shortcuts should work more reliably.

It had been and I did it a bunch of times to make sure I was doing it right. Restarting the program seemed to be all that worked when it came to making the shortcut and editor menu work right. I’m guessing it will continue to work now? I’m not sure what was going on there but we will have to see how it works with others.

It should do :blush: Let us know if you keep hitting the issue and ideally steps to reproduce the bug so we can fix!