Phlox Text Element

Phlox Text Element allows you to represent your content better than before. You can add things together with the help of this element of Page Builder. This element can include a title, text, an image or icon, and even the combination of them. There are many ways to use the text element. Depends on the content, you are able to add as many text elements as you want.

Follow below steps to add Phlox Text Element in your post or page 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 Text
7. Click the Edit on the right side of the widget on Page Builder

To see the demos of Text Element, check out this link.

Text Element Features

Title

Adding a title for your text element is optional.

Subtitle

The subtitle is the second title which appears below the title and it is optional, too.

Title Link

Your title can be linked to another website. Copy the URL of your desired website in this field.

Wrapper Style

Wrapper styles can be Simple, Outlined, and Boxed.

Text Align

There are three text alignment for the text: Left, Center, Right

Text Color Scheme

You can choose two different text color schemes: Light and Dark

Wrapper Background Type

Wrapper background can be either Single Color or Background Image.

By choosing Background Image for the wrapper, you can add an image and display it as Cover, Tiled Image, Centered (with original size), and Fixed.

This background image can have an overlay color, too.

Wrapper Background Color

Here you are able to choose a background color for the wrapper of the text element.

Header Background Type

Like wrapper background, header background can be a Single Color or Background Image.

The background image can be display as Cover, Tiled Image, Centered (with original size), and Fixed.

Display Icon or Image

You are able to add icon or image to your text. Also, it is possible to use both of them at the same time.

- Icon

Either you choose icon or image, you will see this section. You can choose an icon from almost 1000 available icons.

• The below options will appear, when you select Display Icon:

1. Icon Color

The color of the icon is changeable.

2. Icon Size

You can specify the Icon size. It can be Small, Medium, Large, X-Large.

3. Icon Background Color

You can choose a background color for the icon.

4. Icon Outline Color

The border around the icon can be colorful.

5. Icon Background Shape

The icon can be displayed in different shapes. Available shapes are: Circle, Semi-circle, Round Rectangle, Cross Rectangle, Rectangle

- Image

You can use an image instead of icon, or use both of them, but when you select image, you are not able to see the five above mentioned options (icon color, icon size, icon background shape, icon background color, and icon outline color.)

After selecting image, you will see the below options:

With Add Image you are able to upload an image or select one from your media library.

Image Size

You can display image in whatever size you want: Original Size, Large, Medium, Thumbnail

Image or Icon Position

The image or icon can be at the top, left, or right side of the text.

Fill Background Color

This option will apply a background color for the icon.

Display Button

To add a button to the text block, enable Display button. Then, the below options will appear:

Button Label

Give your button a label in this section.

Button Size

Here you can set the size of button. You can pick from Exlarge, Large, Medium, Small, Tiny

Button Shape Style

There are three available shapes for the button. Box, Round, Curve

Button Style

Make your button even more stylish with three different styles: Normal, 3D, Outline

Uppercase Label

This option can be used to make the label of button appear in all-uppercase.

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

You can choose an icon from almost 1000 available icons. for your text.

Icon Alignment

Color of Button

This option specifies the color of the button.

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.

Content

Add your text content in this field.

Footer Shape

The bottom of the text block, can have different shapes:

Wave

Tail

You can keep it simple by selecting None. Also, you are able to choose a color for this footer.

Extra Class Name

By adding a class name of the style you have written in your CSS file, you can change the style of text element.