Startup 5

In this video we’re going to show you how to use the Startup app.
Startup: designmodo.com...
From the top menu click Projects then Add New Project.
Name your project and then create a new Page. Great, now let’s start customising.
On the left side you can see a whole list of blocks categories to help you with whatever you want to create on this page - and everything is available in both Light and Dark mode.
You can also see a few options for the page setup in this top menu drop down.
To start building something as quickly as possible, let’s click ‘Randomise’ and set the layout to be based on 4 blocks - as you can see, the page is now pre-populated with some awesome modules that can now be the base of your design.
To edit, either go through the menu options on the left to find what you need, or just click around the page and use the intuitive editing tools on each element that sits on each block. You can also easily move things up and down the page like this.
Once the design starts to take shape, you can check how it looks on different aspect ratios by using this drop down menu - including the burger menu addition for smaller screens as you can see here.
So, let’s clear the random layout now using the same drop down menu we used to create it.
Now, we’re going to build our web page little by little picking each individual element one at a time starting with the Header, Navigation, a nice Form, Feature and finally Contact and Footer.
Just let me double check that Auto Save is on - yes, great.
You can choose different presets for your website. I settled on the “Friendly" preset. Presets not only change the font of the text but also change the colors that can be used for buttons and other elements.
As you can see here, I’m now going through and changing the formatting on the page including fonts, size, HEX colour and so on. What’s great is that with Startup you only need to set each heading ‘type’ once, and it replicates across the whole page. Awesome!
Adding photos is a breeze, simply click here, find the picture you’d like to add, upload it to your library and drop it onto the page.
Remember, all text is easily customisable by just clicking in and editing directly on the page - even buttons. And once an element is looking perfect, why not clone it as necessary to keep things nice and uniform.
Now onto the dynamic part - lets add some nice transitions and animations to our page. Here some basic fade ins, and a nice new coloured text which as you can see is very easily positioned.
You don’t need to worry about losing your progress as you can quickly toggle between different looks, swapping elements and so on - and get right back to where you were in a couple of clicks.
There’s a plethora of tools here on the right hand side to make sure your design is exactly as it needs to be. You can customize the element deeper by changing classes and attributes in the "Advanced" tab
Finally, let’s see what it looks like in all it’s glory - look at that! A beautiful custom-built site fit for your business - built in less than a few minutes.

[@Tuby]

The new editor is very rich in the new functionality. Hope to see more soon!

[@andrewjackson4350]

True, very dev-oriented editor.

[@RogerWoods-bi6pb]

its just missing one section that is navbar and header combined with image in bacground and navbar opasity should transparent hehe

[@soorkie]

Why hasn't anybody told me about this tool 🥺