H1 and Widgets
Support Area › Forums › Moonrise › H1 and Widgets
Tagged: H1 tags and widgets on home page
- This topic has 10 replies, 2 voices, and was last updated 8 years, 11 months ago by Bill Robbins.
-
AuthorPosts
-
May 10, 2015 at 09:57 #29639RecipeSocialParticipant
Hi Bill,
I hope you’re well.
When using widgets on the home page, it stops the H1 tag from working when adding to the associated page.
Is there a way to have both widgets and a H1 tag? I know you can add a title to each widgt but then I can’t space it as I need to.Thanks,
Christian.May 11, 2015 at 09:39 #29651Bill RobbinsModeratorGood Morning Christian,
What you’ll want to do is add the h1 tag to the page and then apply styling to it to make it appear like you want it to. The way you would then style the h1 tags is with this CSS snippet:
.widget h1 { font-size: 30px; color: #333; }
You can change font sizes, colors and so on by targeting just the h1 tags that are inside widgets. There won’t be any by default so you should only be targeting the ones you add.
Hope that helps out,
BillMay 12, 2015 at 13:53 #29726RecipeSocialParticipantHi Bill,
Thanks for the code. Much Appreciated 🙂
Ideally I need to centralise each heading too, will this code do that?
Regards
Christian.May 12, 2015 at 13:57 #29728Bill RobbinsModeratorIt can if you set the text align of that style to center.
Take care,
BillMay 12, 2015 at 14:13 #29734RecipeSocialParticipantI’ve just tried with <p style=”text-align: center;”>Book Online</p>
But the widget doesn’t save the code for some reason. Or am I missing something?
Thanks,
Christian.May 12, 2015 at 14:22 #29737Bill RobbinsModeratorWhich text are you trying to change on your home page? What type of widget are you using for this spot?
May 12, 2015 at 14:29 #29743RecipeSocialParticipantHi,
I’m using a load of different widgets on the home page sections, 2-7
events, contact, custom ones etc.
http://dev.thalassaseafood.co.uk.gridhosted.co.uk/
Thanks,
Christian.May 12, 2015 at 14:31 #29744RecipeSocialParticipantWhat I’m trying to achieve is the same H1 tag as create on an individual page which has been used on the home page.
I just want to have matching H1 tags for each page section on the home page.
as seen on Fifteen.net
Thanks,
Christian.May 12, 2015 at 15:53 #29755Bill RobbinsModeratorYou’d probably be better off to hard code something like that into each section of the home page. In the page-home.php file there are several lines like this:
<?php dynamic_sidebar('home-1') ?>
Right above each of those you could add a title for that section. That would look something like this:
<h1 class="page-title">Your Title</h1>
Sometimes you can coerce an item to do something different from how it was intended, but other times you just have to hard code it to get the results you’re after. I think you’ll be best served with hard coding the titles in this case.
May 13, 2015 at 00:09 #29765RecipeSocialParticipantHi Bill,
I tried your suggestion on the last section for the home page but it hasn’t worked for some reason.
I’m not a coder, so well out of my comfort zone really.
Here’s what i did:
<?php if ( of_get_option( ‘section_7’ ) ) { ?>
<div id=”seven”>
<div class=”section-wrap”>
<?php dynamic_sidebar(‘home-7’) ?>
</div>
<h1 class="page-title">Your Title</h1>
<?php if(of_get_option(‘section_image_7’, $single = true) != “”){ ?>
<style>
div#seven .picture-block {
height: <?php echo of_get_option(‘section_image_height_7’); ?>px;
background-image: url(<?php echo of_get_option(‘section_image_7’); ?>);
}</style>
<div class=”picture-block”></div>
<div class=”mobile-picture-block”>
” alt=”” />
</div>
<?php } ?>
</div><!– #seven –>
<?php } ?>
<?php get_footer(); ?>
Thanks,
Christian.May 13, 2015 at 09:01 #29770Bill RobbinsModeratorThis is the complete block of home 7:
<?php if ( of_get_option( 'section_7' ) ) { ?> <div id="seven"> <div class="section-wrap"> <?php dynamic_sidebar('home-7') ?> </div> <?php if(of_get_option('section_image_7', $single = true) != ""){ ?> <style> div#seven .picture-block { height: <?php echo of_get_option('section_image_height_7'); ?>px; background-image: url(<?php echo of_get_option('section_image_7'); ?>); } </style> <div class="picture-block"></div> <div class="mobile-picture-block"> <img src="<?php echo of_get_option('section_image_7'); ?>" alt="" /> </div> <?php } ?> </div><!-- #seven --> <?php } ?>
adding a title would look like this:
-
AuthorPosts
- The topic ‘H1 and Widgets’ is closed to new replies.