Add and Customize Read More Break in Weebly Blog

Each blog post of your Weebly site will also appear on the blog index page. The number of recent posts to be shown on the blog index page is controlled between 1 and 25 under “Settings > Blog > Posts per page”. Assume you have last 10 posts to be displayed on the blog page and each post having more than 600 words of lengthier content. In such scenario, the blog index page will be very lengthy with almost no possibility for the users to view older posts.

What is Read More Break?

Since blog index page plays a vital role being part of navigation, it is a good idea to keep the page attractive and “Read More Break” element helps in doing that. When you don’t want all lengthy post content to be displayed on the blog index page, add a “Read More Break” so that the content up to the break will be displayed on the blog index page.

How to Add it?

When you click on the blog post, automatically a “Read More Break” element will be shown under “Basic” category of elements. Once you drag and drop the element, there will be placeholder text mentioning “Content below this line is only shown after clicking “Read More”” as shown in the below picture.

For example, add “Read More Break” after the first paragraph of all your blog posts. This helps to display only the first paragraph of posts on the index page with an option for the users to click on “Read More” to read further content of each post. This makes the index page more attractive within the scrollable length and displaying introduction of all posts to be shown.

Points to Note

• “Read More Break” element will not have any impact on individual blog posts either on the editor or on the published content.
• “Read More Break” will only be displayed on the blog index page both on the editor as well as on the published site.
• Adding more “Read More Break” elements will not have any impact and the first element will be used for breaking the content on index page.

Customizing Read More Link on Blog Index Page

Adding “Read More Break” element merely adds a “Read More” text link between blog posts on the index page which is not attractive by default. Also the “Read More” link is not properly visible on some themes making the users to think the post only have a small content. When you look in to the Weebly code editor under “Theme > Edit HTML / CSS > main_style.css”, Weebly uses a CSS class “.blog-read-more” to control the style of “Read More Break” element. The style merely contains a text aligned to left or right as shown in the below picture (here the “Read More” link is aligned left).

You can modify the CSS to customize the look of “Read More” link on blog index page. Below is an example code to make the link within a box and align to center.

.blog-post .blog-read-more {
text-align: center;
font-size: 26px;
box-shadow: aqua;
border: 2px solid;
padding: 5px;
border-radius: 5px;
background: lightgrey;
}

Save the changes made on the code editor and publish your site. The link will look like below:

You can customize the CSS to change the background color, link color, hovering color, box width, margin, padding, etc. to align with your blog’s layout.