Hi there folks, all right?
Today I'm going to show you how to make a custom menu in Wix.
Subtitle in Scroll with Fade, has a little bit of code only.
Well cool, check it out...
Folks, this effect of showing the Submenu at the time you scroll the page
can be very useful when the content of the page is very extensive, so the user will
always have the reference of the title, regardless of the content that he is viewing.
I made this custom menu in Photoshop, it's quite simple, it's just two background images
where I separated a space for my logo with the symbol and the writing.
Above I have the main menu of Wix with five pages and below a background image with
a text that could also be links to a Submenu, but I decided to make an example
of page title.
This Menu background image with a custom clipping was saved in a new document,
where I expanded the sides and centralized the menu area to fit the center of
the header there in the Wix editor.
I also saved the other Submenu image with custom clipping to fit
the main header image.
The size was 665 pixels wide by 23 pixels high.
Already the background image of the header, is 3000 pixels wide by 75 pixels high.
Going back to our page, you can see that the background image was applied as
background in a banner in the header.
I'll leave the description of the elements used on the site page for you to check
and the code is also obvious...
For those who do not yet know, when using codes on your site, enable the
Developer Tools, inside the Tools Menu, up in the editor.
Also enable the Toolbar, you will need it...
First thing, organization.
You must name all the elements that will be submitted to the code action.
Click on the objects and use the Properties box to name the text and image of the Submenu.
Sizes must be exact, as you've saved in your image editor, and the text box
should also follow a pattern, so the text is centered on all pages.
The Anchor also needs to be named in the Properties box, otherwise it will have no
effect on the code and the height is up to you to determine, I leave the action at 120 pixels
high in Scroll.
For example, when the user scrolls and the Anchor line runs through the top of the browser,
the Page Title appears replacing what was hidden in the scrolling from
the lines of code...
Enough to demonstrate, let's go to action!
On this page I have already added the text, which will be the title of the page and the background image.
Check the Properties box if the element names are the same...
The background image of the Main Menu, the one we saved separated there in Photoshop,
was added in a full width range within the header.
The opacity I left with 85%, but you can leave without any transparency and the color
behind the image at 0%, totally opaque.
On top of this range there are only 3 other objects, the Logo, the Writing and the Main Menu.
The image of the Submenu, that one in Photoshop, added at the top of the page with
the text above.
And we go to the effect of Show and Hide with Fade...
You will need the background image along with the text on all pages, select
the 2 elements with the Shift key pressed, copy with [CTRL or CMD + C], scroll to the other
pages and paste with [CTRL or CMD + V].
Do this on every page of your site, as the code action is independent for
each page, you will need to paste the elements on every page.
The first action is: Click the image, check the ID and enable
the "Hidden on Load" in the Properties Box.
You will do the same thing with the text, check the ID and enable "Hidden on Load"
so that these elements do not appear when the page loads in the user's browser.
With the elements "hidden", you will select the image, right-click
and select: Fixed Position with "Show in All
Pages" disabled.
Select the "Central Top" area and edit the values until your image fits, as
I have done before, I have the values recorded...
Image fixed in the header with "Hidden on Load" option.
The same for the text: Select, right click, check if
Show on All Pages is disabled, and then click Fixed Position.
Select the "Top Center" area and edit the values until you center the text box
on the background image.
The first adjustment may take a while, so just save the values and apply on all
pages.
"ID" and "Hidden on Load" checked, just do the same procedure on all other
pages.
Remembering that this effect can also be applied to specific pages and sessions
of your site.
Those I mentioned there at the beginning of the video, which has a long content and can not
be without the title reference.
That way you improve your site's "UX", which improves the User
Experience, which stays for longer on your pages.
As a result, this permanence will make your site rise some of
the Google rankings.
With all the layout ready, it's time to add the Anchors.
Go to [Add], [More], [Anchor].
Click and drag to the top of your page.
You can rename it for identification purposes.
Choose a height and set the ID of your Anchor in the Properties box equal to the name in
the code.
I chose "anchorsubtitle", you can name as you want, as long as the name is identical
to the one used in the code and is case sensitive.
The next step is to add the events to the Anchor that will run when it exits
and enters the visible part of the browser.
Click the [+] button, and edit the event by adding the letters [on], then the "Underline" and before
the "viewportEnter".
The same will be done in the event below, add the letters [on], after the "Underline" and before
the "viewportLeave".
Note that 2 lines of code have been added to the Page Tab within the Code Window.
Copy the sample code from the page and paste overwriting the previous...
If all the elements in the site are correct, the effect is ready.
Publish your site and view...
Then just repeat the same Anchor process on every page and you'll have a custom menu.
custom menu.
They saw that the process is very easy, is not it?
Just handle a little Photoshop just and code on every page, do not put
code on the site, otherwise it does not work.
That's why we can repeat the elements with the same name on every page.
That's right!
That's it, next week there's more.
Strength and Honor !!!
No comments:
Post a Comment