Two Wix Code tutorials at once !!! Color change with On Click Event and specifications
with On Mouse In and On Mouse Out. Here we go...
Hello people, how are you? Today I'm going to show you how to make
this color change effect with click, a very cool and super simple
feature to run on Wix Code.
Another very cool feature is Hover Effect, which is also useful for many applications.
You hover over reference points and it shows a contextual box
with additional information about your product, or any item on the pages of your site.
And let's speed up because today are 2 tutorials in a single video...
As you all know, this is the conventional Wix editor.
I put here a logo to represent my product, below a title for the user
to know what it is and below the name of the colors.
I will show you how I edited the layers in Photoshop by making the color differentiation of
the same product.
Then I saved each layer in a PNG file (with transparent background), keeping the same
size in all images: 800x400 pixels.
The idea is this, identical images with varying colors in some details...
For this to happen I will include some buttons above these names to make it more intuitive
for the user.
Always remember to enable Developer Tools when using codes
on your site.
Click here, enable the Toolbar too because we're going to need it...
After this entire preparation, we will add the images of the product, you already know
the way...
In your library, after uploading, select the images in the order you want
to add.
That way you already leave the positions organized, I start with the white, then
the yellow, red, blue and black.
With the images added, attach one at a time within a track in the same position:
190x290 pixels.
After that rename the "ID's" of all the images to have more control at the time of
writing the codes, this one of white color I will rename with "1050RSWhite".
I do the same with the other images, attach within the range in the same position, rename
the "ID's" and from the second image enable "Hidden On Load" in the Wix Code
properties box.
You must hide the overlapping images so that only the first one (white) appears
when the page loads.
Do the same procedure on the other images, attach in the same position, rename the "ID's"
in the Wix Code properties box and enable "Hidden On Load" on all of them.
Once finished, your overlapping images will look strange due to
the opacity of the "Hidden On Load" feature, it is normal...
The title below is a simple text to induce the user to perform the color change
and now in this space we will include the buttons to give action to the color exchange...
Click Add / Button / Icon Buttons...
Drag into the strip and set the size as you've saved in your image editor,
position it so it's aligned horizontally or vertically, will depend on your
layout.
The button I am going to use is this one in the preview, I drew 5 buttons in "normal state" and
5 buttons in "hover state".
To change the appearance just click on "Change Icon" and change the images in the 3
options: Normal, When Hovering and Clicking.
We start with the white color obviously, after changing the appearance do not forget to add
a Tooltip to the Button.
With the layout of the first button finished, do not forget to rename the "ID" of the
icon button in the Wix Code properties box.
Choose a distinguished name as it will be used in your line of code
Then duplicate the first button and do the same, change the images, add
a Tooltip in the button configuration box and rename all the "ID's".
In Preview, your buttons should look like this when hovering
over and logically, only the first image (the white one), which will appear
because the rest are "Hidden On Load" enabled.
Going back to the editor, it's time to put code on the page.
Open the code page in the lower right corner of the browser and to give
"Click Event" action is very easy:
Select the first button (white) and in the Wix Code properties box, click
the [+] button in the "onClick:" event.
Add the letters [o and n], after the "underline" and before the "click"
A line of code has been added below in the "Page" tab, the next step is to give action
to the "Event" added.
I begin by clearing the references of the "Event" between the parentheses and in the comments area
I write:
"$" followed by the letter "w" and between brackets press keys; [Control + Spacebar]
and select the corresponding object, in this case my white motorcycle.
I add a point and choose the action that is "show", delete the option of animation and closing
with [ ; ].
I duplicate this same line of code 4 times, copying and pasting and rename
the items according to the ID's of the images.
Then change the action according to the corresponding "Event", hiding the other items
with "hide".
Do the same with the other buttons, select, check the "ID's" and add the
event by clicking on the [+] button of the "onClick".
Enter the lowercase [o and n] letters and edit the event in the code window according to
its action button.
Make a copy of the previous codes and change only action, which is to hide the first
image and show the second one.
Repeat the same procedure for the other buttons by copying and pasting the codes after
manually adding the event.
Just follow the order to hide and show the items respectively that does not give error...
Lastly, save and publish your site. Make sure everything is working properly
by clicking the buttons and check that the color change is taking place as expected.
Take advantage of that and check the code before closing your browser, if everything
is ok, click Publish again...
Quiet to do, do not you think? What else gives work is the preparation
of the images, I could make this video using simple objects, it would last for about
2 minutes, but when the design is bad, it messes up the code.
There is more, hold on... Let's go Technical Specifications now !
As you can see, it's just a page with a logo and text inside a strip...
What we will need initially is to add 2 images, the bike in a single color
in its original size, 800x400 pixels, positioned strategically and with its due "ID"...
After adding another image with dots in specific places, is nothing more than
a Photoshop layer, I'll show you how I did...
I added points in strategic locations above the product image and saved in PNG with transparent
background.
Returning to the Wix editor, I named this image with its "ID".
Even when it is not necessary, get into the habit of identifying objects...
The next step is to add the boxes where the descriptive texts will be allocated.
Then attach the texts inside the boxes and edit them according to their layout and presentation.
Align the two objects and position them on the page...
Duplicate the box with the attached text and edit the other specifications according to the need
of your presentation.
Remembering that these text boxes will only appear when you hover over the specific points,
then make the best possible distribution so that it does not compromise your
layout.
The next step is to add rows that make the connection between landmarks
and text boxes. Go to Add / Shape / Lines and drag to your strip.
Click the element angle button and drag until you find a favorable position
to link the waypoint to the text box. Then adjust the length
of the line between the two elements.
Duplicate the line and do the same procedure with the other boxes and reference points,
set the angle and distance between elements for all other specifications...
Once finished, group the text boxes with the lines.
Name the groups in the Wix Code properties box, choose distinguished names
as they will be used in the lines of code.
Layout set, it's time to add the Container Boxes, go to:
Add / Box / Boxes Containers and drag one of the boxes to attach to your
layout. Set an appropriate size to add
your link...
Then duplicate the added box and position above all landmarks.
Do not forget to click on "Change Design" and "Personalize" so that your Container Box is
completely transparent, as the On Mouse In and On Mouse Out effect will be triggered
from these boxes.
Rename your Container Box in the "ID" field there in the Wix Code properties box and
repeat the process of customizing all other boxes.
In this video I am only demonstrating 3 examples, but in the site you will be able to check
the functionality of all other reference points in full operation.
The link is in the description...
It's time to add code to our layout. The first step is to enable "Hidden on
Load" in all grouped text boxes.
If you need to use the same space to add other boxes, add more boxes on top
and enable "Hidden on Load" simultaneously.
To give effect to our layout, select the container box, do not enable "Hidden
on Load" because the element already has the transparency properties.
Click the [+] button of the Event "onMouseIn" and add the letters [o and n] just after the
"underline" and before the word "mouseIn".
Do the same in the Event "onMouseOut", add the letters [o and n] after the "underline".
2 events have been added in our codepage, we will edit the lines according
to our need.
Delete the suggestions within the parentheses and write the code in the comments;
Start with: "$ + w" and enter the parentheses [Control + Spacebar] to select
the corresponding element.
Then type "." And choose "show" followed by "()" and ";".
Copy the line of code and paste in the event "onmouseOut", changing only the action from
"show" to "hide".
Click Preview and test your code.
If everything is OK, repeat the procedure by adding the events from the Container
Boxes inside the Wix Code properties box.
Then edit the code by copying and pasting the previously edited lines and just
rename the groups within the line of code.
Repeat this procedure for each specification added on your page and you will get a
result like this...
Very easy... For you who are starting now in the world
of programming, I will leave the link with the information to follow you and implement
these codes in your Wix website.
Do not forget to subscribe to the channel, like in the video and follow me there in social links.
Strength and honor !!!
No comments:
Post a Comment