Using the inspector, you can modify various styles for a selected element without any CSS styling knowledge while having a real-time preview directly in the Website Builder.
Element Visibility
The buttons at the top of the inspector control the selected element's visibility on the phone, tablet, laptop, and desktop. If the button's background is white, the selected element is hidden on that device. These configuration options help to build genuinely responsive apps.
Attributes
Attributes section of inspector contains:
- Position - This is the same as aligning text left/center/right, but for elements instead of text.
- ID - A unique ID for the selected element, so the CSS is applied easier to it.
- Class - All the selected element classes are listed here, you can remove them by clicking the X icon next to the class name, you can apply new custom classes to an element by clicking anywhere on the input (gray background), entering your class name and hitting enter or clicking the green checkmark. There is a bunch of predefined classes that you can use; for example, text-danger makes the text color red. You can find more predefined classes here.
This section has various other attributes depending on what element you have selected, for example, if you have a heading selected it has a heading type attribute so that you can choose different sizes, ranging from h1 (big) to h6 (small).
Background
The Background section will allow you to set a background image, color, or gradient for a selected element.
Color
Click on the Color button to bring up a color picker. Here you can choose from over 100 different predefined popular colors. You can, of course, select an utterly custom color by dragging your mouse in the color palette and selecting transparency with dragger underneath, you can also enter a color code in the input below.
Image
Click on the Image button to bring up an image background panel, here you can apply one of over 40 textures included with apprat.io and control the background image alignment and repeating. You can also click on the upload image button to upload and use a custom image.
Gradient
Click on the Gradient button to bring up a gradient panel, here you can choose from over 30 gradients included with apprat.io to use as selected element's background.
Shadows
You can use shadows panel to apply shadows to a selected element or text inside it.
- Angle - to control shadows angle, click on the green knob in the circle, and drag it around.
- Color - to control shadows color, click on the white square, this brings up a color picker, same as the one for elements background color.
- Distance - this controls how far away the shadow will be from the selected element.
- Blur - this controls how bright the shadow is.
- Spread - this controls how big the shadow is.
- Box/Text - this applies the shadow to either the element box or text inside it.
- Inner/Outter - will either apply shadow to the outside or inside of the selected element box.
Margin And Padding
Margin controls the spacing between selected elements box and the content outside, while padding controls the spacing between selected elements border and the content inside it.
To use the dragger, first select the sides you want to apply margin or padding to and then drag the handle until you have your desired effect. For more precise control, you can enter your margin and padding values in the input boxes, and the big one applies the value to all sides while the smaller ones represent a particular side of the element's box.
Text Style
This panel controls the appearance of the text of the selected element.
Font
Click on the desired font, to change selected elements font to one of the native browser fonts, or click the G icon to open up google fonts modal so that you can choose from one of nearly 700 Google Fonts.
Style
Click on of the buttons under the fonts to change text boldness or make it italic, underlines, overlined, or crossed-out.
Size, Color, And Alignment
You can change the text size by entering the desired number in the input box, and you can click one of the alignment options to align text left, center or right or you can change the text color by clicking on the square at the bottom of the panel to bring up a color picker.
Border / Border Roundness
In the last two panels, you can control the selected elements border appearance, and it's corners roundness.
Width, Color, And Style
To change border width and color, select the border sides you want to change at the top and then either use the dragger or input boxes at the bottom to get the desired effect. To change the border color, click on the square under the dragger to bring up a color picker.
Roundness
To change border roundness, apply the border you want via the border panel, then select the corners you want to change at the top and use the dragger or enter the value you want in the input boxes.
