Build Better, Faster | Enhance workflows with clean code tools that build consistent, modern, mission-focused pages.
v1.4.2 – 12 MAY 2025
This preview updates as you type. Use the sliders below to shift the background image’s focal point (optional). Vertical Focus: 0% = top, 50% = center, 100% = bottom. Horizontal Focus / Mobile View: 0% = left, 50% = center, 100% = right. On mobile screens, the banner height will be 240px; on desktop, 40vh. The gradient is slightly opaque at the top and darker at the bottom.
Click "Generate Full Script" then "Copy to Clipboard" to copy the final HTML+CSS snippet.
Click "Generate Code" then "Copy to Clipboard" to copy the final HTML snippet.
Enter a unique name for your button menu (no spaces or special characters):
You can edit each button's Label, Icon URL, URL, and specify if it should open in a new window. By default, we've added six example buttons below.
Copy the final HTML+CSS below and paste it into your DNN HTML module.
An anchor point is a hidden marker on your page that lets you jump directly to specific sections. It works by matching the link (e.g., #overview) with an element’s anchor name. Follow the step-by-step process in our guide to learn how to add these anchors. Web Builder Tools Basics SOP
#overview
This name ensures that the generated code uses unique class and ID names, preventing conflicts if multiple packages are added to the page.
Problem & Need The Yuba River Basin has experienced seven major floods since 1940, with catastrophic events in 1986 and 1997 causing damages of $95 million and $82.4 million, respectively.
Project Scope The Marysville Ring Levee project is a multi-phase effort to strengthen 7.6 miles of levee surrounding the city.
Completed Construction The Marysville Ring Levee project has been progressing in multiple phases, with significant milestones completed, including:
Current Status The project is nearing full completion, with the final construction efforts underway:
Reset Colors to Default
Generate CodeCopy to Clipboard
Developed by the Sacramento District Public Affairs Office, Web Builder Tools help non-coders quickly create clean, modern USACE pages. Their exportable HTML/CSS/JS packages also streamline the migration from AFPIMS's DNN to Adobe Experience Manager (AEM).
These tools are evolving—some features may still be in development, and icon sets may be limited. If you encounter issues, need specific icons, or have ideas for improvements, we want to hear from you. These tools improve as time allows—let me know what would help most.
Senior Multimedia Strategist & Producer Website Manager
Public Affairs Office U.S. Army Corps of Engineers Sacramento District 1325 J St. – Sacramento, CA 95814
Web Builder Tools is a non-contracted, non-solicited product developed by the U.S. Army Corps of Engineers Sacramento District.
WEB BUILDER TOOLS 