[Resolved] A little bit of help to configure the footer please.

Home Forums Support A little bit of help to configure the footer please.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1024748
    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

    #1024768
    David
    Staff
    Customer Support

    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.

    #1024772
    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?

    #1024798
    David
    Staff
    Customer Support

    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.

    #1024800
    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.

    #1025009
    David
    Staff
    Customer Support

    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.

    #1025215
    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?

    #1025788
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1057053
    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.

    #1057414
    Tom
    Lead Developer
    Lead Developer

    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”?

    #1058918
    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.”

    #1059049
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1059164
    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.

    #1059349
    David
    Staff
    Customer Support

    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

    #1059879
    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.

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.