Tutorials stack icon

Section X

Amazing multi-slide sections with sliding navigation by Weavium

Table of Contents

  • How to use
  • Section
  • Nav
  • Colors & Fonts


Introduction

Excited to start using SX (Section X)?!

It's modern and unique! _-

Here you can learn how to use the Section X 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

SX (Section X) is easy to set up!

Simply add the stack to your site, and then add Slides using the (+) button. All of the main styles such as sizing and layout can be found in the main stack.

By default all Slide Item colors are inherited by the main stack.

If you want a particular Slide to override the default colors simply check one of the "Custom (Style)" toggles in the settings panel of that particular slide!

You can also edit icons and text by clicking on individual Slides.

Lastly, add content to your slides!

Enjoy! : )


Section

Min Height (Desktop, Tablt, and Mobile)

Here you can set a minimum height for the Section X Slides on Desktop, Tablet, and Mobile.

Padding (Vertical & Horizonta)

Here you can specify the vertican and horizotnal padding for the inner slide content.

Radius

Here you can set a corner radius for the entire stack itself.

Maximum Width

This is the maximum width of the entire Section X Stack.

Content Width

This is the maximum width of the content area inside of each slide.


Nav

Here you will find the majority of options for the Section X Navigation.

Columns (Desktop, Tablet, and Mobile)

Here you can specify the number of columns to be displayed on desktop, tablet and mobile, keep in mind that Section X, automatically shows half a column extra to indicate more pages~

Gutter (Desktop, Tablet, and Mobile)

The amount of space inbetween nav items

Item Height (Desktop, Tablet, and Mobile)

Here you can set the height of the navigation items on Desktop, Tablet, and Mobile

Item Radius (Desktop, Tablet, and Mobile)

Here you can set the corner roundness of the navigation items on Desktop, Tablet, and Mobile

Inactive Opacity

By default, only the active item is fully opaque, and all other items are slightly transparent.

Here you can set the opacity of the inactive items.

Item Icons (Desktop, Tablet, and Mobile)

Sets the size of nav item icons on Desktop, Tablet, and Mobile

Title Titles

Sets the size of nav item titles on Desktop, Tablet, and Mobile

Title Spacing

Sets amount of space between navigation items and the titles

Arrow Size

Here you can set the width and height of the navigation arrows. Note that the nav arrows stretch full-width on mobile devices.

Arrow Icon

Here you can set the size of the nav arrow icons

Arrow Radius

Here you can set the corner roundness of the navigation arrows.

Arrow Spacing

Here you can set the amount of space between the navigation arrows.


Colors & Fonts

Here you can edit the colors & fonts for the entire stack

Fonts

Here you can set the fonts for the Titles and Content.

Simply select the font that you want to use from the list, or select custom and provide the name of a Google Web font that you would like to use.

You can find Google Web fonts here: www.fonts.google.com

Titles

Sets the text color of all nav item titles.

Icons

Sets the color of the nav item icons.

Content (Headers, Links, Text)

Here you can set the color of text that appears in the content sections. You can set a separate color of Headers, Links, and text.

Nav Item Background (Color, Gradient, Image)

Here you can set a background for the nav items. You can set it to:

  • Single Color
  • 2 Color Gradient
  • Background Image (Width Gradient overlay)

MainBackground (Color, Gradient, Image)

Here you can set a background for sections. You can set it to:

  • Single Color
  • 2 Color Gradient
  • Background Image (Width Gradient overlay)

Setting Custom Individual Colors

If you want to set custom colors for a particular Section X Slide, click on the individual slide that you want to customize and check one of the the "Custom (Style)" checkboxes. Then you can set custom color for that particular slide. : )

Section X Changelog

Version 1.0.2

  • Fixed bug causing the add button in RapidWeaver not to work
  • Fixed bug causing arrows to not show up properly according to slide number on mobile devices

Version 1.0.1

  • Added inputs for customizing responsive breakpoints
  • Made adjustments to nav layout and styling when positioned on top