In this article, we'll take you on an in-depth tour of how to use the Gutenberg editor to furnish and design your WordPress site. Whether you use the default theme, or use another theme first and then switch to the default theme, Gutenberg can help you realize flexible layout and module configuration. In this article, we will explain in detail how to add menus, handle compatibility issues with different themes, and help you get started quickly with practical steps.
Whether you are trying to make a blog news site (below) the default theme
![图片[1]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090909310971.png)
or want to do an e-commerce site (pictured below), the following chart is a theme with other themes and then switched to the default theme, regardless of what theme can be used with Gutenberg (Gutenberg) to match, of course, the following is just to show that there is a header and the middle of the content and the footer as a demonstration of, of course, you use other themes will encounter incompatible cases, the home module will be some show some do not show!
![图片[2]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090909333153.png)
We first take to tell how to add the menu, no matter what type of website you do is the same, the following picture, which is to choose a large container
![图片[3]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912162240.png)
We check the menu, which has a bit of a lot of options, and when we do, there will be a + sign on the right side
![图片[4]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912153553.png)
This is the most basic, because it is directly with the default theme, you can directly edit and add links, as shown above
![图片[5]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912184171.png)
This kind of other themes edited, temporarily unable to edit, we need to first point to edit (edit), such as the above picture
![图片[6]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912194380.png)
Then go ahead and click edit, as shown above.
![图片[7]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912202753.png)
Then you can delete or modify as well as the secondary menu can be directly edited, as shown above
![图片[8]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912214512.png)
If you feel that there are too many menus, you can remove this menu navigation module, but it is recommended that you either remove it visually here or directly in the Menu menu at the back end of the site, depending on your preference
![图片[9]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912235259.png)
Then add the modules needed for the header on the line, usually the navigation, as shown above
![图片[10]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912243430.png)
For example, the first Navigation, this is the menu, or something else, if not check all (Browvse all)
And then like the other logo modules and my account and shopping cart, it's all set up individually like this
![图片[11]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912263099.png)
Logo and tagline, as above
![图片[12]-古腾堡(Gutenberg)编辑器装修指南:菜单添加与主题切换兼容性详解(04)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/09/2024090912272350.png)
Then add other modules, such as multi-language multi-currency is also possible, depending on your needs, another direct use of the default theme to do not say, the basic operation is the same!
The above are two methods, one is directly the default theme to do, one is other theme transformed into the default theme, I hope it can help you.
Summary:
We hope that this tutorial will help you master the basics of decorating your website with the Gutenberg editor, whether it's using the default theme directly or using another theme before switching to the default one. With these steps, you will be able to easily handle tasks such as menu addition and module configuration. Next, we will share more useful tips about default theme and Gutenberg, stay tuned!
Link to this article:https://www.361sale.com/en/19103/The article is copyrighted and must be reproduced with attribution.



















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments