Widget and Front Page design

[LanceHillier]

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.

[Victor Font]

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?

[LanceHillier]

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.

[Victor Font]

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?

[WhiteSpider]

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