Ask a Question ?
Design & Publish Websites Faster

How to Make the Style Options the Same for All Versions of an App

Update! We have released the Bulk Style Editor. With it, you can edit the styling of multiple items (apps, text, containers, etc) at the same time and from a single panel within our website maker! Check it out, it will help you design faster.

About the “Propagate App Style to All Pages” Option

In this article, you will learn how to make an app have the same styling options throughout your whole site. This way, all installed versions of that app will share the style, and if you update it in one page, changes will be reflected in all of them.

You would want to have the same styling in apps that remain the same throughout your site, such as items in the header, footer or some sidebars. For example: you may have a main menu (Navigation app), your logo (Image app), and a tagline (Text app) in the header. They all may have different styles (such as backgrounds, borders, drop shadows, etc) in each page. The following diagram illustrates this (with style propagation off).

Diagram showing the style propagation turned off

If style propagation is off, the same app version can have different styles in each page where it’s installed

But most probable, you’ll want to have the same styling for each version on all of your pages. So enabling it for each app, will make these styles consistent (propagate them) across your site. You don’t have to be on the home page to enable it. But note that the style will propagate using that app (on the specific page you’re currently editing) as a “base”. On from that moment on, all of them could be considered the base, since a change in any page will update the rest of them.

Take a look at the image below, which represents how the styles propagate from the home page (where the checkbox was selected) to the other pages of your site.

Diagram showing the style propagation turned off

If you turn on the style propagation on an app, it will copy the style of that app to the rest of your pages where that version is installed

The same with the footer, you may have a navigation menu and some copyright information. So if you need to change the style of these apps, it will be updated in all the pages where you have that version installed.

Note

App’s content is propagated (shared) by default. Learn more about app versions and content propagation on this how-to. You can have an app version that shares content and the style propagation turned on or off for that same app. But you can’t turn off content propagation.

How Does it Work?

When you install an app, a version is created. When you create a new page, you can copy all the apps’ versions on the current page you are on, to the new one.

The "Add a New Page" menu

The copied versions, will have the same content. So if for example you had a Navigation app in the first page you were working on, and when you created a new one you copied that Navigation app, you will have the same items of your original navigation on both pages.

The "Select the Apps You Would Like to Copy to Your New Page" window

Making Changes on an App

If you make a content or settings change to your navigation in any of the pages where it’s installed, changes will be reflected in all of those pages.

If the style propagation checkbox is enabled, that also includes the styling dot options, like backgrounds, margins, padding, borders, drop shadow, and more.

How to Disable the “Propagate Style” Feature

If you uncheck the “Propagate Style to All Pages” option, styling will be managed independently on that app. This option is enabled (checked) by default.

The "Propagate Style" checkbox

To access the settings of any app, go to the top of the app and find the app toolbar. In all apps is depicted by a wrench icon.

App Toolbar with the Edit Settings option selected

So if you want the styles for a given app to be consistent among all your pages, you must enable this option. Remember that, wherever you enable it (the page you’re editing on that moment), that app will be the base whose styles will be copied over the rest of pages (for that app version only).

Are we missing something? Please ask on the comments!

Menu