• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Widget and Front Page design

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Widget and Front Page design

This topic is: resolved

Tagged: widgets

  • This topic has 4 replies, 3 voices, and was last updated 7 years, 10 months ago by WhiteSpider.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 31, 2017 at 7:51 pm #207239
    LanceHillier
    Participant

    Hi all,

    I'm playing with the Executive Pro theme and trying to get my head around how to Design/or Layout the front page, I've noticed that the Home-Top and Home-Middle widget areas output widgets in a three column format?

    I've figured out how to create a new widget area in the functions.php file, and then add that to output on the front-page.php file.

    What I can't figure out is why the Home-top and Home-Middle widget areas are outputting 3 text widgets in a 3 column format, and why the slider widget is not?

    I guess I'm trying to learn how to design the front-page by being capable of adding widget areas where and when I want them, and understanding how to create widget areas that output widgets differently as well? make sense?

    I know there's a bigger picture here I'm probably not getting and happy research/read myself but after a few hours of googling and searching forums all I can come up with is code(to register etc) which doesn't help me understand how these things work.

    Any help for a beginner would be AWSOME!!!
    Thanks all,
    Lance.

    May 31, 2017 at 9:35 pm #207244
    Victor Font
    Moderator

    It's all done through CSS either in style-front.css or style.css. The best way to see how it's done is to use your broswer's inspect tool. https://victorfont.com/how-to-use-your-browsers-inspect-tool/


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 31, 2017 at 10:05 pm #207247
    LanceHillier
    Participant

    Victor,

    You seem to be across everything, thanks for your time mate, your answer has I think helped me find the right path to a solution, and opened up another tool for my box. I have found this code using the above tut which I think has something to do with it!!!

    .home-middle .widget,
    .home-top .widget {
    float: left;
    padding: 0 2.8%;
    width: 33.33333333333%;
    }

    .home-middle .widget:nth-of-type(3n+1),
    .home-top .widget:nth-of-type(3n+1) {
    clear: left;
    }

    Cheers,
    Lance.

    June 1, 2017 at 7:34 am #207253
    Victor Font
    Moderator

    That's it! Have fun with it.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    July 2, 2017 at 8:23 am #208587
    WhiteSpider
    Member

    This was helpful since I have only 2 widgets and changed to 50%, although I'd like to have one at 70% and the other at 30%, but haven't been able to figure that out. Regardless, when scaling down to mobile, it no longer stacks once I change that percentage to 50% in CSS.

    I appreciate the help.
    Erik

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble