4,9 based on 300 reviews
Trusted by 1500+ businesses and student of all shapes and sizes
Free Course
4,9 based on 300 reviews
Trusted by 1500+ businesses and student of all shapes and sizes

Elementor Pro Tutorial

Elementor,WordPress,WordPress Plugins

Create a webshop using Elementor Pro

Create Custom Post Types

Forms Tutorial

Header Tutorial

Create A Popup Header In Elementor Pro

Create A Footer In Elementor Pro

Create A Mega Menu In Elementor Pro

Important links

Sticky Header Background and Link Colors

/*Sticky Header background*/  
selector.elementor-sticky--effects{
background: #FFF;
}
/*Sticky Header Links and Icons*/
selector.elementor-sticky--effects a,
selector.elementor-sticky--effects i{
color: #000!important;   
}

Different Logo For The Sticky Header

/* Sticky Logo Invisible */
.sticky-logo {
 display: none;
}
/* Change Logos When Scrolling */
.elementor-sticky--effects .sticky-logo{
 display: inline-block;
}
.elementor-sticky--effects .static-logo{
 display: none;
}

Change Complete Header On Scroll

.sticky-header {
   top: -70px !important;
   z-index: -1;
   transition: top 1s ease !important;
}
.sticky-header.elementor-sticky--effects {
    top: 0 !important;
}

Menu Separator

.menu-item:not(:last-child) a {
border-right: 1px solid #B3B3B3;
padding:15px 3px 15px 3px;
}
.menu-item:last-child a {
padding:15px 3px 15px 3px;
}
SCROLL TO THE ANSWER

Timestamps

