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:
- Go to your WordPress Admin Panel
- Click the Pages on the Dashboard
- Click the Add New
- Navigate to the top right hand of the WordPress editor and find Page Builder, beside text tab
- Click the Add Widget
- Click the Phlox and choose Text
- 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
Adding a title for your text element is optional.
The subtitle is the second title which appears below the title and it is optional, too.
Your title can be linked to another website. Copy the URL of your desired website in this field.
Wrapper styles can be Simple, Outlined, and Boxed.
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.
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
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.
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.
To add a button to the text block, enable Display button. Then, the below options will appear:
Give your button a label in this section.
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
Make your button even more stylish with three different styles: Normal, 3D, Outline
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 AlignmentYou are able to align the button icon to:
|Icon Alignment||Icon Alignment Preview|
|Animate from Left|
|Animate from Right|
Color of Button
This option specifies the color of the button.
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.
Add your text content in this field.
The bottom of the text block, can have different shapes:
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.