Reiner test

01.20.2020

Then add an image module to the left column.

Then add the featured image dynamic content element for the image.

Designing the Image Module

Jump over to the design tab and customize the image as follows:

  • Image Alignment: center
  • Margin: -9vw (desktop), 0vw (tablet)
  • Rounded Corners: 8px
  • Box Shadow: see screenshot
  • Box Shadow Vertical Position: 16px
  • Box Shadow Blur Strength: 96px
  • Box Shadow Spread Strength: -24px

Add Post Author and Author Bio to Blurb Module as Dynamic Content

Next, we are going to add a Post Author and Post Author Bio using a blog module. So, go ahead and add a blog module to the right column.

In the blurb settings, hover over the Title input box and click the dynamic content icon. Then add the Post Author dynamic content element for the Title content.

Next, open the Post Author settings and update the before input as follows:

  • Before: Written by

For the body content of the blurb module, click the dynamic content icon and select the “Author Bio” dynamic content element from the list.

For the Image of the blurb module, add the “Post Author Profile Picture” as dynamic content.

Design Post Author and Bio Blurb Module

Now optimize the design of the image as follows:

  • Image/Icon Placement: Left
  • Image Rounded Corners: 50%
  • Title Font: Roboto
  • Title Font Weight: Bold
  • Title Line Height: 1.3em
  • Body Font: Lato
  • Body Line Height: 1.4em
  • Image Width: 50px

Add Post Categories to Blurb Module as Dynamic Content

Under the Author and Author Bio Module just created, add another blurb module under it and select the Post Categories dynamic content element for the Title.

Then update the blurb with an icon as follows:

  • Use Icon: YES
  • Icon: see screenshot
Design Post Category Blurb Module

Update the design settings as follows:

  • Icon Color: #dddddd
  • Image/Icon Placement: Left
  • Use Icon Font Size: YES
  • Icon Font Size: 20px
  • Title Font: Roboto
  • Title Font Weight: Medium
  • Title Text Color: #f92c8b
  • Title Text Size: 16px
  • Title Line Height: 20px
  • Padding: 16px left

Add Comment Count to Blurb Module as Dynamic Content

To add the post comment count for the blog post template, duplicate the blurb module just created.

Then update the Title content with the Post Comment Count dynamic content element.

Since the comment count only displays a number, we need to supplement the number with some addition text after the number. To do this, open the Post Comment Count settings and update the following:

After: Comment(s)

Then update the icon as follows:

  • Use Icon: YES
  • Icon: see screenshot

Add Post Publish Date to Blurb Module as Dynamic Content

For the last piece of metadata, duplicate the blurb module with the comment count. Then update the Title content with the “Post Publish Date” dynamic content element.

Tip: You can always open the settings of the Post Publish Date dynamic element to change the format of the date display.

Then update the icon as follows:

  • Use Icon: YES
  • Icon: see screenshot

Add Post Content Module with Design Settings for Content

With the post title, featured image, post author, and metadata in place, we are ready for the main post content.

Add a new row with a one-column layout.

Then add a post content module to the row.

This post content module is where the main content of the post will be displayed. Furthermore, we can update the design settings in order to establish the default design of all post content entered using the default editor. We can update the settings for the Post Content Module just as we would any other module. And we can view the mock content provided by the module as we update the module.

Open the post content module settings and update the following Image settings:

  • Image rounded Corners: 8px
  • Image Box Shadow: see screenshot
  • Box Shadow Vertical Position: 16px
  • Box Shadow Blur Strength: 96px
  • Box Shadow Spread Strength: -24px

Next we need to set the design for all possible text content elements for when a user creates a blog post using the default editor. Open the text option group toggle to reveal the 5 different tabs of types of text designs – paragraph, link, unordered list, ordered list, and blockquote.

Das könnte dich auch interessieren

Hello world!

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing! Lorem ipsum dolor sit amet,...