Customising Components for Mobile

The Chinese online market is unique. About 95% of internet users access the web via mobile devices. For that reason, it is vital to optimise your site for phones and other mobile devices.

One optimisation strategy is to use columns to display content in vertical stacks. Content in stacked columns displays well on mobile devices and is easy for users to swipe.

This article uses images to demonstrate the principle of content in stacked columns. Other content, such as text, headings, and video can be used, too.

Understanding the tools

In this demonstration, we place images inside a column instead of a slider or carousel. Images in a column load quickly, display in a vertical stack and are swiped as users scroll down the screen. Sliders and carousels take time to load and rotate from left to right.

The tools you need for this mobile-friendly design approach are:

• Column Components
• Cloning (on the toolbar)

Best Practices

Occasionally, you might encounter display problems with images, video content, sliders, or carousels on mobile devices. If those problems occur, review these best practices for possible solutions:

• Adjust Spacing Best Practices
• Embed Video Best Practices
• Image Alignment on Sliders and Carousels Best Practices

1 Placing a Column Component

1. Click WEBSITE on the top menu bar. 
2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
3. Hover your mouse pointer on a page.
4. Click the Edit button. The Edit Content area opens.
5. Drag a Column Component to the page. The Columns Picker panel opens.
6. Choose the number of columns to insert. To display large images, choose 2 columns.
7. Click OK. Now you have one row with 2 empty column cells.

For more information about the Column Component, see:

• Adding Columns

2  Changing component visibility

The next step is to set the Column Component to display only on mobile devices. 

1. Hover the mouse pointer on the Column Component.
2. Click the Settings button in the top left corner. The Settings panel opens.
3. Scroll down the panel and then click the Advanced tab.
4. Scroll down to Component Visibility.
5. Click the mobile-only button.
6. Click OK.

3  Cloning a Column Component

In this demonstration, 4 images are used to show stacked content, so we need 4 cells. To create more space, clone the Column Component. 

1. Hover the mouse pointer on the Column Component. The green toolbar displays.
2. Click the Clone button in the top right corner. A copy of the column is inserted below the first column.

4  Inserting Image Components

1. Drag an Image Component into each column compartment.
2. Drag, upload, or insert an image into each Image Component.

The result is four pieces of content inside 2 Column Components that are set for mobile-only display. These images are visible inside the Edit Content area of the page. When published, they are not visible on desktop computers.

For more information about images, see:

• Adding Images 

5  Previewing mobile display

Check your work.

1. Go to the Edit Content area of the page.
2. Scroll up to the top of the page and then click the Preview button. A new tab opens.
3. In the Preview Display Options panel, click the Phone button. The images are stacked for a vertical display and ready for scrolling.