General Notes:
Otto is built with beginners in mind and we've been sure to make things as simple as possible where we can.
As always we recommend a basic understanding of Webflow to really make the most out of changing the template. It should be noted that in most cases we have avoided using combo-classes as these can get messy with accidental changes. In general we do repeat usage of the 'Container' element and the 'Content Section' element across all pages. Changes on these sections will effect 90% of the site, but allow you to very quickly alter padding / margins and container sizes.
In most cases content sits inside the 'container' element (div-block). As you likely know, the container sets our page boundaries and the size in which we will contain content. For Otto, we're using a 1200px default container. In some cases we will use 'Container Tight' which will provide us with a tighter version of the default container. As mentioned, you will be able to change 90% of the site container sizes, by simply changing the max-width for the 'container' element.
In sections where we are using the Background Square Element (BG Element) we will wrap the content in a basic div-block which basically just tells our BG Element how to behave. TLDR In most cases where you see the 'BG Container' you will also see the 'BG element' inside of here.
The sole purpose of this wrap is to control our BG Element. This BG Container basically works as the parent element for the BG element and allows us to position this square to the top, bottom or really anywhere we need.
As mentioned above the background square animations use the class BG Element for their base structure.
The base BG Element will contain a number of properties that set its min-height, max-width, BG-colour, BG-image, colour etc. Use combo classes on-top of this BG Element to quickly change any of these properties. We have done so throughout this template with various combo-classes. This is why some are blue and some are purple, they all use the base BG-element class so we can rapidly apply interactions to them.
When a page finishes loading we have a chain of animation which will ease certain parts of the website. You shout note that all pages will follow a similar loading pattern which brings in primary elements. This includes the navigation, title text & buttons etc. You can see these interactions under the When Page Finishes Loading of your interactions panel. In most cases pages will use the General page load to effect the common elements. This is marked with the '⭐'
Some pages have more unique elements that require interactions for elements like the dashboard element, or company images - we've seperated these interactions for their respective pages. In short, use the general page load with the basic pages with items like nav, text, buttons etc. If you need to have animations unique to a page just duplicate the general page and then add any other items into your interactions. We do this to keep our interaction chains light and accurate.
