How Do I Customize My Footer?

Support
#1

I’d like my footer to look more like this:

Can I do that on digitalnomadquest.com?

Thanks

#2

Hi Sharon,

Achieving this kind of footer on X is possible however it would involve some customization since the footer widgets can only accommodate up to 4 columns while your screenshot has 5.

Since this would include some customization, this would go beyond the scope of our support. You might want to get in touch with a developer to do is if you are unsure how to proceed.

Another this is that if you use Pro, this is easily done through the Footer Builder.

Hope this helps.

#3

I’d be interested in doing 4 columns. Can you advise?

#4

Hello Sharon,

When the default X theme footer, you can have up to 4 columns. Please go to X > Theme Options > Footer and enable the Footer Widget area and select 4 columns. Once set, go to Appearance > Widgets and insert a widget for the respective footer widget areas such as the Footer 1, Footer 2, Footer 3 and Footer 4.

Hope this helps.

#5

Hi - thanks for this info! how do I add specific categories and pages? When I drag “Categories” and “Pages” into the footer widgets it puts the entire list of them there. Please advise - thanks!

#6

Hello Sharon,

Instead of adding the Category Widget or Pages Widget, please go to Appearance > Widgets first and then create a custom menu that consists of your desired pages or categories. And then go back to Appearance > Widgets and then insert WP Menu widget selecting your custom menu in it.

Hope this makes sense.

#7

Hi - do you mean going into Appearance -> Menus to create the custom menu?

Also do I need to download a plugin for WP Menu? I don’t seem to have it:

#8

Hello Sharon,

Sorry for the confusion.

1.) Yes, it is Appearance -> Menus to create the custom menu.

2.) And then use the Navigation Menu widget.

Hope this helps.

#9

Got it - I’ve been abl eto create it but it doesn’t look like a footer right now:

Is there any way to make formatted better on digitalnomadquest.com? Thanks.

#10

Hello Sharon,

By default, there is a border on the links with the current stack that you are using. Do you want something like this?

If that is the case, please make use of this custom css:

.x-colophon.top {
    background-color: #e5e5e5;
}

.widget ul, .widget ol {
    border: none;
    box-shadow: none;
}

.widget_nav_menu ul li a, .widget_meta ul li a, .widget_pages ul li a {
    padding: 5px 0;
    border: none;
    box-shadow: none;
}

.widget a:before, .widget a:after {
    display: none;
}

Feel free to change the values if necessary.

#11

Awesome!

Is there any way to make the bottom part of my footer (social links + disclaimer) merge into my above footer?

digitalnomadquest.com is the site

Also how do I make the footer dark back with white text if I wanted that? Thanks!

#12

Also is there a way to put the social media icons under my logo on the left?

#13

Hello Sharon,

Do you mean like this?

You can add this custom css then:

.x-colophon.top {
    padding-bottom: 20px;
}

.x-colophon.top,
.x-colophon.bottom{
    background-color: #000;
    border: none !important;
    border: none;
    box-shadow: none;
}

.x-colophon .widget,
.x-colophon .h-widget,
.x-colophon .widget a,
.widget_nav_menu ul li a:hover, 
.widget_meta ul li a:hover, 
.widget_pages ul li a:hover {
    text-shadow: none;
    color: #fff;
    background-color: transparent !important;
}

The social icons cannot be moved because that is there default position in this stack. If you want to have more control over your footer, you can upgrade to Pro theme. With Pro theme, there is a custom footer builder which would allow you to create the footer that you want.

Hope this helps.

#14

Yes thank you!

#15

You are most welcome!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.