How to Create a Custom Website Footer with Elementor Pro

Подписаться 20 тыс.

Просмотров 106 тыс.

50% 1

*Get my own footer template to import into your own projects:*
www.designbuil...
---
Lots of people ask me how I made the custom designed footer on my website: www.designbuil...
It's actually not part of my theme. I switch off my theme's footer completely and instead use the Elementor page builder to build my footer template.
I then replace my theme's footer with the Elementor footer template instead.
It's really easy to do, and it's likely you can do it with your current theme.
In this video, I take you through the entire process of how I built and integrated my own custom designed footer, step-by-step.
---
RESOURCES MENTIONED:
Elementor:
www.designbuil... (aff. link)
GeneratePress: www.designbuil... (aff. link)
My video on using Popup Maker with Elementor:
www.designbuil...
AnyWhere Elementor:
en-gb.wordpres...
StylePress:
stylepress.org/
Head, Footer and Post Injections:
wordpress.org/...
Header Footer Elementor:
wordpress.org/... (not mentioned but also great)

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 349

@vocalcoachktsings 7 лет назад

Fantastic vid. My only advice is to tell viewers they will need the pro versions upfront. I learnt alot, much appreciated.

@DaveFoy 7 лет назад

Yes, agreed! I didn't realise that until later, and RU-vid won't let you edit videos after they're published. It's something I've been very aware of in videos since. :)

@jamesduncan2230 6 лет назад

yep, agreed. good comment

@jbfagencyllc1316 5 лет назад

just get pro dont be cheap

@ghassancenter2355 4 года назад

thanks for telling me I was lost since I use Elementor and it doesn't have Library

@DreamFlightStudios 7 лет назад

I watch a ton of videos on web development and had a really popular RU-vidr I thought was my favorite. But I noticed he never previewed anything on mobile and just made it look good on desktop. Then I found you, you blow everyone else away quality wise.. Thank you.

@DaveFoy 7 лет назад

Aw thanks Brad. I'm glad you find my videos useful!

@desmurtagh489 7 лет назад

Just created a footer for a website based on the information supplied in this video. The video was most helpful in providing a very clear narrative describing every step in the proceed and I was able to achieve the desired outcome on each page of the website. However I would have liked a little more detail of popup menu within this video rather than having to switch to another video. Great work Dave, I look forward to viewing more of your videos on creating imaginative templates.

@DaveFoy 7 лет назад

Thanks Des. :) Yeah, I opted to keep it a bit more focused, rather than also going reall in-depth into the popup. it was already getting a bit long at 20 mins+.

@desmurtagh489 7 лет назад

It was very good

@adrienevd 7 лет назад

I learned a lot by just watching, now I'll do it myself because then you learn most. thanks for making the video!

@DaveFoy 7 лет назад

Definitely the best way to learn Adriene. Thanks for your kind words.

@CarolynMilburn 6 лет назад

Thanks Dave, learned lots and loved it! I'm tickled I can create my own footer (even in Elementor free) as I have been so frustrated at the restrictions in theme footers, I'll do this in Astra. Try as I might, however, I couldn't get the nav list headers to go white. I'm sure with changes that happen all the time things shift, especially big update like today. Cheers, this was great

@LanceMcGrew 7 лет назад

Amazing and extremely valuable content. Thank you for sharing your talent and time.

@DaveFoy 7 лет назад

Thank you Lance. It's a pleasure!

@kelly5822 4 года назад

Thank you so much, this was so helpful! I really appreciate you taking the time to show it step by step. :)

@omnisciency 6 лет назад

great tutorial helped alot! by the way I had tesseract theme but downloaded a footer plugin and just included the elementor footer shortcode there and added the CSS through customizing the theme adding additional CSS for those of us on a budget :)

@rogervalle2211 5 лет назад

Thank you for a great video Dave. The only issue I found is that GeneratePress doesn't have the GP Hooks as before. Now the Hooks are integrated within Elements, so I need to figure out how to make the Footer show on the website.

@jackies35 7 лет назад

This is awesome. I wish I don't have to touch padding and margin. I can't get it and it's hard to comprehend. Now that you created the footer, are you going to save this in your library?

@DaveFoy 7 лет назад

Yes, saved it in my Elementor library. Then used the shortcode of that library item to place it in my theme. I use GeneratePress's hooks feature.

@PaulHerzlich-xo8ox 7 лет назад

Just one small thing I notice: if you attach your template to the footer_before hook (or footer_after), your HTML is not inside the mark-up. Is this not an SEO issue? If you put it inside footer_content_top or footer_content_bottom, it is inside the but you don’t seem to inherit the theme styling for links (using the Astra theme). I’ve played around with a few possibilities, but most irritating is that the styling (line spacing) that you see in the Elementor editor when you do the template can be quite different to what you see when the page is displayed. I’m wondering whether Header Footer Elementor plugin overcomes these problems?

