CMS: Displaying Collection Content in Text Elements

15 min read
With Wix's CMS (Content Management System), you can display your collection content in various text elements on your site. 

Connect basic text elements like themed text, titles, and paragraphs to your collection content for a seamless, professional look. Use collapsible text to present a lot of information without overwhelming visitors, ideal for blogs or FAQs. Create dynamic visuals with a text mask that displays a video within the text, making your content memorable. Use the text marquee to display scrolling text from your CMS collection for news updates or announcements. 
Want to combine formatted text with media, files, HTML code and more?

Connecting text elements to collection content

Add text elements such as themed text, titles, and paragraphs to your editor. Then connect the text element to a dataset that binds to the relevant collection field. 
Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Add a text element to your page:
    1. Click Add Elements  on the left side of the editor.
    2. Click Text
    3. Click the type of text you want to add: Themed Text, Titles, or Paragraphs 
    4. Click and drag your chosen text to add it to your page. 
Screenshot of adding a text element in the Wix Editor.
  1. Click the  Connect to CMS icon on the text element. 
  2. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create a New Dataset, then choose the collection you want to connect.
  3. Click the Text connects to drop-down and select the collection field you want to connect. 
Tips:
Screenshot of connecting text to a CMS collection field.
  1. (If necessary) Set additional options depending on which field type you connected: 
    • Date and time: Click the Choose a format drop-down and select the format for displaying the date and time.
    • URL: Choose how the link opens: In the current window or As a new window. 
Screenshot of setting the format for displaying a Date and Time CMS collection field.
  1. Click Preview to test your connections.
  2. Click Publish if you are ready to make the changes go live. 

Connecting collapsible text to collection content

Add a collapsible text element that can show only the 1st few lines of text until visitors click to expand the entire text. Make sure to customize the Change Text settings to set the 'Show More' button to expand before connecting to the CMS. Alternatively, you can set the 'Show More' button to link to a single static link that opens when visitors click the link. 
Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Add a collapsible text element to your page:
    1. Click Add Elements  on the left side of the editor.
    2. Click Text
    3. Click Collapsible Text.
    4. Click and drag a collapsible text element onto your page. 
Screenshot of adding a collapsible text element.
  1. Click Change Text and edit the collapsible text box settings: 
    • Change text: You do not need to edit this field since you will connect text from your CMS collection. 
    • What does the button do?: Choose what happens when visitors click the button:
      • Expand: (Recommended) The collapsible expands to reveal the entire text. Edit the following fields: 
        • Expand button text: Enter text that will appear on the expand button (e.g. "Read More").
        • Collapse button text: Enter text that will appear on the collapse button (e.g. "Read Less").
      • Link: A static link opens. Edit the following fields:
        Note: Currently, it is not possible to connect this link to a dataset or collection field. 
        • Link button text: Enter text that will appear on the link button (e.g. "Link to article"). 
        • Links to: Click Choose a link and choose a link destination for the button. 
    • SEO & accessibility: Enter an accessible name for the element and choose the HTML tag. Learn more about preparing your site structure
Screenshot of editing the settings of a collapsible text element.
  1. Click the  Connect to CMS icon on the collapsible text element. 
  2. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create a New Dataset, then choose the collection you want to connect.
  3. Click the Text connects to drop-down and select the collection field you want to connect. 
    Tip: You can connect collapsible text elements to the following types of collection fields: Text, Number, URL, Date and Time, Time, Rich Text, and Address.
Screenshot of connecting collapsible text to a collection field.
  1. Click the Layout icon  on the collapsible text and customize the layout.
  2. Click Preview to test your connections.
  3. Click Publish if you are ready to make the changes go live. 

Connecting a text mask to collection content

Add a text mask that displays a video within the text lettering. Connect your text mask to the CMS collection field you want to display. Then go to the Design panel to add your own video or choose a video by Wix.
Important:
Currently, it is not possible to attach text masks to repeaters
Wix Editor
Studio Editor
  1. Go to the relevant page in your editor.
  2. Add a text mask element to your page:
    1. Click Add Elements  on the left side of the editor.
    2. Click Text
    3. Click Text Mask.
    4. Click and drag a text mask onto your page. 
Screenshot of adding a Text Mask in the Wix Editor.
  1. Click the Connect to CMS icon on the text mask. 
  2. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create a New Dataset, then choose the collection you want to connect.
  3. Click the Text connects to drop-down and select the collection field you want to connect. 
    Tip: You can connect text masks to the following types of collection fields: Text, Number, URL, Date and Time, Time, and Address.
Screenshot of connecting a text mask to a CMS collection field.
  1. Click the Design icon  and customize the background fill, text format and shadow. Learn more about designing the text mask
Screenshot of changing the video used in a text mask.
  1. Click Preview to test your connections.
  2. Click Publish if you are ready to make the changes go live. 

Connecting a text marquee to collection content

Add a text marquee element that displays scrolling text from your CMS collection. 

To connect a text marquee to the CMS:

  1. Go to the relevant page in the Studio Editor.
  2. Add a text marquee element to your page:
    1. Click Add Elements  on the left side of the editor.
    2. Click Text.
    3. Click Text Marquee
    4. Click and drag your chosen text marquee to add it to your page. 
Screenshot of adding a Text Marquee in the Studio Editor.
  1. Click the Connect to CMS icon on the text marquee. 
  2. Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Create a New Dataset, then choose the collection you want to connect.
  3. Click the Text connects to drop-down and select the collection field you want to connect. 
    Tip: You can connect text marquees to the following types of collection fields: Text, Number, URL, Date and Time, Time, and Address.
Screenshot of connecting a Text Marquee to a CMS collection field.
  1. Click the Design icon  in the Inspector panel at the top right and customize the text formatting, separator and movement used by the marquee text. Learn more about designing the text marquee
  2. Click the Preview icon  at the top right to test your connections. 
  3. Click Publish if you are ready to make the changes go live.

Did this help?

|