Info box in blog articles

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi,

I sometimes want to create info boxes in blog articles, for example with biographical information to a guest author/interview partner or to elaborate on a side thought. I want to separate this visually/graphically from the standard content by a frame and/or different background colour.

As of now, I am mostly using a table with one row and culomn to do that which is not very elegant and sometimes leads to issues on mobile.

Do you have any other suggestions/best practices for this?
Regards
Robert

2

Hello @RNA Happy Monday! I will add some top experts to this matter, @Alejandro_ @Gonzalo any recommendations to @RNA ?

Thank you,

Pam

3

Hi @RNA ,
To provide you with the right approach, I would like to check your live link or code. By analyzing the code, I can probably provide you the solution to separate this visually/graphically from the standard content by a frame and/or different background colour.
Regards.

4

Hi webdew,

you can see the most recent example here: Everphone – Device-as-a-Service Platform

Best regards and many thanks
Robert

5

Hi @RNA ,

Hi

By analyzing your shared link, you can add the below added code as shared in the screenshot. But make sure you change your CSS style to match your own requirements.

<div class=“author_wrapper_section”>

\<div class="content-wrapper">

       \<div class="author-section">

          {% if content.blog\_post\_author.avatar %}

          \<div class="avatar-module-img">

            \<img class="avatar" height="100px" src="{{ content.blog_post_author.avatar }}" alt="{{ content.blog_post_author.display_name }}">

          \</div>

          {% endif %}

          \<div class="author-name">

            \<div class="author_row">

            \<div class="author_colum">

              \<span>ABOUT THE AUTHOR\</span>

               \<h3>{{ content.blog\_post\_author.full\_name }} \</h3>

            \</div>

              \<div class="bio_author">\<p>{{ content.blog\_post\_author.bio }}\</p>

              \</div>

            \</div>

          \</div>

        \</div>

\</div>

</div>

webdew_0-1622546775688.png
webdew_0-1622546775688.png1600×719 155 KB

Once, you implement this code, you will see your blog just like this- https://www.paystone.com/blog/how-to-accept-payments-in-a-post-pandemic-world.
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

6

Hello webdew,

many thanks for your efforts. That looks quite nice!
Am I right that this biography snippet then gets the picture etc. from the blog author profile of the article? As this is sometimes not the same person.
Best regards
Robert