Q & A FAQ
Click any question to find the answer or follow the link below to make contact for more info.
The questions and answers explain the setup and features.
Q & A - FAQ
- [1] How is this list created?
- The HTML5 <dl> tag is used since it defines a description list
- [2] How are the list items divided into Q & A?
- The <dl> contains pairs of <dt> (questions) and <dd> (answers)
- [3] Why is this better for SEO?
- The search engines recognise this as a list of pairs of items that are related to each other so it is better than using an unordered <ul> or ordered <ol> list
- [4] How do they open and close?
- The <dt> elements are triggers which slide open the corresponding <dd> on click using javascript
- [5] Animation
- A custom jQuery plugin is used to add an "on" class to the <dd> causing it to slide down
- [6] Q&A Separation?
- The questions and answered have a separator line or can be zebra striped as shown in this example.
- [7] Vertical Align?
- The article and the Q&A can be vertically align at the top or-as in this case - center
- [8] Layout Switch?
- The layout can be switched and the text can appear above or below the Q&A below the Breakpoint
- [9] Image?
- The image is optional. It has a lazy loading option and has controls for adding a border
- [10] Setup?
- The answers are in view for editing on the EverWeb design canvas
Frequently Asked Questions
Lists
Marker List
The list item uses the display property set to "grid" to create two columns for the custom marker and the list item text.
- The list item has a ::before pseudo selector for adding the custom marker using the CSS code version of any HTML character or symbol
- The marker is inserted in column one and the text in column two3
- Using a grid allows the custom marker to be in the "outside" position just like a default list
- When the list item text runs to two or more lines the marker can be positioned vertically at the top or center as required
- The markers can be removed and replaced by a letters or numbers.
The widget can be used without the list for a text box as a better substitute for the EverWeb default text insert function since it has two paragraphs with their own headings and styles for spans and marks.
Spans and marks are entered into the text using the code shown below.
<span>Span Text</span>
<mark>Mark Text</mark>
Auto Incremental List
Incremental List Markers
The numbers are created using the CSS property "counter-increment" property to auto fill the list item numbers in the markers.
The marker is created using a CSS pseudo selector
The numbers appear automatically as the list items are added
The letter preceding the number is optional and is entered as the value in the pseudo elements content property
The markers can be square or rectangular with a border radius
Square markers can be madde rond by checking a box
Markers have controls for font size, color and background color
Markers have controls for inset and spacing from the list item text
List items have controls for font size, color, line height and list item vertical spacing
More …
Both this heading and text and/or those above the list can be left empty if required.
The CTA (call to action) style link us optional. It can open an internal or external page and has a new window option.