Specialized Content

Mobile Responsiveness 

---

This widget adds fully editable regions with no backgrounds or special classing (other than the CSS Option tab). It is the perfect choice for most standard content areas.

These fully editable regions allow you to add text, photos, videos, links, tables, or anything else you want. You can use the full Sandhills Editor to add any content, media or HTML.

When you first go to add a new Content Area widget, the first Editable Region is inserted in the settings by default. Click the “Add Editable Region” button to add additional Editable Regions to the widget as necessary.

When first added, they will only be one column wide. You can resize the Editable Region by dragging the lower right corner to the correct size. You may move it anywhere in the 12 column grid by dragging it to that position. The Editor will also allow empty spaces around a defined Editable Region if your design calls for that. These empty areas will follow the 12-column grid as if they were defined by an empty Editable Region.

Editable Regions only expand to the right. If you need to make a left-side Editable Region bigger, move the Editable Region on the right side to the correct starting position, then expand the left Editable Region to the correct sizes.

• Full Width Prefab Layouts
  If you just need a multiple column layout, you can click the corresponding button and it will create the editable Regions for you, equally sized and spaced in the Content Area. Once added, they can be resized like normal. 
  
  
• Grid Size
  Each Editable area is 12 columns in width by default and can be subdivided by adding more editable areas. Twelve columns is the most flexible grid system as you can choose to have 1,2,3,4,6, or 12 equal size (or unequal size) editable regions. If you do need an odd number like 5 or 7, you may change the grid structure by selecting the appropriate option. Each editable area is mobile responsive and will stack in the current order on mobile devices.
  
  
• Make all grids the same height?
  This uses Javascript to set the height of each Editable Region so that all of the regions are expanded to the same height as the tallest region in the widget. This is great for graphical 3 or 4 column rows. Same height does not apply to the stacked mobile (XS) breakpoints.
  

Advanced Content Widget 

---

This is by far the most flexible and powerful tool in the arsenal. It’s a little more complex, but once you understand how it works you can do almost anything you can think of with this tool.

The Grid Pane

This is a two part tool. The first screen is almost identical to the standard Editable Area widget. You set up the grid of content areas on this first screen.

• Full Width Prefab Layouts give you a quick way to add the correct number of columns to your Grid Layout. These will be equally sized across the area. Once added, you can still change their widths to meet your needs. 
  
  
• If you'd like to configure the editable regions manually, just click The ADD EDITABLE REGION button until you have the number of areas your want. Then then drag them to the correct positions and adjust their widths.
  
  
• Once you have the correct number of Editable Regions, drag them to the correct widths. They will snap to the grid size chosen.
  
  
• Choose a Grid Size. Usually, you will leave this at 12 since it is the most flexible. 
  
  
• Lastly, choose whether you need them to be the same-height or not.
  
  
• When you are done, click the blue NEXT button. 

The Background Pane

This screen is where the magic happens. Here you can add all sorts of stuff. You can assign custom classes to your Editable Regions, add background images, set how the regions behave with the background image, and all sorts of other cool stuff. The best part is you can do this for both the individual Editable Regions and the rows that contains those Editable Regions. This makes it extremely easy to layer backgrounds to create different effects.

• The Rows and Columns
  At the top is a graphical representation of all the Widget’s areas. Both the outer row and each editable region inside it are independent and can all have completely different backgrounds, classes, and settings. Because the background container (row) is the containing element, the choices you select for each internal Editable Region (column) can affect the background as well (and vice versa).
  
  To add a background image, just click on the correct row or column from the representation at the top of the window. The border will turn green to show it is active. 
  
  Then click on the correct image inside the media gallery box. Once you’ve chosen an image, it will display as a background image in that element. It will not open up like on a page, but it should give you a good idea of how the elements will work together.
  
  You must have your images already saved to the media gallery before you get here. If you forget, you can set it up as like normal and come back to edit these settings or images after the page has been saved.
  
  
• Select Image / Remove Image
  This was pretty much covered above. Select the container you want to add a background image to, then click on the image. The radio button will be selected, and the image will show up in the corresponding box above. To change the background image, just click a different photo in the media gallery. You will need to make sure the images are already in the gallery before you get here or come back and edit them later. The image sizes are displayed (in px) in the lower right corner for your reference. Pretty straight forward.
  
  If you would like to remove the image from that element, there is a “Remove Background Image” button above the gallery box. This is particularly helpful if you’ve accidentally clicked the wrong element in the graphical representation at the top of the tool.
  
  
