Georgia Lou Studios

Welcome to the Help Center!

Theme Widgets | Bel Canto

Follow

This tutorial will walk you through the setup of the custom theme widgets for the Bel Canto theme.

 

* If you're new to WordPress and want to learn more about managing widgets, check out our WordPress 101 article: Widgets in WordPress

** For setup instructions for the widget that come with Genesis, see: Genesis Widget Setup

NOTE: Some of these widgets require the installation and activation of a plugin. Make sure you have installed and activated the Recommended Plugins.

 

Included Widgets

Bel Canto includes or has special styles for the following widgets (click widget name to go directly to directions):

 

For the purpose of these directions, we are going to assume you know how to navigate to the Appearance > Widgets page and drag-and-drop a widget into a widget area (Widgets in WordPress).

 

Instagram (Recommended Plugin)

1. Drag-and-drop the Instagram widget into a widget area (Primary Sidebar, Footer Widget Area, etc.)

2. Enter a widget title if desired.

3. Under Username enter your Instagram User Name (NOT your full URL).

4. Select the number of images to show, image size, whether to open links in same or new window and enter text for your profile link.

Example of settings for sidebar widget

Example of settings for the footer widget

5. Click the Save button to save your widget settings.

 

Lightweight Social Icons (Recommended Plugin)

1. Drag-and-drop the Lightweight social icons widget into a widget area.

2. Give your widget a title if desired.

3. Set your Icon size in pixels.

3. Border radius gives your icons a rounded or circular background effect if you chose to use a background color. A radius of 30-50px will give a circular effect.

4. Set your Background Color, Text (icon) Color, Background Hover Color, and Text (icon) Hover Color. You can enter a hex color # or choose from the color picker.

5. Choose whether you want to Open links in new window/tab or Show tooltips

6. Now you will start adding links. Under the left-hand dropdown, choose the icon to display (Facebook, Snapchat, etc.). In the right hand drop down, enter your full network URL (profile link).

Example settings (sidebar widget)

1.png

Example settings for a footer widget (Widget below footer)

2.png

7. Click the Save button to save your widget settings.

 

Bel Canto: Ad Widget

1. Drag-and-drop the Bel Canto: Ad widget into a sidebar area.

2. Give your widget a title if desired.

3. Paste your ad code into the Ad Code area.

3.png

4. Click the Save button to save your widget settings.

 

Bel Canto: CTA Box

1.Drag-and-drop the Bel Canto: CTA Box widget into a sidebar area.

2. Give your widget at title if desired (optional).

3. In the 2nd field, enter the URL (address) of your image.

You can find this by going to Media > Library. Find the image you wish to use and click on the Edit link.

Copy and paste the URL from the File URL box on the right.

11.png

4. In the CTA Heading Text field, enter the heading to appear under the image.

5. In the CTA Caption Text add any additional text you want to appear beneath the Heading Text.

6. In the CTA Image & Button Link field, enter the URL you want the CTA image and button to link to.

7. In the CTA Button Text field, enter the text to appear on your CTA button.

8. Under CTA Image Height, set the height of your image in pixels.

9. Under CTA Box Margin Bottom, you can add extra spacing beneath the widget. Spacing is in px.

10. Click the Save button to save settings.

10.png

Bel Canto: Facebook Like Box

1. Drag-and-drop the Bel Canto: Facebook Like Box widget into a sidebar area.

2. Give your widget a title if desired.

3. In the Facebook Page URL field, enter the full URL/web address for your Facebook page.

* Note, for the widget to work, your Facebook account must be a page, not a personal profile. Learn How to Convert your Profile to a Page

4. If you want to show faces of your page friends, tick the Show Faces box.

5. To show a stream of your recent activity, tick the Show Stream box.

6. To show your cover image, tick the Show Page Cover Image box.

4.png

7. Click the Save button to save your widget settings.

 

Bel Canto: Icon Box

1.Drag-and-drop the Bel Canto: Icon Box widget into a sidebar area.

2. Give your widget at title if desired (optional).

