Select Page

Checking FAQ structured data with Google

Using FAQ Structured Data

FAQ is a common functionality across websites. FAQ’s talk about a subject, product or company.

Businesses convert asked queries into a FAQ. This helps in reducing the workload on your support team as well as helping on page conversions. The more questions you answer, the more informative your website becomes.

How is the FAQ Presented

The standard FAQ uses HTML markup on your website. In this state it makes it hard for Google to complete its goal.

The Google Mission

Googles mission is to organise the worlds information and make it accessible for all.

It’s impossible for a search engine to know that the HTML content is a FAQ. What you need to do is make your website talk to Google.

Our FAQ tool does this with Structured Data.

FAQ Structured Data

Google looks for structured data in your webpage to help it understand your content. Using structured data enables your website to talk to Google. This specialised data then means Google knows what your saying and who it will help.

The FAQ plugin has Structured data included.

Testing your Structured Data

To make sure Google understands your structure data, you need to test it. The structured data testing tool by Google performs this function.

To complete a test:

First make sure you use our FAQ Plugin and Module to place the FAQ information on a webpage.

Grab the URL of that page and go to the structure data testing tool (link below)

https://search.google.com/structured-data/testing-tool

Paste in your URL to the fetch URL area. Click the “Run Test” button.

Need an Example?

We have some FAQ items at https://www.diviframework.com/faq/. The screenshot below shows how the testing tool verifies the structured data.

If you visit this link, Testing structured data for FAQ, you will see a live example. Review the output and make sure your have an FAQ Page and Question data.

FAQ structured data testing tool screenshot

Single Column Restaurant Menu Module

The Single Column Restaurant Menu Module shows a simple list of menu items.

With this module you can have a control over which menu items shows up. You can

  • Filter menu items using categories.
  • Set limit on number of items to fetch.
  • Provide an offset which is a starting point of your menu items query.

Single Column Restaurant Menu Module

This module has content, design and advanced options.

Content Options

Fields are

  • Show Price: Toggle switch to show/hide menu item price.
  • Only Show Specific Categories: Allows you to select and show menu items from specific categories.
  • Menu Items Limit: Number of menu items to fetch.
  • Menu Items Offset: Start position of your menu item search query.
  • Sort By: Sort the menu items by title, date and weight field
  • Sort Order: Sort direction (ascending/descending) of your sort query.
  • Currency: Price current symbol.

Design Options

Fields are

  • Has Divider: Toggle switch to show/hide menu item divider. On show, one can set divider color.
  • Menu Item Title text style and typography options.
  • Menu Item Description text style and typography options.
  • Menu Item Price text style and typography options.
  • Tagged Item text style and typography options.

Advanced Options

Fields are

  • Menu item container custom css.
  • Menu item title custom css.
  • Menu item description custom css.
  • Menu item price custom css.
  • Tagged menu item custom css.

Displaying Testimonials

Testimonials are social proof. They helps your customers to better understand your product.

It sometimes creates a 'herd mentality' effect.

Imagine a popular person recommending your product. People following this person would have a positive impact about your product. It may nudge them you buy your product.

Testimonials ease the minds of worried customers and hence helps increase conversions.

Apart from making WordPress plugins and themes, we create custom WordPress websites for corporates and SME mainly via https://www.mrkwebsites.com/. Since the majority of our clients are businesses who are into some kind of trade, we always use our testimonials plugin.

To make the management of testimonials easy, our plugin has a separate area in WordPress admin where you can add, edit, categorize and list your testimonials.

Each testimonial has a name, testimonial text, portrait image, author, job title, author or company URL and a star rating. Adding a testimonial has never been this easy!

Add and update testimonials in the WordPress admin and have them auto-reflected into your frontend without changing the frontend code. How awesome!

How you present testimonials to your potential customers is equally as important. To help, we have incorporated the following types of testimonial views:

  • Testimonials Slider View
  • Testimonials Grid View
  • Testimonials List/Card View

I will elaborate on each view below and explain how to configure it.

Store Locator with Autocomplete

This lesson will help you to setup

  • The google maps and places api key needed for the autocomplete functionality
  • Show you how to use the store locator shortcode with autocomplete along with restricting searches to a country.

Shortcodes

The power of Yoast Local is all based on Short codes.

