Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Blog – Configure the Blog Style and Appearance
  5. Customizing the Blog Entries

Customizing the Blog Entries

Navigate to your website admin, browse to Appearance > Customize > Blog > Blog Entries.

Archives & Entries Layout

 To have a different layout for the blog entries or the archives page, here are four pre-provided layouts to choose from.

  • Right Sidebar
    • The sidebar is located at the right, and content body at the left.
  • Left Sidebar
    • The content body is located at the right, and the sidebar at left.
  • Full Width
    • No sidebar, neither on the right nor on the left. A full-width page is fully covered by the content body.
  • 100% Full Width
    • 100% Full Width expands the content body to stretch page width based on the screen-viewing size.

To choose any of the given layouts, just click over a layout type under the “Archives & Entries Layout” label in the Blog Entries panel.

Heading Tag

For the blog entries and archives page, you can customize the heading tag to either become any one of these. It may be for SEO purpose, or to make headings smaller or bigger in size to suit the design.

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • div
  • span
  • p

Just click over the drop-down under the “Heading Tag” label in the Blog Entries panel to select a heading tag.

Add Overlay on Image Hover

You may want to add a nice effect over your blog images. Adding an overlay (dark) makes the image slightly darker yet they look perfectly well and mostly blend really well for the blog images.

For adding an overlay, just click over the checkbox next to “Add Overlay on Image Hover” label in the Blog Entries panel. 

Blog Design

Apparently, it’s a minimalist option to choose a design type from Classic, Grid, or List. The impact it has on the overall blog design is pretty subtle but does make a noticeable difference, to add to the aesthetics and design preferences.

  • Classic
    • The default style with pretty standard blog design. The blog titles are shown in bold, followed by the Author Name, Publishing Data, Category and post comment detail. Thereafter follows the content.
  • Grid
    • It displays each blog entry within a 1px bordered box (square shaped).
    • So there could be multiple posts, showing in a Grid-like format.

You can further customize the Grid option with these settings:

Image Size

You can edit the image display size for the Grid Blog design. Following are the provided options to choose from

  • Thumbnail
    • A fixed 150 x 150 pixels in size.
  • Medium
    • Maximum of 300 x 300 pixels.
  • Medium Large
    • Maximum of 1024 x 1024 pixels.
  • Large
    • It covers for the original image size you have uploaded. It will cater to any dimensions

Just click over the dropdown under the “Image Size” label added right beneath the “Blog Design” to select an image size for the chosen blog design format.

Grid Columns

You can make the grid size larger or smaller. To do so, you can increase the number of columns for the grid. Each grid column would add a blog entry to the design.

For example, a grid column of 2, will display 2 blog entries in the row. Whereas, choosing 4, for example, would add four blog posts to each row, leaving you with smaller grid size.

You get to choose the gird columns from the 2, 3, 4, 5, or 6 as the given options.

Just click over the dropdown under the “Grid Column” label in the Blog Entries page to choose the number of grid columns.

Grid Style

You can choose one out of the two given styles, namely Fit Rows and Masonry.

Just click over the dropdown under the “Grid Style” label in the Blog Entries panel to choose a specific style out of the two.

Equal Heights

If you want to add equal sized boxes for each of the blog entry, you can do so with this configuration option.

Simply click the checkbox next to “Equal Heights” label in the Blog Entries panel to do it.

  • List
    • The category is displayed first, with a much bolder title, followed by the content.
    • The comment details added after it to the left
    • The date is added at the right side.
    • The blog entry is tiled over one another covering full width for each entry. That’s why primarily it’s named as a List.

Display Categories

For the List option, you can choose to either display the Categories or to not display it at all.

If you want to enable this option to display the category, just click the checkbox next to “Display Categories” label in the Blog Entries panel to do so.

Image Position

The image for the List style of the blog design can either be aligned left or right.

Just click over the desired image position under the “Image Position” label in the Blog Entries panel to select.

Vertical Position

The vertical image position can be similarly configured, either to Top, Center, or Bottom. The vertical alignment will be based on overall space available for each of the list item. 

To choose any of the discuss setting, just click over it under the “Vertical Position” label under the Blog Entries panel to do it.

Category Text Color

For this setting to be available to you as well, just make sure you have the “Display Categories” option checked.  You need to display categories first, to be able to edit its design preferences.

It changes the text color for the categories displayed at the blog entry page. To make this change, click over the “Select Color” button under the “Category Text Color” label in the Blog Entries panel to do it.

Category Hover Color

For this setting to be visible to you, it’s important to keep the “Display Categories” option checked first.