@DaveFoy 7 лет назад

Hi Paul. Yes, I always put my footer shortcode in a hook that's inside the markup. The styles *should* inherit naturally. If they don't, then there must be some Astra CSS that's applied to links in the footer. Maybe Header Footer Elementor would fix it? Worth a try!

@funniq 7 лет назад

Great tutorials ... thanks for sharing your knowledge .. you put a lot of efforts in it, I can tell

@LUSHImboundMarketingFKcom 7 лет назад

I would like to add to the conversation that the OceanWP Theme has also Settings per Page and Post that allow to put shortcodes to every single section of the front end layout, (After Header, before header, Before and After Page Title and before and After Footer). This helps to create unique pages and posts with also unique Headers and Footers! Let's say you have a restricted page or post for specific users and your need to have Unique page layouts with private content. The combination of OceanWP Theme and Elementor will make it creatively possible.

@VivaEmptiness 7 лет назад

Hey, great tutorial video. However, I cannot get the "Head, Footer and Post Injections" to work. I add the shortcode but the content does not appear, just an empty shortcode. Can you please make a short video on how to do that for us who are not using GeneratePress? I'm currently trying out the OceanWP theme. Thanks!

@DaveFoy 7 лет назад

Hmm. I haven't used that plugin myself in a while. You could try the Header Footer Elementor plugin (en-gb.wordpress.org/plugins/header-footer-elementor/) which I prefer now anyway. If you're using OceanWP, you can actually replace your theme's header or footer in the Customizer. For example, in the Footer settings, there's an option to choose which page you want to be your footer (you have to create your footer as a page in this case, not an Elementor template). It then replaces the footer automatically. Let me know how it goes.

@VivaEmptiness 7 лет назад

Thanks for the reply. I just saw what you said with replacing the footer of OceanWP in the Customizer. Haven't seen anything about the header though. And I noticed that one crucial part is missing from the video, the part that you are building and implementing the popup's content that says "Get My Latest Updates, Best Tips and Exclusive Discounts", could you please explain or even better show how you did that, as I'm not seeing any Elementor options inside the Popup Maker's settings. Thanks again!

@DaveFoy 7 лет назад

No, the same goes for the header in OceanWP too. In the Customizer options for the header, the option to replace the header with a chosen page is there too. I show more clearly how to handle the popup in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dYjXRjPuKxo.html - I skipped it in this one to stop it getting too long. :)

@DaveFoy 7 лет назад

Sorry for the delayed reply. I didn't see you'd replied till now! There should be the option in the Header settings of OWP's Customizer? You add the content to the popup in Popup Maker. And then copy the 'class' in the Popup Maker main list of all your popups. Then in the button widget in Elementor, paste that class into the 'advanced' tab. I'm sure I show that in the landing page video I linked to?

@DaveFoy 7 лет назад

By the way, I just checked out OceanWP's header options in the Customizer. It's in Header > General > Style (Custom Header) > then choose your page.

@suomi222 6 лет назад

when i try to import your ready theme nothing happens. in elementor my libary just goes back to start with no error messages or anything but no new templates either.

@DaveFoy 6 лет назад

Hmm, that's odd? I'll check it out. Can you email me dave [at] designbuildweb [dot] co please? I can send you re-exported copies.

@kissfl 6 лет назад

Im trying to add a banner to my site. I have both elementor and oceans wp. on the WP cpanel i go to widget, add text to footer 2 then paste the code (JS) in the "text" part, not the visual. update then nothing shows up. Is there any advice you can help me with?

@FellowGeto 7 лет назад

Hey Dave, great video! So easy to follow. I have one issue I'm trying to figure out. I have Elementor Pro with Generate Press Free theme (so no hooks). I built my footer in Elementor (per your video) and got the Header Footer Plugin. I chose "elementor canvas" but can't find out how to "add template" (as you explained to someone in a thread below). Thanks in advance for your help!

@DaveFoy 7 лет назад

Thanks a lot Travis! Well firstly, you won't be able to pull your sitewide footer in at all with the Elementor Canvas template. That template literally strips everything out, including any means of pulling in the footer you've set. You'll have to use GP's default template I'm afraid. In the Header Footer Elementor plugin, you create your template in the plugin settings (see the Settings menu in WP, it's in there). If you've already created your footer template in Elementor's library, that's easy too. In your HFE footer editing page, just select the Elementor Canvas template, then 'edit with Elementor', then add your previously made template there from your library. Hope that makes sense?

@FellowGeto 7 лет назад