• Classes
  Make sure you have the correct box selected (with the green border). Then simply type in your class names and they will be added to the element. You may add as many as you like, separated by spaces. You may use these classes as you would any other class. These classes are what makes this tool unique and extremely powerful. Just add the classes set up for you by your Sandhills designer.
  
  
• Background Color
  You may use hex values for solid colors or RGBA values to create color overlays. If you want to add a gradient, we recommend using a class. One trick is to use RGBA colors on the Editable Region to colorize a photo or background graphic set as the background on the outer row.
  
  You can also use the same trick to darken or lighten a high-contrast photo so that your text has more contrast from it's background image and is more legible.
  
  Here is a RGBA Color Picker 
  
  
• Background Size
  This sets the CSS property background-size. If you’d like to use any other background-size properties, we recommend using classes. The choices here are:
• Cover - fills area and crops off any excess photo.
  
• Contain - scales image to be fully visible.
  
  
• Scale Container to Image
  This uses Javascript to get the size of the background image you selected and then make sure that the container is tall enough to display the whole image. This means you do not have to keep the container open with content. It is extremely helpful if you want to add text or other graphics over the top of a background image as it responds to different screen sizes.
  
  
• Background Repeat
  Pretty standard. Here are the options:
• Repeat - image tiles, or repeats both vertically & horizontally.
  
• Repeat X - only repeats horizontally.
• Repeat Y - only repeats vertically.
• No Repeat - image won’t repeat.  This is probably the most commonly used setting.
  
  
• Background Position
  This sets the anchor for how the background image is cropped by it's container. Choose the most important area of the photo and set that as the anchor so that as the image scales and crops on different screen sizes, the important parts are still visible. This is mainly for mobile, where images tend to get cropped. The first is vertical alignment (Top, Center, Bottom), the second is horizontal alignment (Left, Center, Right).
  
  

To use the file widget

1. Your Sandhills designer will write your code and get the file saved into your site for you.
   
   
2. Add the widget wherever you want the code to display in your site.
   
   
   
   
   
   
3. You're done! If it doesn't show right away, it will after you save the page.

Pop-Up Widget

---

The pop-up widget creates a simple pop-up window on a specific page that can be edited with the full range of editor features. You can set up different editable areas, just like any content area. You can add or edit content as you normally would, it just displays in a pop-up. 

• This pop-up will only display on the page you add it to. It is not a site-wide notification. (See Notification Center   for that.)
• Once you dismiss the pop-up, it will go away until the session is refreshed. 

To add a pop-up to the page, click ADD A WIDGET like normal and select POP-UP from the CONTENT tab.

The settings pane is basically identical the the EDITABLE AREA widget, so it should look familiar. Set up your editable regions and your grid and click ADD WIDGET. In this example I have added 2 editable regions to the pop-up.

When the settings modal goes away, you should see a blank pop-up with your editable areas set up waiting for content. 

IMPORTANT TIP: You will have to change the editor to CLASSIC VIEW in order to access the editor tools. There are technical reasons for this, but the short version is that it is because the pop-up sits above the page (not on the page), the dynamic editor can't be wrapped around it. Just use CLASSIC VIEW to style your content. 

Add your content as you normally would in any editable area.

As you can see I have headings, images, a button and a video in the pop-up and it works fine. 

Also notice the text in the document " Click here to trigger popup. " This is how you can manually trigger the pop-up to make edits. It displays in-line wherever you added the widget, but will be hidden and collapse completely when you are logged out.

Shortcode Widget

---

This widget is adds tons of flexibility because it allows us a way to add 3rd party content from plugins to the site. Most WordPress plugins are managed on the back of the site and use a special short code to tell WordPress itself where to place the output of the plugin. 

Our widget is extremely simple. Just add the widget to the page, paste the shortcode from the plugin in the box on the pop-up, and save the page. When the page reloads, it will pull whatever the output from that 3rd party plugin is and render it on the page where you placed the widget.

You can also manually set up your own files to use shortcodes to add them to WordPress, though you'll need to know some code. Click here to learn more.   

Vertical Spacer

---

This widget is an easy way to give your widgets some visual breathing room. All it does is add blank, transparent space between the widgets or sections above and below it. The beauty of using this widget is that you can specify different amounts of space for the three main screen sizes (desktop, tablets, & mobile).

To add a Vertical Spacer widget, click ADD WIDGET then choose VERTICAL SPACER from the CONTENT pane.

