Skip to main content

Design Principles

Understanding Layouts and Styles in Vsble

Updated over a week ago

Understanding Layouts and Styles in Vsble

There are two types of layouts in Vsble: Style Layouts and Regular Layouts.

  • Style Layouts are unique designs that come built-in with each template. They give your website its distinct look and feel. These designs are fixed and can't be changed—but that's what makes each template special.

  • Regular Layouts are more flexible. They work across all templates and let you customize how your content is displayed.
    For example:
    – On regular pages, you can set how many rows or items appear in a grid.
    – On album pages, you can choose between horizontal scroll, vertical scroll, or a grid layout—with control over how many columns you want.

You can decide whether to use a Style Layout or a Regular Layout for each page individually. That means one page can use the fixed design from your template, while another page can use a fully customizable regular layout.

Mobile vs. Desktop:

You can set different layouts for mobile and desktop—so your site always looks its best, no matter where it’s viewed.

Note on Albums:

The album layout you choose (horizontal, vertical, or grid) will apply to all albums on a single page. This keeps things clean and avoids confusion for your visitors.

Desktop Options

On desktop, pages can be set to either a style layout (unique to each template) or a regular grid layout with 1 to 6 rows. Albums can also be displayed in style mode or use a regular layout with a choice between horizontal scroll, vertical scroll, or grid mode (also with 1 to 6 rows). For more dynamic presentations, a slideshow can be enabled—either in fullscreen (where images or videos fill the entire screen) or in fit-to-size mode, which keeps the original aspect ratio.

You can customize the header layout as well: align it to the left, center, or right. When centered, you can choose to place the navigation menu on the left or right. For a cleaner look or to save space (especially with many pages), you can switch to a burger menu instead of showing written page names. The burger icon can be placed on the left, right, or center—and if your logo is centered, you can choose whether the burger appears on the left or right side of it. The burger menu (the panel that opens when clicking the icon) can also be positioned to slide in from the left, center, or right.

Lastly, the footer can be aligned to the left, center, or right, giving you full control over the overall layout of your desktop site.

Mobile Options

The same layout options are available for mobile, and they can be set independently from the desktop version. However, grid layouts on mobile are limited to a maximum of 4 rows, to ensure images remain large enough to view and tap easily. Also, due to limited screen space, album descriptions in horizontal and vertical scroll layouts are not shown on the side—as they are on desktop—but are instead displayed above the image scroll for better readability and usability.

Did this answer your question?