Site logo

Archived topic

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

3 replies · Started by Chris on September 1, 2021

Viewing posts 1–4 of 4

Hi, I want to re-create/copy the first featured widget in Marketer theme sidebar and use it in a different places in the sidebar. So I want to have 2 or 3 of these CSS styled widgets.

featured widget

Can someone give me a step-by-step tutorial on how to do this?

Thanks!

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.

Cheers David, this works. The button is not included but I can add a button from the block editor I suppose.

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/

This archived topic is closed to new replies.