Home Page sections

[Miguel Santos]

I am trying to create the different Home Page sections but do not know how to do it… I am trying to do it on the Theme Options section, Home Sections tab but without success… need some help, please…

[Bill Robbins]

Good Morning Miguel,

Great question there. The content for the home page sections comes from widgets. You can add widgets to it by going to the Appearance section in your WordPress dashboard and selecting widgets. There are 10 widget areas that make up the home page; each one makes a block.

It sounds like you’ve found the spot in the theme options where you can style each home block. Once you add widgets to them you should be able to see them and see your styling.

If you have any questions, let me know.

Thanks,
Bill

[Miguel Santos]

Hi Bill,

Thanks for this. I thing I am slowly getting there. Still need to twik a bit though: If you see my home page on http://www.amikoita.com I managed to add a section below the hero image – however I would like to change the text to the same style as in the hero images I have throughout the website… and do not want the Facebook and other links on that section… also no semi-transparent window on the right side, as is now… really, would like to have similar style sections as on the pages hero images… how to do it?

Thanks
Miguel

[Bill Robbins]

It should be possible to do that. Instead of using the page content widget, I would suggest using a “text” widget instead. With that one you can add in a bit of HTML which we can use to make the styling match more exactly.

Once you’ve added your text widget, place this in the content area of it:

<div class="hero-copy center-text">

	<div class="hero-title-holder">
		<h2 class="hero-title">Hero Title</h2>
	</div>

	<div class="hero-caption">
		<p>Hero Caption</p>
	</div>

	<div class="hero-button-holder">
		<a class="button hero" href="http://yourlink.com">Button Text</a>
	</div>

		
</div>

Then replace the Hero Title with the title text you’d like to use. The Hero Caption with the caption text. Lastly the http://yourlink.com with the URL you’d like the button to link to and Button Text with what you’d like the button to say.

If you’d like to leave any of those elements out, you can delete them. To take out the caption for example, you would delete this:

<div class="hero-caption">
	<p>Hero Caption</p>
</div>

See if that won’t help you duplicate the hero look in the other sections.

Take care,
Bill

[Miguel Santos]

Thanks Bill. It is getting much better… still, how can I have the text centred? See how it looks like with your code in http://www.amikoita.com

[Bill Robbins]

It looks like we need just a bit of help with custom styilng to make that match. Here’s what to do:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .home-widgets .textwidget {
   	position: relative;
   	display: table;
   	width: 100%;
   }
   

3. Update your settings.

That should center the text for you, vertically and horizontally.

Also you can leave the widget title empty. It’s not required to have one and might work out better to leave it out.

Let me know how that goes,
Bill

[Miguel Santos]

Wonderful – it does work!!! Great, thank you very much for the help!!!

[Bill Robbins]

That’s great news. Let me know if you need anything else Miguel 🙂

[Author]

Posts