How to Design WeChat Articles (Part 3) – Xiumi


In this part we will dive into how to extend the functionality of the default editor that we talked about in Part 2. Every website and media platform has a structure and way of dealing with it. In this chapter we will introduce and how it looks from within.

This platform is currently only available in Chinese language. There is a possibility of using Google Translate. However, we do not recommend using translating programs. The reasons for it will be covered in the following chapters.

How to log in / sign up?

Let’s have a look at the website The first step on every platform is to sign up and log in. This is how the main page looks like.

Pay attention to the navigation bar on top of the website. Here, in the top right corner you will find the sign up/log in button.

Once you press the sign in/log in button, there will be a pop-up (see the picture below). From this point you have a choice which way to use for signing up/ logging in (Weibo, QQ, WeChat, or the mobile phone number).

Note, that no matter which way to sign up you have chosen, the website will ask you to provide your phone number and sign the user agreement.

Once you have successfully signed up/logged in, the user’s avatar and nickname will be displayed in the top right corner.

How much is it?

The free account is limited. In order to use all serves that the platform can provide, there are different ways of payment and choosing the most suitable subscription plan for you and your organization. To find out which tier you currently subscribed to, you should click on your profile and choose “Account Settings”.

Below you will find a screenshot of different Xiumi levels and their current cost.

There are four Xiumi levels in total. The difference between each of them, you may find below.

Additionally, for extra information and details on the Xiumi subscription levels you may follow the FAQ.

What can I do with Xiumi?

As it was mentioned before, Xiumi is a very powerful web. Additionally to the WeChat articles editor, it also offers a design of websites (H5), and other text and/or graphic designs.

To find out more, please scan the QR below.

How to open Xiumi Editor?

In order to open Xiumi Editor for WeChat articles, after successful sign up, choose “Create a new picture and text”.

If you prefer not to spend time on making your own templates, there is a large variety of pre-made templates to choose from.

If you decide to make your own template, you will see this page. Click on “Add new pictures and text”.

The editor will open automatically.

Xiumi Editor Interface

Let’s get to know the interface of the Xiumi Editor. It contains five main blocks (1 – Editing Panel, 2 – Tool Panel,

3 – Edit Field, 4 – Sidebar, 5 – Zoombar).

You can use google translate if needed (but not recommended due to a break of the interface

Editing Panel

Editing panel could be divided into 4 main part (1 – Navigation, 2 – Categories, 3 – Color widget, 4 – Templates)

Graphics and Text Templates

First item in Navigation is “Graphics and Text Templates”.

And its first category “Title” contains various templates that applies and used specifically for titles.

Titles are really important in article structure and the main reason is SEO (Search Engine Optimization).

“Card” is a collection of template that could be used to frame content

“Image” is a self-explanatory section that deals with images and their positions on the layout

“Layout” – the most important category that responsible for overall structure of the article

“SVG Animation” – the name of this category could be misleading due to its name. This collection of templates do not dealing only with vector images. It just has preexisted collections of animations and transitions

“Components” – elements that are unique in their functionalitye

“Popular themes” – gives you templates that reflects specific events, holidays and seasons

“Recommended Templates” – are most used templates

“Recently Used” – recently used templates in precious designs

“Samples” – allows you to upload your own templates but they need to be the right format

These templates could be personal or commercial that you can buy on the platform

And last two are “More Templates” and “Search”

Graphic collection

You can sort, categorize and save the templates as your own collection


You can temporary save some templates or elements and the will be displayed here

My Gallery

Collection of Images that could be uploaded and used

Also linked from other websites

Tool Panel

The most used part of the interface is Tool Panel


To learn more about it please scan a QR-code


Allows you to preview the article before copying and publishing (can not be empty)

In order to preview you can scan it with your phone ore share it straight to your WeChat account


Click to save your article

Copy to WeChat Official Account

The final stage in the whole process of designing WeChat Article in Xiumi is “Copy to WeChat OA”. Xiumi is only a third party design tool that allows to design more complex layouts. So it still need to be copied and paste to the Default Editor later on to be published

More Actions

Besides coping and pasting to OA, you can also convert and save your WeChat article

Edit Field

Article Setting

In this section you specify Hero image, Main title and Description of the article

Edit zone

Here you can drag and drop templates and content

The first blue button on the right toggle the layout (from fixed to edit state)

The second button is responsible for global setting of the content inside (font, background color)

Third one displays general info of the article (amount of the characters/words and Read time)

The last button shows the overall structure of the article


Sidebar has three button (Undo, Redo, Help, Contribution, and Settings)


Zoom in / Zoom out


Xiumi is a powerful editor tool that includes additional functionalities that might be used in order to design WeChat articles of any level of difficulty.

In the next chapter, we will discuss how to design WeChat article and how to publish it.

more Insights