A little bit of help to configure the footer please.

[Jose]

(I’m using GP Premium)

As I say in the title, I have some problems with the footer.

I’ve done an entire redesign of my personal portfolio and I’m trying to configure the footer to look the same as I designed. The problem is that I don’t know how to solve some problems, because I just know a little of coding.

So, this is my footer design https://imgur.com/a/Ibhp3NY and these are my questions.

Should I use the widgets footer or the footer bar?
In both cases, how can I center the text?
How can I use a horizontal rule?
Following the last, how can I set the social icons above the horizontal rule?
How can I use a gradient in the footer?
And the last one, how can I edit the height to have exactly the height that I designed?

Here is some information about the design of the image.

The text occupies 927px width
The height of the footer is 227px
The width of the horizontal rule is 1406px and have a size of 0.5px
Linear gradient colors are #373737 and #000000

[David]

Hi there,

first off best to get the content into the site and then we can look at the CSS required.

1. Customizer > Layout > Footer and set Footer widgets: 2
1.1 While you’re here edit the Copyright text and add <!-- no copy -->
2. Add your Content to Footer Widget 1 and the Form to Footer Widget 2.
3. Then in your Footer Bar widgets add your Menu and Social Icons.

Once you have done that can you share a link to your site and ic an look at the CSS required for the layout and styling.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Maybe the image makes some confusion.

The form is still in the body, and that isn’t a problem.

Is that what you meant when you said to put the form in footer widget 2?

[David]

So you only need to add the Menu and the Social Icons ?
If so then they just do 1.1 and 3.
If you can share a link to the Site it would make things easier.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

I can’t because it isn’t up in this moment, but I can post anything you need, vids or images. I’m going to try your tips and writte again once I’ve done.

[David]

OK makes it trickier for us to provide the necessary CSS but if you can set the footer bar up as above then we can provide some guidance.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Hi again David, I did what you said in your last message, and this is what I got.

View post on imgur.com

I’ve added the horizontal rule with a code provided by you that I saw in a topic, but I’m open to do everything you say.

So, I’ve added in the Footer Widget 1 a “Menu” and in the Footer Widget 2 a text with three images. Is that the correct way to do?

[Tom]

Hi there,

Is there no way we can get a copy of this site on a temp live server? If not, we’ll just be guessing with the specific CSS needed.

If you can get it live just temporarily, we can provide CSS that should work perfectly the first time.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Hi Tom!

I’ve recently finished some works that was slowing the develop of the web, so, I’ve reactivated the website to continue with the process.

Here is my web in construction -> https://holasoyjose.es/

And I have 2 problems to solve:

1) As I said a few messages before, I need to set the footer as I show in my first message, and that was what we were trying to.

2) I’ve configured the nav of “Inicio” page as “transparent nav menu” with Elements, but I don’t know why it doesn’t works. I thought that it could have been because I centered the logo with this tutorial -> https://docs.generatepress.com/article/centering-logo-navigation/

I’ve been waiting your answers.

Thanks again.

[Tom]

Hi there,

So it looks like you need to:

1. Add an HTML/Text widget into the first widget area, and add a heading with some text. The word you need in different colors needs to be inside a span:

<h2>My heading <span class="highlight">here</span></h2>

2. Add a form shortcode into the second widget area.

Then you can style the footer widget area in the Customizer to match those colors.

Once that is done, I should be able to help with the CSS to match things a little bit closer.

For your Header Element, is it set to display on the “Front Page”?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Hi Tom, I think that we are missunderstanding.

I need to configure the “black footer” that appears in my first image, not the blank space that have text and a form, because if you see my web with the link that I provided, you’ll see that I’ve already done.

I need to put the black section as in my first image. 4 words, an horizontal bar that divide the words and de social icons, and the social icons.

That last steps that I followed was what David said to me, in which he say “3. Then in your Footer Bar widgets add your Menu and Social Icons.”

[Tom]

Ah, sorry about that!

You currently have those widgets in the Footer Widgets area – can you try the “Footer Bar” widget area, instead?

Then, set it to center in Customize > Layout > Footer.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jose]

Done! It looks closer than before to my design. Now we need to adjust the size and space and put an horizontal bar between that footer bar menu and social icons.

And I’ve done the change in the Menu Nav as you said setting in “Front Page” and it works!. Later, I’ll need a help to configure some things in the Menu Nav too, but first I’ll finish the footer.

[David]

So this CSS for adding some space around the menu and add the underline:

.footer-bar .widget_nav_menu {
    padding: 20px 0 30px 0 !important;
    border-bottom: 1px solid #ccc;
    margin-bottom: 40px !important;
}

You’re social icons are just images – are you going to add links there ? Don’t want to provide some CSS that won’t work if you update the HTML

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jose]

Yes David, in the end, the social icons will be linked.

I’ve used your code and it works correctly, now if you see my website, you’ll see that I need more space between words.

[Author]

Posts