← back

petrapixel's layout generator v1.0

Read about the generator here.   Follow me for updates.   Scroll down to see the preview.   Current settings are saved in your browser as a cookie.

Layout
Content Width
Background Image URL
Header Image URL
Footer
Sidebars
Sidebar Width (px)
Menu Position
Submenus
Margins (px)
Padding (px)
Border Width (px)
Round Borders (px)
Mobile Layout
Left Sidebar on Mobile
Right Sidebar on Mobile
Text
Font
Heading Font
Base Font Size (px)
Colors
Website Background Color
Main Content Background Color
Sidebar Background Color
Border Color
Text Color
Sidebar Text Color
Link Color
Link Hover Color

This option will load your layout (header, footer, menu, etc.) automatically on each page. You won't have to update its code in every HTML file, only once in the JavaScript file. Only basic JavaScript knowledge required. More info here.

Scroll down for Preview!

The preview updates automatically.
To preview the mobile layout make
your browser window smaller!