Widgets

Appearance > Widgets

Claremont has support for up to four footer widget columns. To use these simply drag and drop any of the WordPress (or third-party plugin) widgets into the desired footer column.

The home page template also has three extra widget areas. These are named ‘Top Left Area‘, ‘Top Right Area‘ and ‘Above Footer‘.
To display these widget areas the template of your page needs to set to ‘Home Page’ in the ‘Page Attributes’ section of the page editor.

How We Created The Demo Home Page Widgets

Should you wish to recreate a similar home page to our Claremont demo, this is how we did it.

We started by installing these two plugins; Meteor Slides and Contact Form 7.

Creating the contact form

Once you have installed and activated the above plugins, go to Contact > Add New to create a new contact form.

Add the fields you want to use in your contact form and save it.

Claremont Create Contact Form

Copy the shortcode (or make a note of it) for the contact form you have just saved.

Navigate to Appearance > Widgets and drag-and-drop a ‘Text‘ widget into the ‘Top Right Area‘.

Paste the shortcode you previously copied into the ‘Content’ box of the text widget and click ‘Save’.

Claremont Widget Contact Form

Make sure you have set the template of the page you wish to display the contact form to ‘Home Page’, and navigate to the page (or preview it if you are still working on it and it is saved as a draft). You should see the contact form in the top right of the page area just below the menu.

Widget Right Preview

Creating the slider

From the Dashboard, navigate to Slides > Settings

In the image below you can see the settings we used for our demo. We set the slide height to 349px and the slide width to 810px. The slide height you would set may be different depending on the contact form you have set up. You can play around with different heights until you get the desired effect if you want the slider and the contact form to be approximately the same height.

Meteor Slides Settings

To add your own images to the slider, go to Appearance > Slides > Add New.

Enter a title for your slide. The title will be displayed as the large text in your slider.
Enter a link (leave empty if you wish). The button in your slide will link to wherever you enter here.

Edit Slide

Upload an image for this slide by clicking ‘Set featured image’. The image can be any size larger than the dimensions you previously set in Slides > Settings as the Meteor Slides plugin will automatically crop and resize it to your size settings.

In the image gallery or upload image area, enter:

  1. a ‘Caption’ for the image. This is used by the theme as the button text in the slide
  2. a ‘Description’ for the image. This is used by the theme as the text below the title in the slide. The description accepts line breaks if you want the text on more than a single line

Click ‘Set featured image’ to save it.
Slide Featured Image

Once you have created your slides, navigate to Appearance > Widgets and drag-and-drop the ‘Meteor Slides Widget’ to the ‘Top Left Area’ and click ‘Save’.
If you have grouped your slides into different sliders, choose the slider from the dropdown box, or choose ‘All Slides’ if you haven’t set up different sliders and just want to show all your slides.

Navigate to the page you have set as the ‘Home Page’ template and your slider should be there with the contact form displayed alongside it.