Intro
Pinpointe gives you several methods by which to modify the color of both titles and text with the Drag & Drop Builder. Each method will be described in detail below.
Before we discuss the individual methods, a few quick notes on the color selector that pops up in the various left-hand side control and sub-control panels. There are three ways to select a color:
- You can select a general color from the thin vertical bar on the top-right side, then use your cursor in the larger color square to the left to select how light or dark the specific color will be.
- You can enter a CSS Color Hex code in the indicated field.
- You can choose any color from the selection already saved to your account, which will include the Builder defaults plus any colors you have selected and saved previously.
The color selector that pops up when using the small WYSIWYG toolbar (when you highlight a title or piece of text) is similar in operation but is somewhat different in appearance.
After selecting the "Font Color" icon, a small panel will appear directly below the toolbar. On top will be the default font colors and at the bottom will be any previously saved colors created when using the WYSIWYG toolbar. You can click the "Custom..." button to open the color picker to create and save a new color.
This is the color picker that will appear after clicking the "Custom..." button:
- You can select a general color from the thin vertical bar, then use your cursor in the larger color square to the left to select how light or dark the specific color will be.
- You can enter three RGB color values in the specified fields.
- You can enter a CSS Color Hex code in the indicated field.
Left-Hand Control Panel
Clicking on the gray "Gear" icon within the green square brings up the left-hand control panel for that primary block. For this example, we have duplicated the default Title and Text elements this particular Basic Block contains.
The figure below shows the "Typography" section of the main left-hand control panel for all primary blocks. Note the sub-sections for "Title" and "Text", specifically the features "Title Color" and "Text Color". By clicking on the circular color spot directly across, you can select or add a new color to assign to titles and text contained within this primary block.
It is important to note that the main left-hand control panel's "Title" and "Text" feature will set the style, colors included, for ALL instances of that type of element within this primary block. For example, if I set the "Title Color" to red, and "Text Color" to blue, you can see the color for both titles and text paragraphs were changed.
You can see both title and text elements have had their colors modified.
Left-Hand SUB-Control Panel
What if you want to change the color of a single title or block of text within the primary block? All you need to so is click on the title or text element you want to change. Doing so will bring up a SUB-control panel on the left of your screen named "Column Options". The center section of this sub-panel is called "Text Options". The figure below shows an example. Note that the color spot directly across from "Color" is red, since that is the color we selected using the main control panel. We have selected the top "Title" element (regardless of whether selecting a title or text element, the sub-control panel will always say "Text Options"). Now we will click the red color spot and select the color purple. Note in the example that just the top title's color has changed to purple.
Please note that each title and text paragraph in the example are separate elements.
WYSIWYG Small Tool Bar
What if you want to just change the color of a sentence, a word or even just a single letter or character? You can do that as well. Simply by highlighting the exact text or letter / character you want to edit will bring up the WYSIWYG tool bar. To continue with this example, we have highlighted the Latin word "dolor" in the second text element (the bottom element).
We will now click on the "Text" control icon (indicated with the green arrow in the above figure). We can then select a new color for just the text we have highlighted. In this case, we have made the word "dolor" green.
As always, should you have any questions regarding any feature discussed in our Knowledge Base documents, please ask Pinpointe Support for assistance.