Expand

Expand

Expand is a functionality which can be used to give use preview about what content is all about and if user engagement happens then on button click full content view can be displayed wide open.

Expand mostly helps with long content on single pages. It saves spaces if you have longer content and you can have more content and user engagement by using expand.

Pro tip
Use breadcrumbs in every page/product, you never know from where user landed to your that particular page.

How to use the Expand Block of The Plus Addons For Gutenberg

The Expand is an advanced block and needs to be set up properly. Let’s understand how to use this block in the tutorial below. 

Configuration for Expand

Suppose you have a long description of your client and his works. Start with his intro by putting in expand’s first paragraph and put other info in next paragraphs. Click on the read more button will display all the information and you can have his profile link as an extra button too.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Expand into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Expand after “/” sign, eg.“/Expand”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Title

Set title text for expanding blocks content here.

Content Source

We have provided two options for content sources for expansion. You can have custom-written content or else you can use reusable blocks provided by Gutenberg as content.

Content

Write your own custom content which is displayed for expansion here.

Templates

Choose a reusable block template to put as content from here.

Buttons

Expand Button Text

Text for a button that is going to expand the content to its full width.

Expand Button Icon (Icon Library)

You’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Collapse Button Text

Text for a button that is going to shrink the content to its preview width.

Collapse Button Icon (Icon Library)

You’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Extra Button

The selection of having an extra button or not is here. This will provide an extra link on expanding the content.

Extra Button Text

Text for a button that is going to appear as an extra button on expand.

Extra Button Link

A target URL on extra button’s click.

Extra Button Icon (Icon Library)

You’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Extra Options

Expand Direction

Select the direction for expanding the content on the button click.

Max Height

Set maximum height of preview / shrieked text from here.

Custom Opacity

Choose if you want to have custom opacity / transparency options or not.

Opacity Height

Set height of preview / shrieked text’s transparency from here.

Opacity Color

A color picker to assign suitable opacity color to the preview text.

Transition Duration

A timing in milliseconds to expand the whole content.

Toggle Alignment

Alignment of a button into left, center or right direction.

2. Style

The Style tab is used for customizing the appearance of all the Expand block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Margin

Put in some outer space to an element.

Alignment

Alignment of a title text into left, center, right or justified manner.

Typography

Assign a size, weight, spacing and much more to the title text.

Color

A color picker to assign a suitable color to the title text.

Description

Margin

Put in some outer space to the content.

Alignment

Alignment of a description into left, center, right or justified manner.

Typography

Assign a size, weight, spacing and much more to the description text.

Color

A color picker to assign a suitable color to the description text.

Toggle Button

Margin

Put in some outer space to an element.

Padding

Put in some inner space to an element.

Width

Give width to the button.

Typography

Assign a size, weight, spacing and much more to the button text.

Icon Position

Set icon position before/after the text from here.

Text Color

A color picker to assign a suitable color to the button text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Toggle Icon Size

Set icon size of toggle button from here.

Toggle Icon Offset

Set space between icon and text from here.

Toggle Icon Color

A color picker to assign a suitable color to the toggle button icon.

Toggle Icon Hover Color

A color picker to assign a suitable color to the toggle button icon on hover.

Extra Button

Margin

Put in some outer space to an element.

Typography

Assign a size, weight, spacing and much more to fonts.

Text Color

A color picker to assign a suitable color to the button text.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Icon Size

Set icon size of an extra button from here.

Icon Offset

Set space between icon and text from here.

Icon Color

A color picker to assign a suitable color to the extra button icon.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.