Couple questions

  1. How can I get my contact widget in my footer to look like the one from your demo page? Keeps giving me big icons.

  2. Can the title of the widgets in the footer be centered?

  3. Can I change the footer top and bottom padding?

  4. If I change the color for a row, title changes color but the text widget also defaults to the row color. Like I’d like a red title with white text, is it possible?

  5. Can I make a row background not auto-responsive for a particular row and no overlay? Take a look at the founder row, currently I cheated as it’s simply an image widget that you can click, but the title and button don’t look as good.

nffunctionalperformance.com/main

Thanks for the help!

  1. There are two contact widgets - one built to be used in the page builder and one for the footer. Every widget marked FP is for front page (page builder) use.
    2&3) You can use this in a custom CSS plugin or child theme:

.footer-widgets .widget-title {
    text-align: center;
}
.footer-widgets {
    padding: 95px 0; /*Adjust the 95 value*/
}

  1. Both colors change in order to assure proper visibility. But if you tell me for what row you want to do this it’s easy to achieve with a bit of custom CSS.
  2. I understand the no overlay part, I don’t understand the other part. You don’t want the image to cover the whole row or what exactly?

1, 2 and 3: Awesome now that’s a beautiful footer! Thanks!

  1. Is the custom CSS referencing a row id type of thing? I’m not sure which row I’d like it for right now, just it would be neat to be able to do it.

  2. On the main page right under the DO YOU WANT TO… row I have a row set a full-stretched with a picture widget in there that you can click to get to the about page. I had to put the title and button as part of the picture but they aren’t vector based anymore and don’t look as good as the other buttons and titles. Is there a way to add a title and a clickable button to a picture? I thought what if I have a row background image with a title and button widget in there, but the auto-responsiveness of the row background makes it look bad.

  1. Yeap

The background images are set to cover the whole row so they might get cropped on the sides because most likely the image and row ratios won’t match.

Try adding this in a regular text widget:


<div class="custom-row panel-grid-cell">
     <img src="http://........."/>
     <div class="custom-row-inner">
         <h3 class="widget-title">Your title</h3>
         <a href="http://.........." class="roll-button more-button">BUTTON TEXT</a>
     </div>
</div>

And this in your custom CSS:


.custom-row {
   position: relative;
}
.custom-row-inner {
   position: absolute;
   width: 100%;
   top: 30px;
}
.custom-row .widget-title {
   margin-bottom: 60px;
}

Not really sure what this will result in, it just crossed my mind.

Sorry noob question here but the text widget supports html code?

*Edit: Holy shit that actually worked awesome! Would just need something to push the button down.

I see you’ve added some linebreaks. Remove them for a bit and let me know when you did.

Yes sorry that was my noob friendly way of testing. Line breaks gone.

Replace the CSS with this please:


.custom-row {
   position: relative;
}
.custom-row-inner {
   position: absolute;
   width: 100%;
   top: 30px;
}
.custom-row .widget-title {
   color: #fff;
   margin-bottom: 120px;
}
@media only screen and (max-width: 460px) {
   .custom-row .widget-title {
       margin-bottom: 20px;
   }
}

You can change margin-bottom: 120px; to a different value if you want.

Hmmm not behaving exactly like I’d want.

If I put the margin-bottom: 400px it looks good on a 1080p screen but gets pushed way down when I change to 1366x768. Is there a way to put the button location relative to the bottom of the row so if screen gets smaller button gets pushed up as image gets resized smaller?

You’ll need to change things a bit for that.


<div class="custom-row panel-grid-cell">
     <img src="http://........."/>
     <div class="custom-row-inner">
         <h3 class="widget-title">Your title</h3>
     </div>
     <div class="custom-row-button">
         <a href="http://.........." class="roll-button more-button">BUTTON TEXT</a>
     </div>
</div>


.custom-row {
   position: relative;
}
.custom-row-inner {
   position: absolute;
   width: 100%;
   top: 30px;
}
.custom-row-button {
   position: absolute;
   width: 100%;
   bottom: 30px;
}
.custom-row .widget-title {
   color: #fff;
}

<div class="custom-row-button> was missing it’s closing " hehe! That gave me a little head scratcher.

Wow amazing help and service Vlad! Thank you very very much! I’ll have no problem recommending your themes to anyone!

Oh yeah, I missed that. I’ve edited it in case anybody else wants to use the code.