Skip to main content
All CollectionsTutorials
How to Make Global and Individual Changes To the Page Area
How to Make Global and Individual Changes To the Page Area

In this tutorial we will learn how to make global changes and individual changes to any element found in the page area.

Enrique avatar
Written by Enrique
Updated over a year ago

Important:

  1. This tutorial applies for global changes in the page area.

  2. It does not apply to the header and footers sections. If you want to make changes to those sections, please click here.

  3. You can change almost any setting of the elements of the page area. These are headers, paragraphs, lists, tables, etc. You can change the font to any other available Google font, the font size and color with just a few mouse clicks.

  4. However, it is very important to have a plan before starting making changes to the elements in a project. All changes are recorded by the app and need to be made in an orderly sequence.

  5. Global changes do not work with any free floating element.

The best way to do this is using a top down approach. This is, do first all the global changes and then, if needed, make the individual changes.

1. Making a Global Change

For this example we are going to change the the font type, size and color globally. The logic is the same across all elements of the app.

Before making any changes to your project, is a good practice to save the project manually by clicking on the 'Save' button found at the bottom left of the project editor section.

We are going to start by changing all the paragraphs font, font size and color

Click once on a paragraph to activate it.

Then check that the 'Make Changes To All Elements' button is ON - The default setting is always OFF.

This project is using the Raleway font at 20 pixels and the font color is black.

Let's select another Google font. To do that click on the current font to open the font menu and click on the '+ More Google fonts' link.

There are 1497 Google fonts installed in Designrr;. If you know the name of the Google font you want, you can enter the name in the search box. Once you find it select a font by clicking on it.

We are choosing 'Poppins' for the project paragraphs

All the paragraphs in our project change to the new font at once. Now we are going to change the font size form 20 px to 18 px and the font color to blue.

Keep the paragraph element selected and change the font size value to 18 px

Do the same with the font color. Keep the paragraph element selected. Now we are going to change the font color to blue. To do that, we click first in the color picker , select the color from the color palette and click on 'Choose'.

This is the result:

2. Making Individual Changes

For this example we are going to change in one of the paragraphs the font weight and italics. The logic is the same across all elements of the app.

Before making any change save your work. Make sure that the 'Make Changes To All Elements' button is set to OFF'.

Then we will repeat each step we previously did to change the font weight and italics, but, in this case, it will be applied to the selected element.

This is the final result:

In Closing

If we apply an organized approach to the project changes list, these can be done in an orderly manner in a matter of seconds. Happy editing!

Did this answer your question?