Sections

Overview

Sections are predefined horizontal page "slices" that can be inserted in the page.

To add a section you need to use Vvveb.Sections.add method, the first parameter is the unique section name.

The second parameter is an object with the following keys

• name
• image
• html

Example:

Vvveb.Sections.add("bootstrap5/my-section", {
    name: "My custom section",
    image: "https://assets.startbootstrap.com/img/screenshots/snippets/sign-in-split.jpg", //screenshot
    html: `
<section data-name="sigin-split">    
<div class="container-fluid">
  <div class="row no-gutter">
	<h1>My section</h1>
  </div>  
</div>  
`,
});    

A good practice is to have the section html wrapped in a <section> tag, you can also use <header> or <footer>.

Based on this tag the editor will insert the section either at the end of the page for <section> or at the top for <header> and for <footer> after the existing <footer> if there is one already added in the page.

Section group

For a section to be visible in the left panel it needs to be added to a section group, you can do this by including it in the Vvveb.SectionsGroup array using the group name as a key.

For example Bootstrap section group has the following definition.

Vvveb.SectionsGroup['Bootstrap'] = [
  "bootstrap5/signin-split",  
  "bootstrap5/image-gallery", 
  "bootstrap5/video-header", 
  "bootstrap5/slider-header"
];

Automatic generation from html files

Because sections are mostly html code it's easier to maintain them as html files grouped in folders and generate the sections.js file to be included in VvvebJs when changing or adding new sections.

This approach is used in the bundled Landing theme where sections are grouped in folders https://github.com/givanz/landing/tree/main/src/sections

In the theme folder /demo/landing run the following commands to (re)generate sections.

Generate html files

npm run gulp

Watch for changes for development

npm run gulp watch

Generate sections list for VvvebJs page builder

npm run gulp sections

This will generate demo/landing/sections/sections.js file that is included in VvvebJs

Generate blocks list for VvvebJs editor

npm run gulp blocks

Generate screenshots for sections

npm run gulp screenshots