They have a great array of short codes you can use.

Take a view through the documentation and visit official documentation for Yoast SEO Local.

Our short codes are mostly extensions of the existing short codes.

In each of these Topics we cover of how to use the short codes within the details page for each location using the Divi Builder.

Set Footer by Post Type

Introduction

The Footer Injector plugin provides users with the ability to override the global footer based on a Post Type.

Visit the “Divi Global Footer” in the Theme Customizer

Step 1 would be go to the theme customizer and click on the “Divi Global Footer” panel. Screenshot below.

Theme Customizer

Select the Post Type

Step 2, would be select the Post Type section for which you would like to override the global footer. We list public post types. Screenshot below.

Footer Sections

Show/Hide and Override Footer

For illustration purpose, the screenshot below shows the view when post type Knowledge-base is selected.

Check/Uncheck the “Show Footer” field to show/hide the footer

To override the footer please ensure that

  • You select the checkbox labelled “OVERRIDE GLOBAL FOOTER” will flag this footer to be overridden.
  • Select a footer from the dropdown, from the list of the divi library items which will now be the new footer for this post type.

Override footer

Exit Intent Popover

Exit Intent Popover Module In Action

Introduction

The Exit Intent Popover Module triggers a popover on when the user is intenting to abandon the page.

A javascript code monitors user activity. It tracks for the user’s exit intent – that is when he/she is looking to move the mouse cursor away from the page. This happens when the user is wants to close the browser window/tab or switch over to some other tab.

Module Fields

Content Tab

This tab handles the content-related fields.

It has the following sections

  • Popover: Here you select the popover from the dropbox list.
  • Exit Intent Options : Set various parameters used to calculate the users exit intent.
    • Unique ID: A unique ID. Used to identify the unique popover.
    • Show on every page load: Enable to show the popover on every page view. Disable to show only on the user’s first.
    • Max Displays Per Session: The maximum number of times to show the popover on a page, or 0 for unlimited. Only applicable on desktop browsers.
    • Min trigger Distance: Minimum distance in pixels from the top of the page to consider triggering the popover.
    • Check Referer: Enable to check the page referer. Check whether it’s on the same domain and this isn’t the first pageview.

Design Tab

This tab handles the style-related field for the popover.

It has the following sections:

  • Popover: Set the content width and padding here.
  • Close Button: Set the button font color and size here.
  • Box Shadown: This section is not used by this module
  • Animation: This section is not used by this module

Advanced Tab

This tab handles

  • Assigning of css selectors.
  • Custom css
  • Assigning visibility on various widths (responsive).

Note:

  • Popover Main CSS Class: This is the css class selector value for the popovers main element.

Popover Theme Customiser

Introduction

Theme Customizer is the default way to style a your WordPress website. Divi Popover plugin adds Theme Customizer support for styling popover background and content.

Divi Popover Plugin Theme Customizer

Overlay Section

Popovers have backgrounds to blur the content below the popover. It helps make users focus on the popover content.

Fields are:

  • Opacity: Background opacity of the popover overlay
  • Background Color: Background color of the popover overlay.

Popover Content Section

This section gives options to set the popover content width and padding

Fields are:

  • Content Width: Width of the popover content.
  • Padding Top: Top padding of the popover content.
  • Padding Right: Right padding of the popover content.
  • Padding Bottom: Bottom padding of the popover content.
  • Padding Left: Left padding of the popover content.

Close Button Section

This section styles the close button of the popover.

Fields are:

  • Size: Size of the close button.
  • Color: Font color of the close button.

Button Triggered Popover

Button Triggered Popover Module In Action

Introduction

The Button Triggered Popover triggers a popover on click of a button. It is based on Divi’s Button module. Hence the you will find field settings like those on the Button module with few expections

Module Fields

Content Tab

This tab handles the content-related fields.

It has the following sections

  • Text : Here you set the button text.
  • Popover: Here you select the popover from the dropbox list.

Design Tab

This tab handles the style-related field for the popover.

It has the following sections:

  • Alignment: Select from the button alignment options here.
  • Popover: Set the content width and padding here.
  • Close Button: Set the button font color and size here.
  • Text: Set text color here.
  • Button: Set custom button styling options.
  • Spacing: Set the button margin and padding values here.
  • Border: Set the button border here.
  • Box Shadow: Set the box shadow here.
  • Filters: Set the color filters here.
  • Animation: Set the button animation here.

Advanced Tab

This tab handles

  • Assigning of css selectors.
  • Custom css
  • Assigning visibility on various widths (responsive).
  • Setting of button attributes.

Note:

  • Popover Main CSS Class: This is the css class selector value for the popovers main element.
  • CSS ID: A unique value for the button link. If you have more than on popover on the page, kindly ensure this value is unique.

Image Triggered Popover

Image Triggered Popover Module In Action

Introduction

The Image Triggered Popover triggers a popover on click on an image. It is based on Divi’s Image module. Hence the you will find field settings like those on the Image module with few expections

Module Fields

Content Tab

This tab handles the content-related fields.

It has 3 sections

  • Image : Here you upload or set the image url.
  • Popover: Here you select the popover from the dropbox list.
  • Background: This section is not used for this module.

Design Tab

This tab handles the style-related field for the popover.

It has the following sections:

  • Alignment: Select the image alignment options here.
  • Popover: Set the content width and padding here.
  • Close Button: Set the button font color and size here.
  • Sizing: Set the image sizing here.
  • Spacing: Set the image margin and padding values here.
  • Border: Set the image border here.
  • Box Shadow: Set the box shadow here.
  • Animation: Set the image animation here.

Advanced Tab

This tab handles

  • Assigning of css selectors.
  • Custom css
  • Assigning visibility on various widths (responsive).
  • Setting of image attributes.

Note:

  • Popover Main CSS Class: This is the css class selector value for the popovers main element.
  • Link/Achor ID: A unique value for the image link. If you have more than on popover on the page, kindly ensure this value is unique.

Popover Content Post Type

Popover Content Post Type

Introduction

Divi Popover Plugin creates a post type Popover Content. Use it to create and manage your popover content.

Ensure you Use the Divi Builder on the Popover Content form. Once you do that, all the existing divi modules will be available for use. Using the divi builder ensures you get divi’s grid system to quickly structure your content.

WordPress Admin

Popover listing can be found at WordPress Admin > Popover Content

To add popover content visit WordPress Admin > Popover Content> Add New

Business Directory Map – Divi Module

Introduction

The Business Directory Plugin adds a DF – Business Directory Map divi module.

It renders the location listings on google maps, a business directory on google maps. This module auto-sets the map bounds to contain all the locations. Style your google maps using one of the supplied google maps themes. This module allows for proximity search, where users can search for a location within a radius of the entered location.

For the proximity search to work, please ensure the Google Maps API Keys are setup correctly. Here is an article on setting up Google Maps API Key

Module Listing

Geo Fields Options

Note: The Initial Latitude, Initial Longitude and Initial Zoom are no longer available in the latest version of the module. They have been depreciated. Google maps auto-caculates these values now.

Module Listing

As per the figure above,

  • Initial Latitude: The initial latitude when the map loads initially
  • Initial Longitude: The initial longitude when the map loads initially.
  • Initial Zoom: The initial zoom level when the map loads initially.
  • Google Maps Height: Heights in pixels for the map.

Proximity Search And Map Style Options

Module Listing

As per the figure above,

  • Distance Unit: Select from an option of ‘Kilometer’ and ‘Miles’. This will be used in the radius search.
  • Distance Options: A comma separate value of positive integers. This will be use as the distance unit dropdrown input values on google maps.
  • Map Theme: A set of pre-defined map themes used to style the map.

Add New Business Location – A Custom Post Type

Introduction

The Business Directory plugin creates a post type called “Business Location” which is used to capture address and business details.

Create New Business Location.

Goto to WordPress Admin > Business Locations > Add New . This form will capture the location details.
New Business Location

Business Address Details.

This part of the form captures the address details of the location. The Address tab in the Business Location widget is where the fields are location.

  • Address Line 1: First line of the address. Usually is the house/plot number and the road. This is required field.
  • Address Line 2: Second line of the address field. It is optional.
  • Suburb: The suburb details of the address.
  • Postcode: Postcode/zipcode of the address.
  • Formatted Address: Enter the complete address in the input box and press the search button at the end of the input box. If a way point shows up on the map, your address is geocode. This is important as the location will only show up on the map if its address is geocoded.

