Each post on your Weebly blog will also appear on the blog page. You can decide the number of recent posts to show on the blog page between 1 and 25 under “Settings > Blog > Posts per page”. Assume you have last 10 posts to show on the blog page and each post having more than 600 words of lengthier content. In such scenario, the blog page will show last 10 posts each occupying lengthy space. This will result in poor user experience with almost no possibility for the users to view older post’s content.
What is Read More Break?
Since blog 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. You can use a “Read More Break” element, when you don’t want to show all lengthy post content on the blog page. This will restrict the content and show up to the break on your blog page. Users can click on the read more link or button to read the complete blog post. This is neat way to keep your blog page clutter free and gently push users to the blog post.
How to Add Read More Break in Weebly?
Weebly editor shows drag and drop elements on the sidebar that you can insert anywhere on your site. However, when you edit a blog post in Weebly blog editor, the sidebar elements will automatically change. You will find additional blog elements that you can only use on Weebly blog page or post. You can see a “Read more Break” showing 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 blog page with an option for the users to click on “Read More” link or button to read further content of each post. Below is how the read more button may look on your Weebly blog page.
This makes the blog page more attractive within the scrollable length and show only introduction of each post. When clicking on the read more button or link, Weebly will show the complete blog post with hidden content below the break line.
Points to Note When Using Read More Break
Though it is easy to use read more break in Weebly blog, remember the following points to avoid confusion.
- “Read more Break” element will not impact the display of individual blog posts on your published site.
- The actual read more button or link will only show on the blog page both in editor as well as on published site.
- Adding more than one “Read more Break” element will not have any impact and the first element will be used for breaking the content on blog page.
- Weebly also allows you to add the read more break in blog sidebar. However, it will not have any impact on the published site.
- Weebly does not have a standard way of displaying the read more link on blog page. As you see in the above screenshot, it shows as a button while on many themes it merely adds a “Read More” text link between blog posts. Some Weebly themes show “Details” and “Read Now” links and ignore read more break you insert in blog post.
Customizing Read More Link in Weebly Blog Page
If your theme ignores read more break element then the only option is to change your theme that shows a button or text link. For text and button links, Weebly does not offer any default settings to customize the appearance. This is not good as the “Read More” link is not properly visible on some themes making the users to think the post only have a small content. Good part is that you can customize the color and alignment of the element by editing your Weebly theme files.
First, open your blog page in a new browser window. Right click on the page and select “Inspect” option to open developer tools. Check the source code to find the name of CSS class used for your “Read more” link.
As you see in the above screen, Weebly uses the following code to align the read more link on right side. In your case, it could on the left side with “text-align:left;” What you need is to modify the styles of this CSS class to customize the read more link on your Weebly blog page.
.blog-post .blog-read-more {
text-align: right;
}Adding Custom Read More CSS in Weebly
Go to “Themes” tab and click on the “Edit HTML / CSS” button to open Weebly code editor.
Each Weebly theme uses different set of source codes, hence finding the .blog-read-more CSS class will be a difficult task. For example, some themes use _blog.less while few other themes use blog.less or partials. If you find the code, it is easy to change the left or right alignment to center and add additional styles. However, do not worry if you could not find the CSS class. Simply, go to main.less file under “Styles” section and add your CSS code at the end of the editor.
You can add CSS styles to customize the look of “Read More” link on blog 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: 5px 5px 5px lightgrey;
border: 2px solid;
padding: 5px;
border-radius: 5px;
background: rgb(255 235 59);
}Save the changes made on the code editor and if this is the first time you edit the code Weebly will ask you to provide a name for your theme. Enter a name and click “Save” button to close the code editor. Make sure to publish your site and check the blog page on the browser. Now, the read more text 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 the button with your blog’s layout. Also, remember the above code is to change the text link to a button. If your blog page already shows a read more button then only use the required styles like background, font size, alignment, etc. and use !important to prioritize your CSS to overwrite default styles.
I’m jumping back in, to answer my own question. As I figured out how to centre the “Read More” box, after reducing the span of the box. I just needed to incorporate (margin: auto;) on the next line. So the amended code, now reads:
}
.blog-post .blog-read-more {
text-align: center;
font-size: 26px;
box-shadow: aqua;
border: 2px solid;
width: 200px;
margin: auto;
padding: 5px;
border-radius: 5px;
background: lightgrey;
}
For those who cannot find the code “.blog-post .blog-read-more”, I couldn’t find it either. But if you go to STYLES, then main.less, search for /* Blog */. Paste the recommended code, at the end of this section – before you reach /*Store*/ which is the next section of code. In my theme, I pasted it after:
.blog-body {
padding-right: 30px;
box-sizing: border-box;
It worked great, Chris, thanks so much! I went to:
“Styles,”
“Main.less,”
In the code, I saw this:
“@import blog ;}
I then copied and pasted all of your coding below immediately after “}” and it worked great and looks great!
.blog-post .blog-read-more {
text-align: center;
font-size: 26px;
box-shadow: aqua;
border: 2px solid;
width: 200px;
margin: auto;
padding: 5px;
border-radius: 5px;
background: lightgrey;
}
Thanks webnots, too.. you said something like, just post it after. Not being a coder, I was concerned I was going to mess something else up, but it worked.
I’m just laying this out again for clarification for someone else.
Poor design, though, putting “read more” so light and to the right.
Have a great day!
Thanks for the instructions. I pasted your code, in main.less, and the “read more” now stands out. Only with one quirk. The box spans the entire blog post, but only activates the function when clicking the text. If you click on the space in the box, it doesn’t activate. I thought the solution, was to include (width: 200px;) to limit the space in the box. Only it now pushes the “read more” feature, to the left, just above the social media icons. Do you know any tweaks that will centre it, underneath the post?
it works a treat.
what i want is to be able to change it to READ IT or CONTINUE READING
AND
the spacing above the read more break element…
changing it to READ IT or similar IS possible. there was a comment on a blog, u added coding to the FOOTER CODE on the blog page BUT do u think i can find it now ???
can u throw a light on this?
cheers
Hi, it also doesn’t work for me. I can’t find anything along the lines of that code. Under the Blog Page code I only have 4 actions there. I have tried pasting the new code in different places there with no joy. Maybe it is the theme that I am using, or maybe it is me :)
I will continue to try.
I have 671 lines in both blogs. I’m using a paid version of Weebly. I am able to follow the directions to open the box but I don’t have any line items in those 671 lines that mention a blog!
Help!
Just add the custom CSS code under “main_style.css” to change the look of read more break on blog index page.
I’ve got a Weebly Starter site and there is no code string matching what you show in order to edit the read more button under Assets > main_style.css
Like Paul Benson, I do have a “blog-read-more” under Partials > +modules > more-break.tpl but still nothing that matches what you indicate above.
Suggestions?
Yes, the control is under partials section. But the CSS class is still the same. So you can add the code given in the article under “main_style.css” and check whether it works for you.
As we tested on couple of themes, it works fine.
I’m looking for a way to change the words “Read More” to something else. Do you know of a way?
You need to search for “.blog-post .blog-read-more” under “Assets > main_style.css” and NOT under “Partials” section.
Currently the code on your CSS is:
.blog-post .blog-read-more {
text-align: center;
}
Just remove this and add the CSS provided in the article.
Hey again;
I have been through every line of “Assets > main_style.css” ten times. There is no
.blog-post .blog-read-more {
text-align: center;
}
There is blog comment and blog table but no read-more.
Could it make a difference I am using a free site of weebly? I know there is a read-more break for the blog as I use it. The only place I can find Read-More code is in the more-break.tpl under the expanded Blog tab. Could they have moved it on you? One site said put it in right above the final in the short header file, but that locked up the site builder Thank you for the time you spend on the lowly rookies. we appreciate it!
You can just add the CSS, it will be effective when you use “Read More Break” element.
Tried to change read-more break but there is no code string matching what you show. When I go to main_style CSS There are only 1897 lines (you show it on 2513) and nothing which matches your example. Under the blog tab is more-break.tpl with a string as follows: { {#tl} } Read More { { /tl } }. Is this where it should go? I am very new to code so please forgive my ignorance.