That worked perfect! Thanks so much for all your help! Now, I'm going to absorb the rest of your vid's. So helpful & time saving!

@DaveFoy 7 лет назад

Superb. Glad to hear it Travis!

@scottvincentyoung6965 6 лет назад

You mentioned that you disabled the footer in your theme (Generate Press), but I haven't been able to do this. Do I need to be using Elementor Pro?

@DaveFoy 6 лет назад

No no, it's just a GP feature. Do you have GP Premium? I think you'd need that to have the Customizer options.

@clear101media5 7 лет назад

You're the best Dave, thanks so much!

@DaveFoy 7 лет назад

Thank YOU! :)

@alanegan641 7 лет назад

Hi Dave, I'm loving your videos. I've created a footer but the GP 'hooks' option is a pro upgrade. Is there any way around this?

@DaveFoy 7 лет назад

Thanks Alan. No, sadly not for hooks. You need premium for those. You could use the Header Footer Elementor plugin though, which allows you to select a template for the footer, it automatically replaces your GP footer with your Elementor footer. I only found out about it after I made this video.

@alanegan641 7 лет назад

Go it. Done. Thanks very much, I owe you a beer :) Keep the videos coming, superb stuff Dave.

@DaveFoy 7 лет назад

Haa haa, no worries at all Alan. :)

@picknow557 7 лет назад

Thank you very much, Dave! You're the Best!

@DaveFoy 7 лет назад

Thank YOU! :)

@brotherlac 6 лет назад

Hi Dave, I cannot find "Custom Menu" in the list. Can you show me? It's belonging to OeanWP or another widget? I use Astra!!! Thanks for replying!

@DaveFoy 6 лет назад

It might have changed its name now to Navigation Menu.

@MitruequeCo 7 лет назад

¿Hi good video but I would like to know how can I add icon social to text footer menu? thanks

@grischaheyer2679 7 лет назад

Great tutorial. Unfortunately the footer is only showing when I switch the Template to Default under Page Settings. Any ideas how it can work with Template set to Elementor Canvas?

@DaveFoy 7 лет назад

Hi Grischa. Sadly, you can't I'm afraid. I should have made that clear in the tutorial. Canvas is a completely blank template. It doesn't have any means of pulling in your site's footer or header at all. The canvas template is intended to be for standalone pages only, like landing pages.

@grischaheyer2679 7 лет назад

Thanks for the super fast reply Dave. Again great tutorials and resources!

@grischaheyer2679 7 лет назад

How do I best create fullwidth section (images) without any padding left and right while using the default setting?

@DaveFoy 7 лет назад

Best to set Section > Layout > Columns Gap to 'No Gap'. Then the column that's inside the section won't have any padding, which is what I think is causing the gaps.

@grischaheyer2679 7 лет назад

Thanks. That's sorted together with the stretch section option.

@liamgareid 6 лет назад

Hey Dave great tutorial. I am having a little trouble finding the short code for my footer, I downloaded Anywhere Elementor but I still can't find the short code, Its probably something obvious I'm missing lol

@DaveFoy 6 лет назад

You have to create the shortcode yourself. Check in their documentation on the plugin's page: wordpress.org/plugins/anywhere-elementor/. To find the ID of the template, use a plugin like wordpress.org/plugins/catch-ids/

@liamgareid 6 лет назад

Thanks so much Dave, enjoy the rest of your day.

@shanksyouu 4 года назад

you could have used the icon list in elementor to build a menu and still have all the control over it worked better for me

@DaveFoy 4 года назад

Yeah Icon List is a great way to make menus like this, I figured that out soon after making this video (which was a long time ago now... in internet years anyway). :)

@christopherclark2645 7 лет назад

Dave - Setting Footer Widgets to 0 doesn't remove the default footer and disabling it in GP Pro turns off my custom footer as well as the default footer. Any suugestions? Much thanks!

@DaveFoy 7 лет назад

Setting footer widgets to 0 only removes the footer that usually contains the footer widgets, not the copyright bar at the bottom of the screen. Could that be it? And yes, disabling the footer in the Disable Elements box will stop any footer appearing, that's right.

@christopherclark2645 7 лет назад

That was my conundrum, how to disable the default footer with disabling my own - what's the point then of a custom footer? :) But I found a solution - placing an empty span in the footer copyright and using that to hide the footer with css. Thanks for the reply, Dave. Really enjoying and learning from your vids!

@DaveFoy 7 лет назад

Thanks Christopher! Glad you found a solution. :)

@dimitriswolker3289 7 лет назад

Your video is very good you could explain to me how we will do without elementor pro ang genarate pressιt in any other way the footer

@dimitriswolker3289 7 лет назад

i have the asrta theme and i make 50 pages and 100 post

