Things to consider when creating your own character for a WordPress website
- First, determine the tasks that will be assigned to the character within the site.
- The moment a website that only had names and posts started to look different.
- Initially, having one primary position and one supporting position is sufficient.
- A design that is recognizable even on a small screen will last a long time.
- The most common points where people get stuck when decorating themselves directly are:
- DecoBlocks allows for simultaneous adjustment of character design and content flow.
- Criteria for selecting cute images that do not detract from the content of the posts.
- So, where should we begin?
- Frequently Asked Questions.
- WordPress-related plugins
I want to add a character to my WordPress site, but should I start by drawing the picture? Once I actually start, I get stuck on things like whether to include it in the logo, place it between posts, or ensure it’s visible on smaller screens.
The answer is simple. First, determine the purpose of the website and the role of the character, and then test it in one primary location and one secondary location.
Beautiful pictures alone are not enough.
First, determine the tasks that will be assigned to the character within the site.
The characters on the website can perform three main functions: they can represent the website’s identity, like a logo; they can create an atmosphere around the main content and buttons; and they can serve as a recognizable element, even when displayed in a smaller size.
In WordPress, the site logo is the image that represents the website. The site icon is a separate image that helps users identify the website in browser tabs, bookmarks, and on mobile screens.
If you are using a block theme, you can check an area where you can manage the site title, tagline, logo, and site icon, depending on the shape and settings.
Therefore, the first question is not “Which character is the prettiest?” but rather, “What will this character communicate to the visitor?”
First, we must determine the roles.
The moment a website that only had names and posts started to look different.
Many people who have migrated from Naver or Tistory find that the WordPress screen, which only displays a list of posts and titles, makes them feel that “the site is open, but it doesn’t yet feel like my own home.”
The hand-drawn characters that appear repeatedly can be more than just decorations; they can serve as a sign that quickly conveys the site’s atmosphere and the operator’s impression, even before reading the content.
Small stores and media outlets are similar. Instead of just displaying the store’s name, when the same character appears on the introduction page and in the explanatory text, visitors can easily grasp the overall atmosphere of the site at a glance.
However, the characters do not improve search rankings or automatically increase the number of visitors. The role of the characters is more about recognition and identification than discovery.
Characters do not attract visitors.
Initially, having one primary position and one supporting position is sufficient.
Do not plaster characters all over the site from the beginning. Instead, determine the impression you want to create for the audience, and then place them in one prominent location and one secondary location.
For a personal blog, it is sufficient to place a character next to the profile on the introduction page and include only a small illustrative image in the main content. The priority is to avoid disrupting the reader’s flow while reading the posts.
For businesses or small media outlets, it is best to first determine the locations where the logo or site icon will be repeatedly displayed. Then, add explanatory pictures within the content as needed.
When used as a site icon, it must pass a more rigorous test. A square image is required, and the official WordPress documentation specifies a minimum size of 512×512 pixels.
If a wide, full-body character is simply scaled down, the face and distinctive features may disappear. For site icons, a simplified version is needed that only shows the face or silhouette.
The smaller it appears, the simpler it should be.
A design that is recognizable even on a small screen will last a long time.
A good character possesses a structure that can be used repeatedly, rather than relying on a single, impressive picture. The character should be recognizable even with smaller details like the face or outline, and a few facial expressions should be sufficient to support the context of the article.
Please also check that it does not fall apart against either light or dark backgrounds. Something that looked crisp in the logo can surprisingly easily become blurred when placed in the body text.
When adding images to the body text, you should distinguish between images that the character needs to explain and decorations that only add atmosphere. For an explanatory image, write the key information in the alternative text, while for a decorative image, it is best not to include unnecessary descriptions.
In the image block of WordPress, you can adjust the alignment, size, cropping, caption, link, and alternative text of the image. However, the actual appearance varies depending on the theme being used and the screen size.
Specifically, if you force an image to fit a fixed height, it may be awkwardly cropped when the screen changes. Unless there is a specific reason, it is safer not to fix the image height.
When placing large characters next to text, be careful about the layout. While they may look cute on a desktop, they can narrow the text and make it difficult to read on mobile devices.
Check it out first on your mobile device.
The most common points where people get stuck when decorating themselves directly are:
The process of drawing characters by hand and uploading them to WordPress requires more decisions than one might think. It is necessary to prepare original drawings, transparent background images, and images for small icons separately, and sometimes the same character needs to be cropped again depending on the location.
After uploading an image, the problem arises: “Why does it look fine in the logo, but too large in the text?” Even after adjusting the alignment and reducing the size, the results may vary due to the theme’s margins and the mobile display settings.
The method of directly adjusting the layout is good for testing on small sites. However, as the amount of content increases and characters are repeated across multiple pages, the time required to manually adjust the size and spacing becomes significant.
The problem is not the picture itself, but the repetitive tasks involved.
At this stage, test one or two places using the basic image blocks, and then determine how often you need to adjust the text decorations. Even when using decoration tools, only select the features that are actually necessary, such as character placement and decorations.
DecoBlocks allows for simultaneous adjustment of character design and content flow.
If you need to express characters within your posts through dialogue or emphasis, the capabilities of DecoBlocks are clear. You can insert character images from the installed sticker pack using the “Insert Character Sticker” function, and use speech bubbles to separate the character’s dialogue from the main text. Related content can be grouped within a “Section Box,” and important sentences can be highlighted to distinguish between decoration and information.
This feature is available in the blocks of the Block Editor and in the shortcodes of the Classic Editor. However, the desired sticker packs may not always be available in the marketplace, and the actual display results may vary depending on the theme and other plugins. The mobile screen verification and alternative text determination should be handled separately, and the approach of applying only the necessary decorations to the post is the correct one.
Criteria for selecting cute images that do not detract from the content of the posts.
The larger and more frequent the characters are, the more user-friendly a site does not necessarily become. If emotional expressions are inserted between every paragraph, the reader will notice the decorations before the content itself.
If a character expresses surprise or sadness without explanation in a situation where information needs to be conveyed, it can actually undermine credibility. Especially in posts or articles that deal with instructions or important procedures, the content should take precedence over facial expressions.
The scope of rights may differ between a character’s name or a general idea and a specifically depicted representation. Do not use other people’s pictures or famous characters without permission. Issues related to the use of names and logos should be considered separately, and it is advisable to consult with an expert for individual cases.
For personal blogs, start with a single character and two or three facial expressions. For small business owners or small media outlets, it is best to first create a design that is recognizable even when small, and then add more decorative elements to the body of the content.
Ultimately, the standard is not the visual appeal of the picture. Instead, check whether the picture is identifiable in logos or icons, whether it does not obscure the text in the main body, and whether it has alternative text for informational images.
If the purpose is to enhance the text’s visual appeal, you can insert character images from the sticker pack installed in DecoBlocks directly into the text. Dialogues featuring the characters can be displayed using Speech Bubble, and sentences that need to be emphasized can be marked with Highlight to differentiate their roles.
In the Block Editor, it is handled as a block, while in the Classic Editor, it is handled as a shortcode. However, this feature does not provide images specifically for logos or site icons, so the site’s featured image and in-text stickers should be considered separately.
Identification and reading flow are the criteria.
So, where should we begin?
If it’s a personal blog, set the area next to the profile on the introduction page as the primary location, and use small illustrative images within the main content as secondary locations. One character and two or three facial expressions are sufficient for initial operation.
For businesses or small media outlets, apply the design first to locations that are repeatedly visible, such as the logo or website icon. When using it as a website icon, it is best to prepare a separate, simple square version that focuses on the face or silhouette.
When inserting images into the body of the text, adjust their size and alignment, and then check the width of the text and the reading flow on both desktop and actual mobile screens. For informational images, include the key content as alternative text, and for decorative images, omit the descriptions.
Start with a small number of characters, and only increase the number when necessary.
Frequently Asked Questions.
Q. Where should someone start if they want to create a personal blog?
A. Start with the area next to the profile on the introduction page and small illustrative images within the main text. Having one character and two or three facial expressions is sufficient for the initial operation.
Q. What happens when a character obscures the text on a mobile device?
A. First, reduce the image size and avoid placing images next to the text. After adjusting the alignment and size of the image blocks, you must check the width of the text and the reading flow on an actual mobile screen.
Q. Can this problem be easily solved using a tool?
A. You can set up upload options, size, alignment, captions, links, and alternative text using only the basic image block. If you frequently need to change the layout, compare the styling tools available in your current theme, but prioritize checking for the features you need.
Q. Can I include both character stickers and speech bubbles in the same post?
A. It is possible.
With DecoBlocks’ Insert Character Sticker, you can insert character images from the installed sticker pack, and use the Speech Bubble to create speech bubbles for the characters. You can use it as a block in the Block Editor, or as a shortcode in the Classic Editor, but whether it obstructs text on mobile devices needs to be checked separately after posting.