Business Details

This part of the form captures the business details. Fields include
* Name: Name of the business.
* Phone: Phone of the business.
* Website: Website of the business.

Business Details

Setting Up Google Maps API Key And Services

Introduction

The Business Directory Module requires a Google Maps API Key setup in WordPress Admin > Divi > Theme Options. This API Key needs to have Google Maps javascript, geocoding and places services enabled in order for the Google Maps to work on the browser.

Quick tip: If this is not setup correctly, there is a javascript error on the Developer Console of Chrome/Firefox browsers.

Setting Up Google Maps API Key

To setup Google Maps API key in your Divi Theme, please refer to the following article https://www.elegantthemes.com/blog/tips-tricks/google-maps-api-key

Setting up API Services

The Business Directory Module needs the following services enabled.

  • Google Maps Javascript API – This is required to display Google Maps on the browser.
  • Google Maps Geocoding API – This is used to geocode the addresses.
  • Google Places API Web Service – This is used by the place search widget on Google Maps

API Services

How To Make Business Location Post Type Public

Business Locations Settings

The Business Directory Plugin has a Business Location post type. This post type is private by default.

You may not always want that to be the case. If you need to create a location layout page in WordPress, you would need to have the post type as public.

To set the post type as public

  • Goto WordPress Admin > Business Locations > Settings
  • Set the Make post type public field to yes

Pro Tip: To make beautiful location layout page, use the Custom Post Builder plugin

Map And Address Divi Module For Location Page

Prerequisite – Public Post Type

The Business Directory Plugin has a Business Location post type.

This post type is private by default. Plugin has setting to change that. Refer to How to make business location post type public documentation for more.


Location Map Module

Business Location Map module shows a google map with a pin of the business location.

Use it on the Business Location single page layout or on any builder divi page. Use the Custom Post Builder plugin to design the layout.

Business Location Map Module Demo

Geocoded Post Meta Fields

Each Business Location stores the latitude and longitude of its geolocation. It uses the Formatted Address field to do so.

Business Location Geocode Fields

Tip: Ensure that you have setup the Google Maps API Key for address geocoding to happen.


Location Address Module

Business Location Address module renders the locations address using the address HTML tag.

Use it on the Business Location single page layout or on any builder divi page. Use the Custom Post Builder plugin to design the layout.

Business Location Map Module Demo

Address Post Meta Fields

Each Business Location has address fields. To show the address, please fill in the fields.

  • Address Line 1
  • Address Line 2
  • Suburb
  • Post Code
  • State

Business Location Address Fields


Map and Address Module Fields

Business Location Map Divi Module

Business Location Address Divi Module

Use Current Location field: This is a toggle yes/no switch field.

  • If you are designing a location’s single page template, set it Yes. It uses the current pages post ID.
  • To show the location map on any other WordPress page with divi builder, ensure the toggle is set to No. Select a business location from the Select Business Location dropdown.

You can also theme Google Maps by selecting a theme from the Select Theme dropdown. This dropdown is a collection of pre-build map themes.

This map module derives from Elegant Theme’s Map module. For more details visit https://www.elegantthemes.com/documentation/divi/map/

Restaurant Menu Module Options

Introduction

Restaurant Menu Divi Module is used to render a multi-column food item menu. It offers the minutest levels of customization. Following are options

Content Tab – Data Options

The Data section in the content tab offers options to help filter out the menu items.

  • Show Category Description: To show the category description below the category title, select this option.
  • Only Show Specific Categories: When enabled, this options will provide additional field to select categories. Menu items belonging to these category will be show.
  • Include from only these categories: This option allows you to select multi-checkboxes. These select categories’s menu items will be displayed.
  • Currency: The currency symbol one would like to show before the price.

Data Options

Design – General

This section has the following options

  • Columns: Used to set the number of columns per row. Values are from 1 to 4.

General Options

Design – Menu Item

Provides options to style the restaurant menu item. Following are the options.

  • Has Divider: If selected, a border is added to the bottom of the menu item which acts as a separator.
  • Divider Color: Color of the border as mentioned above.

Menu Item

Design – Menu Item Title

