Phlox Button

buttonsA Button Widget can be added to any post or page on your website. You are able to create different kinds of buttons and customize the button size, shape, style, etc.

One more way to add a button to the posts or pages, is adding a shortcode. Read this article to find out more information.

Video Tutorial


Access Button Options in Elementor Page Builder

  1. Go to your WordPress Admin Panel
  2. Click the Pages on the Dashboard
  3. Click the Add New
  4. Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.
  5. Check out Elements
  6. Scroll down to PHLOX - General section
  7. Choose Button

After adding a button to your content, you are able to customize it by available options:

  • Content

Button

Write a name for your button on Button label.

Link

You can add a link to your button.

  • Style

General

Button widget has some general options. You can change the Color of button or its Size.

Also, there are three available shapes: Box, Round, and Curve and three styles: Normal, 3D, and Outline

Icon

In this section, you are able to select an icon for your button. The alignment of the selected icon can be set to Left, Right, Over, and Animate from Left or Right. The Color is customizable, too. Padding properties are used to generate space around the icon and you can set different paddings on mobile and tablet.

Text

The button text is editable and you can change its Color and Typography. Also, you can change its Padding.

Check out this article to know more about Advanced tab and start working with Elementor.


Access Button Options in SiteOrigin Page Builder

Follow below steps to add Button Widget in your posts and pages content:

  1. Go to your WordPress Admin Panel
  2. Click the Pages on the Dashboard
  3. Click the Add New
  4. Navigate to the top right hand of the WordPress editor and find Page Builder, beside text tab
  5. Click the Add Widget
  6. Click the Phlox and choose [Phlox] Button
  7. Click the Edit on the right side of the widget on Page Builder

After adding a button to your content, you are able to customize it by available options:

Button Label

In this field, you can add a label for your button.

Button Size

Each button can have different sizes: Ex-large, Large, Medium, Small, Tiny

exlarge large medium small tiny

Button Shape Style

The shape of the button can be changed to Box, Round, Curve

box round

Button Style

Buttons can appear in three styles: Normal, 3D, Outline

normal 3d outline

Uppercase Label

To uppercase all the label's characters, switch this on.

Darken the Label

In the case of a light colored button, like white, you can switch on this option to darken the label of button.

Icon for Button

There are almost a thousand available icons to use on the button.

Icon Alignment

You are able to align the button icon to:
Icon Alignment Icon Alignment Preview
Left left-icon
Right right-icon
Over animate-over
Animate from Left animate-left
Animate from Right animate-right

Color of Button

This option specifies the color of the button. To see all available colors for Phlox button, check out [step_link id="36954" text="this page"].

Link

If you want to link your button to another page, you can write the URL in this field.

Open Link in

You can either open the link in the current page or in the new page.

To see the buttons demos, check out this link.

Here you can find the common styles of widgets in Page Builder.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us