Editor X: Adding and Customizing Collapsible Text
4 min read
Editor X is transitioning to Wix Studio, our new platform for agencies and freelancers.Learn more about Wix Studio
Collapsible text is a great option if you have a lot of information that you want to display. Parts of the text are hidden, and visitors can view the full text by clicking an expand button, or a link to the full body of text.
In this article, learn how to:
Adding collapsible text
Depending on your needs, you can add different styles of collapsible text to your page. Some presets include a button that expands the text on the current page, others show a link that takes visitors to another page to read the full body of text.
To add collapsible text to your site:
- Click Add Elements
at the top of Editor X. - Click Text.
- Click Collapsible Text.
- Drag your chosen text box onto the page.
Adjusting the layout of the collapsible text
Choose how your visitors can read the full body of text. Add a button that opens the full text on the current page, or a link that directs your visitors to the full piece.
You can also set the alignment, spacing, and number of lines that appear before a visitor needs to click it.
To adjust the text's layout:
- Click the collapsible text box.
- Click the Layout icon
. - Customize the layout using the options:
- Choose how the text appears: Choose how the entire text is displayed:
- Collapsed: Visitors see a text preview, and they need to click a button or a link to read the full body of text.
- Show all: The entire text is displayed on your site, and is not collapsed.
- Number of lines displayed: Choose how many lines of text are displayed in the preview.
- Align button: Set the alignment of the expand or link button.
- Spacing between text and button: Increase or decrease the spacing.
- Choose how the text appears: Choose how the entire text is displayed:
Entering and editing the collapsible text
After adding a collapsible text box to your site, click Change Text to enter the full body of text (up to 120,000 characters). You can also edit the text of the button or link that takes your visitors to read more.
To enter or edit your text:
- Click the collapsible text box.
- Click Change Text.
- Type or paste your full text under Change Text.
- Set up the link or button leading to the full text:
- Expand / collapse buttons: Enter the text for the buttons visitors click to show or hide the full text.
- Link button: Enter what you want the link to say, and add the link type and details.
- (Optional) Select your text's HTML tag from the drop-down under SEO & Accessibility to define its text type (a heading, paragraph, etc).
Note:
The available options depend on whether you choose a button to expand the text or a link that takes visitors to another page with the full text. You can change this setting from the Layout panel.
Designing the collapsible text box
Design your collapsible text box to match your page's aesthetic. You can adjust the look of the box itself (e.g. its background color), format the text and customize the button / link leading to the full text.
To design the collapsible text box:
- Click the collapsible text box.
- Click the Inspector icon
at the top of Editor X. - Click the Design tab
. - Choose an option under What do you want to design?:
- Text: Design the box that contains the text (e.g. background color, borders, shadow), and adjust the text's font, size and more.
- Button: Design the link or button that visitors click to view the full text. You can adjust it to 3 different states – Regular, Hover and Disabled.
Did this help?
|