@dimitriswolker3289 7 лет назад

thanks

@mohithkumar3577 4 года назад

Sir, I have an Doubt how to make a Colour Swatch in Wordpress for non E-Commerce website

@DaveFoy 4 года назад

Use the Central Color Palette plugin. It's great.

@mohithkumar3577 4 года назад

@@DaveFoy but it's for E- commerce ? Woo commerce?

@jovanperic4214 4 года назад

This is not available unless you have PRO version!!!

@plainkady 4 года назад

Is this video for Elementor Pro or the Hello Elementor which is free?

@DaveFoy 4 года назад

To follow along with this one you need Elementor Pro which I forgot to say. This one's a really old video and very out of date now.

@plainkady 4 года назад

@@DaveFoy please update the title so that is not misleading making people to believe that they can customize a footer with Hello Elementor by watching this video.

@DaveFoy 4 года назад

Where does it say anything about Hello Elementor? Hello Elementor wasn’t even a thing when I made this video. Hello Elementor is a theme anyway... you can’t build anything with that theme.

@plainkady 4 года назад

@@DaveFoy thank you I appreciate this.

@pellekarlsson152 6 лет назад

Can I use the free version of Elementor?

@DaveFoy 6 лет назад

To follow this tutorial? Yes, but you won't have the ability to add the CSS in the way that I do later on in the video - sorry. You'd have to add your CSS another way, maybe in the Additional CSS section of the Customizer.

@zerkyyulyandri1663 7 лет назад

thanks for the lesson

@DaveFoy 7 лет назад

No problem!

@renisonfoy6705 2 года назад

Tankis, Dave !!🙂🙏🏽

@shahzadhaider9195 7 лет назад

Can anybody help me? How to reduce/increase , or resize a section width? (No stretch section) in Elmentor Pro

@DaveFoy 7 лет назад

Answered on the other thread.

@shahzadhaider9195 7 лет назад

Yes, Got. Noted with many thanks.

@jacobkwakugyan1672 7 лет назад

How do i insert my custom footer into my website when i do not have the pro version?

@DaveFoy 7 лет назад

You can use the Header Footer Elementor plugin, if you're using GeneratePress. It's really easy.

@jacobkwakugyan1672 7 лет назад

Thanks for the reply. you're amazing! However, i duo not use Generate Press. can i still use this footer?

@DaveFoy 7 лет назад

No worries :) Which theme do you use?

@jacobkwakugyan1672 7 лет назад

pixr

@jacobkwakugyan1672 7 лет назад

pixlr wordpress theme

@coachingangels 7 лет назад

very well done

@DaveFoy 7 лет назад

Thanks Juan! You're the man. ;)

@YasienSarlie 6 лет назад

Thanks!

@handypreneur5101 5 лет назад

If you're NOT using Elementor Pro you won't have access to the Custom CSS element. To remedy the bullet point issue (13:19), you can place the following code into your theme's custom CSS field: .elementor-widget-container .menu { list-style-type: none; margin: 0; } Thanks to Tom at GeneratePress.com (generatepress.com/forums/topic/wont-able-to-remove-bullets-from-menu-using-elementor/)

@DaveFoy 5 лет назад

Great tip!

@JohnT-GNM 6 лет назад

Hi Dave great video. however, this link does not work, StylePress: stylepress.org/ = > Web Server's Default Page This page is generated by Plesk, the leading hosting automation software. You see this page because there is no Web site at this address.

@DaveFoy 6 лет назад

Ah yes, StylePress died a while ago actually. It's in the internet graveyard now. Shame, it had promise.

@hamburger-fries 7 лет назад

love your videos! But your intro is LOUD..... like LOUD!

@DaveFoy 7 лет назад

Lol! Loud as in YEAAAAH!! Or loud as in ewwwww? I don't bother having intro music anymore anyway, so you're safe with my later videos. :)

@roknuzzamanruku5391 7 лет назад

hello

@DaveFoy 7 лет назад

Hi!

@roknuzzamanruku5391 7 лет назад

hello

@LunaPriscilla 7 лет назад

You have saved my life a few times, thank you!!

@DaveFoy 7 лет назад

Haa haa, thank you. :) I'm pleased I could help!

@CharlesPeterson-dabizguy 5 лет назад

Good Stuff! I'm so glad I found your page.

@Website-Developer 4 года назад

With GP there really is not for adjusting and centering text or other font adjustments is there? I am asking because I would expect that for the premium upgrade

@buildyouronlinepresence736 4 года назад

Love your content and your delivery style Dave. Thank you so much for uploading information that is easy to digest and replicate.

@kerawelt2008 7 лет назад

Another outstanding tutorial of yours ! Many thanks ! Please go on posting tutorials they're highly helpful.

