Today it is very common to use the Parallax Effect in the design of web pages, this makes it more dynamic and attractive. That is why in this blog we will explain what it is and how to make a Parallax effect in WordPress.

The Parallax effect is the one that is applied to the design of a web page and is activated by the scroll lock key. It consists of causing movement to the background image of the page, doing it differently from the rest of the content. It is also about adding depth to the design, making it interesting and attractive to the user.

Now that you know what a parallax effect is, we will explain how you can do it using WordPress. The first thing you should keep in mind is that you can apply two methods, without code and using code, we will explain these methods below.

How to make the parallax effect without code in WordPress

Applying a parallax effect to your web design is totally simple without applying codes. Next, we explain it step by step:

• First, go to the home page on WordPress.org.
• On the desktop search for “Plugin” and click on “Add new”, in the search field copy “Parallax”. You will have as a result a great variety, choose the one that is most suitable for you, install and activate it.
• Once installed, “Parallax scroll” will appear on the left side of the desktop, enter there and add a new one, place the title you want. In the content field you will get two tabs: “Visual” and “HTML”. For this case select “Visual”.
• In this content field you can enter the text you want your Parallax to have. You can apply the typical text settings that WordPress offers.
• Then, assign a “Featured Image”; We recommend an image that has a good resolution, for example, 2000 x 1000 pixels.
• Once the “Featured Image” is assigned, go to the bottom, where you can configure the Parallax effect. You can modify the size, position, speed and other options.
• With this, what you should do is go to the upper right and select “Publish”.
• Then go to the desktop menu and select Parallax Scroll again, it will show you the one you just created in a list. There, copy the data that appears under the “Shortcode” item.
• Open your home page and select the “Edit page” option.
• Locate the place on your page where you want your Parallax to appear, then paste the “Shortcode” you just copied in the previous step.
• To finish, select “Update” so that the changes are applied to your home page.
• Select “Visit Site” in the WordPress menu and you will see the Parallax effect on your page.
• If you want to make any changes you can do so by going back to the WordPress dashboard menu. In Parallax Scroll you can locate the one you just created again and make the necessary modifications.

How to make the parallax effect using code

You may think that creating this effect using codes is complicated, but it is not. Pay close attention to this simple procedure, which you can do from the classic WordPress editor.

• The first thing you have to do is remove the Shortcode that you just placed when editing your home page. Also, you must disable the Parallax that you installed, in the Plugins menu.
• Open the page or article you want to add a Parallax effect to.
• In the content field locate the tab for “HTML” language.
• Locate the place where you want your Parallax to appear. There you will place the following:

• As you can see, you must assign the name to your Parallax and the “h1” of it. Next, click update.
• Then to configure all the features we have to add additional CCS elements. There we can add the image, using its url, as well as adjust size and position.
• In the same way we can configure the letters of the Parallax, size, color and position. We will do all this by copying the following in the code field:

.myparallax {

background-image: URL(http://….jpg);

width:100%;

height:300%;

overflow:hidden;

background-attachment:fixed;

background-size:100%;

}

.myparallax h1{

color:#fff;

text-align;center;

margin-top:130px;

}

It’s that simple you can do the Parallax Effect through WordPress, follow our page to find out what other techniques and resources you can learn how it’s done.