In today’s Dev Diary, I dive into the all-new Templates features. The video’s a bit longer than usual, but for good reason! This is a massive new feature, so I’ve broken it down into three sections to make things easier to follow:
Project Templates
Built-in Templates
Creating your own Template Packs
Timestamps are included in the YouTube description so you can jump around as needed.
Make sure to watch the full thing (or at least a bit of each section) to get a feel for just how powerful Templates are. I’ve got a feeling this is going to be another game-changer for Elements
The new Templates feature will be shipping in a build the week of June 16th!
After you’ve watched the video, be sure to head back here and tell us what you think. We want your feedback!
With version 1.0 just around the corner, now is a great time to jump in and start building your next website. Visit elementsapp.io to pick up your copy today.
Thanks for Your Feedback
The Elements app evolves directly from your suggestions, and as always, we’d love to hear what you think so far. Your feedback truly makes all the difference
This is an awesome and exciting implementation of the templates feature! I can now confidently say that my popular Minimalist Library for Blocs will be coming to Elements later this year!
I have a few questions (forgive me if these seem too basic):
Will there be a preview feature for the sections and components included, or will they simply appear as items in the templates panel list? My library includes over 1,000 sections and components, so making it easy for users to find the right one at the right time is crucial.
Can users rearrange the order of the packs in the templates panel? If a user has multiple packs installed, it might be cumbersome to navigate to the desired one.
Will there be an update feature for these packs? I regularly release updates for my libraries with new sections and components, and I often improve existing ones as well. The video makes creating packs look super easy, which is awesome, but I’m curious if there will be an automatic update feature built in.
I’m sure I’ll have more questions in the future, but this is really exciting stuff! Well done!
Start off by saying this looks to be a fantastic new feature.
With the DevPacks being used across multiple projects, If I change it in one project then will it change in another project that it is used in? Appreciate that once a template is dragged into a webpage it is not linked. I am just referring to the DevPack contents.
How is a DevPack Component add-on differentiated from a DevPack template add-on when it is being added? What is to stop a DevPack Component add-on being added to the list of Templates?
I have absolutely no problem with what you’ve been adding to Elements (other than I can’t use a lot of it yet ;~). You’re knocking it out of the park with just how deep and broad and useful Elements is. Keep that up.
I don’t really have any issues with anything you presented or suggestions for changes/additions to templates. But my deja vu comment brings up the discussion of a year ago: naming. I caught you twice using the wrong name for something in your video ;~).
We now have elements, globals, templates, scafolding, themes, packs (and dev packs), components, collections, folders, and I caught you even referring to add-ons. The naming is once again not making sense to me. That’s partly because I’m missing the organizational element to the naming. I believe you’re now at the point where the naming could be a barrier to new users, as they won’t be able to make sense of what you’re referring to. It also suggests that the online manual is going to need a fair amount of restructuring, as you have the problem of do you identify the individual bits (e.g. menu) first or the overall bits (e.g. templates)? Templates would get a new user to the finish line fast, so if they have to wade through learning the individual bits first that would slow them down. But if they learn Templates first, then they might not know what’s in them and how they can customize that. (I’d recommend teaching Themes and Templates first).
I gather a pack (or is it dev pack?) can contain a theme and templates, right? A template can contain globals, customs, components, folders, but is separate from a theme. Core refers to things RealMac makes, so what’s the name for things others make?
I get a real sense that names were made on the fly as you realized that you needed to call the new bits something. I believe it’s time to go back and rationalize the naming so that in a single paragraph or two that everyone understands the organization/heirarchy that the names imply.
There are other places where this problem surfaces. For instance in the difference between “design” (mostly CSS/Tailwind) and “code” (which I’d include Twig in).
Just a heads up. Naming is back to being important again.
We talked about this a long time ago. Then Globals came out — a step in the right direction, but not the solution.
Then things shifted to being very designer-centric. That’s not the market I’m in. I’m just a user now, with a desire to “just make a website.” Elements simply wasn’t the solution I wanted anymore.
Full circle — Templates is that solution. Even more flexible than we originally discussed. It’s awesome that the templates now work with themes as well! It’s all thanks to the designer-centric work Realmac has been doing so diligently. I couldn’t see the bigger picture, but I’m really glad you all pushed through and developed your vision.
The folders are great for organizing.
Respectfully, here are my requests:
Please build many (or all) of the examples I’ve shared in the past.
Take the time to build accessibility into all of them, where appropriate.
The core scaffolding idea is excellent.
Clearly label any parts that could raise privacy concerns — scripts, data collection, etc.
Specifically, with the Contact form, there should be a button to confirm permission to collect and use data in order to generate a response email.
Others will probably have more specific ideas. I’m just trying to get it done.
Wow. We can’t wait to see it. I think Element users will love it!
Yes exactly! We’re going to add preview support so you’ll be able to specify an (optional) image (jpg or png) to represent the Template!
We haven’t implemented this yet, but I think it’ll be important as more packs are released
100% yes! This is part of the store backend we’re currently building. We’re going to make it VERY easy to ship these packs and push out updates. In fact, all clients (i.e. Elements Apps that are running) will get instantly notified when an add-on update is available. It’s an awesome system.
Well, Now things are getting pretty confusing. What panel are components going to live in vs templates? You showed creating a shell for a devpack but you put templates in it, very confusing as I thought dev components were supposed to be in there. I’m afraid the extra panel is just going to be another panel for things to get lost in and not used.
@dan Good gracious! This is going to be mind-bogglingly useful and will take Elements to another level.
The scaffolding concept is going to mean I can finally get rid of my Global-Setup project where I have created all of these similar components in the form of globals that I then copy into my projects as needed. Looking forward to shedding that project.
I have one probably stupid question. One of the things I also do is create a bunch of SVG components for ones I commonly use across most of my projects. Will something like that be able to go into the templates? I assume it can because they are just Elements components after all.
I’d also like to see templates for things like modals as there is a lot of configuration that can go into them.
I was just about to start work on a new project for a local non-profit club, I think I will hold off until this comes along as I see it will speed up the whole process.
We should all be really excited to see something like this new feature showing up in Elements as it is a clear indication that our faith in sticking with Elements for almost a year now was well founded. Our faith in the team is being rewarded with a stellar piece of software.
Yes, a dev pack will be available (and editable in all projects).
Yes, that’s correct (just confirming here incase anyone else was wondering about that).
Yes we hear you, and have a ticket filed to solve this - not rushing into it as we want to make sure we do it right.
A DevPack is universal, it can hold any and all types of add-ons; Themes, Components, Templates, and Resources. All local DevPacks you create will appear in the list of Templates.
This actually came up as we were developing the Templates features… and I have good news…
We realised it would be REALLY handy if Element (Dev)Packs could also hold a list of resources. So for example, in a dev pack you could include a bunch of icons and they would appear in the “Resources” ready for you to drag into your site. And yes, only those used in your site would be published. (Hope that all makes sense)
@tpbradley has started working on implementing this, but it’s not quite finished, yet…
Yes! The templates I demoed today are things I put together over the past week, they are very much a work-in-progress. We’ll be sure to expand out the base set to include most of the common things you’d need in a basic site
We have a REALLY big vision of where we want to take things, and are laser focused on making sure Elements is without question the best web design app on the Mac!
Thanks for having faith in us, we won’t let you down
This is exactly what I’ve been waiting for. Previous to today, a lot of the site building was aimed at the more experienced users (those of us here already in the forum) but this is The Way for the new to RapidWeaver/Elements user which, I hope, will come flooding in. Well done, one and all!
Ah okay, I just added this to the contact form template. You’d obviously need to link to your own privacy policy, but the required checkbox and text is there.
@dan Works for me. I already add something like this to all of my contact forms along with a button to access the Privacy Policy, which I typically display in a modal. This will simplify things if it is part of the form package. How would one hook your solution up to a modal or would I be better off just keeping my solution?
Thanks for Your Feedback
