Maddux - "Home" instructions

Like many pages within the Maddux Demo, the "Home" page relies on shortcodes. To get started with mimicking the look of that page, look for the "TS Shortcodes" button when editing your homepage. It looks like this:

image: shortcodes button

...and will be situated with the other buttons in the text editor.

The "Home" page is probably the most difficult of our homepage demos, but the following instructions should walk you through the process.

Creating columns

The upper-most section of the "Home" page (excluding the slider, which we'll come to later) is split into three columns

While editing your homepage, locate the TS Shortcodes button, click it and select "Add Column(s)..." from the "Choose a Shortcode" drop-down. Then do the following:

  1. Ignore the first two options, and choose "One fourth (1/4)" for the "Column Type" (this represents your first column)
  2. Next, add some placeholder text like "Column 1 content" in the "Content" field (we'll come back to this later)
  3. To create your second column, scroll down a little further and click the "Add Column" button
  4. This time you'll want the type to be "One half (1/2)"
  5. Add some placeholder text like "Column 2 content" in the content field
  6. Next, click the "Add Column" button to create your third column, giving it a "Column Type" of "One fourth (1/4)"
  7. Click the "Add Shortcode" button

What you add to the columns you created is completely up to you, but if you want to mimic our "Home" layout, do the following:

For column 1:

  1. Select the column 1 content, and click the TS Shortcode button
  2. From the "Choose a shortcode" dropdown, select "Blog Widget"
  3. There are plenty of options here, so feel free to play around a bit until you've gotten the layout you want. Our settings:
    • Limit: 3
    • Categories: Lifestyle
    • Override heading: Yes
    • Show excerpt: No
    • Show Featured Image/Video: Only for the first post
    • (all other settings were left untouched)
  4. Click the "Add Shortcode" button when you're ready

For column 2:

  1. Select the column 2 content, and click the TS Shortcode button
  2. From the "Choose a shortcode" dropdown, select "Blog"
  3. Just like before, there are plenty of options here, so feel free to play around a bit until you've gotten the layout you want. Our settings:
    • Blog Layout: 1 Column
    • Posts Per Page: 1
    • Show Pagination: No
    • Title size: H3
    • Excerpt Length: 120
    • (all other settings were left untouched)
  4. Click the "Add Shortcode" button when you're ready

For column 3:

  1. Select the column 3 content, and click the TS Shortcode button
  2. From the "Choose a shortcode" dropdown, select "Blog Widget"
  3. Our settings:
    • Limit: 3
    • Categories: Technology
    • Override heading: Yes
    • Show excerpt: No
    • Show Featured Image/Video: Only for the first post
    • (all other settings were left untouched)
  4. Click the "Add Shortcode" button when you're ready

Underneath all of that, we added the "Blog" shortcode again with the following settings

Next, we added the "Divider" shortcode twice and an image.

 

Next, we created 2 columns and added the "Blog Widget" shortcode to each:

Click the TS Shortcodes button and select "Add Column(s)..." from the "Choose a Shortcode" drop-down. Then do the following:

  1. Ignore the first two options, and choose "One half (1/2)" for the "Column Type"
  2. Add some placeholder text like "Column 1 content" in the "Content" field
  3. Scroll down a little further and click the "Add Column" button
  4. Choose "One half (1/2)"
  5. Click the "Add Shortcode" button

For column 1:

  1. Select the column 1 content, and click the TS Shortcode button
  2. From the "Choose a shortcode" dropdown, select "Blog Widget"
  3. Our settings:
    • Limit: 2
    • Widget Layout: Horizontal
    • Categories: Lifestyle
    • (all other settings were left untouched)
  4. Click the "Add Shortcode" button when you're ready

For column 2:

  1. Select the column 2 content, and click the TS Shortcode button
  2. From the "Choose a shortcode" dropdown, select "Blog Widget"
  3. Our settings:
    • Limit: 2
    • Widget Layout: Horizontal
    • Categories: Technology
    • (all other settings were left untouched)
  4. Click the "Add Shortcode" button when you're ready

General Settings:

Next, we removed the sidebar from this page. You can do so by scrolling down past the text editor and choosing "No" for "Show the sidebar".

Slider:

And finally, we added a slider. The slider settings can be found under the text editor. Our settings:

That's it! Please don't hesitate to use the contact form on our profile page or post in our support forum if you have any further questions.