Homepage › Community Forums › Epik Theme Support › Home Page Design for Internal Pages
Tagged: align, design, Home page, internal page
I’m trying to replicate some of the design that was on the home page on my “features” page, but it doesn’t seem to align right.
I’ve used the code that you provided in the tutorials, and pasted it in string while alternating the “right” or “left”:
<div class="feature-left feature-margin">
<h2>This title is wrapped inside h2 tags</h2>
<p>This content is wrapped inside the "p" tag. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</br><center><a href="http://youtube.com" class="button large black">Large</a> <a href="http://youtube.com" class="button large green">Large</a></center></p>
</div>
<div class="feature-right"><img src="http://innetworknet.staging.wpengine.com/wp-content/uploads/2013/10/Woman-looking-with-screen-Haze.png"></a></div>
Is there something different I need to do in order to make it line up properly?
Thanks!
Do you have a link to the exact page it’s not working? I looked at your site from the link you provided in your previous thread but didn’t see what you were referring to.
Oh sorry! This is the page I’m trying to use to replicate the home page design:
http://innetworknet.staging.wpengine.com/features/
I’m not very technical when it comes to coding/CSS stuff, but will give it my best shot if you can guide me 馃檪
Add the “feature left” div first, then add the “feature right”. So you may need to just reverse the div classes and they’ll line up like they are above.
OK! That worked to align images on the right side, but the text is a bit off.
http://innetworknet.staging.wpengine.com/features/
Any suggestions?
Thanks!
Are you adding this all within the same widget? If so, you should add them in their own separate “text” widget so they’ll be separate from each other (margins, padding, etc). If you don’t they’ll show up bunched together like they are now.
I’ve added background colors so you can see how they actually appear – http://i.imgur.com/sJ3U6dj.jpg
So add the left and right code together in their own text widgets separate from the other left and right code.
Let me know if that makes sense.
Not sure I understand how to do this – this is on the Features page, full width, which doesn’t have widgets (I think?).
I tried adding text arbitrary text widgets to grab the short-code, and insert that into the page, but it didn’t seem to work.
Thanks,
Oh I thought this was added inside widgets on your homepage. The widget code was really designed for the homepage, so when you use it on a separate page it doesn’t use the homepage code.
I would clean up some of the breaks you have in your code, and just add in a div that includes both of the feature left/right div’s. Then add some bottom margin to create space between the divs. Thats the way it’s designed to work on the homepage and it should work for other pages as well.
Are you able to see how it’s done on the homepage? If so, you could just copy that same code and rename it, apply to the div class that you created on this new page.
Let me know if that helps.
I think this is officially beyond my abilities :P. I’ll have to ask a designer/developer to help out I think.
Thanks for your help! 馃檪
I think you can do it, especially since you’ve gotten this far with it. I probably made it seem harder than it actually is.
If you want to give it a try, or if you need a quick example of what I’m talking about, just let me know. Glad to help.
Not sure where to grab the code or update the code within WP. I’m starting to feel more comfortable with CSS, but still very new to both CSS and PHP 馃檪
If you can point me to the right direction, I can figure it out! Thanks!
Basically you would want to add both the feature left and right code inside of their own div container so they will be completely separate from the other div containers. Here is an example –
<div class="feature-clear">Replace this text with the Feature Left and Feature Right code here</div>
Notice I added a class called “feature-clear” as an example. You would need to add “feature-clear” to your style.css file and add some styling to it. i would recommend adding something along these lines –
.feature-clear {
clear: both;
margin: 0 0 40px;
}
That code will clear the divs so they show up on their own line and not get mixed up with the other div containers. The 40px will be added to the bottom margin which will create space between the divs.
Thanks! That worked perfect! 馃檪
Would this code also work for the pricing tables?
Thanks,
It should, if you’re trying to do the same thing.
I tried and it didn’t work – but it’s a different issue. I’ll start a new topic so others can follow as well 馃檪
Thanks,
Ok I’ll check it out.
Thanks