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.

♠ ACE Replaces…

…the SiteOrigin Page Builder and SiteOrigin widgets, and the WPBakery Visual Composer.

+♠ ACE Features and Examples - click to expand/collapse

See also Analyzing the CALS Homepage

FeatureSubfeatureDescriptionExample
LayoutRow Spacingadjust the space above and below the row
LayoutRow Style add a background to the row:
- solid color
- image
LayoutColumn Numbervary the number of columns – 1, 2 or 3example (2-column layout)
example (3-column layout – Training row)
LayoutColumn 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 ContentAccordian Panel add an accordian panel – expands and collapses blocks of text – useful for FAQ pagesexample
Prebuilt ContentBody Text BlockAdd a body text block - allows formatted text, links, and inserting photos
Prebuilt ContentButtonAdd a clickable button to lead to another webpageexample (buttons in red ribbon at the right)
Prebuilt ContentCALS FundraisingGraphical banner with link to Alwaysforward.org to give to the UWexample (scroll down - "Our History Moves Us Forward")
Prebuilt ContentDirectoryStaff directoryexample
limits
Prebuilt ContentEventsAdds 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 ContentFeatured PersonPhoto and bio excerpt with link to read full bioexample (scroll down - CALS Faces)
Prebuilt ContentImage BoxImage boxes linked to featured Pages and postsexample
Prebuilt ContentImage - SingleAdds a single image - no caption
Prebuilt ContentImage Carousel (slideshow)Rotating slides or other content placed in the content area of the page
Prebuilt ContentRemote Content FeedRemote content pulled in from another WordPress siteexample (Funding Opportunities on right side - pulled in from eCALS)
Prebuilt ContentSocial Media Account LinksAdds 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 ContentTitle Text BlockSingle line of text formatted as a title, no links for formatting

 

+♠ 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:

Sketch of Layout

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.

Initial ACE Display

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:

Title Text Block Example

Add the Body Text Block:

Click Add Full Width Content.  From the popup, choose Body Text.  The Body Text block appears:

Body Text Block Example

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.

Accordian Pane lField Diagram

Click Update to save your changes.

If you collapse your content blocks, you will see how they resemble the layout sketch above:

Content Blocks Collapsed

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.

Finished FAQs Page

 

+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:

Block Controls

Expand or Collapse Block Icon   Collapse or expand a block

Delete Block Icon    Delete a block

Add New Block Icon   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.

Move Blocks

The blocks are nested – the content blocks are nested inside the row blocks, and you can tell the areas by the gray borders:

Nested Blocks

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):

Two Column Row Column Sizes

3-column width sizes (in percentages):

Three Column Row Column Sizes

 

 

 

+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:

Screen Options Tab

  • The tab expands downward to display additional blocks:

Screen Options Expanded

  • In the Layout section, click 1 column.
  • Click the Screen Options tab again to close the tab and save the changes.