WIP: Setting up a Post Template in DIVI

May 9, 2021

Divi Template for Posts

A post template allows you to format posts in a similar manner.  This is useful when you have a group of posts with the same category, and don’t want to format each one one at a time (or clone pages).

  1. Step 1:  gather ingredients
    1. Create a new category
    2. 3 blog posts with a feature image for each post, some copy and some other images.  Assign the blog posts the new category.
    3. Possibly a hero image transparent png sized at 2560 x 1345 (to lay over a background gradient)
  2. Step 2: Make a new template
    1. DIVI>Theme Builder>Add new template.
      1. Select post categories that you want it to apply to (i.e. “new category” which you made in step 1)
      2. Click into custom body, add custom body, build from scratch
  3. Step 3:  Section 1 – header:
    1. Insert full width column. Go back, edit top section (hero row), add custom gradient, transparent png image.
    2. Spacing>padding>7vw top and bottom
    3. Add text module, change to dynamic content (hover over text area, stacked battery with plus icon) select “post or archive title”
      1. Click gear icon to stylize.
      2. Before:  add <h1>
      3. After: add </h1>
      4. Design tab – modify text styling [note if you have set up custom css, defaults will pull in, can override]
  4. Step 4: Section 2 – feature image:
    1. Add section, regular.  Add row 2/3 :: 1/3
    2. Left col: image block, design image module.
      1. Design tab image>spacing>margin>top -9v [so it overlays your section 1 header); then 0vw for tablet
      2. Add box shadow
    3. Right col: add blurb module.  This can be for author, etc. Can clone for multple lines of different items
  5. Add row: post article, format
  6. Add row: post content, format [for row of additional feature post blurbs]


You May Also Like …

Test How To Post Template

This is a test of the How To post template.  To use, make a new post.  Assign category how to.  It automatically...

DIVI How to Add Adobe Fonts

Okay - you have an Adobe Font Web project, a selection of fonts, that you want to put on your Divi theme. 1. Adobe...