Responsive Elements: “WordPress Blog Content”

Share

Element Information

Display up to the 10 most recent entries in a WordPress blog.

Tutorial

  1. Insert the Responsive Element “WordPress Blog Content”
  2. Define the element
    • Select Display As type
    • Fill Option out for the type
  3. (Optional Steps Required for Image Support)
    Enable the WordPress plugin “MB ImageChimp RSS Feed Enhancer”
  4. Set the featured image for each WordPress post

Detailed Tutorial

Step 1: From your template insert the new element “WordPress Blog Content” under “1- Responsive Elements”

WordPressSelect

Step 2: Define the element by clicking the gear icon where you placed the element in the previous step.

Define-Custom-Element-SS

There are many options for the WordPress Element. The first is the Blog Name, here enter the name of the blog to be display on this web page. The Number of Posts changes the number of post to be show on this web page, this number can be between 1 and 10. The Display As is the way the blog information will be displayed. This part is important because you will only need to fill out the information for that type of display for the rest of the options.

For Option – All (needs to be fill no matter what Display As type is selected)
Select Display Blog Title if you would like the title to be displayed. Title Size changes the size of the title of the blog entries and go from H3-H6. This next couple of boxes allow you to only display what you would like from the blog, click the box to add each option you like. The box beside Read More Text, allow to have a clickable link to the blog. This can say thing such as, “Click here to read more” or “Read more here”.

For Options – List With Images, Carousel
The first option, Image/Text Location allows you to choose which side your image and you text will be on. The second option, Section Width will change the width of each blog entry that is displayed on the web page.

For Option – Carousel Only
For the Carousel, the time display can be change by selection the number of seconds beside Display Duration. The Transition can have the blog items slide or fade to each blog item.

WordPressData

Step 3: Steps 3 and 4 are required for any option with image support in the WordPress Blog custom element.

Go to the WordPress dashboard for your blog. Navigate to the “Plugins” settings page.

wordpress-menu

Find the plugin labeled “MB ImageChimp RSS Feed Enhancer” and click the link to activate the plugin.

wordpress-plugin2

Step 4: From the WordPress blog post you want to include in your feed choose “Set featured image” from the right side menu and select an image. This has to be done for each post when any option utilizing images is selected in the custom element. The element will not display any posts without a featured image set.

featured-image

Note: Upload the image at the largest size you want the image to be displayed at on desktop screens. Make sure all images are the same size or you will notice differences in size when each image is displayed – especially in the carousel option.

Leave a Reply