Blocksify responsive editing controls Desktop, Tablet, Mobile, and Hover Mode values from the block inspector. Use it while refining a Section, building your first page, or adapting Design Library patterns.
At a glance
| Where it lives | Inside the Blocksify block inspector, as its own device row. |
| Device buttons | Desktop, Tablet, Mobile, and the fourth icon button, Hover State. |
| Base view | Desktop is the base value for the design. |
| Inheritance | Tablet and Mobile inherit from the larger view until you override them. |
| Indicators | Dots show when a device or Hover Mode has its own value. |
What is responsive and hover editing?
Responsive and hover editing is the control set for how a selected Blocksify block changes across devices and interaction state. It is edited from Blocksify’s own inspector row, not from the WordPress top-bar preview menu.
Note: Use the WordPress top-bar preview to view the whole page. Use the Blocksify device row to edit the selected block’s responsive values.
How does inheritance work?
Desktop is the base design. Tablet and Mobile inherit from the larger view until you change a value for that device.
| View or state | How it gets a value |
| Desktop | Uses the base value you set for the block. |
| Tablet | Inherits from Desktop until Tablet has its own value. |
| Mobile | Inherits from Tablet when Tablet is set, or Desktop when Tablet is not set. |
| Hover Mode | Applies hover values across viewports. |
How do override dots help?
The device buttons show small dots when a view or state has a custom value. Use them as a quick audit before publishing.
- A Tablet dot means the selected block has at least one Tablet-specific setting.
- A Mobile dot means at least one Mobile setting has been changed.
- A Hover Mode dot means the selected block has at least one custom hover value.
How do resets work?
The reset button changes behavior based on where you are editing. It protects the base design when you clear smaller-screen or hover values.
| Editing view or state | Reset result |
| Desktop | Returns the value to its default. |
| Tablet | Removes the Tablet value so it inherits again. |
| Mobile | Removes the Mobile value so it inherits again. |
| Hover Mode | Removes the hover value so the normal state remains in place. |
How should you edit hover?
Hover Mode applies across viewports. Use it for supported values that should change when a visitor hovers a block.
Hover Mode is not available for structural Section settings such as Align, Content width, and Columns; unavailable rows are disabled while the mode is active.
- Use hover for purposeful changes such as color, gradient, spacing, border, radius, or shadow where the selected block supports that control.
- Keep hover changes small enough that the normal state still reads clearly.
- Check Desktop, Tablet, and Mobile after editing hover.
Tip: If a smaller-screen value should match the larger view again, reset the smaller-screen value instead of copying the larger value manually.