2.1.23. Tips and tricks for CC components

Owned by Karol Schönsee
Last updated: Mar 10, 2022
2 min read

MageSuite allow to use Content Constructor components in CMS Blocks. This gives editor power of pre-configure bunch of Content Constructor  components.

 

“I’d like to use the same Image Teaser multiple times on 10 different CMS pages”

To avoid configuring the https://creativestyle.atlassian.net/wiki/spaces/MGS/pages/1992556547 component 10 times, the editor can simply create CMS Block, configure the Image Teaser once, and then re-use it on multiple CMS Pages by choosing 2.1.4. Static Block component from CC component’s list and pick created block from the list of available ones.

 

“I have a Hero component which is 1000x400px and it looks good on desktops but it’s too small for smartphones”

In this case, editor should avoid showing this hero to mobile users. Instead, he should prepare another version of the image, for instance 500x700 and create another hero component above/below the one for desktop users. Then being on the draft preview, editor can toggle Component Visibility for both them: uncheck “mobile” for the desktop hero and “tablet and desktop” for the one created for mobile devices. This way, desktop hero will only be displayed on the storefront only for screen resolutions wider than 767px and mobile hero will displayed only on screens not wider than 767px.

 

 

 

 

“I’m preparing CMS page for a promotion. I want to have it ready and just deploy it when it’s time, but I don’t want to show it yet to the users.”

In this case editor can create CMS Page and configure it to be ready for the promotion launch but not make it public yet. In order to do this, editor should keep CMS Page disabled and user preview button placed in the action’s bar of the CMS Page. During content build editor can preview page anytime without a need to publish it.

 

 

 

 

“I’m working on the page that is already published. I want to prepare a hero component but I don’t want to show it yet until it’s time”

In this case editor can prepare hero component and leave it hidden. Just like in our second use case with unchecking “mobile” or “tablet & desktop” visibility. This time however, editor can unchek both of them and save the page. This component will become then greyed-out on the draft preview. Don’t worry, it will not be just hidden on the storefront, it will not render at all until at least one of visibility checkboxes is checked. When it’s time to display it on your page, just enable it for devices it should show up and saave the page.