@DaveFoy 7 лет назад

Thank you so much. That means a great deal to me. :D

@Website-Developer 4 года назад

Is GP compatible with Elementor plugins like Plus Addons, Master Addons, etc. ?

@LT-lu8je 3 года назад

Thank you

@fabulouspenn 7 лет назад

Hello, please where can i get the css code you used for the custom menu?

@Deadstk 7 лет назад

Excellent tutorial! Can't tell you how valuable this is. Having posted a few how-to videos myself, I know how much effort goes into making a really good tutorial.Thank you for your time and effort.

@DaveFoy 7 лет назад

Thanks so much Steven. Yep, takes a lot of time - way more than most people think! Appreciate you noticing and letting me know.

@peerlessstrategies 4 года назад

I'm following along and applying everything as you're guiding me but unfortunately it's not giving me the same results. Adjusting the column width for the menu's for example, nothing happens when you make them 50%. They don't move side by side as shown in the video. Also can't change the font color of the menu titles. I've tried both text and header and neither of those work. Good video but maybe need an updated one since this is 2.5 years old. Thanks for all the other tips tho, very helpful for a wp newbie :)

@colvinbrothers 6 лет назад

For anyone who needs the code for getting rid of the bullets: selector a, selector a:visited { color: #fff; } selector a:hover { color: #c1328a; } selector ul { list-style: none; margin-left: 0; } selector h5 { color: #fff; text-transform: uppercase; margin-bottom: 2px; }

@nathanmengel5881 6 лет назад

Really enjoy your vids, makes learning a pleasure. Quick one though, not sure if I'm being blind but I cant seem to find the custom CSS for widget 2 & 3 you said you would add in the links? Thanks for the assistance!

@tommytong8770 7 лет назад

I built the footer template step-by-step as shown in the video using Elementor Pro and GeneratePress Premium. However, the CSS of the template was over-ridden by the GeneratePress Body Theme? Any idea what is the problem?

@ZosiaOsowska 4 года назад

Hello and thanks for video! I just have one question probably silly but.. what code to put in for copyright name of website in footer bar that will bring you to home page?.. thanks!😆

@serpentinefireball 4 года назад

Brilliant! Well explained and thorough even for a beginner

@Tripwithadi 4 года назад

Foy, do you have tutorial about tablet views for post? how can we set the desktop sidebar and how to best setup that sidebar into tablet view? because in tablet view, sidebar will under post content, but it will be ugly.. any idea?

@christophhaug 7 лет назад

I rarely like videos on RU-vid but I just had to like this one. Well done! I was just wondering whether turning off the theme footer was the vest or even the only choice here. I try to use my theme (GP) as much as possible and so I was wondering why you did not stick that footer template into a footer widget? But maybe I'm missing something?

@DaveFoy 7 лет назад

Brilliant Christoph. I appreciate the like! I didn't put the template in a widget because widgets are contained within a fixed width space in GP. Even if I set GP to have only 1 widget, my template wouldn't be able to span the entire width of the browser like it does with my method.

@AndyDOHD1 6 лет назад

Hi Dave, I love watching your videos. A great friendly style and manner you have. Trying to learn Elementor and OceanWP so your videos are coming in very handy!

@DaveFoy 6 лет назад

Lovely, thanks Andy.

@JCBiffro 7 лет назад

Hey Dave - fantastic video as always! Question. When using the hooks to add the footer, as you'll notice, the '2017 - GeneratePress' is still there. Do you know whether it's possible to remove it?!

@DaveFoy 7 лет назад

Thanks JC! If you've got GP Premium, you can just delete the copyright text in the Customizer. That still leaves the footer colored bar (I think - not tested), but you can change that in Customizer > Colors. All from memory - I'm not at my computer. :) Hope that helps?

@JCBiffro 7 лет назад

This WORKED. Thanks so much, Dave! Looking forward to those Wordpress & Elementor courses of yours :)

@DaveFoy 7 лет назад

Superb! Pleased you're sorted. :)

@romari2706 7 лет назад

Very nice, thanks

@DaveFoy 7 лет назад

Thank you Romeo. :)

@dawncraig3340 7 лет назад

Could I use this to make a custom header too? This is a great tutorial! I've not only made my custom footer but I've learned a lot about Elementor. Thanks so much!

@DaveFoy 7 лет назад

Thanks Dawn! Yes, you can definitely make a header too. You might need the NavMenu Addon plugin to make a custom nav menu. And how you're going to add your header to your site, and what theme you use, dictates exactly how you'd add it to your site. But yes - definitely doable!

@WarrenSal 7 лет назад

I down loaded your plugin, but it would not work, so I watched your video and followed it step by step, you made it a lot easier, Thanks. They are good videos