If you want to add a different text color on mouse over the categories at the blog entries and archives page, you can do so using this option. Basically, it lets you add a hover color for the category.

Simply click over the “Select Color” button under the “Category Hover Color” label in the Blog Entries panel to make the change.

Comments Text Color

You can quickly change the text color for comment details. The comment detail includes the number of comments your post has received. So if you’re just starting out and have a relatively new blog, it probably would read as “0Comments”.

 Click over the “Select Color” button under the “Comments Text Color” label in the Blog Entries panel to choose the desired color.

Comments Text Hover Color

Just like you can set the color for the comments, you can also set a different color the comments text on hover. That’s when the color changes as you mouse over it.

Simply click over the “Select Color” button under the “Comments Text Hover Color” label in the Blog Entries panel to choose any color.

Date Text Color

The last color customization for the List style of the Blog Design is to change the Date text color.

Just browse the “Select Color” button under the “Date Text Color” label in the Blog Entries panel to change the date color to your liking.

Excerpt Length

The excerpts are in essence summaries of the detailed blog posts. These summaries help your target audience to have a first glance over it to gauge their interest. It helps a user to judge the posts they want to read more about.

There are no fixed text limits for the excerpts, whatever suits your niche, design, and gives a clear content picture is good for the excerpts.

Just use the slider under the “Excerpt Length” label in the Blog Entries panel to change the excerpt length. If you move the slider all over to the right side, at 500, it will display the full post instead.

Blog Pagination Type 

Imagine if you have a popular blog, with hundreds or thousands of posts. Each user who comes to visit your blog will be only able to consume a few posts at a time though. So it’s impossible for anyone to consume thousands of posts in an instant. Besides, it would make the website much heavier, taking almost forever to load as well.

Pagination is used to solve all these problems. It lets you display a certain number of posts first, tagging it as Page 1. The rest of the posts are divided into an equal number of posts and adding links to the rest of the pages on Page 1 to browse the other pages containing other blog posts.

You get to define the pagination type with this setting. It could either be Standard, the one we have just discussed and is the default ones as well. “Infinite Scroll” and “Next / Prev” are the other two options.

Infinite Scroll keeps adding new posts as you scroll over the page. The only drawback is you can’t access a particular post. Unlike Standard, where you can directly click a pagination number (the page link) to browse a specific set of blog posts.

Next / Prev adds two buttons, one for browsing the Next Page for the blog entries (older posts) and other for the Previous page (newer posts).

Simply click over the dropdown menu under the “Blog Pagination Type” label in the Blog Entries panel to edit the pagination type.

Additional Settings for the Infinite Scroll

If you use the infinite scroll option, you can customize it slightly more with a few settings given below.

Infinite Scroll: Spinners Color

When a user scrolls the page, the infinite scroll feature loads more of the blog entries but there could be a time lag. A spinner is shown to cover for the time lag, letting users know there is an on-going server request, we are awaiting a response.

You can change this spinner color to your liking. Just click over the “Select Color” button under the “Infinite Scroll: Spinners Color” label in the Blog Entries panel to do change the color.

Infinite Scroll: Last Text

There may be a few dozen, couple hundred or thousand posts. While not every user will scroll through all these posts, but let’s say you have 10 posts and the user has scrolled enough to see all those posts. Then there’s has to be a way to indicate the end of posts.

Avoori lets you enter a text to indicate the same. By default, these users will see “End of Content” text to indicate it. You can rename it to be anything that makes more sense and may resonate better with your audience.

Just click over the input box under the “Infinite Scroll: Last Text” label in the Blog Entries panel to change the text.

Infinite Scroll: Error Text

There could be any error while loading the posts; you might want to customize this message to take this opportunity to connect with your users. You can customize the message; by default, it would display “No more pages to load”.

Just type in the input box under the “Infinite Scroll: Error Text” label in the Blog Entries panel to change the text.

Elements Positioning

If you like a certain blog design or style, but do not like the sequence of the elements of the same. You can change the sequences as per your preferences. For example, you can put the Title before the Featured Image and so on.

Just click over the elements and drag it above or below the others to change the element sequencing as preferred.

Following are the list of provided elements for changing the sequence.

  • Featured Image
  • Title
  • Meta
  • Content
  • Read More

Meta

The positioning can be changed for the Meta. The Meta includes Date, Author, Categories, and Comments detail.

The Meta by default appears right after the title. The following option lets you change the individual sequence of the Meta items. For example, you can choose to put Date before Author or Comments before Categories. You can create combinations as you wish.

Just rearrange the given elements as preferred using drag and drop, available under the Meta headings in the Blog Entries panel.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?