Customizing main layout discussion summary:
@akapetzoglou1 wants to add two columns (left and right) to the main-outlet as banners. @merefield suggests looking into custom layouts plugins and using existing HTML widgets.
@akapetzoglou1 considers creating a widget for each banner. @merefield recommends using the existing HTML widget, but @akapetzoglou1 creates a custom widget instead. The custom widget is loaded, but not visible on the page.
@merefield helps debug the issue and finds that an import statement is missing (import { h } from 'virtual-dom';). After fixing the issue, the widget is visible.
Hello, I want to add two columns (left and right) of the main-outlet, in order to use them as banners.
From what I understood already I can add new html code easily in the plugin-outlets space.
But it’s not the thing I want to do since there exists no space for this banners already.
What should be my approach?
Take a look at:
Hm.. so I would create a widget for each banner and then load it, right ?
You might find the existing html widget does all you need. GitHub - paviliondev/layouts-custom-html: A widget for the Layouts plugin that allows for Custom HTML to be inserted · GitHub
It probably is the solution. Although, I haven’t been able to make it work yet.
Can’t understand what you mean or how would I use the existing html widget. 
So, I decided to create my own widget that would create the two banners and add them on the sides.
I created a widget: https://github.com/teakap/banner-theme-component
It’s loaded, and I added as a widget to the layout setting but still I am not seeing the widget’s html on the page.
Great that you have delved in!
Always, always have your Browser console open when debugging javascript.
This is what I get:
You are missing an import statement:
import { h } from 'virtual-dom';
That then fixes it:
Note you should code it like this, though or your class name will show (like it does above):
h ("span.some-banner-class", "my text"):
Keep going! 
