Homepage › Community Forums › inSync Theme Support › How do I build the site?
Hey,
I’m trying to build my homepage to look like the one on the demo but I have no idea how to get started, your documentation is very very vague.
Right now my website looks like this: http://www.mlmschool.net
I imported the xml file in the theme files but I don’t see any page which is the home page in the demo, how do I build something exactly like that?
Please advise.
Thanks
Hi,
To setup the homepage, all you would need to do is add a widget to any of the “Home” widget areas. You can use a Text widget to start with. Just drag the Text widget over and add a title and some content so you can see how it works. Also, there is a basic tutorial that explains how to setup Genesis Themes with Custom Homepages (like this theme) here in the Tutorials link in the menu – https://appfinite.com/tutorials/how-to-setup-the-home-and-blog-page/
Hey Scooby
Thanks for your reply.
Setting it up with widgets seems quite complicated and I don’t see how I would be able to replicate the demo front page.
Eg. what widget do I use for the big picture with text on it?
Also thanks for that link, but I took a look at it and the theme I bought, inSync, doesn’t have a home.php file.
It does have a front-page.php file but I’ve uploaded the theme and everything but it isn’t replicating that by default like the link you gave said it should.
AND I imported the xml demo content but there wasn’t any homepage made by default
Please advise.
Thanks!
@Ridwan yep as scooby mentioned, all you would need to do is drag a Text widget over in one of the widget areas and you can then add your text or HTML code. Remember you can also add a slider or any type of widget you want inside any of those areas (you’re not limited to just text and html).
If there is a specific part of the homepage that you’re trying to replicate just let me know and I’ll copy/paste the exact text/code they used to create it.
If you’re new to Genesis, most Genesis Child themes will show the blog on the homepage by default, and if you add a widget or some content into one of the Home widget areas, then the Homepage template (as seen in the demo) will automatically be activated and the blog will be removed from the homepage…..you can still access the blog by creating a separate Blog page as mentioned in the Tutorial link – https://appfinite.com/tutorials/how-to-setup-the-home-and-blog-page/
@Ridwan Don’t worry it’s not complicated, very easy to do. We’ll help you get the basics going.
The image that you see in the background shows up automatically as a Background image when you add a widget into the SLIDER area. So for example, drag a text widget and add this text/html inside –
This can go in the Title area of the widget area – `Change your Design. Change your Results.
Build something great.`
Then add this in the text/html field of the same text widget – <a class="button large">Get Started</a>
Thanks for your reply.
I’m new to Genesis and am finding this a lot more complicated than expected! These themes aren’t push button easy like the ones on themeforest.
I’d really appreciate it if you could send me the exact code for all of the homepage, since I have no idea what to do right now and am finding this quite difficult.
Sorry to be a bother, but I think I really need the help on this one, so I’ll paypal you $15 for the trouble?
I know that I’ll be able to edit the widgets afterwards easily, I just need them to be in place first for me to be able to work with them properly.
Also, the XML file doesn’t upload widget content, it only uploads/imports pages, posts, users, etc. Thats just how WordPress XML files work. So you would have to manually add the widget content in. I think someone created a plugin that allows you import widget content, but this isn’t designed by WordPress, it’s created by a 3rd party.
Give me a sec, I need to step out for a sec, but as soon as I get back I will find the plugin that allows you to import everything without having to manually add it all in. Once you do that then you’ll see how everything was setup.
Awesome, thanks!
So with that I can just upload that same XML file again and everything should be like the demo?
@Ridwan here ya go 🙂 – https://appfinite.com/topic/how-to-setup-homepage-shortcut/ It was supposed to be at the top before of the inSync forum a long time ago, but I just needed to make it a Sticky Post so it shows up and is easy to access.
I believe that is the same plugin they’re referring to. I’ve used this for my other theme Epik which has a lot of widget areas as well. That should be all that you need to replicate the homepage on the demo. For everything else, you can use the XML file.
Everything is pretty straight forward. Only use the widget areas that you want to show on your homepage. You can use text, images, html, plugins, etc.
BTW, I just took a look at your site and I can see you’ve added content to the “Slider-Wide” widget area which has a blank background since the purpose of it is to add something that is full width and doesn’t require a background. If you want to replicate the background image on the demo, then you should use the “Slider” widget location instead. If you want to upload your own background image to the Slider area just let me know and we can show you the exact line in your css that you can add your image link.
Just let any of us know if you have any questions.
Hey @wes ,
Thanks for that! That was really useful and sped everything up dramatically.
http://mlmschool.net – started to make some changes
I wanted to ask:
– How can I have it so that I have a “home” bit in the menu bar? Since it doesn’t have any page and it just dynamically loads latest posts and uses widgets I’m not sure how to get it to say “home” in the menubar, make that link to the homepage and make it the active link when it hasn’t got a proper page?
– Is there a way that I can push the whole menu to the left a bit so that it starts on the same vertical line as the text on the top?
– How do I edit the footer at the very bottom of the page?
Sorry for so many questions!
Thanks
@Ridwan are you asking how to add “Home” as a link in your menu like the demo? – http://demo.appfinite.net/insync/ If so, you can head over to the Menu Page in your WP Admin, look under the “Pages” section (where you add your links)….then click the “View All” tab. Once you do that, the “Home” link will show up at the very top by default. Add that link and it will show up in front of your other links (just like it’s displayed in the demo).
For the menu position/spacing – Yes you can push it over to the left by reducing the padding on the left side of each of the links in the menu. There is 16px padding on the left and right side of each link, so in order to move it all the way over and maintain the same space, look and feel, we’ll need to double the space on the right side to 32px and change the left padding to 0. Here is what it currently looks like on line 1771 –
.nav-primary .genesis-nav-menu a {
border-bottom: 2px solid #333;
color: #fff;
padding: 10px 16px;
}
You can change the padding to the code below and it will adjust automatically in the way that you need –
.nav-primary .genesis-nav-menu a {
border-bottom: 2px solid #333;
color: #fff;
padding: 10px 32px 10px 0;
}
Your menu is already aligned with the Logo, but there is padding in between each of the links which makes it appear as if it’s pushed over a little bit. The code above reduces the “left padding” to 0 which means your links will visually show up aligned with your logo.
Let me know if that works.
Hey @wes ,
Thanks! That did the trick!
However the orange border below the selected link is messed up now, take a look at http://mlmschool.net, could you advise me on how to fix that please?
Also with this widget system can I get a developer to create any piece of code and it can go anywhere I want? Eg. replace the search bar with an optin box?
And about the footer at the bottom?
thanks
Hey @wes ?
Sorry for asking again but could you please respond to my above questions as I want to launch the site asap
Thanks, your help is much appreciated
Sorry, I’m not sure why my post didn’t show up. I remember replying a couple days ago.
Anyways, Yes thats the downside of removing the padding/space from the left side of the links like that. The space that was there would show the border evenly on each side. Did you want to remove the border all together? Or try something different?
“Also with this widget system can I get a developer to create any piece of code and it can go anywhere I want? Eg. replace the search bar with an optin box?”
Yes, you can replace any section with whatever text, code, plugin, or whatever you need. The widget system in WordPress is “plug and play”.
Looks like you’ve been adding things in pretty nicely. Let me know when you get everything done….you can also add it to the showcase here – https://appfinite.com/showcase-your-site
Hey @wes
Thanks for your reply.
I’d like to have it so that the border is centered below each item.
I don’t want it going too far to the right like it is now.
Any advice on how to do that?
And yep the site is coming together 🙂 , awesome theme! I’ll post it there once I’m done
Thanks
@Ridwan, what Wes is saying is that the purpose of the space on both sides of the links is so the border shows up evenly on each side. The border can only show up as far as the link goes (and that includes the space). So if you have a regular link that says “Home” and you add 20px of padding on the left and the right then that means the border will show up directly under the “Home” link, and it will extend 20px to the left and the right. If you remove 20px from the left, then it will be 0px which means it won’t go any further beyond the left side of the link/text (as you can see). That’s pretty much how it works on any type of site that uses this design/style with the border perfectly centered under each link.
Example –
Home #1 Home #2
_______________ ___________
Take a look at the example above ^ Home #1 is how the theme is setup by default. Home #2 is how it looks when you remove the padding, which is the spacing that is needed for the border to show up centered. The only way for it to show up and appear centered is if you have padding or space added evenly on each side.
Also, a big thing to keep in mind is that the entire navigation section that you are using is 1140px wide. So whatever you add inside of that 1140px won’t go beyond that div/container…thats the way HTML/CSS is supposed to work. Its setup like this to prevent things from overlapping, which wouldn’t look right visually. You may see a dark gray bar/background that is long and covers the entire width of the site, but your nav is only 1140px of that and nothing inside of it can reach outside that space. You can still possibly do a lot of hacking to get this to work, but that would require some good knowledge of CSS in order to customize this. I saw you mentioned a developer, so if you’ve hired a developer you can ask them to go into your CSS and make the customizations that you want.
Long story short – If you want the border to appear centered back the way the theme was setup originally, then just revert back and use the code that was already there. That’s the easy way. The other way is a lot harder and will require some CSS skills to hack that together.
I just helped a client with the same thing not too long ago and had to explain how HTML/CSS works, so that’s why I thought I’d help.
Hi all,
I see the thread about uploading your own background image in the Slider area for inSYNC that references doing so in css, but there is no follow-up. Can someone provide this css info. This is not the background image option in Customizer, its different and I’m having trouble locating the line. Here’s the thread I found from some time ago:
“If you want to replicate the background image on the demo, then you use the “Slider” widget location. If you want to upload your own background image to the Slider area just let me know and we can show you the exact line in your css that you can add your image link.”
Thank you,