How to Create a Magazine Page Layout with Layers

How To  Tutorials  Last Updated: Time to Read: 6 minutes

magazine_layout

This tutorial will walk you through using the basic tools that come with Layers to create a magazine-style homepage that displays a featured slider, various layouts for specific categories, and a paginated archive of all recent posts.

  • Difficulty: Easy to Moderate
  • Advanced Option? Yes
  • CSS Used: Basic
  1. Go to Layers  → Add New Page
  2. Select the Blank Page template and click Select
  3. Name your page and Proceed to Customizer
  4. Expand the Edit Layout panel, then expand your page Body panel
  1. Click +Add a New Widget and choose the Slider widget
  2. Edit the Title to be your featurette title
  3. Add the author’s name or some subtext into the Excerpt field
  4. Enter the post or page url into the Button Link field, and add your Button Text, example “Ready Story”
  5. Click SAVE & PUBLISH

This widget will feature two posts that have been added to the Editorials category. Sticky posts also work well here. We will use some style resets to get the overlay to display without hovering  using the Advanced widget option.

  1. Click +ADD A NEW WIDGET and choose the Posts widget
  2. Remove the default Title and Excerpt
  3. Set it to your desired category, or whichever category you would like to feature. Our demo sets it to display 2 posts, newest first.
    • If you sticky two posts, they will always show up here, allowing you to add more to the category but keep the same features until unstickied. Sticky posts will display in addition to the number of posts set.
  4. In the design bar, use the following settings:
    • Layout : Boxed
    • Text: N/A  (use default)
    • Display: Overlay (note that only the title and buttons show in overlay mode so the checked options don’t matter)
    • Columns: 2, Gutter checked
    • Buttons: N/A (use default)
    • List Style: Grid
    • Image Ratio: Square
    • Background: N/A  (use default)
  5. To get the title to always overlay the post, but still have a hover effect, we can reset the default styling with some CSS. Click on Advanced and add the following styles to the CSS box.
  6. Click Save & Publish

This widget will showcase posts from our secondary post category “Travel”.  This top-level category makes up the bulk of our magazine content.

  1. Click +ADD A NEW WIDGET and choose the Posts widget
  2. Remove the default Title and Excerpt
  3. Set it to your desired category, or whichever category you would like to feature. Our demo sets it to display 3 posts, newest first.
    • If you sticky three posts in this category, they will always show up here, allowing you to add more to the category but keep the same features on the homepage until unstickied. Sticky posts will display in addition to the number of posts set.
  4. In the design bar, use the following settings:
    • Layout : Boxed
    • Text: N/A  (use default)
    • Display: Regular with Featured Images, Titles, Dates and Categories checked.
    • Columns: 3, Gutter checked
    • Buttons: N/A (use default)
    • List Style: Grid
    • Image Ratio: Square
    • Background: N/A  (use default)
  5. Click Advanced and enter a zero ( 0 ) into the Padding Top box.
  6. Click SAVE & PUBLISH

This section can use either a Content Widget or a Post Widget, depending on whether you wish to manually set a featured video, or have a posts category to draw from. Of course,  you may also adapt this step to display another set of posts from another category, similar to the last section rather than a single post or video.

  1. Click +ADD A NEW WIDGET and choose the Posts widget
  2. Add a Title for this section and a brief introduction in the Excerpt field (optional).
  3. Set it to your desired category (we used Videos). Enter 1 and choose Newest First or your desired sort option.
    • If you sticky a post in this category, it will always show up here, allowing you to add more to the category but keep the same features on the homepage until unstickied. You must enter 0 into the Number of Items to Show if using a category with Sticky posts for this widget layout.
  4. In the design bar, use the following settings:
    • Layout: Boxed
    • Text: Left, Medium, Black
    • Display: Regular with only Featured Images and Excerpts checked.
    • Columns: 1, Gutter checked
    • Buttons: N/A (use default)
    • List Style: Grid
    • Image Ratio: None
    • Background: #f4f4f4
  5. Click Advanced and enter 20 in the Padding Top box and a zero ( 0 ) into the Padding Bottom box.
  6. Click SAVE & PUBLISH

Finally, we will lead off the home page with a masonry list of recent posts from all categories, then set them to paginate to keep visitors reading. A little Advanced CSS allows us to reposition the date and category so they sit next to one another using
display: inline-block
and reduce the size of the post titles in just this section.

  1. Click +ADD A NEW WIDGET and choose the Posts widget
  2. Add a Title for this section and a brief introduction in the Excerpt field (optional).
  3. Set it to your desired category (we used All). Enter 6 and choose Newest First or your desired sort option.
    • If you sticky a post in a category shown in this widget, they will always show up first/top-left here. Keep this in mind if using All and stickies in the first two widgets. You CAN hide stickies from an All feed with the Advanced option and nth-child, which is just beyond the scope of this tutorial. Learn more about nth-child here.
  4. In the design bar, use the following settings:
    • Layout: Boxed
    • Text: Left, Medium, Black
    • Display: Regular with only Featured Images Titles, Dates and Categories checked.
    • Columns: 3, Gutter checked
    • Buttons: N/A (use default)
    • List Style: Masonry
    • Image Ratio: None (Note, Masonry always looks best with None selected to provide the variety of shapes that makes masonry look best)
    • Background: N/A
  5. Click Advanced and give it a class name of
    last-widget
    . Enter 40 in the Padding Top box and ad the following custom styling to the CSS box:
  6. Click SAVE & PUBLISH

Our demo page shows how you can add a Content Widget to the bottom of the page to create a custom footer that showcases a newsletter sign-up shortcode and an ad image. For demonstration purposes we just mocked up a sign-up form using Contact Form 7. Your site would probably use a more robust solution such as the Newsletter plugin, or Wordchimp. The key is using a plugin that lets you embed the signup form using a shortcode or an HTML-only code snippet (no Javascript!)

  1. Click +ADD A NEW WIDGET and choose the Content widget
  2. Remove the default Title and Excerpt
  3. Expand the third default column and click the red trash-can icon in the top-right to delete it.
  4. Expand the first column and enter your desired Title.
    • Add your form shortcode or code snippet to the Excerpt field
    • Click on the Column Width button in the toolbar (last button) and choose 8 of 12
  5. Click on the second column and click the Featured Media button (second button) in the toolbar to select your desired image. Images that are landscape oriented and about the same height as your sign-up form block will work best. You can experiment with the image ratio and column widths to get the best combination.
    • Click the Column Width button and choose 4 of 12 so they sit on the same line.
  6. Click SAVE & PUBLISH

The following go great with magazine layouts: