Using Drag and Drop Components in the WeChat Editor

This article shows you how to find and use drag and drop components in the Sinorbis WeChat editor.

Drag and drop components are important content creation tools. They place content inside a rich post or WeChat article, add format details, and configure overall appearance. Use components to build rich posts or WeChat articles from scratch or modify a template.

There are 10 groups of components:

• titles
• text
• images
• cards
• buttons
• video
• QR codes
• dividers
• spacer
• My Components

Other tools

There are 3 other tools you need to learn when creating rich posts or WeChat articles.

See also:

• Using the Component Properties Panel
• Using Component Toolbars
• Using the Page Properties Panel

 

---

 

1  Creating a post

The first step is to create a post. A post has two parts: file information (e.g. post cover, author name, summary) and content page (i.e. the place where you assemble content with components).

1. On the Dashboard page, click WECHAT in the top-level menu. The WeChat Content page displays.
2. On the left side menu, click CONTENT. The folder opens.
3. Click Create. A popup box displays.
4. Type a unique name in the box. This is the file name of your rich post or WeChat article.
5. Click Save. The Edit Content page displays.
6. Hover the mouse pointer on the grey box and then click Edit. The Edit Post Content page displays.
7. Fill in the required information.
8. Scroll down to the bottom of the page and then click Edit Post Content.
9. In the prompt, select Blank Template, Use Template, or Import.
10. The editing WeChat editor workspace opens in the window.

For more information about templates or importing files, see:

• Creating a Rich Post or WeChat Article 

 

 

 

2  Locating the components 

You can access all 10 component groups from the Components menu. The Components menu is in the top left corner of the screen.

1. Click the top tab. The menu drops down.
2. Select a component. The list of component options displays on the left side of the screen.

 

 

 

3  Previewing your work

There are 2 ways to preview a rich post or WeChat article.

Option 1

Use this option while working inside the WeChat editor workspace.

1. Scroll up to the top of the workspace. Locate two blue buttons on the top menu bar.
2. Click the narrow button to activate mobile preview.
3. Click the wide button to activate desktop monitor preview.

 

 

Option 2

Use the second option to preview your content outside directly. This option is suitable if you have a complete draft of your work and are ready to make final edits.

For more information, see:

• Previewing a Rich Post or WeChat Article

 

 

4  Saving your work

It's not possible to save your work inside the WeChat editor workspace. You have to take one extra step.

1. Inside the WeChat editor workspace, scroll up to the top of the screen.
2. Click the green Done button. The Edit Post Content page displays.
3. Scroll to the top of the page and then click Save. 

 

 

5  Working with components

Each component group is described below.  

 

Titles

Titles are headers, dividers, and text elements that add information and layout style to a post or article. There are more than 30 options to choose from.

 

 

 

Text

Drop a text component into your post or article to add a long or short passage. There are more than 30 options, each with a different design and layout style. There are lorem ipsum components to add dummy text when you are in the early design stage and need a placeholder.

 

 

 

 

Images

You can add an image, or a group of images, to a post or article. Some image components have pre-configured templates which allow you to quickly insert 2 or more images.  

 

 

Cards

Cards are stylish templates that add a bit of pizzazz to your post or article. Card components often include a text element along with a logo and QR code, an important design element that helps build brand awareness and engage your followers.

 

 

 

 

Buttons

There are two button designs. Both are rectangular. One has sharp corners and the other has rounded corners. You can add text, but you cannot add a link to buttons inside a rich post or article.

 

 

 

Video

You can place a video inside a post or article, with restrictions. There are three video components, each offering a slightly different design.

To learn how to link to video content, see the video section in:

• Using the Component Properties Panel

 

 

 

 

QR Codes

You can place a QR code on a post or article. That includes the QR code you get when you open a WeChat account and custom codes you create and save on the Assets page.

 

 

 

 

Dividers

Dividers are style elements that improve the appearance of a post or article. They also increase readability by adding white space between elements.

 

 

 

 

 

Spacer

A spacer is a blank area that separate elements. White space can improve overall appearance and readability. The spacer component has diagonal lines, but it appears as a blank space inside a rich post or WeChat article.

 

 

 

My Components

This folder holds saved components elements. To save a component to the My Components folder:

1. Locate the rich post of WeChat article component you want to add to My Components.
2. Hover the mouse pointer on the component. The toolbar displays.
3. Click the Save button. 
4. To view the saved component, go to the Components menu and select My Components.