Info box in blog articles

[RNA]

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

[RNA]

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

[webdew]

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.

[RNA]

Hi webdew, 

you can see the most recent example here: https://blog.everphone.de/nachhaltigkeit-klimaneutrales-office/ 

Best regards and many thanks
Robert

[webdew · Accepted solution]

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>

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. 

[PamCotton]

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

Thank you,

Pam