The Website Builder includes over one hundred Widgets for you to use when customizing your website. As they are fully featured and able to do many things, they can be overwhelming to those who first start using them.
A Widget in the Website Builder is something you add to your page that does something, such as display text, an image, a spreadsheet table, or a video, for example.
The Widgets are broken down into groups, such as Grid, Text, Image, Button, Media, and others.
This Knowledgebase Article covers the Archive Widgets in the Website Builder. As the widgets are all somewhat similar in terms of what options they have, we’ll be covering a few widgets.
All About the Archive Widgets in the Website Builder
Archive TItle Widget
The Archive widgets are used on pages where you display your archives. The Title widget shows a title of your archives. When inserted on a page, the widget looks like this:
Archive Title Widget Settings
There are some settings for this widget you should be aware of, including:
- The Alignment setting lets you align the title to left, right, or center.
- The color setting lets you adjust the color of the text used in the title.
- The Typography setting lets you control the font that is used in the widget title.
Archive Posts Widget
The Archive Post widget lets you insert a list of posts that are marked as archives. This is useful if you have a page dedicated to your blog’s archives. When inserted onto a page, the widget looks like this:
As you can see, there are some blogs in the demo site we’re using that are marked as archived.
Archive Posts Settings
The Archive Posts settings let you adjust various settings, including:
- The type of post to display.
- The number of columns in the widget.
- The gap between the columns.
- The gap between the rows.
- The padding around the individual blog squares.
- The margin around them and the rest of the page
- The background color used.
- And if you want a shadow around the squares.
The Thumbnail Style settings allow you to adjust the following:
- Whether you want to show a thumbnail from the blog post or not.
- The type of thumbnail image to show
- The Size of the image to show.
- And the height ratio compared to the other thumbnails.
- The Show Title option lets you enable or disable the display of the blog title.
- The color option lets you change the color of the text displayed.
- The typography setting lets you control the font that is used.
- The Top Bottom Spacing lets you adjust the spacing at the top bottom of the widget square
The Meta Options let you adjust the following settings:
- Which Meta Tags to show in the summary beneath the thumbnail.
- The Separator that separates the tags.
- The color of the tags.
- The background color of the meta aera.
- The alignment of the meta area.
- The spacing around the meta area and the other areas of the square.
- The border radius.
- The typography / font that is used.
- And the position of the meta tags.
The Content settings let you adjust the following:
- Whether any content from the blog post is shown beneath the thumbnail image.
- The length, in words, that should show for an excerpt.
- The padding around the area the text isl ocated.
- And the alignment of the text.
When enabled, the Read More button will appear beneath the excerpt text. You can also control elements of this including the font, color, and alignment.
The Paginate Links lets you control pagination settings, if there is more than 1 page of archived blog posts. You can adjust the following settings:
- The Pagination type.
- Whether it’s on and where.
- The text that is used for previous page and next page.
- The End and Mid size.
- And the before and after page numbers.
The Paginate Links Style lets you control how the links that are the page numbers display.
You can change the following settings:
- What font is used.
- The colors that are used and you can adjust their hover over animations.
- The space between the links.
- And the padding around the page number links.
Author Box Widget
The author box widget lets you insert a box that has details for the author of the blogs, along with their photo and title, along with a description about them.
When inserted on a page, the widget looks like this:
Author Box Widget Settings
The Author Box settings let you adjust the following:
- The Source Type, such as the Current Author, or a custom setting.
- You can choose to display the author’s picture, if you want.
- You can choose to show the author’s name or not.
- You can change the style that is used for their name, from H1 to H6.
- You can opt to make their name a hyperlink and you can set a custom destination.
- If the author has a website in their profile, you can have it show with the Show Website option.
- If the author has other posts in the archive, you can show a button that users can click on to take them to all of that author’s archives.
- You can change the layout and alignment settings for the author box, from left, center, and right.
The Image settings let you control the following:
- The Size of the author’s image, if it’s displayed.
- The gap between the author’s image and their name.
- Whether or not you want a border around their image box.
- The radius of the border.
- And whether or not you wanted a Shadow beneath the photo.
The Text settings let you control the following options:
- The Color of the text.
- The typography or font that is used.
- The gap between the text of the author and the rest of the widget.
- The Color of the bio text.
- The Font used for the author’s bio text.
- And the gap that is in between their name and the area where the author bio is displayed, if there is one.
The Button settings let you control the following options:
- The Type of button that is used.
- The size of the button used.
- The state, i.e. should the button be static? Or should it have an animation when hovered over?
- Whether you want a border, such as a dotted, dashed, solid, etc border around the button.
- And the gap between the button and the rest of the widget.
Universal Widget Options
There are many options that are common to all of the widgets, including:
- Background Style
- This is a setting that is specific to the page layout. You can change the whether the background appears as a normal background or if you want the background to change when you hover over it.
- Background Type – This setting allows you to choose from the following settings:
- None – There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.
- Color – You can specify a custom color for the background.
- Gradient – You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.
- Image – You can upload a custom image to use as your background.
- Box Style – This setting allows you to adjust the padding and margin for the box that contains your blog post.
- Border Style – This setting allows you to control the following settings:
- Normal – You can have a normal border which is always there.
- Hover – You can have a border that only appears when the area it contains is hovered over.
- Border Type – You can choose from the following border types:
- Border Radius – You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.
- Font Style – This setting allows you to control the following settings:
- Font Family – This setting will allow you to change the font used on the entire page.
- Font Size – This setting allows you to change the size of the text used on the page.
- Font Style – This setting allows you to choose from the following font styles:
- What is Oblique? Oblique type is a form of a type which slants slightly to the right. It is similar to Italic, but it does not use different glyph (individual letter) shapes.
- Font Weight – This allows you to change the weight of the fonts used on the page.
- Font Variant – If the font you have selected has a variant, you can select it with this setting.
- Typical variants include, Small Caps and Big Caps.
- Animation – With this setting, you can configure number
- Attributes – With this setting, you can apply custom attributes using code.
- Custom CSS – if you want to change certain elements on the page using CSS, you can paste in the code to do that here.