I have found myself starting my web creating process by making a new blank project to plan my site structure. But I wonder how easy it will be to move that structure into a project with template and components as the tool grows in maturity. Can someone with some experience in building a site with Elements, share some thoughts on this?
take a look at dan’s youtube videos. they will give you a good overview of how to build your own website from scratch.
also download a free site from the marketplace and muck about with one of those and your learn/understand how things work
I have played around with a blank project for a couple of days, but it is still not obvious for me how I leave my own styling behind if and when there is a nice template for me to replace it with. My question is rather: how can I keep adding new functionality to my own project, or move my content into a new project with better functionality when this tool develops into the future?
Maybe that @elementsbot can help? @elementsbot do you have some tips and tricks for making a website in Elements from scratch?
Hey refsvik and MikeV! 
Building a website from scratch with Elements is a rewarding endeavor, and I’m here to help with some tips to get you started:
-
Create a Solid Structure: Start by outlining your site’s structure. Use mind maps or simple notes to plan your pages and sections.
-
Begin with Blocks: Use the Layout Blocks in Elements to build your page skeleton. Layout Blocks will help you visualize the structure as you go.
-
Leverage Components: Elements comes with a variety of components for common needs (headers, footers, navbars). Drag and drop these, and customize them using Tailwind’s utility classes for styling.
-
Templates and Style Guides: As Elements develops, new templates will become available. You can integrate templates by slotting your components and content into the new structure while adjusting styling as needed. Keep your content well-organized, and consistently use class names for styling so transitioning is easier later on.
-
Stay Organized: Keep your CSS organized and centralized in one style guide document. Use Tailwind’s configuration to manage themes and settings globally.
-
Experiment and Iterate: Download existing sites from the marketplace or templates and learn by tweaking them. This will help you assimilate best practices in Elements.
Remember, as Elements grows, you’ll have more templates and components available. The flexibility of Elements means you can seamlessly integrate new features and styles into your existing projects. Keep your projects modular, and you’ll be ready to take advantage of any new updates with minimal fuss.
Feel free to dive into Dan’s YouTube tutorials and poke around in existing free projects in the marketplace - a brilliant way to learn by doing!
When future updates or enhancements are released, maintaining a modular project will make migration and enhancement smoother. Happy weaving! 
@dan and the Team have done many many videos and tutorials on how to build a website with elements - even from scratch. There are even some that try to recreate existing websites. Try and download one of the free projects from the Marketplace (they show when you start a new project) and dissect them, or check the paid ones here..
Then there’s an extensive documentation to read through as well.
No need to watch all the dev diaries (though they are very informative and I would recommend to watch at least some - e.g. about the theme studio) but expect a learning curve.
For everything else this amazing forum and the great support from the team is just a few clicks away.
I am afraid that is not the right question for me. The question is: @elementsbot «How can I keep adding functionality to my Elements-project as the Elements app and surrounding resources keeps evolving?»
1 Like
I’m sorry, I don’t understand your question 
Can you be a bit more specific about what you’re trying to do inside of Elements? A few screenshots or a short video would help.
Once I understand, I’m sure I’ll be able to help 
1 Like
Are you thinking one or both of these
informational or visual elements meant for consumption
Texts
images
videos etc
interactive or operational elements
Forms
CMS
Filters etc
I was thinking exactly the same
PaulBot here 
You can build a template/test site and put all your pages, components bells and whistles and whatever you want in. When you are then doing a new project you just copy and past your prebuilt items into the new project. However if you loo at dev diary 86 you will see next week we get the new update (hopefully) which will make things simple for you as this version will let lose the beta templates version. Then you’re basically clicking and dragging into what you want. If you want to save things for that project its fine but the BEST thing is you can now save all your resources so they are just a drag away from putting in any project for example: headers/footers/Sections/Icons/Pictures etc etc etc. the world will be your oyster. I hope this helps a bit?
Did you catch that @dan? @elementsbot used a term (Layout Blocks) that’s a bit out of sync with the next bullet (Components). Layouts are a component.
I think this is a bit of people’s confusion with Elements starting out. Layouts are a bit of a special Component, as they only really contain other Components (or in the case of Background sit behind other components).
I would have said:
- Create a site page structure.
- Use Layout Components to build structure on a page.
- Use Templates to change site-wide style.
- Look at 1 & 2 to determine what things would get reused on every page and make them globals.
If you’re looking to keep your Elements project fresh with evolving features and styles, here’s a fun game plan:
-
Stay Updated: Regularly update Elements to get the latest features and improvements (those weekly dev diaries are like little gifts
). -
Leverage Components: Elements Components are like building blocks. Use and customize them any time new options come out.
-
Use Global Settings: Centralize your CSS and settings. Tailwind makes updating styles across pages easy.
-
Play with Templates: Transitioning to new templates is smooth when you’ve kept content organized. As new templates get released, you can select and drag them into projects.
-
Create a Master Project: Make a template/test site with pages, components, and styles you’ll reuse. Copy and paste those into new projects.
-
Explore the Marketplace: Grab free and paid templates for inspiration. Dissect them to understand best practices.
-
Consult the Docs & Community: Keep an eye on the Elements documentation and poke around forums for insights and tips.
Remember, by keeping things modular and centralized, adapting or adding functionality is easier as Elements evolves. Let’s harness that Power of Elements! 
I’m swooping back into the system to generate helpful answers any time you’ve got questions. 
Hi @dan . I am clearly having problems explaining myself well here. Migration may also have been the wrong term to use. Sorry.
I started with an empty project and created a site structure and immediately regretted not creating a North Eleven-based project so that I could try out modifying a theme to style my pages.
In trying to solve this by moving my web structure into a new North Eleven project but that did not work. I also lacked a way of adding a template to my empty site and felt lost.
I guess my fear here is that I will paint myself into a corner by the way I start a new project or create pages. But I guess the new themes functionality and AddOns will be the way I can modify the look, feel and functionality of a Elements project going forward?
Don’t worry. You can build out the structure of your site, and add the content to each page later. Elements is VERY flexible, you won’t box yourself in.
Design your site on one page, get the menu and header looking the way you want, then turn it into a global and add it to all your other pages. The same idea goes for the footer.
Watch this video on Globals to get an idea of how they work:
You can use the Theme Studio to make changes to the way your site looks, i.e. what colours and fonts it uses. This theme video is much older, but it will show you how the theme system works:
Hope that helps!
Thank you @dan. I am sure it will be fine. I will continue to convert at couple hundred Wordpress posts into markdown files, and import them into my project while I wait for the theme update.
What theme update are you waiting for?
i think he is waiting for the fact that he can create his own theme-template under theme-settings which he can then save and use again and again …
might mean CMS as mention of blog posts to covert