How to Use ♠ ACE - the Advanced Content Editor
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.
See also Analyzing the CALS Homepage
| Feature | Subfeature | Description | Example |
|---|---|---|---|
| Layout | Row Spacing | adjust the space above and below the row | |
| Layout | Row Style | add a background to the row: - solid color - image | |
| Layout | Column Number | vary the number of columns – 1, 2 or 3 | example (2-column layout) example (3-column layout – Training row) |
| Layout | Column Style | add one of two styles to columns ( for the 2- and 3-column layouts) | example (red ribbon on the right side of the page) |
| Prebuilt Content | Accordian Panel | add an accordian panel – expands and collapses blocks of text – useful for FAQ pages | example |
| Prebuilt Content | Body Text Block | Add a body text block - allows formatted text, links, and inserting photos | |
| Prebuilt Content | Button | Add a clickable button to lead to another webpage | example (buttons in red ribbon at the right) |
| Prebuilt Content | CALS Fundraising | Graphical banner with link to Alwaysforward.org to give to the UW | example (scroll down - "Our History Moves Us Forward") |
| Prebuilt Content | Directory | Staff directory | example limits |
| Prebuilt Content | Events | Adds a block that retrieves and displays remote content (e.g. news items) from another WordPress site. You set the website, the number of items to display, and the source categories. | |
| Prebuilt Content | Featured Person | Photo and bio excerpt with link to read full bio | example (scroll down - CALS Faces) |
| Prebuilt Content | Image Box | Image boxes linked to featured Pages and posts | example |
| Prebuilt Content | Image - Single | Adds a single image - no caption | |
| Prebuilt Content | Image Carousel (slideshow) | Rotating slides or other content placed in the content area of the page | |
| Prebuilt Content | Remote Content Feed | Remote content pulled in from another WordPress site | example (Funding Opportunities on right side - pulled in from eCALS) |
| Prebuilt Content | Social Media Account Links | Adds a box for the following social media accounts: Facebook, Instagram, or Twitter. Manual lets you display an image and a description, with icons and follow links; automatic pulls a live feed in from your account. | example (scroll down - Social) |
| Prebuilt Content | Title Text Block | Single line of text formatted as a title, no links for formatting |
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.
♠ 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.
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):
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.