Supposedly you are a complete beginner with Layer Magic or similar tools, here is step by step how to get started:
1) Open your WordPress website and go to dashboard, where you will find Layer Magic in the menu. Open it.
You will enter the Home page of Layer Magic.
2) Layer Magic tutorials should appear by default. Read them carefully.
3) Click on the "Library" button on top and open the Library page.
Another tutorial should appear. Read it also.
4) By now, you should have a basic idea how to navigate Layer Magic editor, based on the tutorials.
Click the "+" button in Projects tab and create your first project. You can change its name later.
5) When you create a new project, Builder page will open automatically.
A new tutorial should appear. Read it also.
6) By now you should guess what the next step is.
Click the "Create new layer" button to create a new layer. You can also change its name later.
7) By default, the asset library should open as a popup and ask you to select an asset.
You probably have no asset in there yet. Click the "+" and upload an image from your computer.
8) Once uploaded, you should see your image in the library. Select it and click "Open" button.
You should now have your first layer with your image on it.
At this point you should see your image 3 times: on the layer, in the asset preview and in the viewport preview.
9) It is time to create some animations. Go to timeline panel and select "Mouse X" tab.
You are now working on the x axis of mouse movement.
10) Go to layer properties panel and look for "Position", which should have the value (0, 0).
Go back to timeline panel and click on the -100% step. The focus line (red line) will jump there.
You are now ready to set the position for the layer at key -100%.
11) Set the position to (-1000, 0) and a key-frame should appear at the -100% step.
Then go to step 100% and set position to (1000, 0).
12) Lets test the result. Move your mouse into the viewport area (top-right corner).
It will be highlighted once your mouse is inside. If you move left to right, you should see your image moving as well.
This is how you create animations.
13) Lets make the project a bit more interesting. Go to hierarchy panel (left side) and click "Create new layer".
Select a name and then upload a new image. Open it and you should have two layers, one on top of the other.
You can move the layers around and change their order if you like.
14) Select the new layer and its properties will be highlighted. Look for "Rotation".
Click the "Scroll" timeline tab. You are now working on the scroll animation.
15) Set the focus line to 0% step and then set the value of rotation to -180 (degrees).
Then move the focus line to 100% and set the rotation to 180.
16) Lets test it. Move your mouse inside the viewport preview area and start scrolling.
You should see your second image rotating. If you move your mouse, you should also see your first image moving.
This is how you create complex animations.
17) You can now play around with the other layer properties and other editor buttons.
For example, if you click on the buttons from the left side of viewport area you can disable certain timelines.
That action only applies in the editor, for testing purposes, it will not affect your website.
18) Once you are ready, lets move further. Click the "Viewport" tab from Builder page.
It should show you another tutorial. Read it.
19) Here you can test your project directly on your website.
But first, you must add the project to your website. Click the project name (top-right corner) to copy the shortcode.
Go to a page on your website and paste it there.
20) Copy the url of that page and paste it in the "Page url" field in editor, Viewport tab.
You should now see your website page inside the editor, as well as your project.
It might be the case that you do not see it. And here is when the things get a bit more complicated.
21) Whether you managed to make your project visible on your website or not, depends on two important factors:
- where exactly you place the shortcode on your website
- what settings you have in the Viewport tab of Layer Magic
22) By default, if you place the shortcode in a page or a post, you should see your project set as background to that.
You can change all of these settings in the "Display" part of viewport properties panel.
You will have to play with them to get the result you want.
The settings will be different depending on how your website is constructed, so no tutorial can give you a direct answer.
23) Once you have managed to make your project visible on your website, you can use the Builder > Viewport tab to test it in real time.
If you go back to Library page, you will see your new project there, along with your images as assets.
You can reuse the assets for any number of projects.
Play around with all the settings there and see what you can obtain.
For certain features (like placeholder or mobile substitute) you will need more than one project.
24) This concludes the "getting started - step by step" guide. It is now up to you to unleash and use the power of Layer Magic.