@DaveFoy 7 лет назад

Thanks Warren. Glad you liked it. :)

@carlosmedina29 4 года назад

Perfect friend ! The way I like the videos to be made !

@mamabtinytreasures 6 лет назад

Hi Dave, thank you for your awesome video. The only thing that I can't figure out is on my desktop the image I uploaded sits nice on my desk top however when I go to my mobile, the picture is at the very bottom. No idea how to fix this, thank you. brendadoucet.com

@brandichutney 4 года назад

If we're not using the GeneratePress theme, where do we put the shortcode? Using Neve.

@klormachinery9883 3 года назад

great, until i needed to insert the CSS popup...where the heck do i get that from??

@Ehbcsports 7 лет назад

I wish I had ran across your tutorials before I purchased my theme...would have saved me a couple of bucks!

@DaveFoy 7 лет назад

Oops! At least you've seen the light now. :)

@jeffreybuskey2329 7 лет назад

Where can i get the custom code you mentioned to get ride of the bullets etc...?

@FlawlessCrochetFlowers 7 лет назад

Thanks for the video it helped me big time! However, I'm stuck. I have no Idea how to get my footer on all pages on my website. By the way, I'm new to this.Please help me! Thanks in advance. I'm not using the Generate Press theme. -Leticia

@DaveFoy 7 лет назад

What theme are you using Leticia?

@FlawlessCrochetFlowers 7 лет назад

Design Build Web - For Non-Coder Graphic Designers I'm using the Genesis theme from StudioPress

@DaveFoy 7 лет назад

Ah, great. Well an easy way to do this is to use this plugin: en-gb.wordpress.org/plugins/header-footer-elementor/ Create your footer template in the plugin's settings (see in the Settings menu). Then choose 'footer' from the dropdown. If you already made your template in Elementor - when you create your footer template in the plugin, choose ''Elementor Canvas'. Then 'Add Template'. Insert your Elementor template. Hope that helps? Let me know how you get on.

@FlawlessCrochetFlowers 7 лет назад

Design Build Web - For Non-Coder Graphic Designers Thanks for the quick response! would I place it in the same way you placed it in hooks? Thank you again!

@DaveFoy 7 лет назад

No problem. :) No need for hooks if you use that plugin. The plugin does all the work for you. It's actually really easy. I hadn't heard of the plugin when I made this video. I also feature it in my newer video here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Tq4AfgD9NM8.html. I mention it around 12:45 or so on that video.

@giligarden 7 лет назад

Thumbs up, well done. Thanks for the lesson.

@DaveFoy 7 лет назад

No worries. Thank you!

@rvalle13 5 лет назад

Great video Dave, thank you for all the information provided!

@DaveFoy 5 лет назад

Pleasure.

@newoldman8296 7 лет назад

just wondering am I able the designed footer with elementor to be used in any exciting website?

@DaveFoy 7 лет назад

As long as Elementor is installed on the other website, yes. Just export the footer template and then import it into the new site.

@RichardoftheSixties 6 лет назад

At about timestamp 13:17, you are changing the color of the column text for the menus in columns 2 and 3. When I do so, I get a note in the style/typography section that states: "Note: The following colors won't work if Default Colors are enable." Well, they aren't working for me; however, I don't know where to turn off the 'Default Colors'. I've gone back to the WP control panel/elementor/settings and under the General tab, have tried checking and unchecking the 'Disable Default Colors' and 'Disable Default Fonts', but neither appear to have any effect. What have I missed; or, where else should I look?

@DaveFoy 6 лет назад

Hmm. Can you send me a quick screen recording (maybe using Loom in Chrome)? hello [at] designbuildweb [dot] co

@Strongbear2013 6 лет назад

Thanks for the helpful video. Here you are changing the area which is normally the footer widgets section on Ocean WP. How do I just change the footer area at the very bottom where it normally has the copyright information? I want to add in custom links down there for privacy policy, terms and conditions etc. Thanks.

@DaveFoy 6 лет назад

There will be an area in OceanWP's Customizer that allows you to do that. I'm not at my main computer right now to check exactly where it is.

@AndyDOHD1 6 лет назад

Hi Dave, Is there a way of making an editable template that can then be added to different pages and edited independently therein? What I am thinking of is, for example, a section with pricing on one side and opening hours on the other. A client I have has a number of different shops with different pricing per shop and opening hours. So I thought there must be a way of making a "core template layout" that I could then place into the different shop's page and then edit within each shop's page with their own specific pricing and opening hours but I couldn't... I tried making a Section template but once placed in a page it isn't editable for that page...

@AndyDOHD1 6 лет назад

