Screenshots of some very basic features of GeneratePress, Elementor, and CSS Hero, to give you a foretaste of these powerful, simple-to-use tools. I created this page with Elementor quickly and easily. I could have used a table, but Elementor made it must faster and easier.

GeneratePress Main Menu


GeneratePress Typography > Headings Menu


Elementor Page Editing Screen

Page Elements on left.

Elementor: Editing a Text Element

You edit text and other elements  here, and it updates in real time in the screen at right.

CSS Hero

At upper right is the CSS Hero start button. Click it to begin using CSS Hero on your page.

CSS Hero

When you click the blue CSS Hero start icon, CSS Hero examines your page then displays this bar. Click the blue button to begin hovering over page elements to change their formatting.

CSS Hero

Hover over an element on the page to highlight it and display the blue bar above the element. Click Edit in the blue bar to display the CSS Hero formatting options for the element – Text, Border, Size, etc.

CSS Hero

When you hover over a page element, and the blue bar appears, click the bar to display formatting options for the element.

CSS Hero

When you click a selection in the CSS Properties box (Text, Border, Size, Padding, etc.), CSS Hero shows you the settings you can change. When you click Back then exit CSS Hero, your changes are saved.