Follow

Icon Element - Add Icon - IB v3.0

Icon Element - Add Icon - IB v3.0 

bulb_dim.png  Please note:  before you can add any element to a page you must first have row(s) and column(s) setup in Layout Mode.  Images must first be uploaded to the media center.

In this example, the campaign page was created via Option 2: Create a Custom Page  for instructional clarity. 

 1.  If needed, switch your mode to Content Mode as elements can not  be added to a page in Layout Mode.

2014-07-11_1434.png 

2. Click the Icon element from the element list on the left hand side of the screen.  

2014-07-15_1305.png 

3.  Now drag the Icon element   2014-07-11_1437.png and drop it into a column container 

2014-07-11_1442.png 

4.  The Icon element should look like this on your Content Mode screen.

2014-07-15_1309.png 

5.  To edit the Icon element: 

  • Hover over the Icon element.
  • Click the blue Edit icon.
  • The corresponding element Edit screen will appear.

2014-07-15_1318.png 

Alignment

  • Set the Alignment of the element to Left, Right, Centered or None. 

2014-07-14_1027.png 

Icon Filter

  • Use the drop down list to narrow down the icon choices.
  • Options include: Web Applications, Form Control Icons, Currency Icons, Text Editor Icons, Directional Icons, Video Player Iconds, Brand Icons, Medical Icons.
  • In the below example; Currency Icons was selected from the drop list.  This narrowed down to currency type icons.

2014-07-15_1320.png2014-07-15_1322.png

 Search by Name

  • If you are looking for a particular icon, type the text in the Search by Name field to narrow down icons.
  • Click the Enter button on your keyboard.
  • In the below example the text "gift" was entered into the field.
  • To reload all icon choices, delete text from field and click Enter.

2014-07-15_1338.png 

Icon Preview

  •  Displays larger image of the selected icon.

2014-07-15_1351.png 

Color Picker

  • Click on a preset color to add a solid colored background.
  • In this example:  A light blue preset color was selected.  

2014-07-07_1308.png 

 Custom Color

  • This selection provides you with a Colors window.  
  • Click on the square box to the right of the hex color value field to launch the color picker window. 

2014-07-07_1323.png

  • Find a color hue by sliding the bar up and down.

2014-07-07_1327.png 

  • Set the color saturation by moving your mouse between the light to dark intensities.
  •  Note:  the color hex value (in this example #4698b2 field) changes as you move your mouse.

 2014-07-07_1333.png 

  • Make note of the color hex value ( in this example #4698b2)  in case you would like to use this color again on another webpage.
  • Click off of the color picker box to set the color.
  • Click the Save Changes button at the bottom of the screen.
  • Your webpage background displays the new color.
  • If you already have a Hex Color Value, you can type this value directly into the field (in this example #FF66CC).

 2014-07-07_1342.png


Animate

  • The Animate icon checkbox causes the icon to spin.
  • This is useful when you want to draw attention to a certain region of your webpage.

2014-07-15_1355.png 

Size

  • Set the icon size.  
  • 1 smallest size and 5 largest size. 

2014-07-15_1358.png

Rotate

  • Rotate your icon to various directions; options include:  None, 90 degrees, 180 degrees, 270 degrees, Flip horizontal and Flip vertical.
  • bulb_dim.png  Please note:  The Rotate and Animate options can not be used together.
  • Select option from the drop list.
  • The preview will reflect the selection.

2014-07-15_1401.png 

6.  Select the Update Content button in bottom right hand corner.

  • bulb_dim.png   To save your changes select  Publish Page button.  
  • To discard changes select Close Builder button instead.

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk