Info box in blog articles

SOLVE
RNA
Participant

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

0 Upvotes
1 Accepted solution

Accepted Solutions
webdew
Solution
Top Contributor | Diamond Partner

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

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. 

View solution in original post

5 Replies 5
PamCotton
Community Manager

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

 

Thank you,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




webdew
Top Contributor | Diamond Partner

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
Participant

Hi webdew, 

 

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

 

Best regards and many thanks
Robert

0 Upvotes
webdew
Solution
Top Contributor | Diamond Partner

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

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. 

View solution in original post

RNA
Participant

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

0 Upvotes