Be default, all 3 views will be set to 30px, which is the minimum height for this tool. Move the sliders to change the amount of vertical space added by the widget for each screen size. You can also type the number into the box.

The Link button will change all 3 sliders to the same setting as set in the line you clicked on, but will not prevent you from changing any of the values after clicking the button.

Remember that you have the CSS OPTIONS tab at the top if you'd like to style the area with background colors, images or anything else. Just set up your classes in the style sheet and call them here.

Adding a Contact Form

• The first lets you set up the individual settings for a form, such as it's title, where it's emailed to, etc.
• The Second is where you will create the form fields. This is the bulk of the work.
• The Third allows you to rearrange and format the form based on the Bootstrap grid system.

• The title / heading that displays at the top of the form
  
  
• The subject line of the email that is sent to the clients
  
  
• The Submission Response Text is displayed to the user after they submit the form to let them know it worked.
  
  
• The Recipients(s) are the email addresses the form sends to by default (To, CC, BCC)
  
  
• The Contact Post Password is the password people use to see the contact form submission posts in the back end of WordPress (default is “sandhills”). Customers will still receive emails of the contact submissions. However, we also automatically save all contact submissions as posts in the WordPress backend. That way if a client ever deletes one or has issues with email, they can still access their contact form submissions.
  
  The Password you set is necessary to retrieve the encrypted posts and view them in WordPress. The default password is set to “sandhills.” We recommend leaving it as the default unless the client specifically requests it be changed.
  
  A password is not required for the email(s) that are sent to the client.
  
  
• The Redirect Page Link is for when you want a Thank You page or you want the customer to have access to download files or see unique content. Just paste the URL of the landing page in the box and the customer will redirect after submission instead of getting the Submission Response Text .
  
  
• Open in a New Tab? will pop the Redirect Page Link to a new tab after submission.
  
  
• Hide Form After Submission? will make the form go away after a successful submission to let the user know that their form submitted and they don't need to do it again. If they refresh the page, it will come back.
  
  
• reCaptcha is now optional on forms (though highly recommended). Add reCaptcha is what turns it off or on. we very highly recommend leaving it on unless the customer is insistent. People often think they don't like reCaptcha until their SPAM emails start growing exponentially. Then they start to love it.
  
  
• The ReCaptcha color behind the icons (default is blue)
  
  
• The ReCaptcha failure message if the user does not pass the reCaptcha (usually because they missed it), this error message will display.
  
  
• The Input Styles pane lets you add basic styling to the form without messing with code or CSS.
  
  
• Border Color is the color of the input boxes on the form
  
  
• Focused Border Color  can change the border color when a user clicks on the box to show it is active.
  
  
• Border Radius is how rounded the corners of your input boxes are.
  
  
• Border Width is how thick the borders are.
  
  
• Space Between Inputs  is the amount of padding between elements on the form.
  
  

• Text field (single line of any text)
• TextArea field (multiple lines of any text)
• Email field (validates an “@” symbol and “.com/.net/.etc”)
• Phone field (numbers only)
• Checkbox (see below)
• Radio Button (see below)
• Dropdown Selection Box (see below)
• HTML Block (see below)
• Multiple Upload (adds a browse and upload button to the form)
  

Adding Checkbox Questions to your Form

• Saved Value
  This is the value that is actually saved in the database, emailed to the client, and saved in the Contact Submission Post in the backend of WordPress. This does not have to match the Displayed Value, but it usually will. Both Saved Value and Displayed Value are required.
  
  
• Displayed Value
  This is the value that is actually displayed to the customer on the front end of the site. This does not have to match the Saved Value, but it usually will. Both Saved Value and Displayed Value are required.
  
  
• Recipient(s) if selected
  This is totally optional and will only be used in certain circumstances. However, it’s an incredibly useful feature for clients. This will allow you to overwrite the default recipient on the form and send the email to someone else if this value is selected. This is great for general contact forms to get directed to the correct department (sales, customer service, parts, etc.).
  
  This field will likely be left blank on most forms, but if you do fill it out, both saved and displayed values are required as well. You may add multiple recipients by listing them in a comma separated format. (ex: email1@domain.com, email2@domain.com)
  
  
• Add Another Option Button
  Clicking this button will add another row to the Options List for you to fill out. If you add a row and don’t need it, just leave it blank and the field will not display on the form.

Adding Radio Button Questions to your Form

• Saved Value
  This is the value that is actually saved in the database, emailed to the client, and saved in the Contact Submission Post in the backend of WordPress. This does not have to match the Displayed Value, but it usually will. Both Saved Value and Displayed Value are required.
  
  
