Outlining "read more" button

Hello,

You can modify the Read More Trigger Element, according to your needs using the included Utility Classes. Consider using this Example:

<div data-readmore="true" data-readmore-trigger-open="Read More <i class='icon-angle-down'></i>" data-readmore-trigger-close="Read Less <i class='icon-angle-up'></i>">

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ullam aliquid quos, tempore, quibusdam saepe numquam fugiat ab perspiciatis minima itaque in repellendus ad, modi voluptates quas distinctio iusto nesciunt. Esse, maxime dolorem distinctio quibusdam doloribus reiciendis sint obcaecati ex impedit ea non nam eos voluptate quod recusandae provident, unde libero, vel laudantium hic a. Ea amet, maxime voluptatibus distinctio temporibus libero cupiditate deserunt, facere rem, alias similique mollitia possimus asperiores cum harum at doloribus sed voluptas ipsam. Accusamus adipisci at sint voluptas unde deserunt incidunt excepturi perferendis quae similique laudantium voluptatibus quo sed perspiciatis autem quis hic, aut pariatur iste aliquid, veniam suscipit doloribus aliquam praesentium.</p>

	<p class="mb-0">Maxime quos, ex eligendi possimus earum amet, voluptatibus tempore asperiores officia, blanditiis non adipisci labore deleniti. Aliquam perferendis cumque maxime necessitatibus ut consequuntur, alias, error, inventore pariatur, quisquam eius impedit dolores recusandae enim harum! Saepe vel optio nemo id magni tempore repudiandae quod ullam, quia reprehenderit incidunt ipsum natus cum quidem? Provident, a ut.</p>

	<a href="#" class="read-more-trigger d-inline-block bg-white pt-3 w-100" style="left: 0;"></a>

</div>

Please consider checking out the Documentations for the Read More Shortcode: http://docs.semicolonweb.com/docs/shortcodes/read-more/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Hello,

The Read More Text (trigger) is absolutely positioned and thus cannot be pushed below the text and only can be positioned overlaying the Text, so you will need to apply Custom CSS or Utility Classes to make it look like it is displayed below the Text. The Codes we had provided you with earlier appeared to be working fine when we had tested it. You can try using this code and it looks like the image we have attached:

<div data-readmore="true" data-readmore-trigger-open="Read More <i class=&apos;icon-angle-down&apos;></i>" data-readmore-trigger-close="Read Less <i class=&apos;icon-angle-up&apos;></i>" data-readmore-mask="false">

&#x9;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ullam aliquid quos, tempore, quibusdam saepe numquam fugiat ab perspiciatis minima itaque in repellendus ad, modi voluptates quas distinctio iusto nesciunt. Esse, maxime dolorem distinctio quibusdam doloribus reiciendis sint obcaecati ex impedit ea non nam eos voluptate quod recusandae provident, unde libero, vel laudantium hic a. Ea amet, maxime voluptatibus distinctio temporibus libero cupiditate deserunt, facere rem, alias similique mollitia possimus asperiores cum harum at doloribus sed voluptas ipsam. Accusamus adipisci at sint voluptas unde deserunt incidunt excepturi perferendis quae similique laudantium voluptatibus quo sed perspiciatis autem quis hic, aut pariatur iste aliquid, veniam suscipit doloribus aliquam praesentium.

&#x9;<p class="mb-0">Maxime quos, ex eligendi possimus earum amet, voluptatibus tempore asperiores officia, blanditiis non adipisci labore deleniti. Aliquam perferendis cumque maxime necessitatibus ut consequuntur, alias, error, inventore pariatur, quisquam eius impedit dolores recusandae enim harum! Saepe vel optio nemo id magni tempore repudiandae quod ullam, quia reprehenderit incidunt ipsum natus cum quidem? Provident, a ut.

&#x9;<a href="#" class="read-more-trigger d-inline-block bg-white pt-3 w-100" style="left: 0;bottom: 0;"></a>

</div>

However, if this is not what you are looking for, you will need to make further customizations or consider using Bootstrap's Collapse Component: https://getbootstrap.com/docs/4.5/components/collapse/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.