Page Layout

Elements
1

I’m currently exploring moving from RW/Foundry to Elements. I have some questions, which may have already been answered, and I do apologise if that is the case. I like Elements as the logic and layout seem to be similar to the logic and clear videos and documentation on how to do things, rather than what can be done. And it’s also great to see that Adrian has added a Sitelok Pack to Elements. I have built several large member sites with RW/Foundry3/Sitelok, and before I go through the extensive challenge to move to Elements, I will give up a huge investment in RW and Stacks over many years. Before I move, I need some clarification first:

1. Is there a template similar to Partitions in Foundry 3 with a top section for the menu (collapsible for mobile) and drop-down with some menu items, a side panel with a collapsible menu (on mobile) and a footer section? The side panel/navigation layout shown in Dev Diary No. 99 at around the 10-minute mark is close.

  1. I have a section on the site that has numerous long articles/blogs. Users access only the content that they have paid for. It is good to see that there is CMS functionality now in Elements, but can users sort the selection of articles through the use of a search or something similar that links to tags, categories, authors, the user group they belong to, etc.?
  2. Due to the length of some pages on the site, I sometimes use the pagination stack, which is a Foundry 3 stack. Is there something similar in Elements?
  3. Is there a drop zone in the footer section where I can place code for a link to a third-party widget?
  4. Can buttons and hover images be animated?
  5. Is there a bento grid functionality in Elements?
    I’d welcome any insights @dan . Thank you.
2

@elementsbot can you help

3

Hey Frank (and Paul)! Exciting to see you’re considering jumping ship to Elements. Let’s dive into your questions:

  1. Template Similar to Partitions: While Elements doesn’t have a one-to-one template for Foundry 3’s Partitions, you can create something similar using Elements’ Flex and Grid components. Mimic the side panel/navigation using these alongside Responsive Controls for mobile adjustments.

  2. CMS and Sorting Articles: Elements CMS does indeed have rich functionality! You can categorize articles with tags and authors, and sort them using custom filters. Dynamic data displays with these capabilities will get you close to what you’ve described.

  3. Pagination: Elements doesn’t have a native Pagination component just yet. But you’d be surprised what you can craft with some creative use of links and list components!

  4. Drop Zone in Footer: Yes! You can add custom code snippets directly into your footer using the HTML Component.

  5. Animated Buttons/Hover Images: Absolutely. Use Elements’ animation capabilities to add hovers, transitions, and more to make your site feel super lively.

  6. Bento Grid Functionality: You can use the Grid Component in Elements to create flexible, responsive grid layouts similar to a bento-style grid.

For any other puzzling points, don’t hesitate to ask the Realmac devs. They are phenomenal at making the impossible, possible. :tada:

4

Thanks. Just a few more questions that have come to mind:

  1. Can I have an interaction quiz where a visitor fills out a quiz and gets an immediate score at the end of the quiz, similar to what the Quizzer 2 stack by Shaking the Habitual?
  2. Is there a toggle switch that can hide and make visible sections of the web page when toggled - similar to the Toggle This Stack by 1LD?
  3. I presume that the content in columns can be equalised?
  4. How do I have videos hosted with Vimeo embedded in a webpage?
5

Hey Frank! Let’s tackle those extra questions of yours:

  1. Interaction Quiz: Elements doesn’t have a specific quiz component like Quizzer 2, but you could potentially create something similar using custom JavaScript and HTML components. Roll up those sleeves (or paw-hands, if you’re furry like me) and dive into some custom code magic!

  2. Toggle Switch for Visibility: Use the Accordion or Dropdown components to toggle visibility of sections. While not exactly like the Toggle This Stack, these components are flexible and should suit your needs with a bit of creative tweaking.

  3. Equalized Content in Columns: You can indeed equalize content in columns using Flex or Grid components. Use the “Items Align” and “Justify” properties to keep everything visually consistent.

  4. Embedding Vimeo Videos: Use the Video component or HTML component to embed Vimeo videos. You’ll just need the embed code from Vimeo, and you’re ready to rock and roll!

Don’t hesitate to bring up more questions! You’re on the brink of a whole new world of web design with Elements. :man_mage::sparkles:

6

What about adding a search function for covering selected sections of a website?

7

Hey Frank! Adding a search function to cover selected sections of a website in Elements can be a fun little project. While Elements doesn’t have a built-in search component, you can roll your own using some JavaScript magic and the HTML component.

Here’s a basic rundown:

  • Grab a JavaScript library like Fuse.js that enables client-side search.
  • Use the HTML Component to add your search input and result display area.
  • Use Fuse.js to search through your content based on your selected criteria.

Or enlist the help of a third-party search provider if you’re looking for something more robust. Keep pushing those boundaries with Elements! :rocket:

And remember, everything is always growing and improving here, so stay tuned for even more flexible options. If that’s a bit too techy, I’m sure the devs at Realmac will welcome suggestions for future features!