Contact Info Widget

Updated on October 17, 2017

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


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:

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

Contact info widget - widget menu

2On 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

3Fill out the settings form with the necessary information, and then click on the Save button.
Setting Description

TitleDisplays a title at the top of the widget. If left empty, it will show nothing at the top of the details.
PersonAdds a person’s name.
CompanyAdds a company name.
AddressAdds an address. You can use HTML to separate the address lines.
PhoneAdds 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.
FaxAdds a fax number(s). The same rules as the phone number also apply here.
EmailAdds an email address as a link.
WebsiteAdds a website address as a link.
Skype UsernameAdds a Skype ID/username as a link.

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:

1After 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.
2To 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;
}

3To 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.

Did this answer your question?