How to custom page template for the Gutenberg editor

Question

I have read several questions/answers/articles about "custom templates," including the Block Editor Handbook, but nothing gets at what I'm looking for. Granted, this does smack of questions about placing content from two different editors on the same page, which I understand is not possible (see ACF comment below).

Example of what I'm looking for: after loading the template, the user would see two areas (sections/divs) in the editor, with a background color to differentiate them. If the user added a paragraph in the first section (A) that content would appear in section A on the public-facing Web page. Same with the second section.

1. is there a way to have some underlying HTML in the editor to create the structure?
2. is there a way to do this without using ACF (I'm always amazed that such a venerable CMS can't write content in different places on a page).

Thank you.

Answer 1

Its looks like you are little familiar with WordPress. No problem.
Yes, its true it does not have any places to edit front-end segments or blocks. That's because you have to create them in backend.
We can use ACF to create the backend meta boxes quickly. If you wanna do this manually you can check the guide for that.
For simplicity let's answer your question:

1. go to page / post edit.
2. click on gear icon to open the side panel then choose "code editor" from the menu.
   It will provide you with html editor. you can simply write all your html code here.
   To create a page template:
3. create a file in server > your theme directory
4. Add the page template comment inside that.
5. Check in the back end side panel in page editor. You can now find a drop-down listed with your page template.

Also it has an in built html editor widget to add in to your block editor.