top of page

How to use the Collapsible Text Feature in the Wix Editor: A Complete Guide

Updated: Jan 18, 2023

As a website designer, you want to make your pages as visually appealing as possible. But sometimes, too much information can clutter up your pages and make them difficult to navigate.


That's where the new collapsible text feature in the New Wix editor comes in. This easy-to-use feature lets you hide and reveal text with just a few clicks, which is perfect for creating cleaner and more organised pages.


How to add the collapsible text feature in the Wix editor
The new collapsible text feature in the Wix editor

One common challenge that people face when using the new collapsible text feature in Wix editor is knowing how to best take advantage of its capabilities. The new feature is packed full of customisable options that can be used to create a variety of looks for your page. But with so many options, it can be difficult to know where to start.


As someone who designs websites, you know that creating a visually appealing page is not always easy. You also know that dealing with too much information can clutter up your pages and make them difficult to navigate.


That's why we've put together this helpful guide. With our tips and examples, you'll be able to make the most out of the new collapsible text feature in the Wix editor and create pages that are both visually appealing and easy to navigate.


In this guide, we will cover:


What is the collapsible text feature in Wix editor and what are its benefits


The collapsible text feature in the Wix editor is an important tool for creating visually appealing pages that are also easy to navigate. By using this feature, you can hide and reveal text with just a few clicks, which makes it perfect for organising your information and creating cleaner pages. The collapsible text feature is packed full of customisable options, which means that you can create a variety of looks for your page.



NX Digital use collapsible text on this site design to make it simple and clean
An example of a site where NX Digital have used collapsible text to keep the design simple

Some of the benefits of using the collapsible text feature in the Wix editor include:


Reducing clutter on your pages


You need to reduce clutter on your pages so your visitors can focus on the most important elements. When there's too much happening on a page, it can be difficult to know where to look and what to focus on. By reducing clutter, you make it easier for the visitors to your Wix website to understand and interact with your page. Making it easier for visitors to find the information they need.


Creating a more visually appealing page


People are visual creatures, and as such, they are more likely to be drawn to pages that are visually appealing. When you create a Wix website, it is important to make sure that your pages look good so that visitors will be more likely to stay on your site longer and interact with your content. A well-designed page can also help you to convey your brand's message more effectively.


Gives you more flexibility in how you design your pages


By hiding and revealing text with just a few clicks, you can create pages that are both visually appealing and easy to navigate. This is perfect for those times when you want to reduce clutter on your page or make it easier for visitors to find the information they need.


How to use the collapsible text feature in the Wix editor


This easy-to-use feature lets you hide and reveal text with just a few clicks, which is perfect for creating cleaner and more organized pages.


If you are ready, let's jump straight into it and discover all of the new possibilities for your Wix website design.


How to add the collapsible text feature to your page


Adding the collapsible text feature to your page is easy, here's how:

a guide to adding the collapsible text element to your website in the Wix editor

  1. Select the 'Add' icon in the sidebar on the left-hand side to open up the 'Add to site' menu.

  2. Select 'Text'

  3. Then choose 'Paragraphs'

  4. Next, scroll down a little bit to find the 'collapsible text' section.

  5. Choose the style of collapsible text box you would like to use

Note: don't worry too much about the style of the text box, we will learn in the next few steps how to change everything so it fits in seamlessly with our site.

Now you have got the collapsible text box on the page in your Wix editor you can use the small dots on the size to adjust the width of the box.


Get the text box into the position you would like on your page, and adjust the width to fit the space. Don't worry about the height, you don't need to adjust this manually because the height of the box will change depending on the settings we choose in the next step.


Choosing the layout of your collapsible text box


Click on the collapsible text box you just added to your Wix editor. You will be presented with a few options of what you would like to do.


Select 'Layout' and the 'Collapsible Text Layout' editor will open up.


Changing the layout of the Wix collapsible text box


There are three options to choose from here:


chose the layout you want for the wix collapsible text box


Expand

The expand option shows the number of rows of text you would like to have displayed, followed by a 'Read More' button that opens up the rest of the text box.

This is ideal when you are trying to save space on your page, but you would like to have more content for visitors to read without leaving the page.


Click Link

The click-link option also shows a predefined number of rows of text, except this time, when your visitor clicks on the 'Show More' link, they are taken to another page or element.

The 'Click Link' layout is useful if you are promoting an article on a page full of content. You can use the first few lines in your collapsible text box and then redirect your visitors to a lightbox, alternative page or a different website altogether.


Show all text

This one is confusing us a little bit! If you choose the show all text setting then the text box just shows everything, effectively making the collapsible text box into just a regular text box.

If you need to use a regular text box, we would recommend you to just use a regular text box.

If you know anything else that this 'Show All Text' layout setting would be helpful for, then please let us know in the comments at the bottom of this page!


The remaining three settings in the collapsible text box layout all come down to your personal design choices. The number of lines displayed, the button alignment and spacing between the text and the button.


Additional layout settings in the Wix editor collapsible text boxes

Adding your text to the collapsible text editor


Now we need to add the text to the collapsible text box.


Adding text to the collapsible text box in the Wix Website editor

You can do this easily by selecting the 'Change Text' button, which will make the text box settings window open up.


Simply type in your text into the window, and it will automatically update in your collapsible text box.

Adding Text Tip: The text input window is quite small. If you have quite a lot of text to add to the collapsible text box, it's a better idea to write and edit the text in a word processor document, then copy/paste it into the 'change text' box.

SEO settings for the Wix collapsible text box

Once you have put all of your text in, you can change the 'Read More' link to say anything you like and you can change the HTML tag for the text. The text in the collapsible text box is SEO friendly and can be read as part of your page by Google crawlers and other search engines.


Most of the time you will want the setting to be on the <p> HTML tag, which means that the text is page content.


If the text in the collapsible text box forms part of your page headings then you will need to select the appropriate heading level from the HTML tag drop-down list.


If you are not sure about HTML tag heading levels, you can find out all about them and how to use headings for SEO in this article.


Customising the design of your collapsible text box


customising the design settings of the collapsible text box in Wix Editor

The final part of setting up your collapsible text box is to choose your design settings. You can access these by clicking on the design icon that pops up when you click on the text box.

You edit the text in the same way as you edit any text on your Wix website but don't forget, you can also edit the clickable 'Read More' link.


You should make the 'Read More' link stand out from the rest of the text, so it is noticeable and your visitors can easily identify that it is a clickable link. Bold text, italics, a larger font or a different colour are all good ways of making it stand out.


Wix has made it easy for you to add collapsible text to your website with their new Wix editor. This feature lets you hide and reveal text with just a few clicks, which is perfect for creating cleaner and more organized pages. We hope you have fun and enjoy using this new amazing feature!


We would love to see how you have used the feature on your site! drop links to your site in the comments below and show us your innovative ways of using the collapsible text feature.


NX Digital online tutorials for Wix Websites and Wix SEO

If you're looking for expert website design and SEO services, NX Digital can help you with everything from the basics of Wix website design to advanced SEO practices to help you rank higher in search engines and get more traffic to your site. We are pleased to offer one-to-one coaching sessions for Wix design and SEO. If you are determined to build a professional website yourself but need a little help along the way then contact us about our coaching services.




701 views0 comments

Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page