[Resolved] Need a step-by-step on creating a second Featured Widget in Marketer

Hi there,

the Marketer uses some CSS found in the Customizer > Additional CSS to style the first widget. This is that CSS:

.sidebar .widget:first-child, .sidebar .widget:first-child .widget-title {
    background-color: #83b0de;
    color:#fff
}

To style another widget you can add this code ( keep the one above ):

.sidebar .widget:nth-child(2), .sidebar .widget:nth-child(2).widget-title {
    background-color: #83b0de;
    color:#fff
}

You can change the background-color and color #hexcode to what colors you want to use.
And in the CSS Selector you will see 2 x instances of: :nth-child(2). The number 2 says target the 2nd widget. You can change this to 3, 4 or whatever widget you want it to be applied to.

Marketeer was built with the classic widgets in mind. And using a HTML Block inside that widget area. And to Display a button you would use this HTML:

<a class="button" href="the_button_url">My Button</a>

Just update the href and the label text.

If you’re using the Block Widget area ( came in on WP 5.8 ), then you can forget this, and first off check this document about Grouping Blocks:

https://docs.generatepress.com/article/grouping-widgets/

Otherwise every block you add to the widget area will be separate, eg. the Title and its contents are two separate things.
And if you’re using this method, then i would use the GenerateBlocks plugin, Container Block and GB Buttons then you can visually style them.

Finally, and sorry for the overload, the Block Widget area has some issues, like not all Plugins that add widgets fully support it, and overall the UX is a little bit janky. So if you are using the Block Widgets and find them a pain, you can replace them with Classic Widgets:

https://docs.generatepress.com/article/disable-the-block-editor-in-widgets/