The style of the ellipses and text displayed on the links is fully customisable within the stack settings. You can safely use multiple ReadMore stack on the same page. Within the stack settings, you can toggle between using either styled text (default) HTML or Markdown content. We also give you the option to apply custom Bootstrap classes onto the links (to style them as Bootstrap buttons) and change the width of the link / button too.

Your full content is always available for search engines to index. Additionally when a user prints or saves a webpage, the full content is shown (minus the read more / read less links). ReadMore stack is able to work in conjunction with other stacks like PageLoader.

Examples

These are some examples of the ReadMore stack; one using the default settings and two others with customised button links.

My Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae felis accumsan, scelerisque purus sit amet, euismod risus. Proin interdum varius magna sed iaculis. Nulla facilisi. Nam diam ex, facilisis sed porta non, volutpat in purus. Quisque tortor nibh, dignissim id ipsum a, elementum sodales lorem. Aenean enim orci, ultricies nec condimentum sed, vehicula non velit. Sed turpis justo, gravida vitae tellus sed, tempus lobortis nunc. Phasellus laoreet varius augue eu aliquet. Maecenas pharetra massa non tortor venenatis pulvinar. Phasellus porta, sapien nec luctus mattis, leo est laoreet massa, sit amet tincidunt odio magna luctus libero. Mauris id fringilla diam, id faucibus nisl. Sed non metus velit. Suspendisse placerat felis lacus, et lobortis lorem tristique non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eu interdum est.

My Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae felis accumsan, scelerisque purus sit amet, euismod risus. Proin interdum varius magna sed iaculis. Nulla facilisi. Nam diam ex, facilisis sed porta non, volutpat in purus. Quisque tortor nibh, dignissim id ipsum a, elementum sodales lorem. Aenean enim orci, ultricies nec condimentum sed, vehicula non velit. Sed turpis justo, gravida vitae tellus sed, tempus lobortis nunc. Phasellus laoreet varius augue eu aliquet. Maecenas pharetra massa non tortor venenatis pulvinar. Phasellus porta, sapien nec luctus mattis, leo est laoreet massa, sit amet tincidunt odio magna luctus libero. Mauris id fringilla diam, id faucibus nisl. Sed non metus velit. Suspendisse placerat felis lacus, et lobortis lorem tristique non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eu interdum est.

My Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae felis accumsan, scelerisque purus sit amet, euismod risus. Proin interdum varius magna sed iaculis. Nulla facilisi. Nam diam ex, facilisis sed porta non, volutpat in purus. Quisque tortor nibh, dignissim id ipsum a, elementum sodales lorem. Aenean enim orci, ultricies nec condimentum sed, vehicula non velit. Sed turpis justo, gravida vitae tellus sed, tempus lobortis nunc. Phasellus laoreet varius augue eu aliquet. Maecenas pharetra massa non tortor venenatis pulvinar. Phasellus porta, sapien nec luctus mattis, leo est laoreet massa, sit amet tincidunt odio magna luctus libero. Mauris id fringilla diam, id faucibus nisl. Sed non metus velit. Suspendisse placerat felis lacus, et lobortis lorem tristique non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc eu interdum est.

Setup

To use ReadMore in your own projects, follow these simple setup instructions
  1. Once installed into Stacks and RapidWeaver, open your Stacks library
  2. Search for 'ReadMore'. Drag and drop a copy of the stack into your page
  3. Double-click on the sample 'lorem ipsum dolor' text and replace it with your own written content
  4. Within the ReadMore Settings, customise the teaser length, ellipses and link labels if required
  5. Preview your webpage. Publish or export your page when finished

Font styling for the content and links is inherited from your RapidWeaver theme. As always, you can change this styling in the theme style options. Themes like the designs provided by ThemeFlood include the Bootstrap framework, so it is feasible to use Bootstrap button classes (in the Button Classes box) to apply full button styling to the links, as demonstrated above. Font Awesome Icons are supported for link labels too, but you will need to replace double quotes in the markup with single quotes.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.