How to Add Text, Images, and Media Files to the Gutenberg Editor

Gutenberg isWordPressThe latest visual editor, through a simple "drag and drop blocks" can easily layout. This article will explain how to add text, images and other content, novice can also quickly get started to create beautiful pages.

I. What is the Gutenberg editor?

Gutenberg (name)It is a visual editor enabled by default since WordPress version 5.0. It replaces the single content box of traditional editors with the concept of "block" (Block), which supports mixed-arrangement of graphics and text, layout control and multimedia embedding. Each content element (such as paragraphs, titles, images, videos, etc.) is an independent block, users can freely combine and sort, greatly enhancing the freedom of content editing.

II. Adding text content

1. Insert paragraph text

• Click on any blank area of the page or the plus button (+) to select the "Paragraph" block;

• Enter the body content you want to add;
• You can set the text size, font color or background color on the right side;

• Editing operations such as bolding, italicizing, adding links, etc. can also be performed through the Quick Format toolbar.

2. Add title

• Click on the plus sign (+) and select the "Title" block;

• Optional heading levels (H2, H3, H4, etc.) for structured layout;

• Proper use of headings helps to improve the readability of the article and theSEOPerformance.

III. Insertionimagery

1. Insertion of a single image

• Click on the plus sign (+) to select the "Image" block;

• Choose to upload a local image, select an existing image from the media library, or insert an external image URL;

• After the image is inserted, you can adjust the image size, alignment, alternative text (alt text), etc. in the block settings.

2. Setting up picture styles

• Can be set to default, rounded corner style;

• Support for adding caption descriptions under images;

• Once inserted you can click the up and down arrows to quickly adjust the position of the image on the page.

IV. Addingmedia, esp. news mediaDocumentation (video, audio, PDF)

1. Insert video

• Option 1: Select the "Video" section and upload a video file or select a video from the media library;

• Way 2: Insert the "Embed" block and paste the link to YouTube, Vimeo, etc. to automatically generate the player.

2. Insertion of audio

• Add the "Audio" block;
• Supports uploading MP3 files or selecting existing audio;
• After insertion, you can set options such as whether to play automatically or in a loop.

3. Insert PDF or other documents

• Add the "Files" block;
• Upload PDF, Word, and other documents;
• The system will automatically generate a download button or preview link for users to view or save.

V. Block movement and combination skills

VI. Tips and Optimization Suggestions

• Using shortcuts / Enter the block name (e.g. /image) quickly add the corresponding content;
• Setting up an image instead of text helpsSEOOptimization and accessibility;
• Using the "Cover Image" block, you can add a background image + text at the beginning of the effect, to enhance the visual appeal;
• Commonly used combination blocks (e.g. image + text + button) can be saved as "reusable blocks" for easy reuse.

VII. Summary

Gutenberg editor JeanWordPressLayout becomes simple and intuitive. Easily add text, images and videos with blocks like building blocks, and freely combine them to make professional and good-looking pages.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off