Layout basics

Last updated on 10/29/2024@mrbirddev

Structure of a slidde webpage

Slidde.co uses a simple four-layer structure:

  • Page (Global Styles)
  • Slide (Content Segmentation)
  • Container (Responsive Width, Multiple columns)
  • Inline Elements (Specific Content)

Page

The Page layer is at the top and is used to set global styles like fonts, colors, and link styles, as CSS properties are inheritable.

Optionally you can use CSS variables to make your template more user-friendly.

If you cannot select the Page element directly, use the Select page option in the toolbar.

The Show/hide slide by URL hash feature can simulate a multi-page website. Check out this demo: Demo Link

Slide

A Slide is the first-level element under a Page, used for segmenting content.

  • Simple pages, like "link in bio" pages, may have only one Slide.
  • Complex landing pages might include multiple sections like #header, #hero, #works, #contact, #footer.

An Anchor ID (HTML ID) is essentially a HTML ID. Name them based on the content within the Slide for easy navigation using links like “#ID”. Learn more about skip links.

To hide a Slide from the final website but keep them saved, check the Hidden attribute. This is similar to PowerPoint’s hidden slides and can also be used for tutorials.

The Sticky (Floats at top after scrolling past it) feature is for floating navigation bars or any other elements. See an example here: Sticky Demo

Container

A Container manages responsive widths and multi-column displays.

  • Mobile and desktop widths usually differ. Use the Width attribute in a Container for adaptive widths across devices.
  • Columns define how many columns are in a container. You can set widths like x/12 (e.g., two 6/12 columns for 50% width each).

Each column can also have horizontal and vertical alignment settings.

Other

Other elements are inline elements, which can be positioned inside the container.

By following this structured approach, you can create visually appealing, responsive web pages with ease using Slidde.co.