Modular Layout
We are delighted to introduce our latest enhancement – the Module Layout. This innovative layout option empowers users by enabling the assignment of distinct modules to individual rows. This capability offers a heightened level of control, facilitating the precise determination of content display sequences and arrangements.
Design and Configuration of Module Layout
Choosing Modular Layout
To enable the module layout, kindly follow these steps:
- Navigate to KB Configurations.
- Access the settings Tab.
- Select the Main page section.
- Within the Layouts options, opt for the Modular setting.
Alternatively, you have the option to proceed through the setup wizard, wherein you can select from a range of predefined layouts. These layouts are conveniently designed and categorized into six distinct module presets for your convenience.
Explanation of the Rows
Each row has the capability to be allocated a specific module, affording you the discretion to determine the sequencing of module presentation as per your requirements.
Navigation Mode
The navigation mode pertains to the configuration for designating the module assigned to a specific row. The enclosed green text within brackets indicates the existing assignment of modules to respective rows.
Row Width Settings
Refers to the complete span of width occupied by the row.
Search Module
The Search Box module searches the current KB articles using WordPress search queries.
Configuration
-
Navigation Mode: The designated module corresponding to this row’s assignment. Search Module is selected in this example.
-
Row Container Width: Refers to the complete span of width occupied by the row.
-
Layout: The search box is presently offered in two distinct styles.
-
Title: Title Text Color
-
Search Background: Background Color of the whole search box.
Search Result Excerpt
If the article includes an available excerpt, it will be showcased within the search results corresponding to that specific article and its associated value.
Categories & Articles Module
The Categories and Articles module presents Knowledge Base articles in a categorized format. Each primary category has its own container that holds the subcategories along with all the articles assigned to them.
Configuration
Layout:
Classic Layout: This layout presents articles and categories in a traditional Knowledge Base style. Categories have their own sections containing articles, along with nested sub-categories.
Product Layout: This layout is optimized for showcasing a substantial volume of articles. Categories open in distinct boxes, with further expansion options for sub-categories.
Category Collapse: This setting toggles between expanding or collapsing all categories.
Sidebar Option
The sidebar feature enables the display of a sidebar next to the categories and articles. At present, this sidebar option provides two lists of articles: “Newest Articles” and “Recently Updated.”
-
Sidebar Width: The width of the sidebar is determined by the width of the row it is placed in.
For instance, if you choose a row width of 100% and then set the sidebar width to 30, the sidebar will take up 30% of the row’s width, leaving 70% for the categories and articles.
Alternatively, if you set the row width to 1000px and assign a sidebar width of 300, the sidebar will occupy 300px of the row’s width, while the remaining 700px will accommodate the categories and articles.
It’s essential to ensure accurate configuration of the sidebar width in relation to the chosen row values. Mismatching a 100% row width with a 300px sidebar width can lead to layout problems and disrupt the overall design.
If you set your row to 1000px, and you set your sidebar width to 300. Your sidebar will be 300px of the row width and the categories and articles will be 700px
Make sure you are setting your sidebar width correctly according to the row values you set. If you set your row width to 100% and you set your sidebar width to 300, that will cause layout issues and break the layout. -
Sidebar Location: Choose whether you want the sidebar to appear on the left or right of the categories and articles section.
-
Sidebar Position 1: Choose this option to display the feature as the topmost item in the sidebar.
-
Sidebar Position 2: Choose this option to display the feature as the second item in the sidebar.
FAQs Module
The Frequently Asked Questions (FAQs) module is designed to present Knowledge Base (KB) articles in a clear and organized list format. This module offers the flexibility to either retrieve complete article content or provide concise text excerpts through the Excerpt feature. By selecting specific categories, the FAQs module will showcase all relevant articles within those chosen categories. Notably, the categories that are opted for will be omitted from presentation within the categories and articles module, thereby eliminating redundancy in content display.
-
Navigation Mode: The designated module corresponding to this row’s assignment.
-
Row Container Width: Refers to the complete span of width occupied by the row.
-
Content Mode:
- Content: This mode facilitates the extraction of the primary content of the article.
- Excerpt: This mode enables the retrieval of the article’s concise excerpt data.
-
Tailored CSS Class: Allocate a distinct class to the container to facilitate sophisticated CSS customizations. Recommended exclusively for adept web developers.
-
Knowledge Source Selection: Opt for the appropriate knowledge base from which to extract data for your frequently asked questions (FAQs).
-
Categories: Choose which categories will be displayed as FAQs.
New and Recent Articles List
The “New and Recent Articles List” presents two sections containing lists of articles: one for recently added articles and another for the latest articles.
Advanced Customization with CSS
For additional personalization of the main page’s modular layout, you have the option to incorporate custom CSS within this section. Alternatively, you may choose to integrate it into your child theme for a more cohesive customization approach.
/* Row Margins Top / Bottom
Choose which Row you wish to target
#epkb-ml__row-1
#epkb-ml__row-2
#epkb-ml__row-3
#epkb-ml__row-4
This example adds top and bottom margin for row 1
*/
#epkb-ml__row-1 {
margin-top: 100px;
margin-bottom: 100px;
}
