Table of Contents
- Double click any text box or button to start editing its contents.
- Double click an input field to edit the placeholder text.
- You can use Control + B to bold text and Control + I to italicize once highlighted in the builder.
Changing Font Color
- First select the text box, button or input field you'd like to change the font color for.
- Click the A with an underline that appears on the left toolbar.
- Select a solid color from the color grid, enter a hexdecimal or use the color slider to make a selection.
- Exit the color picker by clicking outside of it.
Changing Font Size
- First select the text box, button or input fields you'd like to change the size for.
- Click the font size dropdown to choose a new font size or type your desired size
- Note: For mobile input fields, set a minimum size of 16 pixels to avoid irratic behavior.
Other Font Options
- You can allign text in the left, center or right of the selected element.
- Use the Bold, Underline and Italic controls to further modify the text.
Editing Background Color
- To edit the background color of any element, click the Paint Bucket and select a color to start editing.
- Note: The foreground color of icons will change color when the paint bucket is used.
Using the Color Grid
- One of the options you have is to select a color from the grid to set a new background.
- The first tile is full transparency
- The other tiles in the first two rows are gradient colors.
Setting Custom Color (Hexdecimal)
- Enter a hexcolor color in the designated space.
- Click enter to confirm the color.
- Here is a guide on hexdecimal coloring.
Adjusting Opacity (Transparency)
- The first tile in the color pallet is transparency.
- Adjust the 'A' slider to modify the opacity of any color.
Saving brand colors to your account
- First select a color or gradient you'd like to save.
- Click the plus button in the color menu to save it to your account.
Advanced Gradient Guide
- To start building a gradient, click the Solid Color dropdown to select a gradient type.
- Click the Add button to add another color to the gradient.
- You can click on the color squares to modify each of the seperate properties.
- Select a color from the grid or use the sliders to modify each part of the gradient.
- You can drag the squares to the left and right in order to modify the gradient pattern.
- Click the x button once a gradient square is selected to remove it.
Setting an On-Hover Color
- Click the default color dropdown to select an on-hover color.
- While having the on-hover color selected in the dropdown, you will preview the new color.
Editing Borders or Outlines
- Click on any element to set a border or outline.
- Then select the Borders menu to initiate the outline creation process.
Setting Border Style
- There are several types of borders you can create with Aiva. Click the dropdown in the borders menu to change the style. Some styles can be seen below:
- Solid Line
- Dashed Line
- Dotted Line
- Double Line
Choosing Border Color
- Click on the color tile in the borders menu.
- Select a non-gradient color to set it as your border color.
Setting Border Width
- Enter the size of pixels into the input boxes to change the border size.
- Enter a pixel value in the left-most input field to set a border on every side.
- If you'd like to set specific sizes you can use the other 4 input fields. They represent the following | Top Border | Left Border | Bottom Border | Right Border |
Rounding the Border
- In the Border Roundness input field enter a value from 1-88 px.
- Higher values result in rounder edges.
- You can add a shadow to any element on Aiva using the Shadows option in the borders menu.
- Start off by toggling the Shadow button.
Changing Shadow Color
- Click the color tile to select a shadow color.
- You can only use solid colors as shadows.
Advanced Shadow Techniques
- Increase this slider to create a larger shadow around the element you've chosen.
- Increasing the pixel value for density makes the shadow less dense/dark.
- Increasing shadow distance moves the shadow in the direction of the angle you've set.
- Click the color tile select a shadow color.
- Note: you can only select a solid color as a gradient.
- Click and drag the angle dial to change the angle of the shadow's distance.
- You can also modify the angle by editing the angle text.