This section allows to style the menu item title. Some of the options for this include

  • Menu Item Title Font: Set font and styles settings.
  • Menu Item Title Font Size: Set the font size of the text.
  • Menu Item Title Color: Set color of the text.
  • Menu Item Title Letter Spacing: Set the letter spacing of the text.
  • Menu Item Title Line Height: Set the line height of the text.

Menu Item Title Options

Design – Menu Item Description

This section allows to style the menu item description. Some of the options for this include. This is for version 3.0.0 and above

  • Menu Item Description Font: Set font and styles settings.
  • Menu Item Description Font Size: Set the font size of the text.
  • Menu Item Description Color: Set color of the text.
  • Menu Item Description Letter Spacing: Set the letter spacing of the text.
  • Menu Item Description Line Height: Set the line height of the text.

Menu Item Description Options

Design – Menu Item Price

This section allows to style the menu item description. Some of the options for this include. This is for version 3.0.0 and above

  • Menu Item Price Font: Set font and styles settings.
  • Menu Item Price Font Size: Set the font size of the text.
  • Menu Item Price Color: Set color of the text.
  • Menu Item Price Letter Spacing: Set the letter spacing of the text.
  • Menu Item Price Line Height: Set the line height of the text.

Menu Item Price Options

Design – Category Title

This section provides the following options to style the restaurant category text:

  • Category Font: Set font and styles settings.
  • Category Font Size: Set the font size of the text.
  • Category Color: Set color of the text.
  • Category Letter Spacing: Set the letter spacing of the text.
  • Category Line Height: Set the line height of the text.

Category Options

Design – Description

This section provides the following options to style the restaurant category description text:

  • Category Description Font: Set font and styles settings.
  • Category Description Font Size: Set the font size of the text.
  • Category Description Color: Set color of the text.
  • Category Description Letter Spacing: Set the letter spacing of the text.
  • Category Description Line Height: Set the line height of the text.

Category Description

Design – Sub-Category

This section provides the options to style the restaurant sub category text:

  • Sub-Category Font: Set font and styles settings.
  • Sub-Category Font Size: Set the font size of the text.
  • Sub-Category Color: Set color of the text.
  • Sub-Category Letter Spacing: Set the letter spacing of the text.
  • Sub-Category Line Height: Set the line height of the text.

Sub-Category Options

Design – Tagged Item

This section provides the following options to style the tagged item category text:

  • Background Color: Set the background color.
  • Tagged Item Font: Set font and styles settings.
  • Tagged Item Font Size: Set the font size of the text.
  • Tagged Item Color: Set color of the text.
  • Tagged Item Letter Spacing: Set the letter spacing of the text.
  • Tagged Item Line Height: Set the line height of the text.

Tagged Item Options

Advanced – Custom CSS

This module provides fine-grain control over various menu element by offering the ability to add custom css. Following the elements over which custom css can be added.

  • Menu Item Container
  • Menu Item Title
  • Menu Item Description
  • Menu Item Price
  • Category
  • Sub Category
  • Tagged Item

Custom Advanced CSS Options

Sorting categories on a menu listing.

Howto

The menu items are grouped by categories. Restaurant menus are usually grouped on categories like soups, appetizers, mains etc. Often we need to order these categories.

Each category has a “weight” custom field which needs an positive integer value with a minimum value of 1. The sort order is ascending, that is, category with weight=1 will be shown before a category with weight=2.

Creating Menu Items

Howto

Restaurant menu plugin create a custom post type called ‘Menu Item’. Menu item, as the name suggests, is an item on your restaurant menu. This post type depends on the ‘Advanced Custom Fields Pro’ plugin since it adds extra fields.

Standard Fields

  1. Post Title : This will be the title of the menu item.
  2. Post Content: This will be the description of the menu item.
  3. Categories (nested) : One can use upto 2-level nested categories.

Custom Fields.

  1. Has Tag: This boolean field indicates whether the menu item needs to be a tagged and highlighted with a tag text.
  2. Tag: This text field is used to enter the tag text if the ‘Has Tag’ field is enabled.
  3. Multiple Prices? Indicates if the menu item has multiple prices. For example wine can be served by the bottle or glass. There can be upto 3 different types of prices.
  4. Price 1: First (main) price of the item.
  5. Unit 1: Unit (bottle/glass) of the first priced item.
  6. Price 2: Second price of the item. Shows only if ‘Multiple prices’ is checked.
  7. Unit 2: Unit (bottle/glass) of the second priced item.
  8. Price 3: Third price of the item. Shows only if ‘Multiple prices’ is checked.
  9. Unit 3: Unit (bottle/glass) of the third priced item.

 

