Prerequisites:
- Your site’s theme must be set to “A UW Madison Theme.”
- You must be editing a Page, not a Post.
- You must be comfortable visualizing and sketching out a page layout before you build it. Basic design experience is helpful.
When to Use ♠ ACE
The standard WordPress Editor lets you create content in a single column – the content area.
Most of the time, the Editor will meet your content-building needs.
For your homepage, however, you might want to build a Page with a more sophisticated look, e.g. multiple columns or special content.
The ♠ ACE is a visual page builder that lets you build a Page one row at a time, like a layer cake.
♠ ACE Features and Examples – click to expand/collapse
See also Analyzing the CALS Homepage
[table id=1 /]
♠ ACE in Action: How to Build a Single-row FAQs Page
Step 1: Sketch Out Your Page
It is much faster and less frustrating to sketch out the layout of your page on paper before you try to build it with the ACE.
One of the limitations of ACE is that you can’t drag content across columns, so jumping right to the screen can result in having to redo work.
On paper, sketch out a layout for your page content – the number of rows and the number of columns within each row. Consider what type of content you want to display in each block – see the ACE Features and Examples section above for a list of available blocks.
For this example, we’ll sketch out blocks for a page title, body text, and an accordian panel. These will be enclosed by a full width row. Our sketch looks like this:
Step 2: Create the Page, and Build the Row Enclosure
On the Admin Dashboard menu, click Pages..Add New. A new Page appears.
Enter a title.
In the Advanced Formatting block, under Page Editor, click Advanced Content Editor. The ACE appears.
To build the row enclosure, click Add Content Row. A popup menu appears; choose Add Full Width Content.
Step 3: Add the Content Inside the Row Enclosure
When you use the ACE to build a page, the normal page title you entered at the top of the page; that title will only show on the back end of WordPress. We add a Title Text block at the top of the page using ACE to replace the missing Page title.
Add the Title Text Block:
Click Add Full Width Content. From the popup, choose Title Text. A Title Text block appears.
Enter the Page title in the Text Content field:
Add the Body Text Block:
Click Add Full Width Content. From the popup, choose Body Text. The Body Text block appears:
The Body Text block inserts the same Editor box you are used to using from a regular WordPress page.
Enter and format your content. Since we’ll place an Accordian Panel with the questions and answers underneath this block, this would be a good place to add any instructional text.
Add the Accordian Panel Block:
Click Add Full Width Content. From the popup, choose Accordian Panel. The Accordian Panel block appears.
Click Update to save your changes.
If you collapse your content blocks, you will see how they resemble the layout sketch above:
Click View Page to see how the page look on the Front End. The image below shows the page after Question 1 has been clicked.
Working with Blocks
♠ ACE works with blocks to represent rows and content.
Block Controls
The block controls are located in the upper right corner of the block:
Collapse or expand a block
Delete a block
Add a new block
Move blocks:
Collapse the block you want to move, and the blocks around it. Click and drag the block you want to move. The cursor changes to a four-headed arrow. Drop the block in the new location.
The blocks are nested – the content blocks are nested inside the row blocks, and you can tell the areas by the gray borders:
Try to keep the blocks collapsed when you are not editing them or content nested within them.
Available Widths for Columns
The ACE allows you to choose 1, 2 or 3 columns in a row.
For 2- and 3-column rows, you can choose from a set of predefined widths.
You can choose different widths for each row to make the page have more visual appeal, or to fit specific content.
For example, you could build this layout:
- row 1 – 2 columns, 50%/50%
- row 2 – 3 columns, 33%/33%/33%
- row 3 – 2 columns, 50%/50%
This will help you visualize the column widths:
2-column width sizes (in percentages):
3-column width sizes (in percentages):
How to Widen the ACE Working Area
Normally the WordPress admin content editing screens display two columns – the content on the left, and the Publish and other blocks at the right. When working with 2- and 3-column rows in the Advanced Content Editor, you may want to switch the screen display to a single column.
- In the upper-right corner of the screen, locate and click the Screen Options tab:
- The tab expands downward to display additional blocks:
- In the Layout section, click 1 column.
- Click the Screen Options tab again to close the tab and save the changes.