Contact Info Widget

Last Updated on

The Contact Info widget allows you to display your contact details in a widget area/sidebar. It displays a company name, address, phone number, etc along with the appropriate icons.

In this article, we’ll explain how to display and modify the contact details through the Contact Info widget in the Jupiter WordPress theme.

Contact info widget - front end

In this article


Displaying the Contact Details

In order to display the contact details in a widget area/sidebar, you’ll need to add the JP – Contact Info widget to a widget area/sidebar, and then configure its settings.

To add the widget:

1
From the left WordPress menu, go to the Appearance > Widgets page.

Contact info widget - widget menu

2
On the Widgets page, find the JP – Contact Info and drag and drop it into a widget area. In this example, we chose the Page Widget Area.

Contact info widget - widget area

3
Fill out the settings form with the necessary information, and then click on the Save button.
Setting Description
Title Displays a title at the top of the widget. If left empty, it will show nothing at the top of the details.
Person Adds a person’s name.
Company Adds a company name.
Address Adds an address. You can use HTML to separate the address lines.
Phone Adds a phone number(s). This field is not limited by any validator so you can display your phone number in any structure you like, e.g. (0090) or (+90). You can also add multiple phone numbers to this field.
Fax Adds a fax number(s). The same rules as the phone number also apply here.
Email Adds an email address as a link.
Website Adds a website address as a link.
Skype Username Adds a Skype ID/username as a link.
x
Note: The widget is ready. Now you may need to add the Page widget area / sidebar to a page so you can see the widget. If you are not familiar with adding a widget area/sidebar to a page, read the Adding a sidebar article.

Modifying the Stylings

By default, there are no settings to modify the style of the contact details. The only way to do so is to use custom CSS. In this section, we’ll use the example of modifying the icon and text colors.

Changing Icon and Text Colors

To modify the stylings:

1
After adding the contact details to your website as explained in the previous section, inspect the widget and take note of the main widget element ID. In this example, it is contact_info-2.
x
Note: To learn more about inspecting elements, read the Inspecting elements article.
2
To change the icons color, add the following codes into Theme Options > Advanced > Custom CSS. We set the color to red. Note that all icons are SVG so you’ll need to use CSS the fill property to change the colors.

#contact_info-2 .mk-svg-icon {
    fill: red;
}

3
To change the text and link colors, add the following codes underneath the codes from above. We set the colors to blue.

#contact_info-2 {
   color: blue;
}

#contact_info-2 a {
   color: blue !important;
}

4. Click on the Save Changes button.

x
Note: To learn more about adding custom CSS, read the Inserting custom CSS codes article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket