Is it possible to remove the visible link block behind when clicking on a link in the tablet/mobile version of Webflow for a cleaner user experience?

Published on
September 22, 2023

Yes, it is possible to remove the visible link block behind when clicking on a link in the tablet/mobile version of Webflow. Here are the steps to achieve a cleaner user experience:

  1. Select the link block that you want to modify in the tablet or mobile version.
  2. In the Style panel, click on the "Effects" tab.
  3. Under the "Interaction States" section, you will see options for different states of the link block, such as "Normal", "Hover", "Pressed", and "Focused".
  4. Click on the "Pressed" state.
  5. By default, Webflow adds a "Box Shadow" effect when the link is pressed. To remove this effect, simply click on the "Add new" button under "Box Shadow" and change the values to "0" for both horizontal and vertical offset, and "0" for the blur radius.
  6. Additionally, you can modify other properties such as the background color, text color, or any other style properties to customize the appearance of the link when it is pressed.
  7. Repeat the steps above for any other link blocks that you want to modify.

By removing the visible link block behind when clicking on a link in the tablet/mobile version, you can create a cleaner and more visually appealing user experience.

Additional Tips:

  • Make sure to preview your changes in the tablet and mobile breakpoints to ensure that the link styling looks consistent across different devices.
  • You can also apply similar modifications to other interaction states such as "Hover" or "Focused" to further enhance the user experience.

Example:

Here's an example of how you can remove the visible link block behind when clicking on a link in the tablet/mobile version of Webflow:

  1. Select the link block.
  2. Go to the Style panel and click on the "Effects" tab.
  3. Under "Interaction States", click on the "Pressed" state.
  4. Remove the default "Box Shadow" effect by changing the values to "0" for both horizontal and vertical offset, and "0" for the blur radius.
  5. Customize other style properties as desired.

Note: The above steps are applicable for the tablet and mobile versions of Webflow only. You can follow similar steps for the desktop version if needed.