This week we’re turning our attention to the “Modal” Element, it’s handy for a lot of things; including alerts, contact forms, and even menus (more on that next week). Towards the end of the video I answer a couple of questions we missed from last weeks Q&A session.
Have a watch of the video, and as always, give us your feedback in the comments below.
We love feedback!
Remember, we’re building Elements in the open so we can get feedback as we go. We want to make sure we’re building the product everybody here wants (including us). Share your ideas and feedback in the comments below.
Your feedback is invaluable; together we can build the best web design app on the Mac!
Great stuff as always! In look at this weeks video, a couple of questions come to mind.
Is the per-page css and js included in the page, or is it external? It seems like it would be much more efficient to include that code directly in the exported html itself.
In looking at the structure panel I’m noticing a lot of flex, header, section, etc elements. Is it possible to rename or add some text to these in order to be able to create a more content-focused and user-centric display of the elements used in the page structure? For instance; section#news, header#main, etc. It wouldn’t need to use the element#id syntax, it could just be ‘News’ with a section icon.
I’m really happy to see that it’s possible to add raw HTML to a page. Any chance we might see improvements to that UX? It would be really helpful to be able to see the HTML rendered in edit mode, as seeing the code displayed is quite distracting as it takes you out of the visual experience. Perhaps, the code could be entered via a modal (in Elements itself) that could be made visible via an ‘edit’ button, and that is visible on all raw HTML elements in edit mode?
I notice you’re using Nova () as your code editor. Any chance there’s a RapidWeaver Elements Developer Extension in the works for Nova?
Is it possible to have more than one document open at a time (via tabs) in Elements? I can see many times when I’ll want to edit more than one document at a time; copy/paste, text changes, ensuring consistent styles and formatting, etc.
Pretty simple modal. Will there be modals that automatically open on a timed amount without the need for a trigger button?
Also this video makes me wonder how Elements plans on handling email forms. Curious what the interface and flexibility with Elements forms will be like.
@dan If I create a multi animation in Tailwind, will I have to use the converted code from tailwind.config.js (where I entered the keyframes) outputted to the css file, to use in Elements, or will there be a site wide section for tailwind.config.js
Couple of questions. Will Elements have a Master Page, so we can set all the items that are common on all site pages on the Master, then just add the content that is different? Is there an option to generate a self playing slide show, to use to change the banner photo on the welcome page for example?
Hi @bryanrieger, great questions and feedback as always. I’ll do my best to answer them below…
Yes, they will be included in the page, like it is now in RapidWeaver Classic.
Yes, you can rename these in the Page Layout section, right now we do it like this (see GIF). We do put a pipe character and append the Element name after your custom name so you know what Element it is, but I’m thinking perhaps we don’t need to do this. What are your thoughts?
Yes, I was thinking the same thing as I recorded the video. Will add it to our todo list (can’t promise it’ll be done in time for the beta, but it’s on the list).
Not at the moment (but anyone could create one). @ben started to create one for VSCode to cover the basics.
Of course! you can even drag and drop between the page layout manager, it’s pretty sweet! I’ll add it to my list to demo next week.
Not for the beta, but it’s something we could add further down the line. Tagging @ben in for his thoughts on this one!
We haven’t built an Element to make forms, and don’t plan to for the beta (we’re just working on nailing the basics). Right now it would have to be handled via code snippets or a third-party. Although I could certainly see it being something we tackled in the future!
I’ve not tried to do this, but at a guess I’d say you’d have to use the outputted css. We have some grand idea for “multi animation” in Elements, but that will not be part of the beta.
We have a feature that will allow you to build common elements to include in the page, it’s better than Master Pages (imho), and we’ll be showing it off in the coming weeks. Stay tuned for that.
Not right now, but that sounds like a great idea for an Element a third-party developer could create once RWe has launched!
I’m not sure if the icon itself is enough to convey what it is, but having ‘Name | Element’ is a bit confusing because they both look the same, and the custom name comes before the element, which if you also have a number of unnamed elements makes it slightly less easy to quickly scan for similar elements.
I wonder if something as simple as the following might work?
Heading Title
Flex Content
Flex Item Featured
Flex Item Supplemental
This would allow for easy scanning of the actual Elements element names, but then put the focus on what the user has decided to call this element?
I’m assuming these names are not translated to #ids otherwise they would have to be unique, and I can see where it would be relatively easy to have multiple titles, headings, etc on a page. Should these names relate to/be used in the properties panel as well?
Excellent!
When the developer docs are available that is something I might look into undertaking.
This is something we can definitely do, but I think it might be a separate element - I am thinking of those “Sign up for 10% Off” popups you get on most sites. Perhaps that might be a separate “Pop Up” element
Awesome! This is a pretty useful feature. I’m really interested in an email form solution instead of hunting third party or programming from scratch. I know Dan wrote perhaps down the road. Do you have a third party you recommend for getting the code or do I have to go old fashioned and put on my coding glasses?
) as your code editor. Any chance there’s a RapidWeaver Elements Developer 
