Hover Effects in Elementor

Hover Effects

Elementor provides Hover Effects that help to increase and improve your website’s engagement and design interaction.

Hover effects can be applied at the WidgetColumn, and Section level, and can be combined to create unlimited effect variations.

Wherever you see the Normal and Hover buttons  , you have the option to add hover effects.

Mouse Effects in Elementor

Mouse Effects – Mouse Track

Set an element to move in relation to the visitor’s mouse movement.


Advanced or Style > Background

Motion Effects

  1. Mouse Effects: Slide to ON
  2. Mouse Track: Click pencil edit icon
    Direction: Choose from Opposite or Direct. Opposite will move the element in the opposite direction of the mouse movement. Direct will move the element in the same direction as the mouse movement.
    Speed: Set the speed from 0 to 10
  3. Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.

WP 1 slider


Documentation  | Demo

WP 1 slider – is probably the most feature-rich Free WordPress slider. While doing 1000s of WordPress website for different clients, we came across various slider requirements. From our learning – we made a slider with the most useful features, variety of layout and configuration options and here it is – WP 1 Slider!.

WP 1 Slider – is developed considering user friendliness, features, layout designs for various users.


  • Add unlimited amount of images to the slider.
  • Add unlimited sliders in one page.
  • Enable/disable buttons (with/without link) on the slider.
  • Separate slider settings for each slider.
  • Separate caption settings for each slider.
  • Four different caption layouts for each slider.
  • Separate pager setting (slider navigation pager) for each slider.
  • Four different dot pager(slider navigation pager) layouts for each slider.
  • Ten different thumbnails pager(slider navigation pager) layouts for each slider.
  • Separate navigation / Arrows setting for each slider (7 designs to choose from).
  • Two different box shadow for slider image.
  • Nine different positions for slider title and description within image.
  • Ability to change colors of title,description,buttons and button hover on slider image.
  • Ability to change font size of slider title and description on image.
  • Ability to change background color and active color of dot pager navigation on slider image.
  • Add unlimited sliders in widgets.
  • Slider is fully responsive.
  • Easy usage via Shortcode.




  1. Activate the plugin through the ‘Plugins’ menu in WordPress.
  2. For customizing the plugin’s settings, click on WP 1 Sliders option menu in WordPress left admin menu.
  3. To display the slider in the frontend, please use dynamically generated shortcode from shortcode WP1S Usage metabox or you can use ‘Add WP 1 slider’ button in post or page for easy insert of the slider into post/pages.


Slider Manager

Once the plugin is installed and activated you will find a menu named “WP 1 Slider” in the left menu bar of the admin menu.Once you click on that menu , you will be redirected to the plugin’s listing page and you will see the add new button, once you click on that button you will be redirected to the slider page where you can create slider. Basically there are 6 type of slider type with its own settings configurations which is individually described below.

Creating New slider

This is the landing page for plugin. Here you can see the listing of the slider created along with its respective shortcodes. Here you can see Add new button at top of slider listing table.For creating a new slider, you will simply need to click on the Add New submenu of the Wp 1 sliders menu or click on the Add new button in the slider manager’s listing table. You can also edit or delete slider from here.Once you click the button, you will be redirected to the new slider builder page where you can add the unlimited numbers of slides.

Slider Builder Page

Slider Builder Page

This is the builder page of plugin where you can add unlimited numbers of images ,post ,videos ,woocommerce product,facebook image or instagram images slides and build awesome slider.
In this page you will see Slides metabox inside this metabox you will see the Slider type option which include image slide,video slide,post slide,woocommerce slide,instagram slide and facebook slide option.
Below are the detail description for each slide type.

Creating Image Slider

Once you have selected the image slide in Slider Type option then you will see the Slider mode for image slide option , inside this option you can select either normal mode or animation mode.If you want to create simple slider then you can choose normal mode and if you want to have animation effects and layers in slider then you have to choose the animation mode.You will also see the Add Image Slide button from where you can add unlimited number of image slides.Below are the detail description for these two mode:

    • Normal Mode

Normal Mode

After selecting the normal mode, you can click on the ‘Add Image Slide‘ button then you will see the untitled slide.Once you click in untitled slide a slide box will appear where you can add the available input fields in the slide. You can see all the available fields in the slide box as shown above in the image. You can enable or disable the buttons and can give text and link for button.

General Settings

Just below the Slides Metabox ,you will see Slider Style option which include Single Slide Layout and Carousel Slide Layout.These two option include different settings configurations.
Below are the detail description for each slide style:

      • Single Slide Layout

General Setting

When you will select the single slide layout then the Slider settings,Caption settings,Pager Settings,Navigation arrows settings will appear where you can switch the tab by clicking on each setting tab to go to respective setting tab and can edit the way you want to display slider by changing your own setting options.
We have following feature available in our current version to choose from:

        • Slider Settings:

Slider Setting

Allows you to choose either display slider box shadow or not and allow you to choose shadow box types template.

        • Caption Settings:

Caption Setting

Allows you to choose four different caption types option with its respective title font size, title font color,description font color and size,button color,background color,border color and caption position settings.

        • Pager Settings:

Pager Settings

Allows you to choose either display dot pager or thumbnail pager or pagination pager or disable the pager.

Parallax in Gutenberg

What is Parallax?

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.

Setting up Parallax in Gutenberg editor

  1. open the Page you want to add the Parallax to.
  2. Click the check icon to add a new block.
  3. in the search bar search for ‘Cover’
  4. select the ‘Cover’ block.
  5. Upload or select the image you want to use for the Parallax.
  6. Click on ‘Block’ on the menu on the right side of the screen.
  7. Check the ‘Fixed Background’ button under ‘Cover Settings’
  8. Change the ‘Background Opacity to what ever setting you would like (the higher you change this, the darker the image will be.)
  9. Click on the image and write the text that you want.
  10. If you want the Parallax to take up the whole screen of the page, you can select the ‘Full width’ option above the block.