• Displayed Value
  This is the value that is actually displayed to the customer on the front end of the site. This does not have to match the Saved Value, but it usually will. Both Saved Value and Displayed Value are required.
  
  
• Recipient(s) if selected
  This is totally optional and will only be used in certain circumstances. However, it’s an incredibly useful feature for clients. This will allow you to overwrite the default recipient on the form and send the email to someone else if this value is selected. This is great for general contact forms to get directed to the correct department (sales, customer service, parts, etc.).
  
  This field will likely be left blank on most forms, but if you do fill it out, both saved and displayed values are required as well. You may add multiple recipients by listing them in a comma separated format. (ex: email1@domain.com, email2@domain.com)
  
  
• Add Another Option Button
  Clicking this button will add another row to the Options List for you to fill out. If you add a row and don’t need it, just leave it blank and the field will not display on the form.

Adding a Dropdown Selection Field Questions to your Form

• Saved Value
  This is the value that is actually saved in the database, emailed to the client, and saved in the Contact Submission Post in the backend of WordPress. This does not have to match the Displayed Value, but it usually will. Both Saved Value and Displayed Value are required.
  
  
• Displayed Value
  This is the value that is actually displayed to the customer on the front end of the site. This does not have to match the Saved Value, but it usually will. Both Saved Value and Displayed Value are required.
  
  
• Recipient(s) if selected
  This is totally optional and will only be used in certain circumstances. However, it’s an incredibly useful feature for clients. This will allow you to overwrite the default recipient on the form and send the email to someone else if this value is selected. This is great for general contact forms to get directed to the correct department (sales, customer service, parts, etc.).
  
  This field will likely be left blank on most forms, but if you do fill it out, both saved and displayed values are required as well. You may add multiple recipients by listing them in a comma separated format. (ex: email1@domain.com, email2@domain.com)
  
  
• Add Another Option Button
  Clicking this button will add another row to the Options List for you to fill out. If you add a row and don’t need it, just leave it blank and the field will not display on the form.

Adding HTML elements to your form

Multiple Upload 

• Almost any word processing document
• PDF
• ZIP
• JPEG
• PNG
• GIF

Folder Gallery

• Selected Folder 
  Choose the Folder from the file tree on the left (in this case, Avatars). You will see a preview of the images on the right. You do not have to select images as all images in the folder will be added to the slideshow. You will manage the images in the slideshow by managing the images in the folder. You will generally want a folder for every different slideshow.
  
  
• Sizing
  This is the individual shape of each of the containers the images are bound in.
  
  
• 4x3, 3x4, Square, 16:9: These are fairly normal aspect ratios for images. Choose the dimension that best fits your design or your images.
  
  
• Custom Ratio: Use this to create a photo grid that conforms to your own aspect ratio that best fits your particular images.
  
  
• Unchanged: This will equally space the images and center them as best as it can in each row. Each image will be fully visible. You get some weird alignment and spacing if you have widely varying images sizes though.

• Interval
  The Slide Interval is how long each slide is presented before the next one comes in. It is set in milliseconds (1000 milliseconds = 1 second). So if you want something on the screen for 3.5 seconds, you would set this to 3500. The default value is 5000, or 5 seconds.
  
  
• Transition Type
  This just sets the type of animation between slides.
  
  
• No Transition: No transition, the slides just instantly replace each other
  
  
• Slide Transition: The next slide flies in from the right to push the old one out.
  
  
• Fade Transition: The new slide fades in to replace the old slide.
  
  
• SET IMAGE POSITION
  This just sets the position of the image anchor. You can choose TOP, BOTTOM, or CENTER. This is important as we set the width to 100% and anything that falls outside the defined box parameter will be cropped off.  Center is likely the one you would choose most often, but it depends on where the focal point for your images are. 
  
  
• Title Display
  Chooses whether you want to display the image's TITLE. This can be set in the MEDIA page of the Dashboard. Caption Display Chooses whether you want to display the image's CAPTION. This can be set in the MEDIA page of the Dashboard.

1. To select your photos for the gallery , just click on each image to select it. You will see a green border and background around it as well as a checkmark in the box to designate that it is selected. Click it again to deselect it.
   
   
2. The aspect ratio is the last thing you will need to select. There are several sizes predefined that you can choose from. If you select one, it will scale the image to fit nicely in that proportion. It does this by setting the image as a background image then adding a clear .PNG of the correct proportion as the foreground image. This image will stretch to fit its container and display as much of the background image as possible. When a user clicks one of the images in the grid, it will display in a light box and show the full image as large as possible.
   
   If you don’t like the standard sizes here, you may select Unchanged which will not crop the images. Be aware that the images will NOT have standard sizing unless all your image are identically sized and this may create irregular spacing.
   
   You may also designate your own ratio that better fits the page or your images. It will work identically to the pre-defined images, but will use the ratio you select.
   
   
