Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

When people find your website and want to
know more about you, they usually do it using mobile devices such as smartphones, instead
of tablets or personal computers. With that being said, what if you put a simple
call to action to the bottom of each section, which would be well optimized for any screen
size. People can use those buttons to jump to the
next section, and then to the next one until the last step of their journey, which would
be to contact you. Hi, WordPress enthusiast and welcome to our
channel. My name is Robert and in this video, I will
show you how to use the anchor widget of Elementor to create a step by step navigation, like
this, for a one-page website.

Moreover, I will optimize the entire process
for mobile devices so people can click next to see the following service without losing
any important information on your website. You can do this for pages created with Elementor,
from scratch, but it can be implemented on imported content like full website demos and
ready-made templates too. This is a custom one-page website with 5 sections. Sure, people can swipe down or up to navigate
but they can easily miss out important things so it would be much better if they can click
on a call to action to go to the next step. For this purpose, you would have to add a
button to the bottom of your first section which is your website's welcome screen.

It could be a simple text over a colored background
or a nice immersive hero section with a zooming slider and other effects like this. The button would say "show me more" or "next"
which people can click to go to the following section, and so on. To make that happen, you just have to pick
a word for the next section. More, for example. Go to the content tab of your button, and
in the link field, keep the hashtag and type in more, like so.

Then go-ahead to the section below, drag over
the anchor widget of Elementor and type in the same "more" word as the ID. This would be the CSS ID, without the hashtag,
this time. Just make sure you are using the same word. Let me click update and preview the page,
to see how it works. If I click on this button, it will bring me
to the following section.

You would have to add a spacer widget and
adjust some paddings to make sure the only thing shown on this page is the content of
this section. And of course, the call to action button that
brings people to the following section, and so on. To speed up the process, you can copy and
paste the button widget but keep in mind to change the anchor names and links. Ok. This is cool and works great for people using
big screens like a desktop PC or a Laptop.

How about mobile navigation?

Well, the only thing I would adjust is the
navigation through services or testimonials. I could use a slider widget which I can hide
on big screens but in this video, I'll just add more buttons. So, if I take a look at the desktop version,
there is a show me how button which will bring me to the following section, then I need to
click on how it works for the next section, testimonials, and finally, contact me. Maybe, I could add one more button for back
to top. To do that, copy the testimonials button,
and paste it below the social icons.

The link name should be hashtag home, and
to finish this, I need to drag over another anchor at the top of the first section and
name it home. Update the page and click preview, or just
simply click these buttons to test if everything works as it should. Cool. Now let me show you how to use buttons and
anchors, to navigate through these services. Copy the how it works button, paste it below
the camera animation, name it next and change the icon to an arrow pointing down.

Next, drag over an anchor widget above video,
which could have a simple number as the ID, 1 for example and remember to use the same
number in the link field of the button. Now go-ahead to the advanced tab and open
the responsive settings. Turn on hide on desktop and adjust its mobile
view size. Before doing that, make sure you switch to
mobile over here. As you can see, the button is an active element
now and you can go to the Style tab, adjust the typography size, and add some padding
below until it will perfectly fit the element above.

Now you can click next to see if it works. Sure it works when everything is set up correctly. For the following service, duplicate the same
button, replace the number in the link field, let's say 2 and then add on more anchor widget
to the last service. The ID of that anchor should be 2 Now if you click next, it will bring you right
to the last service and you can adjust the margin and padding values for each column
to make sure it will show up only one service at a time. Don't need to add more buttons because people
will see the "how it works" call to action which will bring them to the following section.

That's it Now you know how to create a one-page navigation
menu with anchors, for pages made with Elementor. If you are wondering what is this animation
and how you can create something similar, well its made using the PC to Phone animation
from lottiefiles.com Check out the video on the screen right now
to see how it's done. Keep up the good work and see you in the next
video. Cheers! .

Video Discription

When people find your website and want to know more about you, they usually do it using mobile devices such as smartphones, instead of tablets or personal computers.

With that being said, what if you put a simple call to action to the bottom of each section, which would be well optimized for any screen size.

People can use those buttons to jump to the next section, and then to the next one until the last step of their journey, which would be to contact you.

In this video, I will show you how to create a mobile responsive one page website navigation with menu anchor links using WordPress and Elementor.

Moreover, I will optimize the entire process for mobile devices so people can click next to see the following service without losing any important information on your website.

You can do this for pages created with Elementor, from scratch, but it can be implemented on imported content like full website demos and ready-made templates too.

This is a custom one-page website with 5 sections.

Sure, people can swipe down or up to navigate but they can easily miss out important things so it would be much better if they can click on a call to action to go to the next step.

For this purpose, you would have to add a button to the bottom of your first section which is your website's welcome screen.

It could be a simple text over a colored background or a nice immersive hero section with a zooming slider and other effects like this.

The button would say "show me more" or "next" which people can click to go to the following section, and so on.

To make that happen, you just have to pick a word for the next section.

More, for example.

Go to the content tab of your button, and in the link field, keep the hashtag and type in more, like so.

Then go-ahead to the section below, drag over the anchor widget of Elementor and type in the same "more" word as the ID.

This would be the CSS ID, without the hashtag, this time. Just make sure you are using the same word.

Let me click update and preview the page, to see how it works.

If I click on this button, it will bring me to the following section.

You would have to add a spacer widget and adjust some paddings to make sure the only thing shown on this page is the content of this section.

And of course, the call to action button that brings people to the following section, and so on.

To speed up the process, you can copy and paste the button widget but keep in mind to change the anchor names and links.

Ok.

This is cool and works great for people using big screens like a desktop PC or a Laptop.

How about mobile navigation?

Well, the only thing I would adjust is the navigation through services or testimonials.

I could use a slider widget which I can hide on big screens but in this video, I'll just add more buttons.

So, if I take a look at the desktop version, there is a show me how button which will bring me to the following section, then I need to click on how it works for the next section, testimonials, and finally, contact me.

Maybe, I could add one more button for back to top.

To do that, copy the testimonials button, and paste it below the social icons.

The link name should be hashtag home, and to finish this, I need to drag over another anchor at the top of the first section and name it home.

Update the page and click preview, or just simply click these buttons to test if everything works as it should.

Cool.

Now let me show you how to use buttons and anchors, to navigate through these services.

Copy the how it works button, paste it below the camera animation, name it next and change the icon to an arrow pointing down.

Next, drag over an anchor widget above video, which could have a simple number as the ID, 1 for example and remember to use the same number in the link field of the button.

Now go-ahead to the advanced tab and open the responsive settings.

Turn on hide on desktop and adjust its mobile view size.

Before doing that, make sure you switch to mobile over here.

As you can see, the button is an active element now and you can go to the Style tab, adjust the typography size, and add some padding below until it will perfectly fit the element above.

Now you can click next to see if it works.
Sure it works when everything is set up correctly.

For the following service, duplicate the same button, replace the number in the link field, let's say 2 and then add on more anchor widget to the last service.

The ID of that anchor should be 2

Now if you click next, it will bring you right to the last service and you can adjust the margin and padding values for each column to make sure it will show up only one service at a time.

Don't need to add more buttons because people will see the "how it works" call to action which will bring them to the following section.

That's it

Now you know how to create a one-page navigation menu with anchors, for pages made with Elementor.

#MenuAnchors #WordPress #Elementor

 

Leave a Reply