← Back to documentation

Styling

Styling your websites is as easy as, well, styling your Google Docs. Most things you can do in your Google Doc files will be shown in your site. We’ve written a few tips & tricks here for you to make the most of it.

To see your styling changes reflected in your site, click the “Update site” button in the DocsToSite dashboard.

Templates

The Google Docs templates are good starting points for your site. You’re welcome to use any of the sample sites in docstosite.com (including this documentation site!) as well. Copy the Google Docs with File  Make a copy. You might find some neat tricks used in those designs to try in your sites.

Formatting margins

For better formatting on mobile, set the margins to 0.1” or 0.25” on the left and right side in File → Page Setup.

Changing the background color

You can also change the background color in File → Page Setup.

Advanced Formatting

Sometimes, you might want to place floating text and an image side-by-side. Here’s one example.

Or you might want a text block next to another text block. Here’s another example.

You can obtain this with Insert → Table. Then select your table, and modify your table border width to 0pt. This will effectively make your table borders disappear.

A lot of other settings can be found if you right-click in a table and select Table Properties.

Google Docs Add-Ons & Code Blocks

To make it even easier to edit your Google Doc files, consider Extensions from the Google Workspace Marketplace. One of our favorite extensions is Code Blocks. It’s a syntax highlighting tool for Google Docs.

let map;

function initMap() {
 map =
new google.maps.Map(document.getElementById("map"), {
   
center: { lat: -34.397, lng: 150.644 },
   
zoom: 8,
 });
}

window.initMap = initMap;