3. In the 2nd field, enter the URL (address) of your image.

You can find this by going to Media > Library. Find the image you wish to use and click on the Edit link.

Copy and paste the URL from the File URL box on the right.

11.png

4. In the Icon Box Text field, enter the text to appear under the image.

5. In the Icon Box Link field, copy and paste the link you want the image to link to.

6. Using the Icon Height field, you can set the height of your icon image. Setting is in pixels.

7. With the Icon Box Bottom Margin you can add extra space below the widget. Setting is in pixels.

8. Click the Save button to save settings.

 12.png

 

Bel Canto: Overlay Widget

1. Drag the Bel Canto: Overlay Widget into one of the Home Page widget areas. (Works best with colored background or image background.

2. This widget displays best WITHOUT a widget title.

3. In the Heading Text field, enter your large heading text.

4. In the Caption Text field, enter the smaller caption text.

5. In the Button Link field, enter the URL link for the button.

6. In the Button Text field, enter the text to show on your button.

7. Use the Increase Margin Bottom & Top to increase the space above and below the text in your section.

8. Click the Save button to save settings.

13.png

Bel Canto: Post List

1. Drag-and-drop the Bel Canto: Post List widget into a sidebar area.

2. Give your widget a title if so desired.

3. Under Select Categories, decide if you want to show All Categories or a specific category in the widget.

4. You can choose to show Recent Posts or Popular Posts under the Post Order.

5. Last, set the Number of posts to display.

6.png

6. Click the Save button to save your widget settings.

 

Bel Canto: Promo Box

1. Drag-and-drop the Bel Canto: Promo Box widget into a sidebar area.

2. Give the widget a title if so desired.

3. Under the title, copy and paste the URL for the image you want to use for your image background on the promo box. See this article if you want to know how to find the URL for images in your Media Library.

4. Enter your Promo text which will display in an overlay on your Promo Box.

5. Enter your Promo Link, the link for the page you want the Promo Box to link to.

6. Enter Promo Box Height and Promo Box Margin Bottom.

7. If you want to Open link in a new tab tick the box next to this option.

7.png

8. Click the Save button to save your widget settings.

* You can add and stack several of these widgets to create a nice image menu in the sidebar.

 

Bel Canto: Sidebar Posts Carousel

1. Drag-and-drop the Bel Canto: Sidebar Posts Carousel into a sidebar area.

2. Give your widget a title if desired.

3. Select whether you want to show posts from All Categories or from a single category.

4. Select your Post Order and Number of posts to display.

8.png

5. Click the Save button to save your widget settings.

 

Bel Canto: Recent Posts

1. Drag-and-drop the Bel Canto: Recent Posts widget into a sidebar area.

2. Give the widget a title if so desired.

3. Under Filter by Category choose posts from All Categories or a specific category.

4. Select the Number of posts to show

9.png

5. Click the Save button to save your widget settings.

 

Bel Canto: Testimonial

1. Drag-and-drop the Bel Canto: Testimonial widget into one of the Home Page or Blog Page full width widget areas.

2. Add a title to your widget (optional).

In the 2nd field, enter the URL (address) of your image.

You can find this by going to Media > Library. Find the image you wish to use and click on the Edit link.

Copy and paste the URL from the File URL box on the right.

11.png

4. In the Testimonial Text box add your text to be shown next to the image.

5. In the Author Text box, you can add additional text for an Author Name and/or site (optional)

6. In the Image & Button Link field, enter the URL for the page you want the image and button to link to.

7. In the Button Text field, enter the text to show on the button.

8. Using the Image width setting, you can set the width of the image. Setting is in pixels. Keep in mind that the maximum size is restricted to the width of the area. This is used to change the image size within the space allotted for the image.

9. Leave the Image Alignment box empty if you want the image to display on the left side. To move the image to the right side, enter right in the field.

10. Using the Margin bottom field you can adjust spacing below the widget. Setting is in pixels.

11. Click the Save button to save settings.

14.png

 

Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk