1LD Tutorials & Blogs

Split

General

Radius

The corner roundness of the entire stack

Max Width

The maximum width of the entire stack

Mobile Points

The points at which the tablet, and mobile settings are applied

Responsive Point

The point at which the split panels become vertical for mobile devices

Split Items

Auto Shrink Width (Checkbox)

It is possible to set custom shrink widths for the non-active split item, although, if you want the width to be calculated automatically, check this option.

Shrink Widths (Desktop, Tablet, Mobile)

If Auto Shrink Width is off you will be able to set the width of the nonactive split panel when it is shrunk.

Min Height (Desktop, Tablet, Mobile)

Here you can set a minimum height for the split panels on Desktop, Tablet, and Mobile

Padding

The inner padding of the split item panels

Content Width

The maximum width of the inner content container

Titles (Desktop, Tablet, Mobile)

Here you can set the font size of the split item titles

Title Spacing

The amount of space below the titles

Title Font

Select a font for the titles

Descriptions (Desktop, Tablet, Mobile)

Here you can set the font size of the split item descriptions

Description Spacing

The amount of space below the Descriptions

Description Font

Select a font for the descriptions

Icons (Desktop, Tablet, Mobile)

Here you can set the size of the icons

Icon BGs (Desktop, Tablet, Mobile)

The size of the background surrounding the icons

Icon Radius (Desktop, Tablet, Mobile)

The corner roundness of the icon backgrounds

Icon Spacing

The amount of space below the icon backgrounds

Button Text

The font size of the button text

Button Radius

The corner roundness of the split item buttons

Button Padding

The inner padding of the split item buttons

Button Font

Select a font for the split item buttons

Advanced

Disclude Google Fonts

If you do not want to include external google fonts on your web pages, feel free to check this option. Be aware that you will not be able to use any of the fonts provided in the font list or material icons, you will have to use your own.

Individual Item Options

Here you can find all of the settings for each split section such as the icons and text, along with the link for the split item button

Text Align

The text alignment of the particular split item

Vertical Align

The vertical alignment of the content inside of the split item

Horizontal Align

The horizontal alignment of the content inside of the split item

Colors

This is where you will find all of the color options, including the background settings for the split item. The colors are very straight-forward and easy to setup.

Blog

Vivid Titles

Posted On 20 Oct 2023

Create stunning, uniquely-shaped content effortlessly with Vivid Tiles. Tailor your website’s appearance with customizable top and bottom edges, and arrange these elements seamlessly in rows.

Robust Customization

Create rows of uniquely-shaped content elements.
Customize each one independently.
Add almost any type of content.

Diverse Edge Options

Edges support 9 shape options with 4 layouts.
Mix and match edge shapes and layouts on top and bottom.
Incorporate images, icons, or text inside edge design.

Effortless Setup

Minimal setup required for immediate results.
Customizable style options to fit any website design.
Control element size and colors with ease.

Simply Responsive

Tiles automatically adapt to browser and device width.
Full control over tile horizontal and vertical alignment.
Automatically make all tiles in a single row the same height.

Eye-Catching Styles

Each edge shape has two unique background layers.
Adjust edge layer visibility, placement, and offset.
Apply subtle, attention-grabbing in-view animations.

CHECK IT OUT!

Tutorials