3. Select your Grid size (6,4,3,2, or 1 image across). In this case I have 7 images selected and a grid of 3. So it will do two rows of 3 images and then wrap to a new line with the last image.
   
   
4. Add Image Spacing between the images in the grid if you want. The setting is in px.
   
   
5. Zoom Icon on Hover will add a dark overlay to the image and adds a magnifying glass icon when moused over to encourage users to click on the image. Either way, when the image is clicked the image lightboxes out. 
   
   
6. Once you have all the images and options selected, just click the “Add Widget” button and your Gallery is added to the page. It will scale to fit the Section it is in using the selected grid.

1. Select the images you want to use. You'll see the check mark and the background will turn green.
   
   
2. Choose your ASPECT RATIO .
   
   
1. Predefined aspect ratios will crop the image to fit.
   
2. Custom ratio allows you to choose your own ratio to fit your design.
   
3. Unchanged will use the image's ratios, but the page could jump if the images are different ratios.
   
   
3. Set up your Slideshow Options . You can set how fast the slides move and whether they fade in or slide it.
   
   
4. Show Image Captions will display any captions added to the individual images from the back-end MEDIA page in the WordPress Admin section.
   
   
5. Click ADD WIDGET to add it to the page.
   

Post Widgets

Advanced CPT Layout

STEP 1: Fill out the settings

CPT SETTINGS PANE

• Post Type
  Choose the Post Type you would like to work with from the dropbox. 
  
  
• Order By
  Choose which field your post are ordered by using this setting.
  
  
• Order Direction
  Choose which way your post order from here (descending / ascending )
  
  
• Taxonomies
  If your CPT uses Taxonomies (categories), you can use this (or not) to filter your listings.
  
  
• Terms
  If you are using Terms (individual tags within a Taxonomy) to tag the posts, you can choose those here to filter content. You can choose multiple Terms to filter by.
  
  
• Term Relation
  If you filter using multiple Terms, you can select AND so that both Terms must be tagged to the post for it to display, or you can choose OR to display any posts that are tagged with either Term independently.
  
  
• Number of post in each row
  In the next group of dropboxes, choose the number of posts you would like to display in each row. You can choose up to 4 posts per row.  There is a dropdown for each screen size (large, medium, and small screens) extra small screens will default to 1 post per row.
  

• Number of posts on each page
  This is the total number of posts to display on the page. Use this in conjunction with the Number of posts in a row field to control the maximum number of rows you want displayed on the page. For example, if you want 3 rows of 4 posts for your design, you would set the Number of posts on each page to 12.
  
  
• Display all posts
  If you always want all posts to display, check the box.
  
  
• Display Post Title
  Display the post title or not.
  
  
• Add border and padding
  Choose to add predefined border and padding styles here. This adds additional classes to give the posts a card layout look. You can overwrite these styles to customize the look in style.css.
  
  
• Slider/Grid 
  Choose whether your posts layout in a slider (one row of items, displaying in a slideshow) or a grid (rows of items all laid out in a grid).

STEP 2: Write the html output structure

Understanding Field Identifiers

• The Bold Underlined Section: is the field name in the CPT. You don't need this, other than to understand which field you are calling.
  
  
• The Bold Variable starting with a $ is the variable itself. Insert this anywhere you want to output the data from that field in the CPT. Just structure your HTML like a static element, but use the variables in place of the content.
  
  
• At the rear is the (field type in parenthesis). This helps you understand the type of data that will be output on the page so you can use the correct variables in the correct place.
  
  For example, get_permalink(); calls the post's detail page. You probably wouldn't use that as text on a page, but they are fantastic inside a link, for example: <a href="get_permalink();"> click here </a>.  The link will universally display " click here " on each item, but each link will direct to the correct CPT detail page.

Please Note:

STEP 3: review and modify

Custom Post Content Area

STEP 1: add the widget to your page

1. Select the CPT you want to add to the page using the POST TYPE field.
   
   
2. Configure your settings.
   
   
3. Activate the fields you would like to display by checking the box in the CONTENT LAYOUT pane.
   
   
4. Resize and rearrange the fields as needed by dragging them up and down in the CONTENT LAYOUT pane.
   
   
5. Click ADD WIDGET to add your CPT content to the page!

1. Click the EDIT DEFAULT HTML button below the Content Layout window.
   
   
2. Make your modifications to the fields you would like to (add classes, change structure, etc.) and click the SAVE EDITED HTML button at the bottom to lock in your changes.
   
   
3. Click ADD WIDGET to add the CPT Content to the page.

POST CONTENT AREA

add the POST CONTENT widget to your page

Post Display Settings Pane

• Number of Posts on each page
  This is the total number of posts. Use this in conjunction with the next field (Number of posts in a row) to determine how big you want this section to be.
  
  
• Display All Posts
  If you would like to show ALL posts, check the box.
  
  
• Number of posts in each row
  This is where you set your grid. You can choose up to 4 posts per row. 
  
  
• Posts Padding (px)
  Adds a little space around your posts.

Post Filter Settings Pane

• Post Category  Filters output to specific categories.
  
  
• Order By  Choose the field and the sort direction.

Post Content Settings Pane

Calendar

STEP 1: Create Calendar CPT

STEP 2: Create some Calendar Events

Step 3: Add Widget to Page

Please NOTE:

Now that you've seen the whole process, there are a few things to note:

• You will obviously want to style the pop-up to match your site.
  
  
• The DESCRIPTION box shows up in the mouse-over bubble, so keep it somewhat short.
  
  
• The AUCTION LISTINGS only show up in the event's SINGLE page (details).
  
  
• The LINK you set up will be activated when you click on the blue bar in the calendar. If you want it to go to the event detail page (or single view for the CPT), you'll need to give it the relative link from the SLUG .
  EXAMPLE :  /calendar-events/name-of-event .
  
  
• The START TIME & END TIME are just text fields that can be anything. The calendar only cares about dates.

Testimonials Widget

---

This widget is technically just a specialized Custom Post Type. It requires both back-end and front-end editing. You enter the actual testimonials in the backend of WordPress like a traditional WordPress plugin, but you add the testimonials to the front end of the site by adding a widget.

Testimonials Backend

To add a testimonial, go to the dashboard and click the testimonials tab on the left. There will be a list of all testimonials added to the site, as well as a button to add new testimonials. Click Add New.

Fill out the information on the form to match your design. If no content is filled out, the field will not be displayed on the front end. All options can by rearranged or prevented from outputting in testimonials.php and styled in testimonials.css. More info on that below.

• Enter Title Here
  This is the title that appears on the top line of the testimonial below the stars by default.
  
  
• Content area
  This is the bulk of the testimonial itself. The style applied by the editor does show up in the output.
  
  
• Name
  This is the name of the reviewer and comes next. By default it’s big and bold by default.
  
  
• Title
  Comes under the name, italicized by default.
  
  
• Relationship
  Comes under the title, italicized by default.
  
  
• Rating
  This is a 5 star system. The number you give it is the number of stars it outputs. (The higher the better). This actually displays above all text on the testimonial by default.
  
  
• Image
  Browse and upload an image. It will display at the top of the testimonial by default.
  
  
• Website
  Adding this will link the whole testimonial to a specified URL. Be sure to include the http:// if it goes outside the current site.

Testimonials Widget

Super basic widget. It just inserts the placeholder that renders the testimonials.

Choose which category you would like to display on the page. The above example did not have any categories set up, so we just have the two default values: All Testimonials and Uncategorized Testimonials.  Click the Add Widget button. Done!

Be aware that if there are no testimonials saved in the back-end, it will NOT look like the widget is working. It is. It just has no content, and so it is completely collapsed. It’s best to add a few testimonials in the back-end before adding a widget to the page.

Modifying Testimonials

We know that no two testimonials sections are ever designed to look the same. To that end, we have given you access to the file that builds the output in PHP and the specific CSS file for this widget.

The files can be found in the WIDGETS folder inside your account folder. Both are fairly well commented so you can understand what builds what.

The testimonials.php file will allow you to cut, paste, copy and delete the individual sections of the testimonials widget so that it has the perfect amount of information, in the perfect order. You can also add or change the structure of the testimonials in the file. Feel free to update this file however you would like. Some people even add carousels to the testimonials to create moving slideshow of glowing customer reviews.

The testimonials.css file has all the classes that make up every different part of the testimonials widget. They are fairly clearly labeled, but if you have questions, just inspect the output in your browser and you should be able to figure out which classes affect each section of content.