Sections are foundational components in the Vev Design Editor, essential for effectively structuring your project. By default, sections occupy the entire width of the canvas and have a minimum height of 900 pixels, though their height can be fully adjusted.
Adding a Basic Section
Select the Tool: Choose the Section icon from the top bar navigation, or use the keyboard shortcut [K].
Placement Preview: With the section tool selected, hover your mouse over the top or bottom edge of an existing section. If your canvas is empty, hover the mouse near the top edge. A highlighted blue box will appear, signaling the exact position where the new section will be placed.
Click to Place: Simply click to place the basic section in the highlighted area.
Adding Other Types of Sections
Vev offers a variety of specialized components that can function as sections.
Access the Add Menu: Navigate to the Add menu icon in the left-hand-side content panel.
Locate Components: Under the Elements category, you can see all available Vev components. You can browse them under different subcategories or view a preview of what each component does by clicking the information tooltip (i).
Search and Filter: Use the search bar at the top of this menu to find specific components, or click the filter icon beside the search bar to show only types of sections.
Placement for Component Sections: Some components can work as either a section or an element.
As an Element: Click-and-drag the component onto the canvas to add it as a standalone element.
As a Section: Hover at the top or bottom of existing sections to get the same placement preview (the blue box) as when adding a basic section, then click to place.
Styling a Section
To modify the appearance of a section, select the desired section and navigate to the Style panel on the right-hand side. This is where you will find styling options relevant to the selected section.
In the Style panel, you can control the section's background using various techniques:
Background: Add a color fill, a gradient, or a background image.
Border: Customize the color, opacity, and line weight of the border.
Effects: Apply special effects like shadows or blur.
Opacity: Adjust the transparency of the section.
Additinally it is possible to create multiple layers by combining these background techniques.
Spacing
To maintain consistent spacing between sections, you can add padding to the top or bottom of a section.
You can achieve this by:
Editing fields: Manually edit the spacing fields in the right-side panel.
Canvas drag: Hold the Shift key and drag the spacing handle on the canvas to adjust padding.
Accessing Properties Settings
For certain types of sections, such as video components, you will need to open a dedicated Properties panel for content-specific settings.
Double-Click: Double-click the section itself.
Right-Click: Alternatively, right-click the section and select Edit content.
Sizing
Sizing: Sections are designed to always fill 100% of the canvas width. You can adjust the height settings to fit your needs:
Minimum Height (Min H): This defines the smallest height a section can have. The default section height (H) is set to 'auto,' meaning the section will automatically increase in height if the content within it is taller than the minimum height.
Adjusting Height: To adjust the minimum height, hover your cursor at the bottom of the section and drag the blue indicator to resize it. You can also edit the Min H field in the right-side style panel.
Section Height (Minimum Height)
A section's height is primarily controlled by the Minimum Height (Min H) property found in the Style panel.
CSS Property: Min H is a CSS property that ensures the section will not shrink below the defined height value, even if the content inside is smaller.
Content-Based Resizing: Minimum height allows the section's height to automatically increase to properly accommodate any content that exceeds the set minimum height, ensuring all elements are contained.
Manual Adjustment: While the section cannot be smaller than its content, you can easily use Min H as a regular height by manually adjusting it to your desired size.
Section Spacing (Padding) and Clipping
You can control internal spacing and overflow behavior from the Layout area within the Style panel when any section is selected.
Section Spacing (Padding): To ensure consistent internal spacing, you can define an exact amount of padding at the top and bottom of the section.
Units: You can define a value using units such as pixels (px), percentage (%) , viewport width (vw) or viewport height (vh).
Consistency: This padding ensures consistency across all your sections and is taken into consideration even if your section's minimum height is exceeded by its content.
Content Clipping: You can also control content clipping from this menu. Underneath the spacing options, you will find a dropdown for Clipping, which allows you to hide content that extends beyond the section's borders. You can even clip the contents of your section in a variety of different shapes.
Fixed Background
When a background image is used for a section, the default behavior is that the background scrolls normally with the page content.
Enable Fixed Background: If you want the background image to remain fixed in place as the user scrolls, select the section and navigate to the Scroll option within the Style panel.
Select Option: Simply click the dropdown and select Fix background.
Aspect ratio
Functionality: Enabling the aspect ratio locks a specific width-to-height ratio for the section. Since the width always fills 100% of the screen, the section's height will automatically adjust to maintain the set ratio.
How to Enable: Click the aspect ratio button on the section. The Height (H) field will become active, and the Min H field will be disabled. In the Height field, you can set the desired ratio.
Tip: Right-click the aspect ratio button to choose from a list of popular, pre-set aspect ratios.
Adding a Section to the Canvas
You can add sections in two primary ways: by using the basic section tool or by selecting specialized sections from the Add menu.
Adding a Basic Section
Select the Tool: Choose the Section icon from the top bar navigation, or use the keyboard shortcut [K].
Placement Preview: With the section tool selected, hover your mouse over the top or bottom edge of an existing section. If your canvas is empty, hover the mouse near the top edge. A highlighted blue box will appear, signaling the exact position where the new section will be placed.
Click to Place: Simply click to place the basic section in the highlighted area.
Adding Other Types of Sections
Vev offers a variety of specialized components that can function as sections.
Access the Add Menu: Navigate to the Add menu icon in the left-hand-side content panel.
Locate Components: Under the Elements category, you can see all available Vev components. You can browse them under different subcategories or view a preview of what each component does by clicking the information tooltip (i).
Search and Filter: Use the search bar at the top of this menu to find specific components, or click the filter icon beside the search bar to show only types of sections.
Placement for Component Sections: Some components can work as either a section or an element.
As an Element: Click-and-drag the component onto the canvas to add it as a standalone element.
As a Section: Hover at the top or bottom of existing sections to get the same placement preview (the blue box) as when adding a basic section, then click to place.
Styling a Section
To modify the appearance of a section, select the desired section and navigate to the Style panel on the right-hand side. This is where you will find styling options relevant to the selected section.
Background Styling
In the Style panel, you can control the section's background using various techniques:
A single fill color.
A gradient effect.
A background image.
You can even create multiple layers by combining these background techniques.
Accessing Properties Settings
For certain types of sections, such as video components, you will need to open a dedicated Properties panel for content-specific settings.
Double-Click: Double-click the section itself.
Right-Click: Alternatively, right-click the section and select Edit content.
Section Height (Minimum Height)
A section's height is primarily controlled by the Minimum Height (Min H) property found in the Style panel.
CSS Property: Min H is a CSS property that ensures the section will not shrink below the defined height value, even if the content inside is smaller.
Content-Based Resizing: Minimum height allows the section's height to automatically increase to properly accommodate any content that exceeds the set minimum height, ensuring all elements are contained.
Manual Adjustment: While the section cannot be smaller than its content, you can easily use Min H as a regular height by manually adjusting it to your desired size.
Section Spacing (Padding) and Clipping
You can control internal spacing and overflow behavior from the Layout area within the Style panel when any section is selected.
Section Spacing (Padding): To ensure consistent internal spacing, you can define an exact amount of padding at the top and bottom of the section.
Units: You can define a value using units such as pixels ($\text{px}$), percentage ($\%$), viewport width ($\text{vw}$), or viewport height ($\text{vh}$).
Consistency: This padding ensures consistency across all your sections and is taken into consideration even if your section's minimum height is exceeded by its content.
Content Clipping: You can also control content clipping from this menu. Underneath the spacing options, you will find a dropdown for Clipping, which allows you to hide content that extends beyond the section's borders. You can even clip the contents of your section in a variety of different shapes.
Fixed Background
When a background image is used for a section, the default behavior is that the background scrolls normally with the page content.
Enable Fixed Background: If you want the background image to remain fixed in place as the user scrolls, select the section and navigate to the Scroll option within the Style panel.
Select Option: Simply click the dropdown and select Fix background.