Search the Support Center

Using the Jimdo Style Editor

When it comes to customizing your Jimdo website, the Style Editor may be your best friend.  After you select the perfect template and add your background and logo, you are probably ready to dive in and start making changes to fonts and colors. This is all done in the Jimdo Style Editor.


How does the Style Editor Work?

To enter Style Mode and open up the Style Editor, click the Style link in the Site Admin.

With most parts of the Jimdo system, you just need to click on something and you can change it. The Style Editor works this way as well. Just remember that with Jimdo sites, there are two ways to look at your website and make changes: Edit Mode and Style Mode. In Edit Mode, you can add and delete elements and change their content (make text edits, add photos, etc). In Style Mode, you can change the way your elements look (change colors, fonts, etc). 


This means that in practice, once you toggle into Style Mode and click on a Heading Element, you will only be able to modify its appearance, but not its contents. To change the content of that Heading Element, just close the Style Editor and return to Edit Mode.


Once you make your changes in the Style Editor, you will be prompted to Undo or Save. If you select Save, your style modifications will be applied and you will be brought back to Edit Mode to allow you to again change the words and images on the page. Got it?

Start by entering some Template settings

Every time you change your template, your styles will be reset to the defaults for the new template you selected. However, if you made changes to a template and return to it later, your modifications will return as well.


The first time you enter the Style Editor, you will be shown the Template settings options. This is displayed by having Style by Element set to the "Off" position. When you make changes to these settings, they will cascade across your entire template. Select a color and your font choices for headings and for your body text, and the Style Editor will kickstart the styling process by updating the styles of dozens of elements at once.


Then overwrite any individual styles that you would like to change

After applying the Template styles, there will likely be particular things that you would like change.  You can do this by switching the Style by Element to the "On" position. Once you do this, you will see that your mouse's cursor changes to a paint roller icon.  


You can now move the paint roller around the page and click on different elements to modify the style for that element type.


In the example below, the large heading "Best Coffee in Our Town" is selected. At this point, all of the options available for making changes to the Heading Element appear at the top of the screen. Remember that any changes you make here will be applied to all Large Heading Elements. This is how you maintain a clean and consistent look throughout your website.  Even if you have 50 instances of large headings, changing one will change them all, which can be a huge time saver. To modify other elements like medium headings, or all paragraph text, click on one of those existing elements on your website, and the style options for those elements will appear.

You can exit the Style Editor at any time by clicking the "X" in the upper right hand corner and you can undo your latest changes by clicking on the counter clockwise arrow on the right as well.

Note: The font selction will display every available Google Font and the color selector allows for millions of different colors. Make sure to play with the horiziontal slider on the color picker to change the opacity of your color choices as well. For instructions on how to style each element, visit Jimdo Basics > The Jimdo Elements.

Customize the styles for all parts of your Jimdo website

If you went through the articles in the Basics section, you should now be familiar with the parts of a Jimdo website. Each of these areas will have unique aspects that you can change.  You can use the Style Editor to change the background color of the Navigation Menu, the Content Area, and the Sidebar or Footer

Every template has different aspects that can be modified with the Style Editor. You can modify the appearance of the Header Text, the Breadcrumb Trail, and sometimes you can change the horizontal alignment of the Navigation Menu or the entire Content Area.

Explore clicking on different areas of the page like next to the logo or on the edges of the Navigation Menu to see what is possible on your specific template.


Related articles: