Default browser arrows are rarely inspiring. For a cohesive design, you need navigation arrows that match your brand’s color, size, and style.

To solve this, use Div Render Container Slider for Elementor.

Step 1: Enabling Navigation

In the slider settings (Layout tab of Parent Container), toggle Navigation to “Yes”.
This will output the standard arrows (usually blue or gray) inside the container.

Step 2: Styling the Arrows

Navigate to the Style tab of the Elementor Container settings. Look for the “Slider Navigation” section.

  • Icon Color: Change the arrow icon color (e.g., White).
  • Background Color: Add a circle behind the arrow (e.g., Black).
  • Border Radius: Set to 50% for circular buttons or 0 for squares.
  • Size: Adjust the size of the icon and the padding around it.

Pro Tips for Arrows

  • Position: By default, arrows are vertically centered. You can often adjust their horizontal position (offset) in the Style tab to move them outside the container or tighter to the edge.
  • Hover State: Don’t forget to set a specific Hover color to give users visual feedback when they are about to click.