Summer Sale
Lifetime 50% discount on all plans
Use code
SUMMER50
Ycode logotype
Features
Layout & Design

Experience full design control to craft professional websites.

CMS

Organize your content your way for maximum impact.

Forms

Build contact, newsletter, and filter forms effortlessly.

SEO

Boost your website's SEO with optimized controls.

Interactions

Add some spark to your website with interactions.

Localization

Translate your website into multiple languages.

Resources
Templates

Customize any template to fit your style and needs.

Integrations

Connect Ycode with your favorite tools.

Customer stories

Explore how others create amazing sites using Ycode.

Academy

Start learning Ycode for free. Get answers to your questions.

Experts

Find experts to help with your website project.

Blog

No-code insights to help you build and design better projects.

Support
Help Center

Find step-by-step guides and answers in our knowledge base.

Contact

Contact us for urgent help.

Community

Connect and learn from others.

Pricing Partners
Log in Sign up
Introduction
Getting started
Dashboard
Dashboard
New project
Profile
Switch account
Users
Billing history
Account settings
Project settings
Project settings
General settings
Project ownership
Allow cloning
Project plan
SEO
Domain
Redirects
API Tokens
Builder
Builder
Canvas
Layers
Switch page
Left-side panel
Editor mode
Keyboard shortcuts
Breakpoints
Preview
Publish
Elements
Elements
Structure
Content
Actions
Media
Tables
Lists
Layouts
Slider
Forms
Form structure
Data form
Filter form
Advanced form
Authentication form
HTML
HTML
Import
Export
Embed
Design
Layer styles
Components
States
Layout
Sizing
Spacing
Typography
Backgrounds
Borders
Position
Effects
Color controls
Animations
Intro to Animations
Trigger
Properties
Page settings
General settings
SEO settings
Social share
Page folders
Workflows
Intro to workflows
ID
Types
When
Events
Data
Interactive
Other
CMS
CMS Collections
Import data
Dynamic elements
CMS pages
Display settings
Filter and search
Collection sorting
Dynamic sorting dropdown options
Pagination
CSV Export
Settings
Integrations
Zapier
Airtable
Custom code
Custom code
Related articles
Slider
Layouts
Lists
Tables
Media
Actions
Content
Structure
Elements
Documentation Elements

Structure

If there was a blank piece of paper in front of you and you had to draw a quick mock-up of a website homepage structure, what would you draw?

Many of us will draw different blocks underneath each other, to show where the header part, about part, testimonials, etc. will be placed. That’s exactly how coding works!

Good, consistent websites follow this structure:

  • A main body element

  • Then different sections to add structure

  • Then containers to organize content

  • Content elements

To help you structure your content in the best possible way we have a few elements to help you do so, these are:

  • Section

  • Container

  • Block

  • Separator element

Section

Section elements span across the full width of the body and by default, don’t have any padding inside. 

If you want to add an image that doesn’t take up the entire width, you would first add a container within the section, and then add the image element.

Container

Where sections take up the full width of a page, containers have spacing on each side. This makes them perfect to hold content elements.

Each element that is added inside a container will not touch the browser screen but has room to breathe.

Containers are div blocks, the only difference is that containers are already styled with preset properties (to save you time). The size automatically decreases as the screen gets smaller, so your content will always display nicely on tablets and mobile.

Block

Blocks or div blocks (div like division) are containers—but without the styling.

A div block is a simple element that has no default styling. Therefore, you can turn it into whatever you need it to be, you can even put another div block inside a div. 

Most commonly, they’re used to hold elements together.

Tip: Sometimes empty div blocks are used as dividers to create space between elements. Though this works, we recommend using padding/margin or the separator element rather than adding div blocks. You’ll achieve the same results and your Layer sidebar (and code) will be much neater.

Separator

The separator element is as the name indicates a divider between elements, it’s a simple horizontal line that helps you structure your website and split elements up!

Browse by category

Dashboard
Project settings
Builder
Elements
Forms
Design
Animations
Page settings
Workflows
CMS
Settings
Integrations
Custom code
Ycode logotype

Visual development platform for designers and agencies.

Features Design CMS Forms SEO Animations Localization
Product Updates Pricing Templates Integrations Roadmap Developer API
Company About us Services Blog Contact Brand resources
Learn Help Center Academy Community Customer stories
Partner Experts Partner program Become a Ycode expert
Compare Ycode vs. Webflow Ycode vs. Framer Ycode vs. Squarespace
Let’s keep in touch

Join our monthly email with no-code insights and Ycode updates.

Done!

Thank you for subscribing.


2019 - 2025 © Ycode. All rights reserved.
Terms & Policies Cookies settings