Style Tab

Use the style tab to customize and design elements on your Drupal webpage. The style tab is a powerful tool that lets you create beautiful designs without writing any code.

Follow the steps below to start implementing Styles to your element: 

1. Click on the + icon 

2. Go to the Content tab

3. Select an element

4. Go to the Style tab

Typography 

1. Set a color for the Font that is inserted in the element

2. Set the sizing of the font in the Font Size

Background 

1. Select whether you would like an Image or a Color for the Background of the element

2. Set an option for the Background Style 

   • Cover scales the image as large as possible

   • Contain scales the image to show the entire image

   • Repeat the background image is repeated horizontally

   • No Repeat the background image is not repeated 

3. Select an option from the Background Position settings

Visual Effects 

1. Set a Border color

2. Select an option from the Border Style settings

3. Set round edges to the element in the Border Radius  

4. Set transparency to the element in the Opacity

5. Set the Drop Shadow this will give the element a shadow cast 

6. Once you’ve selected your preferred settings, you can click on Save Changes and you're done!

These steps can also be reproduced in the Hover Style tab of the element.