Blog Elements
Header/nav, heading/spacer/anchor and a footer for blog entry pages
Blog IndexThe navigation for a blog doesn't have to have any more than links to the home page, the entries list and the archive(s). The navigation shown above has centered inline block links which return to two or more lines on devices with narrow screens.
The optional subscriber signup and search functions open in a modal window are pretty much essential for inserting on every blog page.
The signup form requires MailChimp and the search function requires a Google Custom Search ID.
The responsive heading widget shown above can be configured as an h1 through h4 heading to separate items and/or sections. It has many styling options and can be set up as a container with background opacity and a border and/or box shadow.
The heading can also be configured as an anchor. When used in combination with a suitable link widget, it provides smooth scrolling to the various sections of a long page.
As well as having links to the previous and next posts and related articles, it's a good idea to give visitors a search function and another opportunity to subscribe after they have finished reading the content.
The footer has icons for launching a signup form and a search field in modal windows and a center text section which has an option to add and update the copyright year.
There are separate controls for adjusting the top and bottom padding. Note how the footer on this page has extra bottom padding to acommodate the scroll links or the sticky social media links.
The pair of scroll arrows stick at the bottom of the browser/device window and can be aligned left, center or right.
Clicking the chevron down icon scrolls the page down in steps of 100vh which is the height fo the browser or device window. The chevron up tab smooth scrolls to the top from any point on the page.
Each tab has a control for setting the icon color and hover color and the background color and its opacity.
By default the tabs are round but can be made square by checking a box and then using the slider to add a border radius if needed.
The tabs can show a title on hover if required.
The space between the tabs can be adjusted and there are controls for setting the position in relation to the left or right and the bottom.
There is a checkbox for hiding the tabs when the page is viewed on mobile phones.
The widget can be the last item on the page and positioned below the footer widget.