Earn Money with The Affiliate Program →
Get Discounted Framer Resources →
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/c8de8d9d-5ab8-44ff-982f-7e42e71cb905/framer.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/c8de8d9d-5ab8-44ff-982f-7e42e71cb905/framer.png" width="40px" /> Framer Working File
</aside>
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/c8de8d9d-5ab8-44ff-982f-7e42e71cb905/framer.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/c8de8d9d-5ab8-44ff-982f-7e42e71cb905/framer.png" width="40px" /> Course Styleguide
</aside>
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/1c2d61db-ecbc-42ff-906a-3fc49da4bcb2/framer.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/1c2d61db-ecbc-42ff-906a-3fc49da4bcb2/framer.png" width="40px" /> Framer Live Site
</aside>
<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/0087501f-4e18-4faa-bfe2-80d9cd05b770/figma.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/87f5ec1c-8cd3-4d06-8a16-a2da4afcf0b9/0087501f-4e18-4faa-bfe2-80d9cd05b770/figma.png" width="40px" /> Figma Working File
</aside>
<aside> <img src="/icons/photo-landscape_lightgray.svg" alt="/icons/photo-landscape_lightgray.svg" width="40px" /> 3D Image Assets
</aside>
| Term | Meaning | Example |
|---|---|---|
| Parent | In a hierarchy of elements, a parent is the container or element that encloses one or more child elements. It can control layout or styling properties of its children. | In the context of a hero section, the parent element could be the overall container that holds the hero's content, including text and buttons. This parent element controls the layout of its child elements to ensure they are properly aligned and spaced. |
| Child | A child element is contained within a parent element. It inherits certain properties from the parent and can also have its own unique properties and styles. | Child elements within the hero section could include headings, paragraphs, and call-to-action buttons. They are placed inside the parent hero container and thus become the child elements. |
| Frame | A frame in Framer is a versatile object that can act as a container for other elements. It's used to create UI components, screens, and layouts with specific sizes and positions. | Frames can be used to create the structural components of the hero section, such as a frame for text content and another for images or videos, enabling precise placement and sizing. |
| Stack | A stack is a layout tool in Framer that automatically arranges child elements in a vertical or horizontal line, managing spacing and alignment efficiently. | Stacks could manage the vertical arrangement of elements in the hero section, such as stacking a headline, a subheadline, and a call-to-action button automatically. |
| Auto Layout | This is Figma’s equivalent of a Stack. | —II— |
| Flexbox | Webflow’s (and the general web world’s) equivalent of a Stack. | —II— |
| Box Model | The box model in web design, applicable in Framer, describes how a layout of elements will consist of boxes within boxes. | Understanding the box model is crucial when designing the hero section, as it affects the layout through margins, borders, padding, and content area of each element. |
| 4pt Grid | A 4pt grid system is a design framework that uses multiples of 4 points to define dimensions, spacing, and alignment of elements, promoting visual consistency across devices. | Implementing a 4pt grid system for the hero section can help maintain visual consistency, especially when scaling the design across various screen sizes. |
| Padding | Padding is the space inside an element between its content and its border. It's crucial for designing layouts, as it affects the element's overall size and spacing. | Padding inside the hero section's elements, like buttons or text frames, ensures content is not flush against the edges, improving readability and visual appeal. |
| CSV | While not a design element, CSV (Comma-Separated Values) files can be imported into Framer to dynamically populate designs with data, useful for prototyping with real content. | Importing a CSV file into Framer could automate the population of text content in the hero section, useful for testing different headlines or calls to action during prototyping. |
| H1-H6 | These represent HTML heading tags, ranging from H1 (the highest level) to H6 (the lowest level), used for structuring content hierarchically and giving our search engines an idea of what’s the most important stuff on our page. | In the hero section, using an H1 tag for the main headline helps structure the content hierarchically, improving SEO and helping users understand the page's content at a glance. |
| Heading 1 - Heading 6 | These represent heading sizes, ranging from Heading 1 (the biggest heading) to Heading 6 (the smallest heading). | The Hero headline would typically be a Heading 1 and thus the biggest piece of text on your website. |
| Styleguide | A styleguide in Framer is a set of standards for design and code, ensuring consistency across a project. It typically includes color schemes, typography, and component styles. | A styleguide ensures consistent use of colors, fonts, and component styles within the hero section, aligning with the overall design language of the website. |
| Gap | Gap is a property used in layouts, such as a Stack or a Grid, to create space between elements or items without affecting outer margins, simplifying the design of evenly spaced layouts. | Using the gap property in layouts like Stacks or Grids helps maintain consistent spacing between elements in the hero section, such as between the headline and the subheadline. |
| Relative positioning | Relative positioning moves an element in relation to where it would normally be in the document flow. Anything with a relative position will stay in the same place in the document flow. | Imagine designing a hero section where all text elements, such as headlines, subheadlines, and call-to-action buttons, are organized within a Stack for a structured layout. By applying relative positioning to these text elements, you ensure they respect the specific paddings, gaps, and orientation defined by the Stack, which acts as their parent container. This arrangement guarantees a consistent design, with each element maintaining its designated space and alignment according to the parent. |
| Absolute positioning | Absolute positioning places an element at a specific position within a relatively positioned parent element. It removes the element from the normal document flow, meaning it can overlap other elements. | For a hero section with a complex design, such as a special offer badge or a decorative graphic element that needs to be positioned precisely over a corner of an image, absolute positioning can be used. The badge or graphic is positioned absolutely within the hero section's parent container, ensuring it appears exactly where desired, regardless of screen size. |
| Fixed positioning | Fixed positioning anchors an element at a specific position relative to the viewport, meaning it stays in the same place even when the page is scrolled. | In a hero section, a call-to-action button could be fixed at the bottom of the viewport, ensuring it remains visible and accessible to users as they scroll through the hero content. This can be especially useful for long hero sections that contain scrolling animations or multiple content layers. |
| Sticky positioning | Sticky positioning is a hybrid of relative and fixed positioning. An element is treated as relatively positioned until it crosses a specified point, then it becomes fixed. | For a hero section with a lengthy introduction or multiple sections, a navigation menu or progress bar could use sticky positioning. It would scroll normally until the top of the viewport reaches its position, then stick to the top of the viewport as the user continues to scroll through the hero section, enhancing navigation and user engagement. |
| Overflow | Overflow controls how content that exceeds the bounds of its container is handled, whether it's hidden, made scrollable, or allowed to spill out. | In a hero section that includes user testimonials in a small, fixed-size container, the overflow property can be used to make these testimonials scrollable horizontally or vertically within the container. This allows for a clean, contained design that can display multiple pieces of content in a limited space, improving the user experience without requiring navigation away from the hero section. |
| Relative Overlay | A "relative overlay" refers to an overlay element that is positioned relative to its parent. This overlay moves along with its parent container when the page is scrolled. | Imagine you want to add a popover text whenever you hover an image in your hero section. This popover text could be achieved through using a relative overlay on the image in your hero. |
| Fixed Overlay | A "fixed overlay" is an overlay that is fixed in place relative to the viewport, meaning it does not move when the page is scrolled. This is often used for elements that need to remain visible or accessible regardless of the user's position on the page. | For the hero section, imagine implementing a notification bar or a call-to-action button that should stay visible to the user as they scroll past the hero section. This fixed overlay would be positioned at the top or bottom of the viewport and remain in place as the user scrolls through the site, ensuring constant visibility and access. |
| Viewport | The viewport is the visible area of a web page on a screen. It varies with the device (e.g., a desktop monitor or a mobile screen) and is a key concept in responsive web design. | In the context of responsive design, the viewport meta tag can be used to control the layout on mobile browsers by setting width and scaling. |
| Viewport Height (vh) | Viewport height (vh) is a CSS unit that represents a percentage of the viewport's height. One vh unit equals 1% of the viewport height. | If the viewport height is 1000px, then 50vh will be 500px. For example, setting an element's height to 100vh ensures it always takes up the full height of the viewport, regardless of the screen size. |
| Slug | A slug is the part of a URL that identifies a particular page on a website in an easy-to-read form. It usually follows the domain and helps with SEO and user readability. | In a blog URL like https://example.com/blog/how-to-code, the slug is how-to-code. This makes the URL more readable and descriptive for both users and search engines. |
