Main Page Width
The KB Main Page is generated using the KB shortcode. The width of the KB Main Page can be adjusted, as explained below.
Overview
There are two area for the main page:
a) The Search Box
b) The KB Categories
a) Search Box Width
The search box has two modes: full width or boxed.
Note: If you encounter issues with the full-width option, refer to the Troubleshooting section below.
Boxed Width
The boxed width option sets the maximum width of the search box to 1080px, matching the width of the KB Category container.
Full Width
The full width option sets the maximum width of the search box to 100%. The actual width will be determined by the theme's constraints. In this example, the full width is 1920px.
Settings
For more information on basic settings click here.
This setting is located in the Search Box section.
b) KB Categories Width
The KB category container displays articles and their categories.
It has a fixed maximum width of 1080px, which will not be exceeded regardless of theme settings or the number of category columns in the KB. However, the container will shrink on smaller screens.
You can override this with custom code. See our article click here for the custom code.
Troubleshooting
A common question :
“My KB Search box won’t go full width even though its set that way and other elements on the page do go full width.”
In this example, the user has the Elementor page builder, and the KB shortcode was inserted into an Elementor section. However, the Elementor section's width was not adjusted to full width.
To fix this, go to the Elementor section settings and set the content width to "Full width."
Block Themes Width Adjustments
If the width of your knowledge base isn’t taking up the whole page or isn’t as wide as you’d like, and you’re using a block theme, it’s the theme that’s deciding how wide the page should be. Your knowledge base can’t be wider than what the theme allows. The theme controls how wide your entire website appears. This section will guide you through adjusting some width settings for your pages, enabling you to expand the overall space for your knowledge base to make it wider.
In this part of the article, we present two solutions:
Solution 1: Modify the page template specifically for the knowledge base page. This is a good choice if you only want to change one page and not all the others. However, you’ll need to make additional adjustments to the template. This involves adding headers, footers, and any other missing elements to the template. In essence, you’ll be creating the template anew. Click here
Solution 2: Adjust the page template for the entire website, ensuring a consistent width for all pages. This is an easier change to make, but it will affect the entire site in terms of appearance. Click here
Here's an example of the problem with how block themes control their width settings.
WordPress.org
A block theme is a WordPress theme with templates entirely composed of blocks so that in addition to the post content of the different post types (pages, posts, …), the block editor can also be used to edit all areas of the site: headers, footers, sidebars, etc.
You can locate Block themes by accessing the WordPress filter tab on WordPress.org or by navigating to the theme page within the administrative interface.
Changing Knowledge Base Page Width Settings
These steps will guide you through modifying the page of your knowledge base.
Navigate to the Knowledge Base Page
Locate the page where you've put the shortcode for your knowledge base. After that, simply click on that page.
Add Template
- Head over to the Sidebar and select "template" "pages."
- Then, tap on the template icon to add a template.
Create Custom Template
- Give your template a name.
- Press the create button.
Update Width Values
- Find the part of the page where the KB Shortcode is placed. In the sidebar, make sure you see "Post Content" as the selected container name.
- Adjust the content number to 100.
- Change the unit to percentage (%).
- After making the changes, remember to click on the "Update" button and then save your work.
Result and continued fixing
Here is the updated version. Now you can notice that the Knowledge base spans the entire width, but the top menu is not visible.
Continue to edit the template
Now, you should return to the template you made earlier and include the header in it.
Tap on the title of your page. This will position your cursor where the header will go.
- Tap the blue plus icon.
Adding Headers
- Look for the headers pattern and click on it.
- Locate the header you want to use.
- Once you find it, insert it. After that, you can move it higher up on the page if needed.
Changing Page Templates Width
These steps will guide you in adjusting the width settings of your page template, which will impact the appearance of your entire website.
Templates
After you've accessed the theme customizations, go to the "Templates" section.
Pages
Please locate the pages and click on it.
Edit Template
Now that you've opened the page template, follow these steps:
- Click on the section that contains the post content.
- Change the content value to 100.
- Change the unit value to percent (%).
Remember to save your changes and then preview the front end.
Please be aware that these changes will impact all the pages on your website.