Restaurant Menu Theme Customiser

Introduction

Restaurant Menu Plugin provides various style customisations for the menu items. This is available in the in the Theme Customizer.

One can visit WordPress Admin > Divi > Theme Customizer > DF Restaurant Menu. Following are the sections of the same.

Theme Customizer Sections

General Section

The General Section has options to set

  • Columns: Sets the default number of columns per row.
  • Background Color: Set the default background color of the main menu container. Please note that, selecting a color will override the Divi Module background setting.

General Section

Menu Item Section

The Menu Item Section has options to set

  • Has Divider: If set, the divider line appears below each menu item.
  • Divider Color: Sets the default color of the divider line.

Menu Item Section

Menu Item Title Section

The Menu item title section has the following font settings for the menu item title

  • Menu Item Title Font: Sets the default font.
  • Menu Item Title Size: Sets the default text size.
  • Menu Item Title Font Style: Sets the default styles.
  • Menu Item Title Color: Sets the default text color.
  • Menu Item Title Letter Spacing: Sets the default letter spacing.
  • Menu Item Title Line Height: Sets the default line height.

Menu Item Title Section

Menu Item Description Section

The Menu item description section has the following font settings for the menu item description. This is for version 3.0.0 and above.

  • Menu Item Description Font: Sets the default font.
  • Menu Item Description Size: Sets the default text size.
  • Menu Item Description Font Style: Sets the default styles.
  • Menu Item Description Color: Sets the default text color.
  • Menu Item Description Letter Spacing: Sets the default letter spacing.
  • Menu Item Description Line Height: Sets the default line height.

Menu Item Description Section

Menu Item Price Section

The Menu item price section has the following font settings for the menu item price. This is for version 3.0.0 and above.

  • Menu Item Price Font: Sets the default font.
  • Menu Item Price Size: Sets the default text size.
  • Menu Item Price Font Style: Sets the default styles.
  • Menu Item Price Color: Sets the default text color.
  • Menu Item Price Letter Spacing: Sets the default letter spacing.
  • Menu Item Price Line Height: Sets the default line height.

Menu Item Price Section

Category Title Section

The Category Section has options to set

  • Category Font: Sets the default font.
  • Category Text Size: Sets the default text size.
  • Category Font Style: Sets the default styles.
  • Category Color: Sets the default text color.
  • Category Letter Spacing: Sets the default letter spacing.
  • Category Line Height: Sets the default line height.

Category Section

Category Description Section

The Category Description Section has options to set

  • Category Description Font: Sets the default font.
  • Category Description Text Size: Sets the default text size.
  • Category Description Font Style: Sets the default styles.
  • Category Description Color: Sets the default text color.
  • Category Description Letter Spacing: Sets the default letter spacing.
  • Category Description Line Height: Sets the default line height.

Category Description Section

Sub Category Section

The Sub Category Section has options to set

  • Sub Category Font: Sets the default font.
  • Sub Category Text Size: Sets the default text size.
  • Sub Category Font Style: Sets the default styles.
  • Sub Category Color: Sets the default text color.
  • Sub Category Letter Spacing: Sets the default letter spacing.
  • Sub Category Line Height: Sets the default line height.

Sub Category Section

Tagged Item Section

The Tagged Item Section has options to set

  • Background Color: Sets the background color of the tagged item.
  • Tagged Item Font: Sets the default font.
  • Tagged Item Text Size: Sets the default text size.
  • Tagged Item Font Style: Sets the default styles.
  • Tagged Item Color: Sets the default text color.
  • Tagged Item Letter Spacing: Sets the default letter spacing.
  • Tagged Item Line Height: Sets the default line height.

Tagged Item Section

Border Section

The form border section provides ability to set global form border style. Options include switch to enable border, border style, size and color. Please note, if border is enabled the global options are applied to the module.

Border Section

Divi Framework - build anything with Divi to create your online business.

30 day money back guarantee

Safe & Secure online payment

Support team & documentation