Community Forums › Forums › Archived Forums › General Discussion › Inserting a button in Infinity Pro
Tagged: Infinity Pro
- This topic has 6 replies, 3 voices, and was last updated 5 years, 5 months ago by andytc.
-
AuthorPosts
-
November 9, 2018 at 7:46 pm #224262nickp9664Member
I am trying to insert a button into the 'Font Page 4' widget section of the Infinity Pro theme. However, as this section has a title and three columns - when I go to add a new custom html widget with a button it turns into a fourth column rather than appearing underneath the columns.
I wasn't sure how to add an image here so I've uploaded a pic to imgur - https://imgur.com/a/5MI5JCx - which shows where I am trying to add a button. Any help would be greatly appreciated!
November 10, 2018 at 6:09 am #224270Victor FontModeratorIn Infinity Pro, widget areas 2-7 are flexible widget areas. See these Infinity Pro instructions to understand how flexible widget areas work: https://my.studiopress.com/documentation/infinity-pro-theme/front-page-setup/front-page-layout-configurations/
If you want to add a button at the bottom of a widget flexible widget area, you have a few choices:
1. remove the flexible nature of the widget area by deleting the flexible-widgets class from the php code for the area in front-page.php. When you do this, you'll have to write your own CSS to create the 3-column layout for the other widgets.
2. Use only one Custom HTML widget and put all of your code for the area into that one widget.
3. Create your own CSS for the fourth widget to overwrite the theme supplied CSS.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?November 10, 2018 at 10:02 pm #224278nickp9664MemberHi Victor, thank you for your reply. Would you be able to assist me with the second option, to use one Custom HTML Widget and add all of the code for the area into that?
This is what I currently have:
<p class="thirty">Discovering and articulating your competitive advantage to drive sustainable growth.</p><div class="content-box">
<i class="icon ion-ios-monitor-outline"></i>
<h4>Customer insight program</h4>
<p>Translating research and data into
meaningful actionable insight.</p>
</div><div class="content-box">
<i class="icon ion-ios-cart-outline"></i>
<h4>Brand Strategy Development</h4>
<p>Defining your purpose to create a foundation for sustainable growth.</p>
</div>But unfortunately, this just stacks the content boxes on top of each other, compared to having them side by side. I probably should have opted for a page builder like Elementor as I didn't realise this much editing would be involved in adding an object like a button - but I'd also love to expand my knowledge of HTML and maybe this is a good way to do it!
November 11, 2018 at 5:35 am #224285Victor FontModeratorYou can use the Genesis column classes, CSS Grid, or Flex to level the content horizontally. Using column classes, the code looks like this:
<div class="one-third first">
<p class="thirty">Discovering and articulating your competitive advantage to drive sustainable growth.</p>
</div>
<div class="one-third">
<div class="content-box">
<i class="icon ion-ios-monitor-outline"></i>
<h4>Customer insight program</h4>
<p>Translating research and data into
meaningful actionable insight.</p>
</div>
</div>
<div class="one-third">
<div class="content-box">
<i class="icon ion-ios-cart-outline"></i>
<h4>Brand Strategy Development</h4>
<p>Defining your purpose to create a foundation for sustainable growth.</p>
</div>
</div>
<div class="first">
<!-- put your button code here -->
</div>
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?November 11, 2018 at 11:02 pm #224295nickp9664MemberHi, thank you very much for your help. I'm just experiencing one more issue with this code which is completely my fault - as I only had two columns in the html I originally shared.
I've used this HTML based off what you commented but I added another box. This is what it looks like at the moment - https://imgur.com/a/sk9wd4m. So I have a Custom HTML Widget with the Title/First line of text, and then a custom HTML widget with the code below.
<div class="one-third">
<div class="content-box">
<i class="icon ion-ios-monitor-outline"></i>
<h4>Customer insight program</h4>
<p>Translating research and data into
meaningful actionable insight.</p>
</div>
</div>
<div class="one-third">
<div class="content-box">
<i class="icon ion-ios-monitor-outline"></i>
<h4>Customer insight program</h4>
<p>Translating research and data into
meaningful actionable insight.</p>
</div>
</div>
<div class="one-third">
<div class="content-box">
<i class="icon ion-ios-cart-outline"></i>
<h4>Brand Strategy Development</h4>
<p>Defining your purpose to create a foundation for sustainable growth.</p>
</div>
</div>
<div class="first">
<p>Learn More About Essenza</p>
</div>I'm trying to make all of the boxes still appear on the one line next to each other. The button is perfect, but I just need the 3 boxes in alignment. Any advice would be greatly appreciated!
November 11, 2018 at 11:07 pm #224296nickp9664MemberI should've also provided this screenshot - https://imgur.com/a/VE1bkB7 - which shows how it appears when I just use one Custom HTML widget with the code you sent.
November 12, 2018 at 6:04 am #224301andytcParticipantIf you look at Victor's original code - you missed the 'first' on the very first div
<div class="one-third first">
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.