How to add an icon, heading & text side by side in a WordPress website

How to add an icon, heading & text side by side in a WordPress website using WPBakery Page Builder

Here are the steps on how to add an icon, heading & text side by side in a WordPress website using WPBakery Page Builder:

1. Go to your WordPress dashboard and click on the “Pages” tab.
2. Click on the “Add New” button to create a new page.
3. In the page editor, click on the “WPBakery Page Builder” button.
4. Drag and drop a “Row” element from the toolbar to the page editor.
5. In the “Row” settings, set the number of columns to 3.
6. Drag and drop an “Icon” element from the toolbar to the first column.
7. In the “Icon” settings, select an icon from the icon library.
8. Drag and drop a “Heading” element from the toolbar to the second column.
9. In the “Heading” settings, enter a heading for your element.
10. Drag and drop a “Text” element from the toolbar to the third column.
11. In the “Text” settings, enter your text.
12. Click on the “Update” button to save your changes.

Your icon, heading & text will now be displayed side by side on your page.

Here are some additional tips for adding an icon, heading & text side by side in a WordPress website using WPBakery Page Builder:

• You can change the size and color of your icon and heading by using the settings in the “Icon” and “Heading” elements.
• You can change the alignment of your text by using the settings in the “Text” element.
• You can add a link to your icon or heading by using the “Link” field in the settings for each element.
• You can add a background color or image to your row by using the settings in the “Row” element.

How to add an icon, heading & text side by side in a WordPress website using Elementor

To add an icon, heading, and text side by side in a WordPress website using Elementor, you can follow these steps:

1. Go to the Elementor editor and create a new section.
2. In the section settings, set the alignment to “Center”.
3. Add a new column and set the width to “1/3”.
4. In the column settings, add an icon widget.
5. In the icon widget settings, select an icon and set the size to “Medium”.
6. Add a new column and set the width to “1/3”.
7. In the column settings, add a heading widget.
8. In the heading widget settings, enter your heading text.
9. Add a new column and set the width to “1/3”.
10. In the column settings, add a text widget.
11. In the text widget settings, enter your text.
12. Click “Save” and “Publish”.

Your icon, heading, and text will now be displayed side by side in the center of your section.

Here are some additional tips for adding an icon, heading, and text side by side in a WordPress website using Elementor:

• You can use different icon sizes and colors to create a more visually appealing layout.
• You can also use different heading and text styles to customize the look of your content.
• You can add additional columns to your section to display more content side by side.
• You can use the Elementor Responsive feature to ensure that your layout looks good on all devices.

How to add an icon, heading & text side by side in a WordPress website using Classic editor

To add an icon, heading & text side by side in a WordPress website using Classic editor, you can follow these steps:

1. Go to the post or page that you want to edit.
2. Click on the “Text” tab in the editor.
3. In the text editor, type the text that you want to appear before the icon.
4. Click on the “Insert Icon” button.
5. In the icon picker, select the icon that you want to use.
6. Click on the “Insert” button.
7. Type the heading that you want to appear next to the icon.
8. Type the text that you want to appear below the heading.
9. Click on the “Update” button to save your changes.

Here is an example of how to add an icon, heading & text side by side in a WordPress website using Classic editor:

Code snippet

[icon name="fa-camera" size="20" align="left"]
This is a heading

This is some text.

Use code with caution. Learn morecontent_copy

This will output the following HTML:

Code snippet

<i class="fa fa-camera" style="font-size: 20px; float: left;"></i>
<h2>This is a heading</h2>
<p>This is some text.</p>

Use code with caution. Learn morecontent_copy

You can customize the appearance of the icon, heading & text by using the following CSS properties:

• font-size – The size of the icon in pixels.
• color – The color of the icon.
• float – The position of the icon on the page.
• margin – The margin around the icon.
• padding – The padding around the icon.
• border – The border around the icon.

You can also use the following CSS properties to customize the appearance of the heading & text:

• font-size – The size of the heading in pixels.
• color – The color of the heading.
• margin – The margin around the heading.
• padding – The padding around the heading.
• border – The border around the heading.

How to add an icon, heading & text side by side in a WordPress website using Gutenburg editor

To add an icon, heading, and text side by side in a WordPress website using the Gutenberg editor, you can follow these steps:

1. Open the page or post where you want to add the icon, heading, and text.
2. Click on the “+” icon in the top left corner of the editor to add a new block.
3. Search for and select the “Columns” block.
4. In the “Columns” block, select the “2 columns” layout.
5. In the left column, add an “Icon” block.
6. In the right column, add a “Heading” block and type in your heading text.
7. In the right column, add a “Paragraph” block and type in your text.
8. Click on the “X” in the top right corner of the “Columns” block to close it.
9. Your icon, heading, and text will now be displayed side by side.

Here is a screenshot of the steps above:

[Image of the steps above]

You can also use the “Columns” block to create more complex layouts, such as 3 columns, 4 columns, or even a grid layout. To do this, simply select the desired number of columns in the “Columns” block.

You can also customize the appearance of your icon, heading, and text by using the toolbar that appears above each block. For example, you can change the font, size, and color of your text, and you can also add links and images.

How to add an icon, heading & text side by side in a WordPress website using Visual Composer

To add an icon, heading, and text side by side in a WordPress website using Visual Composer, follow these steps:

1. Go to the WordPress dashboard and click on the “Add New” button under the “Posts” menu.
2. Select the “Visual Composer” template and click on the “Create” button.
3. Drag and drop an icon element from the Visual Composer toolbar to the editor.
4. In the “Icon” settings, select the icon you want to use.
5. Drag and drop a heading element from the Visual Composer toolbar to the editor.
6. In the “Title” settings, enter the heading text.
7. Drag and drop a text element from the Visual Composer toolbar to the editor.
8. In the “Text” settings, enter the text you want to display.
9. To align the icon, heading, and text side by side, select the “Block” alignment option from the “Alignment” dropdown menu.
10. Click on the “Update” button to save your changes.

The icon, heading, and text will now be displayed side by side in your WordPress website.

Here are some additional tips for adding an icon, heading, and text side by side in a WordPress website using Visual Composer:

• You can use the “Margin” and “Padding” settings to adjust the spacing between the icon, heading, and text.
• You can use the “Border” settings to add a border around the icon, heading, and text.
• You can use the “Background Color” settings to change the background color of the icon, heading, and text.
• You can use the “Font Color” settings to change the font color of the icon, heading, and text.
• You can use the “Link” settings to add a link to the icon, heading, or text.