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're 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, open the Menu, then click on Design > Main > Style.


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 (edit text, 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 that template's defaults. 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 see the Template Settings options. These are 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 you would like to change

After applying the Template Styles, there will probably be a few things that you would like to tweak. To do this, switch Style by Element to the "On" position. Now you'll see that your mouse's cursor changes to a paint roller icon.  


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 will 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.


Exit the Style Editor at any time by clicking the "X" in the upper right corner. Undo your latest style changes by clicking on the counter clockwise arrow on the right.


Note: 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 Basics section, you'll 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.

Click 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: