Tools

What 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 to keep in mind is that you can apply two methods, without code and using code, these methods will be explained to you below.

How to do 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 to you step by step:

  • First, go to the home page at WordPress.org.
  • On the desktop search for “Plugin” and click on “Add new”, in the search field copy “Parallax “. You will have a great variety as a result, 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 configuration 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 in a list the one you just created. There, copy the data that appears under the item “Shortcode”.
  • Open your home page and select the “Edit page” option.
  • Locate the site of your page where you want your Parallax to appear, then paste the “Shortcode” that you just copied in the previous step.
  • Finally, click on “Update” so that the changes are applied to your home page.
  • Select in the WordPress menu “Visit Site” 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 relevant modifications.

add wordpress code

How to do the parallax effect using code

You may think that creating this effect using code 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 deactivate 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 site where you want your Parallax to appear. There you will place the following:

<div class = “Parallax Name”>

<h1> Parallax Title </h1>

</div>

thml commands

  • As you can see, you must assign the name to your Parallax and the “h1” of it. Then 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 its 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 into the code field:

.miparallax {

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

width: 100%;

height: 300%;

overflow: hidden;

background-attachment: fixed;

background-size: 100%;

}

.miparallax h1 {

color: #fff;

text-align; center;

margin-top: 130px;

}

customize wordpress command

That is how simple you can do the Parallax Effect through WordPress, follow our page to know what other techniques and resources you can learn how to do it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button