Styling the Front Page 2 Widget: Digital Pro

[tomrankin]

I'd like to display an opening blurb as shown and styled on a static page, but with the Front Page Content Section Display section underneath. I figured I could use the Front Page 2 Widget and style it appropriately, but I can't find the HTML. Looking in the front-page.php file I can find the function digital_front_page_widgets() section, but can't get any further.

Where can I find the HTML for the Front Page 2 Widget?

[Christoph]

Hi,

I´m not sure what you are asking about.

The HTML wraps are defined right there in front-page.php

	genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2"><div class="wrap"><div class="flexible-widgets widget-area fadeup-effect' . digital_halves_widget_area_class( 'front-page-2' ) . '">',
		'after'  => '</div></div></div>',
	) ); 

If you want to show text underneath the hero image and above front-page-2, you could add a new widget area in between.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[tomrankin]

Yes, I'm aware of that. However, when adding titles and text to that widget, I'm unable to style it because this is seemingly where the trail ends.

Where is the HTML that's generated for the widget title and body text?

[Christoph]

It mostly depends on the widgets that you add to the widget area.
Widget titles are styled with .widget-title.
(If you need to be more specific you could try front-page-2 .widget-title, or if nothing else works, use the id of the widget (e.g. #text-4 .widget-title)
You can change the markup of text in a text widget however you like.
<div class="class-for-text-in-widget">Your text</div>

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[tomrankin]

Sorry for the late reply. Thanks for the advice. I don't seem to be able to make the title a H1 heading in the widget, though – which is why I went searching in the first place.

[tomrankin]

Not only that, but I don't seem to be able to edit the live site. My local server is fine, but those edits don't work live. Is there a reason for that (I've already purged the cache)?

[Christoph]

Hi,

if you are using the accessibility features, that will break the semantic markup and is probably very confusing for screen reader users.

You can try to filter the markup with genesis_register_sidebar_defaults
Sridhar has some sample code: https://sridharkatakam.com/how-to-change-widget-titles-markup-in-genesis/

As for changes not taking, sometimes the widget screen gets "stuck" and the page has to be reloaded before anything works.
If you are using anything to minify the css, deactivate it.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[tomrankin]

Yes, that's helpful – although I can't get that code to work, and in any case I want to change each widget to improve the structure. Currently there's no H1 tag on my home page. That site does have a jQuery method for changing a specific widget, but it's behind a paywall at a price way out of my range.

Can I really not use minification when using Genesis? I do this via CloudFlare, and I'd like to continue doing that. That doesn't seem acceptable to me?

[Christoph]

Of course you can use minification.
Just deactivate it while you are making changes.

The H1 on the front page is usually the website title.

I guess with jquery, you would target the id of the widget and the heading and use a combination of .unwrap().wrap("Your new heading styling and classes"); to change the markup.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[tomrankin]

I'm familiar with web page structure. 🙂 I've found another way to achieve what I want, so thanks for your help and clarification.

I'm not a jQuery person, so I'll rope in a friend to help!

Thanks again.

[Author]

Posts