I got it work... funny how things like that happen. Mention it "out loud" then "Hey Presto!" it works...

@GustavoOcampoBecerra 6 лет назад

You're Awesome!!!

@checkingpassape600consolef3 6 лет назад

Nice Tutorial, Thank You I particularly liked the well enunciated instructions which are an order of magnitude better than a lot on You Tube. The one thing that was sometimes a little difficult to follow without going back and re-watching sections, was exactly where you were clicking with the mouse when the cursor seemed to disappear off the side a number of times times. That said, a little trial and error should allow us to duplicate things. Altogether this must rank as one of the better tutorials available - Thanks again!

@DaveFoy 6 лет назад

Great, glad you like the videos! I do my best to be clear. :) I agree re. the cursor. This was one of my first videos and I had a lot to learn.

@dexgodbey 7 лет назад

Thanks, Dave. Great tutorial. Much appreciated.

@DaveFoy 7 лет назад

Thank you Dexter. :)

@sarahstiffin4561 6 лет назад

Thanks for this. I don't understand how to get the footer to show on all pages of my website. I have created it in Anywhere Elementor as I don't have Elementor Pro. I have the One Press theme. Any ideas would be much appreciated. Thanks.

@DaveFoy 6 лет назад

No worries. If you want it on all pages and don't have E Pro, use the wordpress.org/plugins/header-footer-elementor/ plugin. You have to create the footer within that plugin's settings. But... if you already made it somewhere else, simply edit the footer template within Header Footer Elementor, then 'Add Template' and choose it from your template library. An easy way to carry it across without having to make it all again.

@thegreenshoestring3450 6 лет назад

I have a question about GeneratePress. To this point I have been using the standard wordpress theme and elementor canvas to build my web pages. If I switch to GeneratePress theme can I maintain all my current formatting?

@DaveFoy 6 лет назад

Yes. GP's styles will become active so they might also affect a few things in Elementor, just cos of how CSS styles cascade down. But should be easy to fix those in the Customizer. I'd go through and set as many styles as you can in GP's Customizer anyway. Always good practice.

@tintelina 5 лет назад

Thanks for all your tutorials. Very useful and easy to understand. Quick question - is there a way to edit the footer (with new address in this case) and have it populate all footers automatically, or do I need to make the change one page at a time? Thanks!

@DaveFoy 5 лет назад

If you're setting a template to be the footer throughout your site (as per this video) then you just need to make the change in that one template.

@guybirg 6 лет назад

I don't have the pro version and i can't find how to work the anywhere elementor that you mentioned for that purpose

@nuritdiy 7 лет назад

Dear Dave, Thanks for the videos you're making, I love your style of instructions. I have created the footer and connected it to GP HOOKS and also tried with Header Footer Elementor, but in both cases, the footer appears only on the main page and not in all pages. What to do? Any thoughts? Keep up with the good stuff!

@DaveFoy 7 лет назад

Thanks Nurit. :) I wonder if on all the other pages, you're using Elementor canvas template? Or maybe have the footer disabled in the 'Disable Elements' box?

@nuritdiy 7 лет назад

OMG you are such a genius!!! I did not notice I had the Footer Disabled.... :-)

@DaveFoy 7 лет назад

Well.... the reason I know (don't tell anyone) is because I've done it myself.... at least once. ;) Glad you got it sorted!

@nuritdiy 7 лет назад

thank you so much! I didn't even think to check for that...I will not make this mistake again I really appreciate you,thanks!

@neraknerak1 6 лет назад

i wish you could make more videos. yours are the best!

@DaveFoy 6 лет назад

Don't worry my friend. DEFINITELY more coming very soon... Thank you.

@rogervalle2211 5 лет назад

This article explains how hooks work now: docs.generatepress.com/article/hooks-element-overview/

@DaveFoy 5 лет назад

Yeah hooks are a little different these days. Thanks for the link!

@ijsbrand3456 6 лет назад

Nice video and good explanation, to the point that you have to generate a shortcode suddenly appears that you have to use the pro version. Report this right at the beginning. I have downloaded your template and put it in an Artisteer template that works.

@DaveFoy 6 лет назад

Yes I didn't even think at the time. This was one of my very first videos. I've since learnt to be very careful about mentioning if I'm using Pro or not. Sorry!

@mrjaysahli 7 лет назад

The typography feature is super cool! Love it!

@DaveFoy 7 лет назад

It is! Great to be able to fine tune the text on every single widget in Elementor. No other page builder has that sort of flexibility.

@robertmeanor8026 6 лет назад

Hi, Great video! I switched over to Generate Press but I can't find 'my library' anywhere. Is there a plugin that can help me with this?

@DaveFoy 6 лет назад

