Tutorials stack icon

Section

A killer FREE stack for creating full width content sections with titles & descriptions - by Weavium

Table of Contents

  • How to use
  • General
  • Section Title
  • Section Description


Introduction

Here you can learn how to use the Section stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Section is a really simple stack to use. All you need to do is drag the stack onto the page, update the background and padding of the section, and then customize your header & description with the available settings. Lastly, just add your content into the section!


General

Padding

These 4 inputs allow you to set the Top, Bottom, Left, and Right padding of the section.

Background

There are 4 background options for the section stack:

  • None
  • Single Color
  • Gradient
  • Image

Simply select the type of background that you would like for your section, and then set the color(s), and other options that pertain to your background type.


Section Title

Here you can edit the main title of the section.

Color

Simply controls the text color of the title

Size

This option sets the text size for the main title. You can set different sizes for Desktop, Tablet, and Mobile.

NOTE, the breakpoints are set to 760px for Tablet, and 480 for Mobile

Space Below

This controls the amount of space between the Title and Desription. You can also set individual spaces for Desktop, Tablet, and Mobile.

Max Width

This option allows you to set a maximum width for the title container. This is useful when you want to have a title that is centered but wraps at a specific width that you choose.

Font

You will see that there are a list of fonts that can be used by default with the section stack.

You can also use a custom font from the web. Simply select Custom from the list, and you will see 2 new inputs appear, Font URL and Font Name.

Add a URL for the font you would like to use, and then add in the proper name for your font. Note, no quotations or anything necessary, just the name will do.

Font Weight

This dropdown allows you to specify whether or not the title should be bold or not. Select "normal" if you do not want the title to be bold.

Text Alignment

Here you can choose the text alignment for the title text. Select between Left, Right, or Center


Section Description

Here you can edit the description (below the title) of the section.

Color

Simply controls the text color of the description

Size

This option sets the text size for the description. You can set different sizes for Desktop, Tablet, and Mobile.

NOTE, the breakpoints are set to 760px for Tablet, and 480 for Mobile

Space Below

This controls the amount of space between the description and section content. You can also set individual spaces for Desktop, Tablet, and Mobile.

Max Width

This option allows you to set a maximum width for the description container. This is useful when you want to have a description that is centered but wraps at a specific width that you choose.

Font

You will see that there are a list of fonts that can be used by default with the section stack.

You can also use a custom font from the web. Simply select Custom from the list, and you will see 2 new inputs appear, Font URL and Font Name.

Add a URL for the font you would like to use, and then add in the proper name for your font. Note, no quotations or anything necessary, just the name will do.

Text Alignment

Here you can choose the text alignment for the description text. Select between Left, Right, or Center

Section Changelog

Version 1.0.0

  • Ability to add titles
  • Ability to add descriptions
  • Ability to set title & description sizes for Desktop, Tablet, and Mobile
  • Custom fonts for titles and & descriptions

Version 1.0.1

  • Fixed incorrect settings title for background (Menu -> General)
  • Added ability to set individual text alignments for titles & descriptions
  • Updated tutorial!

Version 1.0.2

  • Added ability to hide titles or descriptions respectively with a checkbox