# Custom layouts By default, when LinwitDocEditor is initialized, it will create the editor's head menu, editing area, and bottom word count display area. As shown in the figure below: ![](../assets/image/aieditor-areas-en.png) ## Default sample 以上截图的初始化代码如下： ```html LinwitDocEditor Demo
``` ## Custom layouts In some scenarios, we may want to customize the entire UI layout, such as adopting a Tencent Docs-style layout (demo link: http://doc.aieditor.com.cn), or other customized layout forms. We can achieve this using LinwitDocEditor's customizable UI features. The sample code is as follows: ```html 20-24 LinwitDocEditor Demo
``` In the provided code, an additional `
` with the class name `aie-container` and its three child `
` elements have been added compared to the default code. The purpose of these child `
` elements is as follows: - `aie-container-header`: Used to fill the header menu content. - `aie-container-main`: Used to fill the middle editing area. - `aie-container-footer`: Used to fill the footer content. The order, position, structure, and nesting depth of these three child `
` elements can be changed in any way to achieve the desired layout. However, they must all be wrapped within a `
` with the class name `aie-container`. This allows us to implement any layout we want.