It's called My Templates now Robert. It's in the Elementor menu. This video was made about a year ago so a few things have changed since.

@bloojkl4520 4 года назад

Is this a PRO version of Elementor? Right off the bat, I don't gave a "My Library" option in the Elementor tab....

@DaveFoy 4 года назад

It's now Saved Templates which is under the Templates link which is directly under the Elementor menu in WP. And yes, to follow along with this you need Pro, I'm sorry I didn't say., Though nothing to do with the templates menu.

@Mr-Singh21 5 лет назад

Please give a Solution for Non pro user, how can I pull down footer permanently? How I customize?

@barmechanism7376 4 года назад

bhai sun elemantor ka pro version chahiye tho mujhe ag7223467@gmail.com per mail kar

@fredgroom951 6 лет назад

Thanks for the really useful video :) - I have run into a problem with Elementor footers/headers in that it when they are applied, the margins for all of the non-elementor pages (e.g. woocommerce product pages) are removed and the content is squashed right up to the edges of the screen. Is this something you have experienced? do you know if there is a way of stopping this happening? Thanks!

@skypan7786 6 лет назад

I can not access the shortcode if I did not upgrade elementor to pro, so I need download anywhere elementor plugin first.

@DaveFoy 6 лет назад

Yes you do. I should have made that clear upfront, I'm sorry. This was one of the very first videos I made, had about 1000 things to remember. :)

@clintongallagher 5 лет назад

Dave you da' man. Would you make a video to help explain the finer points of using images as backgrounds in footers and such? Undetrstanding CSS cover is not enough insight when using Elementor.

@cassiejor 7 лет назад

You are really awesome. So many thanks.

@DaveFoy 7 лет назад

Thank you Jordan. :)

@maelysl5107 6 лет назад

Thank you for this tutorial that helped me change my footer. However, it would be better to specify from the start that creating a footer in the Elemontor library was useless without a paid version. Because I had to start all over again in AnyWhere Elementor. But in any case your tutorial saved me ! :)

@marianagasca000 7 лет назад

This is really annoying, you HAVE TO say is for PRO versions, I wasted my time. Thanks

@DaveFoy 7 лет назад

Well, I admit I didn't mention that what I was showing was for Elementor Pro, I'm sorry. This was one of my first videos I made and it slipped my mind, I had so many other things to think of. I've made sure to be clear on this (if applicable), in every single other video I've made. However, you can still do this with the free version of Elementor. You can embed the footer template with the free AnyWhere Elementor plugin. You just have to use a shortcode - [INSERT_ELEMENTOR id=xxx] - and replace the xxx with the ID of your Elementor footer template. You can find that by clicking through to the edit screen of the template you created (DO NOT 'edit with elementor'). Then in the URL, you can see the ID. And the CSS I show is totally possible too. You just have to write CSS in your main CSS file, not within the Elementor editor. My apologies again for wasting your time. Not what I intend when spending many hours making these videos.

@shahzadhaider9195 7 лет назад

Great video, I learned a lot. Thanks for sharing

@DaveFoy 7 лет назад

Thanks Shahzad!

@trizy7078 7 лет назад

Thanks for sharing these amazing tutorials with us! You've got a new subscriber. I'd love to see more tutorials in your channel. They're really useful and very well explained! Any chance you could explain how to integrate social media icons on the header menu? I've got Elementor PRO and GeneratePress Premium theme. Really appreciate it.

@DaveFoy 7 лет назад

Thanks Roberto. :) Do you have an example of what you mean? Do you mean social icons would be on the same row as the navigation menu items (like, next to them on the same row)? Or do you want to place them in the top bar above the actual 'logo+nav' header?

@trizy7078 7 лет назад

Yeah I mean social icons on the same row as the navigation menu items. Like in this image for example, where they are right aligned: s-media-cache-ak0.pinimg.com/736x/d8/09/7b/d8097bfcc044224a43ecad75354f67e8.jpg Thanks for your time!

@DaveFoy 7 лет назад

Ah - got you. I'd say for that you'd be better off creating your header with Elementor, as a template. Create a new template in the Elementor library. Use the Canvas template on it. Create your header. Use the NavMenu Addon plugin to handle the logo and nav. And then you can place your social icons using the social icons widget. You can insert it into place using either GP hooks (put the shortcode in Before Header Content), or use the Header Footer Elementor plugin, which easily replaces GP's header.

@trizy7078 7 лет назад

Thank you! I've followed the steps and created a header with Elementor using the NavMenu, and it looks amazing. The problem is that I don't know how to make this menu responsive with tablets and phones. I mean, I don't know how to create the dropdown Menu. Cheers

@DaveFoy 7 лет назад

Well the NavMenu plugin menu *should* be responsive... presumably it's not for you?