Use Custom Highlighting

Webgarden offers 4 preset highlighting options which vary by design template and can even affect typography, but the number of custom highlighting options you can create yourself is infinite.
How to Use Preset Highlighting
If you have an element which should stand out on your website, use highlighting. The preset options are the easiest way.
Let’s imagine that on this website, you want customers to notice the phone number in the lower left-hand corner. Highlight it.
01 Homepage before with marks.png
Click on the element you would like to highlight to reopen its dialog box. Select the Advanced tab and choose the highlighting you’d like from the Highlighting dropdown menu. Save.
02 Select a preset pattern with marks.png
Now go to your actual website to see how it looks.
03 With Pattern 2 highlighting with marks.png
Try all 4 patterns in the dropdown menu to see what they do in your design template. Be sure to look at them on the actual website. What you see in administration is often different.
How to Use Custom Highlighting
If you don’t like any of the preset patterns, you can create your own. This can be done with or without using CSS.
Click on the element you would like to highlight to reopen its dialog box. Select the Advanced tab and choose Custom from the Highlighting dropdown menu. Enter a name for your custom highlighting (you may want to make a note of the name you choose), and save.
04 Select custom highlighting with marks.png
Custom Highlighting with CSS
If you want to use CSS to add your custom highlighting, enter the necessary code in the CSS Editor.
Click on the Design tab at the top of your screen and select CSS Editing.
05 CSS editing with marks.png
Scroll down to the very bottom of CSS Editing to insert your code.
The name you entered for your custom highlighting is now the HTML element’s class name. So your CSS selector could be something like .Pattern5.
If you want the element to have white text on a dark blue background, enter something like:
.Pattern5 {
background: rgb(14,11,50);
color: rgb(255,255,255);
}
The first property specifies the background color, and the second specifies the font color.
Don’t forget to save.
06 Add CSS with marks.png
Now go to your actual website and see how it looks.
07 Homepage after CSS with marks.png
Custom Highlighting without CSS
If you are not familiar with CSS, you can add your custom highlighting using the Design Editor.
Click on the Design tab at the top of your screen and select Design Editing.
08 Design editing with marks.png
Hover over the element you would like to highlight until it turns yellow, then click. If the element is not on the homepage, switch to Browser Mode to navigate to it.
09 Select an element with marks.png
In the dialog box that appears, you will see a list of all the individual layers. Select the layer including the name you just entered for your custom highlighting.
10 Choose a layer with marks.png
The Edit Style dialog box will open. Choose the background color you would like using the small box to the right. Choose the font color as well in the same way. Make any other changes you would like and save.
11 Design editing dialog box with marks.png
Now go to your actual website to see how it looks.
07 Homepage after CSS with marks.png
Changes made in the Design Editor also appear in the CSS Editor under /*WEBGARDEN_EDITOR*/.
These examples were done using a design template from the 145 series. With other design templates you may need to make some additional adjustments to achieve similar results. If you need any help with custom highlighting, don’t hesitate to contact Webgarden Support.
04/20/2015 01:14:23
info
Name
Email
Comment
Or visit this link or this one