49 thoughts on “Elementor Pro Tutorial”

  • Hi Ferdy, I need your help! I love your tutorials and I have watched many of them. Using your tutorial I created a website for my stationery store. At the top there is “About, All products (which then has subcategories for journals, or lined stationery, or greeting cards ) and then Freebies and Blog and a contact us button. But then I was watching the tutorial on woocommerce and loaded that and added my products. The issue is I don’t know how to get those prodcuts to show up in the “All Prodcuts” section or in the subcategories. WooCommerce just makes it all show up on one page which is now my home page intead of my origioanl home page. I don’t know what to do to get the products to show up under the “all prodcuts” page i made. Your suggestions would be greatly appreicated.

  • 2024-04-27 09:19:04

    The URL provided in your latest tutorial to get to the header tutorial does not seem to be correct?

  • 2023-08-31 17:12:32

    Hi Fredy,
    Thanks for all the great content here and on YouTube.
    Please let me know which theme works best with Elementor plugin? Should I use Astra, OceanWP, or Elementor theme? Which one are you using for this site? And also is it necessary to use woocommerce plugin for an affiliate marketing website?

    Thanks again!!

  • 2023-05-29 19:30:43

    hello sir ferdykorsphoek i like your video you are very easy to explain to every point of the wordpress i am pakistani

  • Hello Ferdy,

    Your amazing tutorial on Youtube about sticky headers brought me here. Your youtube videos are amazing BUT I have a small issue using your CSS code and I really have no idea of how to resolve it.

    Basically I have followed your “Elementor Pro Header Tutorial” to the letter, but the header, after using the CSS code for “Sticky Header Background and Link Colors” you have included sometimes it works (https://greeksummer.villas/booking-terms/) , sometimes it does partially (https://greeksummer.villas) and sometimes it doesnt not at all (https://greeksummer.villas/new-home/).

    I have reached a dead end, and I have been looking to find way to resolve it and I cant! You are my last resource.

    George

  • hello ferdy are just found out about you and i must say i have been missing

  • 2021-12-26 21:39:35

    Hi Ferdy :

    first at all …thank you for all your videos I did all you said to download the template files but every time that I tray to upload it to my WP …it said ” an error occurred ” please tray again …..please …please ..help…

    Gus

  • 2021-10-26 06:47:48

    Hey Ferdy,
    I imported your header template in my website. I don’t want the pink color on hover the menu item. I don’t know how to change that color with custom CSS. So, can you help me.

  • Ferdy,

    Your online tutorials are amazing! I really enjoy your style and in-depth help.

    I have a basic issue that I cannot seem to correct. Using Elementor Pro, my Header is not showing on the other pages of my website. Entire Website is definitely set as a condition. But when selecting any Header Menu, like Product or About Us – the Header doesn’t show on the following page.

  • 2021-07-16 09:08:46

    Hi Ferdi,

    I have an idea about a page with a side menu, because I have many options I want to show. So on the right i have the list with options. On the left i want to explain what these options mean. With text, images and illustrations.
    Now i have “build” my first website with Elementor Pro after seeing your tutorial and i’m almost done. But only this issue is working against me. 😉
    I have already a side menubar on the right, but on the left you see all the content of all the items. But i only want to see the selected item (content).

    Can you help me out?

    Kind regards Ronald

  • Hey Ferdy,
    I imported your header template in my website. I don’t want the pink color on hover the menu item. I don’t know how to change that color with custom CSS. So, can you help me.

  • 2021-06-03 18:20:00

    Hi, Ferdy!

    I hope the summer breeze has reached you at last 🙂

    Will you ever make an extended tutorial video how to build a dropshipping store using the “Elementor Pro” version?

    Best regards,
    Jamez

  • Hi There Ferdy

    How would you change the code below to make the Text of an added Button to White?
    /*Sticky Header Links and Icons*/
    selector.elementor-sticky–effects a,
    selector.elementor-sticky–effects i{
    color: #000!important;
    }

  • 2021-04-07 17:30:53

    Hello Ferdy,

    I want to make my header change color multiple times, for example to become red when I scroll few lines, then yellow after another few lines. How can I do that?

  • hello ferdy
    I used your custom css namely: ticky Header Background and Link Color I get an error message that you cannot use! important I hope you can help me with this

  • 2021-03-10 19:31:30

    Hi Ferdy,
    I saw your sticky header tutorials and they are awesome. I was just wondering what the css (or tutorial) will be to make the sticky menu show only when you scroll up? just as you have it here on your site. Thank you for all the time and effort you put in this tutorials.

    Thanks in advance

    Cesar

  • 2021-02-18 22:55:30

    First of all thank you for all of your tutorials and custom code. I’m attempting to do the sticky header with background change but the background for the nav bar section doesn’t change, only the color for the icons. Do you know if the code may have changed or if I’m missing something?

  • 2021-01-30 18:10:36

    Hello sir.. Your videos are really great. I follow all your instructions but every time I am unable to make my header sticky both in elementor pro and also on betheme. I would be thankful to you to get your response..

  • Dag Ferdy, wat een fantastische en ongelooflijk duidelijke video’s heb je gemaakt. Ik heb m’n hele website vernieuwd m.b.v. jouw video’s. Inmiddels is het ook gelukt om anker links op een pagina toe te voegen. Nu vraag ik mij af; kun je ook een anker link naar een andere pagina gebruiken? Dus linken naar een specifiek deel van een andere pagina? En zo ja, heb je daar een video over? Ontzettend bedankt!
    Met vriendelijke groet,
    Annieke Otten
    http://www.lerenvanatotz.nl

  • Hallo,
    Ik heb via jouw fantastische youtube handleiding een website gemaakt met phlox en elementor. Na meer dan anderhalf wil ik graag updaten naar elementor pro en liefst vandaaruit alles beheren (dus zonder phlox)…Is dit mogelijk ? En hoe kan ik de website aanpassen in een soort demoversie alvorens alles online gaat ?
    Alvast bedankt !
    Solange

  • Hoi Ferdy, bedankt voor je heldere uitlegvideo’s. Inmiddels ben ik al behoorlijk ver op weg met mijn nieuwe website. Echter merk ik dat mijn call to action niet werkt. Tenminste wanneer ik hem test. Er wordt wel aangegeven dat het succesvol is verzonden, maar ik krijg niets binnen op zowel mijn zakelijke als privé mail. Heb al meerdere video’s bekeken maar nergens wordt ingegaan op dit mogelijke probleem of wat je in de instellingen juist moet hebben.
    Is het zo dat wanneer een call to action element (blok) toevoegt aan je pagina deze al gelijk werkt? Of moet je achter de schermen in WordPress nog het e.e.a. instellen?

    Ik werk aan een nieuwe site en hebben een subdomein aangemaakt. Misschien ligt het daaraan?

    Gr,
    Geoffrey Müller

  • 2020-05-27 01:24:00

    Hello there Ferdy, Ric from Mexico again. So thanks to you Ive learned to make a site using Astra and Elementor :). I even was able to provide some help to someone else handling their Avada theme and Fusion builder, so now I want to start a side business doing so….the question for you is what do you recommend (in terms of investing)?…
    a) using astra free with elementro pro?
    b)bundle elementor pro buying astra pro as well?
    c) going for another option such as Avada or Divi’

    Thanks in advance for your response and for all your marvelous work¡¡¡ regards

    Ricardo Loya

  • Hello Ferdy, thank you very much for your nice tutorial, I have a question, can I show random pop up on my page?

    But I mean like if I show X I don’t show Y?

    Thank you

  • 2020-03-16 01:41:46

    Hello Ferdy,
    I just purchased Elementor Pro using your affiliate link.

    Morris

  • 2020-01-25 20:28:50

    Hi Ferdy,

    I have been following you for couple of years, all you tutorials are really amazing..
    Need your help in designing a Single page blog template such as the one below
    https://oceanwp.org/blog/wordpress-performance-tips-everyday-user/

    Hope you consider the request and fulfill the same…

    Regards,

    Vishal Mukherjee

  • Hallo Ferdy,
    Sinds oktober is mijn website operatief. Met dank aan jouw instructiefilms op youtube die ik wel 50 keer heb bekeken!!
    Het is slechts een kleine website, bedoeld om ons vakantiehuis te tonen aan vrienden van vrienden, maar wel met een kleine blog.

    Gaandeweg is er een probleem met (de gratis versie van) Elementor gebleken. Na publicatie van een blogpagina (niet de startpagina) blijkt benadering van de pagina niet meer mogelijk. De inhoud is niet op de pagina gevonden en ik moet de “the_content”-functie aanroepen in de huidige template, waarna Elementor weer zou werken.
    Ook wordt gesproken over het inschakelen van de veilige modus, en/of over het toevoegen van code’s op de paginasjabloon, t.w.
    Ik ben net met pensioen en dus geen whizz-kid….op zich geen excuus, maar ik ben de weg kwijt.
    Enig idee wat te doen?

  • 2019-10-28 18:16:06

    Hi Ferdy,

    Bedankt voor alle duidelijke informatie. Erg interessant en zeker een aanbeveling voor iedereen die start met het maken van een eigen webpagina. Daarnaast vind ik Elementor erg handig in gebruik. Elementor heeft voor mij gezorgd voor dat extra zetje om eindelijk eens te gaan starten met een eigen website.

    Na het volgen van de tutorial, mis ik enkele widgets zoals de sticky header, het delen van berichten via social media, het interactief kunnen reageren door bezoekers op blog berichten en voornamelijk het aanmaken van een poll. Kun jij mij vertellen of Elementor pro een uitkomst biedt voor al deze toevoegingen of heb jij tips (widgets) waardoor deze opties mogelijk kunnen zijn op mijn eigen website? Graag hoor ik van je. Alvast bedankt

    Groet,

    Thomas

  • Hi Ferdy,
    Ik heb reeds een cursus van jou gevolgd via Soofos. Het heeft me aangezet om zelf een website te maken. https://asombrosa.net
    Ik heb Elementor pro geïnstalleerd maar ik krijg mijn pop ups niet geïnstalleerd. (foutmelding: Sorry het inhoudgebied is niet op je pagina gevonden). Ook in mijn bibliotheek van Elemontor staan geen pop up templates staan. Kan jij mij een tip geven hoe ik dat kan optimaliseren?
    In afwachting
    Van Dyck Etienne
    P.S. Indien jij gaat een cursus mocht hebben over deze, wil ik die zeker volgen, al dan niet tegen betaling.

  • 2019-09-19 11:22:13

    Hello,

    I just started taking the Complete WordPress Course | Elementor on Udemy, and noticed that the resources link to all of the images you use for the course no longer exists. Is there a way to get a hold of the images?

    Thank you!

  • 2019-09-05 14:28:46

    Hi Ferdy,

    I see that Elementor has just released a new GYM template…and am having trouble downloading it….and would love a tutorial please showing us how to do it.

    Thank you for all of your amazing tutorials and I hope to see another one as mentioned above soon 🙂

    Regards,

    Tony

  • Goede middag Ferdy,

    Waarom heb ik jou niet eerder ontdekt?
    Mijn complementen aan je video’s en duidelijke uitleg voor het bouwen van een WPsite in Elementor. Ik ben voornemens de pro versie aan te schaffen alleen is het me niet helemaal duidelijk hoe het zit met de licenties. Er zijn drie varianten maar als meerdere sites maak voor verschillende personen (jaja je hebt me geïnspireerd) welke versie Pro adviseer je dan?
    Nogmaals bedankt dat je je kennis wil delen om andere, net zoals mijzelf, enthousiast te krijgen voor WordPress en het bouwen van een site. Ga zo door!!!!!

  • Hello Ferdy,
    I just wanted to say Thank You for your time and effort in all tutorials and examples shown.
    Greetings,
    Cristian

  • A
    2019-08-16 09:34:46

    Hi Edvaldo, this should work. You need to make your own portfolio items: https://www.youtube.com/watch?v=sJFL3iG1Xjk

  • 2019-08-15 15:01:51

    Hi Ferdy,
    Hope you are doing well!
    My problem is that I want to create a portfolio with elementor pro like on the video you made, I decided to download your templates, but when I import the portfolio json file it into my site it just show me the portfolio picture. Any idea on how to do it. THANKS IN ADVANCE!
    Kind regards,
    Edvaldo Neto

  • 2019-08-08 14:22:45

    Hi Ferdy,

    Mooie tutorials, en relaxed om naar te kijken. Je hebt me veel wijzer gemaakt! Maar ik heb ook een vraag. Ik probeer de header (met logo, nav menu) onzichtbaar te maken en wanneer ik met de muis bovenaan de pagina hover dat de header in komt sliden. Maar ik kom er niet uit. Heb je hier toevallig een tutorial voor of oplossing? wellicht met css?

    Alvast dank voor je reactie.

    Groet!

    Dave

  • A
    2019-08-05 13:01:33

    Thanks Joris! Ik weet geen gratis plugin voor dat. Ik gebruik Elementor Pro met Popups voor die functie.

  • Hoi Ferdie,

    Hele handige video’s maak je, geweldig! Ik heb ook een vraag. Welke gratis plugin adviseer jij als je na het klikken van een button de bezoek een contactformulier wil laten zien in een pop-up?

    Groet,
    Joris

  • A
    2019-07-09 15:59:27

    If I were you I would hire a coder for something like this.

  • Beste Ferdy,
    Ik ben bezig met een website in wordpress en een App op te zetten. Ik wil via mijn dashboard WordPress online een aantal rijdende taxi’s in google maps kunnen volgen voor veiligheid. Hoe kan ik dat via google realiseren en wat heb ik nodig van Google?

  • Beste Ferdy,
    Ik ben bezig met een website in wordpress en een App op te zetten. Ik wil via mijn dashboard WordPress online een aantal rijdende taxi’s in google maps kunnen volgen voor veiligheid. Hoe kan ik dat via google realiseren en wat heb ik nodig van Google?

  • 2019-07-03 11:59:43

    Hartelijk dank Ferdy!

  • A
    2019-07-03 08:36:46

    Ha Sofie, je kunt de website opnieuw maken. Je kan een kopie van je website op ketocoaching.be/nieuw zetten en de website dan opnieuw maken met Elementor. Daarna zet je de nieuwe website terug op ketocoaching.be. Deze plugin is daar handig voor: https://www.youtube.com/watch?v=R3HIekyBx-8

  • Beste Ferdy,
    wat vind ik het jammer dat ik jouw site and tutorials niet eerder ontdekt heb. Ik heb een volledige website die me maanden hard werk en veel geld gekost heeft en ook al staat hij online, hij is nog niet klaar. Ik werk met WP bakkery en vroeg me af of er een mogelijkheid is om de website te ‘herbouwen’ zodat ik met elementor (pro) kan werken, maar wel mijn thema behouden.
    Ik hoor het graag!
    Bedankt!

  • bkunle22@gmail.com
    Yes, thank you, I we like to use te template as well

  • bkunle22@gmail.com
    Yes, thank you, I we like to use te template as well

  • A
    2019-06-11 13:20:13

    Hi Bert, you probably installed Elementor as a theme, but you should install it as a plugin. Goodluck! 🙂

  • A
    2019-06-11 13:19:11

    Hi Paul, you can also make use of all the other templates on the website. Katka also has great Elementor templates.

  • 2019-06-11 13:00:56

    Beste Ferdy,

    Mijn naam is paul van Coblijn.
    Ik wil een website bouwen met elementor en ik heb jouw templates bekeken.
    Mijn oog is gevallen op de template Media 3 blauw.

    Ik wil namelijk naast mijn normale werk huizen gaan verhuren in het buitenland. Ik ben niet bedrijfsmatig bezig.
    Heb jij andere templates die je kan aanbevelen?

    Alvast bedankt

    Groeten

    Paul

  • Hoi Ferdy, ben op dit moment bezig jouw instructies te volgen en hoop eindelijk mijn website voor elkaar te krijgen. Ben op 33.10min van jouw tutorial en ben bezig om elementor te installeren maar helaas verder kom ik niet want een foutmelding wordt gegeven tijdens installatie (Het pakket kan niet geïnstalleerd worden. Het thema heeft geen style.css stylesheet.) en dan ben ik als 67 jarige dacht ik nog wel redelijk bij gebleven maar dit gaat mij boven de pet.

Leave your comment

FERDY.COM
TUTORIALS

Learn step by step how to create a WordPress website for your business, organisation or hobby. Thanks to Ferdy’s video tutorials and simple way of explaining things, you don’t have to hire an expensive web designer and wait months before your website is finished.

With Ferdy’s WordPress tutorials, you are in charge of the progress and you save yourself a ton of money. Don’t have a domain and web hosting yet? No problem. Ferdy shows in you in each tutorial how to get web hosting and a free domain.