Layout basics

Structure of a slidde webpage

Slidde.co uses a simple four-layer structure:

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

userCompName.Page

The userCompName.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 userCompName.Page element directly, use the userCompOption.Select page option in the toolbar.

The userCompOption.hashSection feature can simulate a multi-page website. Check out this demo: Demo Link

userCompName.Slide

A userCompName.Slide is the first-level element under a userCompName.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 userCompOption.htmlId is essentially a HTML ID. Name them based on the content within the userCompName.Slide for easy navigation using links like “#ID”. Learn more about skip links.

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

The userCompOption.sticky feature is for floating navigation bars or any other elements. See an example here: Sticky Demo

userCompName.Container

A userCompName.Container manages responsive widths and multi-column displays.

• Mobile and desktop widths usually differ. Use the userCompOption.width attribute in a userCompName.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.