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

Community Forums Forums Design Tips and Tricks How do I create a full width feature or Hero using the Sample Child theme

This topic is: not resolved

This topic contains 9 replies, has 4 voices, and was last updated by  Anakyst 4 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #65443

    chris@strikinggroup.com.au
    Participant
    Post count: 5

    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?

    Feature Example from StudioPress landing page

    #65445

    braddalton
    Participant
    Post count: 9737

    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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65523

    chris@strikinggroup.com.au
    Participant
    Post count: 5

    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?

    #65524

    braddalton
    Participant
    Post count: 9737

    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.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65531

    chris@strikinggroup.com.au
    Participant
    Post count: 5

    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?

    #65545

    braddalton
    Participant
    Post count: 9737

    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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65603

    chris@strikinggroup.com.au
    Participant
    Post count: 5

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

    #87441

    mborger
    Participant
    Post count: 109

    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.

    #105645

    Anakyst
    Member
    Post count: 6

    @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.

    #105647

    Anakyst
    Member
    Post count: 6

    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.

    • This reply was modified 4 months ago by  Anakyst.
    • This reply was modified 4 months ago by  Anakyst.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.