Skip to main content

Editing Elements

Screenshot of Bevy Builder Text Options

Editing Text​

  • 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 hexadecimal 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 erratic behavior.

Other Font Options​

  • You can align text in the left, center or right of the selected element.
  • Use the Bold, Underline and Italic controls to further modify the text.

Screenshot of Bevy Builder Text Color Palette

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 (Hexadecimal)​

  • Enter a hex color code in the designated space.
  • Click enter to confirm the color.
  • Here is a guide on hexadecimal 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.

Screenshot of Bevy Builder Border Options

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 Bevy Design. 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.

Screenshot of Bevy Builder Shadow Options

Adding Shadows​

  • You can add a shadow to any element on Bevy Design 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​

Using these techniques will help you add depth to each individual element.

Shadow Size​

  • Increase this slider to create a larger shadow around the element you've chosen.

Shadow Density​

  • Increasing the pixel value for density makes the shadow less dense/dark.

Shadow Distance​

  • Increasing shadow distance moves the shadow in the direction of the angle you've set.

Shadow Color​

  • Click the color tile select a shadow color.
  • Note: you can only select a solid color as a gradient.

Shadow Angle​

  • 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.