To adjust the hover color of your div blocks and the outline color of your entire page in Webflow's grid layout, you would need to modify the CSS properties using Webflow's Designer or custom code.
1. Changing the hover color for div blocks:
To change the hover color, you can follow these steps:
a. Select the div block you want to modify.
b. In the Style panel, scroll down to the "States" section.
c. Click on the "+ New State" button and select "Hover" from the dropdown.
d. Now, all the styling options you modify will apply when hovering over the div block.
e. In the "Background" section, you can change the color to red or any other color you prefer.
2. Adjusting the outline color for the entire page:
To modify the outline color of the entire page, you will need to add custom code to Webflow.
a. Click on the "Page Settings" icon located at the top of the Navigator panel or press "P" on your keyboard.
b. In the "Head Code" section, you can add the following CSS code:
```css
```
This code sets the outline of the body element to a 2-pixel solid red line. You can modify the color, size, and style (dotted, dashed, etc.) to match your requirements.
c. Save your changes and publish your site for the changes to take effect.
By following these steps, you should be able to adjust the hover color of div blocks and the outline color for the entire page in Webflow's grid layout.