How to Create the Team Profile Widget in Parallax

With our new release of the WIDG for Parallax, there are now many different features you can enjoy along with the standard Parallax template that you have purchased. Within this new update, there have been a volume of requests for help on how to create the team profile widget using the WIDG (check out the widget generator in action here) for Parallax and Parallax dark.

This will be a quick tutorial showing you how easy it is to use the WIDG team profile widget.

Creating the Team profile Widget using the WIDG in Parallax/Parallax Dark

First of all, it is important to select the image you want to display on the team profile widget. The optimal size for the image is 420 px wide by 250px high. For this example we’ll use this image. and call it “teamdemo.jpg”

team_profile_widget

Once you have selected your image, rename it to something suitable and make a note of the name (AND THE FILE FORMAT) In this case, we’re calling it “teamdemo.jpg”

Now you need to upload the image to your Weebly website via the Weebly dashboard.

To do this go to “DESIGN” and “EDIT HTML/CSS”

team_widget_instructions

Now, upload the image by clicking on the + sign next to ASSETS and clicking on “upload file(s)”

team_widget_instructions

The next step to take is to create the widget using the WIDG. A link for the WIDG will be provided once you have bought the template.

When you create the Team Profile Widget using the WIDG for Parallax you have to make sure that you use the same file name in the form as the file you just uploaded. This way, when you embed the code onto Weebly, the image you have selected will appear.

This is an essential step and if the image name in the form is not the same as the image saved on your Weebly website it will not appear as Weebly will not be able to locate the image from the code.

So… Lets take a look at the WIDG form. The first thing you’ll notice is the demo image we’re using will actually appear on the preview.. This will NOT change, because the WIDG can’t actually read the image on your website, so it uses the demo image to give you an idea of what things will look like…

On the “Main Content” section of the form you’ll see the IMAGE NAME field. This is where you need to put the name of the file you uploaded:

team_widget_instructions

Once you have fully customized everything else within the widget to your liking, you can click the “generate widget” button to get the widget code.

team_widget_instructions

If you Right Click on the code, it should automatically select and give you the option to copy. Once you have copied the code, go back into weebly and drag the “embed code” icon into the area you want the widget to be displayed:

team_widget_instructions

Now simple paste the code from the WIDG into the embed code element you just dragged into your content area:

team_widget_instructions

NOTE: You will notice the image doesn’t appear in the Weebly Dashboard. It will however appear once you’ve published your site:

team_widget_instructions

Weebly Templtes