Add widget area

Hi, you would need to register a widget area which is covered here:

https://codex.wordpress.org/Widgetizing_Themes

And the code for displaying the area could be added to the GP Hooks > After Header and you could add one of these conditionals to limit it to the home page:

https://docs.generatepress.com/article/using-hooks-conditional-tags/

Let me know

I can register the widget in the file theme "inc/general.php"? If there is a theme update, then my changes will be deleted?

What css-class and css-code can I use to make a new widget area in the same style, for example, with a sidebar?

Hi there, before we get into the detail, can i ask what the content will be?
Their may be a simpler workaround such as Widget Shortcodes:

https://wordpress.org/plugins/widget-shortcode/

Considering it is just for the home page, it may be the simplest solution. I can help with making it conditional to the home page and adding some styling.

There will be max 3 widgets. All widgets are standard. Widget with last comments, widget with last articles and widget with text.

OK, how about we use the Left Side Bar? Then you can control the styles in the Customsier. Just activate the side bar and try this CSS:

@media (min-width: 360px) {
	.site-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
	 }
	    
	#left-sidebar {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		width: 100%;
		left: 0;
		margin-left: 20px;
	}
	.inside-left-sidebar {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.inside-left-sidebar .widget {
		width: 30%;
	}
	.content-area {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
		flex: 1 0 75%;
		left: 0
	}
	#right-sidebar {
		-webkit-box-ordinal-group: 4;
		-ms-flex-order: 3;
		order: 3;
		flex: 1 0 25%;
	}
}

Then we can hide it on all but the home page. Is your home page Recent Posts or Static page?

Home page Recent posts.

Ok. I checked. And how to make a maximum of 2 widgets?

Ok, so you can set in the Customiser > Layout > Sidebars > Blog Sidebar Layout only. Leave the others as Content / Sidebar.

For 2 widgets change this part of the code:

	.inside-left-sidebar .widget {
		width: 30%;
	}

Increase the width to say 46%.

Why does the second widget have a lower margin?

Try adding this CSS:

.separate-containers .inside-left-sidebar .widget {
    margin-bottom: 0;
}

Thank you!

Glad we could be of help!