The Profile Box block allows you to easily add a user profile box to any location on a post or page. The profile box can include a user’s name along with their title, bio (or profile text), avatar, and their social media links.
Table of Contents:
User information
To get started, click directly on the default text to add the user’s name, title, and profile text. Also, click on the upload image icon within the avatar box to add the user’s photo.
Click image to enlarge
Notes:
- All these items are optional. For example, if you do not add an avatar, the text will be displayed on the left side of the box instead of the gray square you see in the preview below.
- Social icons are added in the separate Social Links Settings section located near the bottom of this block’s settings.
Now that you’ve added the user’s information, you’re ready to begin customizing the appearance of the box, as described below.
General settings
Click image to enlarge
- Alignment: Choose whether the text inside the profile box will be aligned left, centered, or aligned right. When Align Text Right is selected, the avatar will also be displayed on the right side of the box.
- Font Size: Adjust the size of the title and profile text, if desired. This setting does not apply to the name displayed at the top of the profile box.
- Avatar Shape: Choose whether the avatar will be displayed as a square or circle.
Color settings
Click image to enlarge
- Background Color: To change the default background color of the profile box, click the colored circles to select pre-defined colors. Or click Custom Color to select your own.
- Text Color: To change the default color of the text inside the profile box, click the colored circles to select pre-defined colors. Or click Custom Color to select your own.
Social Links settings
Click image to enlarge
- Social Link Color: To change the background color of the social icons, click the colored circles to select pre-defined colors. Or click Custom Color to select your own.
- Social Links: When you add the links for your social media sites, their icons will appear at the bottom of the profile box. If you don’t add a link, the icon will not appear.
The example below only shows the Twitter, Facebook, and Instagram icons because we’ve added the links for only those sites.
Click image to enlarge
Advanced settings
Click image to enlarge
- Additional CSS Class(es): You can add one or more CSS class to customize the appearance of this block. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.