The Post and Page Builder plugin includes Advanced Controls to further customize your WordPress content. To see these options click on Advanced from a popover or Customize Design from a popup. Not all options are available for every element.
- Element Design
- Background – Overlay Color, Vertical Position, Size, Scroll Effects
- Button – Color, Size, Shape, Raised, Text Shadow, Width, Effect, Text Style
- Padding and Margin – Use the sliders to change the settings
- Color and Background Color – Both of these options open a Color Picker dialog box
- Theme Colors are available for consistency
- Use the box at the bottom to select a new color
- Click the red + under My Colors to save
- To delete from My Colors click the desired color and then the red Remove text at the bottom right of the panel
- Font Size – Use the sliders to change the size
- Rotate – Rotate the element 90, 180, or 270 degrees
- Border
-
- Select a Border Type option
- Use the sliders to control the widths of the border sides
- Select a border color using the palette
- Border Radius – Use the sliders to adjust the roundness of the four corners
- Box Shadow
- Use the sliders to control Horizontal Position, Vertical Position, Blur Radius, and Spread Radius
- Use the toggle Outset/Inset to choose if the shadow is internal or external
- Use the color picker to select the shadow color
- Animation – Select the Type, Duration, and Delay
- Width – Adjust the Width of the element on the page
- Block Alignment – Adjust the Horizontal Alignment of the element on the page
- Responsive Utilities – Hides the element on one or many devices
- Custom CSS – Enter Custom Classes or a CSS ID for the element
SIGNUP FOR
BOLDGRID CENTRAL
200+ Design Templates + 1 Kick-ass SuperTheme
6 WordPress Plugins + 2 Essential Services
Everything you need to build and manage WordPress websites in one Central place.
Arnolfo says:
How do I add CSS to a specific element?
All I want to do is add padding to the block of text in an image box.
I highlight the paragraph then
in the “Advanced > Additional CSS input field I entered:
style=”padding-left: 6px; padding-right: 6px;”
but this did not work so I tried
padding-left: 6px; padding-right:6px
and this did not work.
What am I doing wrong please.
Brandon says:
Hi Arnolfo,
I think your CSS may bit a bit off. You need to use the CSS selector for whatever element you are applying changes to. For instance if you wish to change the padding for your header you would use something like this `.site-header {
padding-left: 6px; padding-right: 6px;}`. You seem to have the correct syntax you just need to inspect the page and find the correct selector for your element.
arnolfo says:
Ah, I see. Thanks. In Elementor each element has a css menu which by default add css to the element you are in. So I need to actually look up the element and add to that which is a bit scary as making a change to that would effect all other instances, yes?
Brandon says:
Well you’d just need to inspect the web page to make sure you are editing the correct CSS Selector. We can help you with that if you don’t mind starting a new Support Forum thread. If you decide to do so please include the link to your website in the thread. Thank you!
sundar says:
give some samples for CSS
Joseph says:
Hi Sundar!
One of my favorite places to get CSS samples from in W3 Schools and I hope that some of the samples on their CSS Examples page gives you the information you are looking for.
Please let us know if you have any other questions for us!