Last updated on

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.

6 thoughts on “Advanced Control in the Post and Page Builder

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *