Contact widget

good day,

i’m using the “sydney contact info” widget in my footer. i have a few questions concerning this footer;

  1. can i make the address multiple lines ? what i mean is, presently the address runs on in a single line until it folds to a second line when its out of space. what i’d like is to have the address appear as a postage label
    example;
    address
    city, country

  2. can i add a second phone number ?

  3. can i add social media icon/links here ? Presently i have a second social media widget below my contact widget and theres quite a space/gap between the contact info and social media icons. it would be nice to either;

  • add the social icons in the contact widget or
  • reduce the space/gap between the upper and lower widgets

thanks again in advance
anton cvet

> 1

Use this format in the address input field.


Line 1 // Line 2 // Line 3 // Line 4

Then do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  if( $('.contact-address').length ) {

      var address     = $('.contact-address').text();
      var addressArr  = address.split("//");
      var newAddress  = addressArr.join("<br/>");

      $('.contact-address').text('');
      $('.contact-address').append('<span><i class="fa fa-home"></i></span>'+'<div class="address-lines">'+newAddress+'</div>');
      
  }

})(jQuery);

  1. Update

> 2

Add the following lines in the jQuery code I suggested.


// Second phone 
var phoneNumber = '12345';
var phoneHTML   = '<div class="contact-phone"><span><i class="fa fa-phone"></i></span>'+phoneNumber+'</div>';
$('.contact-phone').after(phoneHTML);

So the final code will look like this:


;(function($) {

  if( $('.contact-address').length ) {

      var address     = $('.contact-address').text();
      var addressArr  = address.split("//");
      var newAddress  = addressArr.join("<br/>");

      $('.contact-address').text('');
      $('.contact-address').append('<span><i class="fa fa-home"></i></span>'+'<div class="address-lines">'+newAddress+'</div>');

      // Second phone 
      var phoneNumber = '12345';
      var phoneHTML   = '<div class="contact-phone"><span><i class="fa fa-phone"></i></span>'+phoneNumber+'</div>';
      $('.contact-phone').after(phoneHTML);
      
  }

})(jQuery);

> 3

Add the following CSS code into Appearance > Customize > Additional CSS.


/* Address lines style */
.contact-address .address-lines {
  margin-top: -25px;
  margin-left: 28px;
}

/* Reduce footer widgets gap */
.footer-widgets .sidebar-column .widget{
  padding-top: 0;
}

I hope this reply helps.

Regards,
Kharis

hey kharis,

ok, did all the steps. very clear btw.

what i end up with is 4 lines in the address and a second ph# field with “12345” there. i figured out the address changing “line 1” and 2 to the address and deleting line 3 & 4 so i have a 2 line address, great.

however, there is only one ph field in the contact widget in the customize sidebar. when i shift click on the 12345 on the example page window beside the sidebar, some things get highlighted but i can make no change to the second ph# 12345.

any suggestions ?

a

wait wait,

what i did was change the code you gave “var phoneNumber = ‘12345’;” so instead of 12345 i changed it to the ph# i want and it appeared in the footer like a dream.

so address looks good. second ph# there.

all happy in footerland.

cheers
a

Excellent! You did something great doing some adjustment to meet your requirements.

Please let us know if further questions come up. If you need help on other subject, feel free top open a new topic.

Regards,
Kharis

Hello!

I, too, followed this advise, and it worked mostly.
For some reason it keeps adding the old input of the address field to the second line.
Even after deleting the widget and re-adding it, still the line is added.
Any ideas how to fix this?

Hello there,

Please share a link where you put the contact widget, so I can have a look.

Regards,
Kharis

Hello kharisblank,

sure. This is my “site in progress”:
https://www.mg-pc.de/sallgecom/

You’ll find it near the bottom.
Also my “Call to action”-Line isn’t displayd correctly, but that’s another topic.

Thank you in advance!

Hello there,

Edit your address line in the widget settings. Ensure there’s no any BR tag – it should look like this:

   Hochstr. 34 41379 BrüggenHochstr. 34 | 41379 Brüggen

Edit the row where the CTA widget resides in. Under the Row Styles, expand Layout tab. On Row Layout dropdown, select “Full Width”.

Regards,
Kharis

Hi to you!

There’s just “Hochstr. 34//41379 Brüggen” in the address-line.
I tried adding a before, but deleted that as it wouldn’t work.
I then implemented your solution.

The CTA-Line is now “Fill Width”.
Still the text color is wrong (should be white), the line is not full width anymore and the padding left is tero apperently…