How do I create a full width feature or Hero using the Sample Child theme

[[email protected]]

Hi, I would like to re-create a full with feature area like seen in the attached image.

How can this be done using the Sample Child theme?

[Brad Dalton]

Please copy the code from the view raw link and paste it at the end of your child themes functions.php file using a text editor like Notepad++

https://gist.github.com/braddalton/685f93b39e8b4de1e9f7

---

Tutorials for StudioPress Themes.

[[email protected]]

Thanks Braddalton, that has given me a text wdiget that I can use on the home page. Now how do I make that a background image, so I can display text over it on the left and a signup form on the right?

[Brad Dalton]

You can put any type of content in the widget.

I think you're wanting a feature box for email sign ups? The easiest way to do this is to use the Genesis eNews Extended Widget.

---

Tutorials for StudioPress Themes.

[[email protected]]

Hi Braddalton, with the content widget, I can only really put one thing in there at a time though can't I? Either a larger image or text? How do I have the image as a background AND text overlaid as say a H1 and H3?

[Brad Dalton]

What you could do is design the content in your editor and copy and paste the HTML into a text widget.

This is how i did it to make a featured box.

You can use a web design tool like Paint.net or Windows or GIMP for Mac and do it that way.

Another option is to use CSS and HTML for the text overlay

---

Tutorials for StudioPress Themes.

[[email protected]]

AHA Thanks Braddalton, let me do some research, give that a try and come back if I get stuck.

[mborger]

Following up on this thread as it's what I'm trying to do at funthingsapp.com

I'd like to more closely mirror the layout on badoo.com . How do I:

1) Move the text/image overlay to the right side of the screen instead of the left

2) Once moved to the right, have it inset some instead of flush against the edge of the screen. Maybe 50px in.

3) Have the background overlay color be a complete shape, i.e. rounded oval, instead of a "boxy" line by line behind the text. Just like they do on badoo.com

Thank you.

[Northumbrian]

@braddalton

Sometimes what seems so 'second nature' to some saves others hours of head-banging.

If I wanted to have this full-width display on other pages - not just Front - would I change this line below:
if ( is_front_page() && is_active_sidebar('after-header') ) {

To this one:
if ( && is_active_sidebar('after-header') ) {

- Thank you for posting the function... Appreciated much.

---

– looks like Saruman is now running the Shire.

[Northumbrian]

I think i goddit. I just have to remove the whole line:

// if ( is_front_page() && is_active_sidebar('after-header') )
{

and then it'll show on just pages declared with a Widget 'Display on Page' plugin..

Awesome. Thanks again.

---

– looks like Saruman is now running the Shire.

[Author]

Posts