What can I do with Woo360?
OK, you've installed the Woo360 plugin on your WordPress site. And you've installed a WordPress theme ‚Äì if you have the Pro or Agency version of Woo360, maybe you've installed the Woo360 Theme and child theme. And maybe you're wondering if you really need to add Woo360 Themer, a premium add-on plugin.
Here's an overview of the Woo360 plugin, Woo360 Theme, and a little bit about what Woo360 Themer adds if you need it.
Plugin vs. Theme vs. Woo360 Themer
WordPress makes a distinction between the content area of a web page and all the other areas, including header, sidebar, and footer, as shown in this diagram:
Here's how Woo360 fits into that.
- The Woo360 plugin lets you create intricate layouts in the content area of the page. Out of the box, Woo360 is enabled for pages, but there are settings to enable it for the content area of posts and custom posts.
- A WordPress theme is a mandatory component of a WordPress site. It controls the header, footer, and sidebar areas of your site. For a single Post, it also controls the display of post information (post title, author, featured images, categories, and so on). Depending on the theme you choose, you may also be able to configure or suppress these areas on individual pages and posts, using WordPress page templates.
- The Woo360 Themer plugin lets you build layouts in areas outside the content area, which are normally controlled by the theme. You can specify which pages the Themer layouts apply to and which users can see them. Woo360 Themer is an add-on that uses the Woo360 plugin to build these layouts. See the examples below.
The following sections show you the basic concepts underlying content layouts with the Woo360 plugin, the parts of the page controlled by the theme, and how the Woo360 Theme integrates with and enhances the plugin.
The Woo360 plugin is a front-end layout and style designer that gives you a WYSIWYG view of the content area as you develop it. Starting with one of the Woo360 layout templates or a blank page, you can easily modify and add content modules in complex arrangements of rows and columns, as shown in this example:
Start with a layout template or a blank page
When you create a new WordPress Page, you'll see the Woo360 tab next to the WordPress text editor.
Tip: After you or your clients open a page for editing, there's a great quick-start video that you can access by clicking the down arrow in the Woo360 admin bar and then in the Tools menu click Help.
On the editing page, you'll see the Woo360 admin bar at the top of the screen. You can either start dragging modules into the blank layout, or you can click the Templates tab and start with a prebuilt layout that you modify as you like.
If you don't see the Content panel, when you open the page, click the Plus icon in the upper right corner. To close it, click the X icon.
The basics of content area layouts
When you drag content modules from the Content panel to the layout, the rows and columns are automatically created. As your layouts become more complex, with columns within columns, sometimes it's easier to drag in row layouts first, then drag content modules into them. For example, here is a single row with three layers of columns.
For more information about how columns work, see the column layouts overview.
In the screenshot above, all three layers of columns are inside a single row, but you could also put each column layer into a different row, as shown in this screenshot:
What determines when you start a new row in your layout? There's no hard and fast rule, but here are some considerations:
- You want to set a background color, image, or video for a particular row in your layout. Create a separate row for that section.
- You want to save a particular row in order to reuse it somewhere else.
- You have content sections on your page that you might want to reposition later ‚Äì if they are in separate rows, it's easy to move them by dragging.
- You want to take advantage of the row's margin or padding features to position a block of content within a row or position the row with respect to other rows.
- Instead of a theme sidebar, you want to add a Sidebar module or some other module that appears to span several rows. To give this area the look of a sidebar, you need a single row with column layers, as in this quick mockup showing a single row with two columns. The left column contains two Heading column layers, and the right column contains the sidebar.
Woo360 makes layouts look good on medium devices (tablets) and small devices (mobile) with no extra effort on your part. However, if you want more control over breakpoints, stacking, and spacing, you can tweak the spacing separately for large, medium, and small devices. Start with this overview article on responsiveness.
Save Woo360 layouts for use elsewhere
You can save rows and modules globally, so that any change you make in one place is reflected everywhere, or you can save the rows and modules so you can reuse them but can modify them differently in each location. Or you can save the entire layout as a layout template, which you can use on any other page of your site or export for use on another site.
If you have the Agency edition of the Woo360 plugin, you can white-label the Woo360 UI. And with any edition of Woo360, you can create custom editing environments for your clients by controlling which layout templates, rows, and modules are available to them.
Use Woo360 layouts for posts
By default, Page Builder is enabled only for WordPress pages, not for posts. When you enable posts or custom post types, you can use Page Builder to lay out the content area of single posts or custom post types. See the article on using Page Builder with Posts for more information.
Note: Because WordPress index and archive pages are generated on the fly, you cannot use Woo360 to lay out those pages, though you can create Woo360 layouts that simulate the generated WordPress pages. For more information, see the article on generated WordPress archives vs. Page Builder layouts. Or, you can use the add-on Woo360 Themer plugin to create custom WordPress index, archive, and search result layouts.
WordPress requires use of a theme to control areas of the page like the header, footer, and sidebar areas. Themes allow you some degree of customization of appearance in these areas.
The Woo360 Theme has many layout and style options to control theme areas of the page, on both large screens and smaller devices. In addition, the Woo360 Theme is fully compatible with both the Woo360 and Woo360 Themer plugins. All theme settings are made in the WordPress Customizer, which you can access from the Appearance menu in the WordPress admin panel. The Woo360 Theme has customizations for the following general categories:
- Presets, which apply built-in styling to the page if you don't want to customize all the theme settings yourself.
- Layout and styling of the header (top bar, header, nav bar), footer (widgets and footer bar), and sidebar.
- Layout and options for blog archives, single posts, and WooCommerce.
- Default style settings for Woo360, such as accent color, heading and text fonts, and buttons.
- A section where you can add code to the head or body of your pages.
Header, footer, sidebar areas in the Woo360 Theme
The header contains two separate areas:
- The top bar, an optional strip above the header, which can contain one or two columns.
- The main header, which includes the logo and the nav area with a number of choices of layout.
Some header choices allows separate styling of the nav area.
The footer also contains two separate areas, each optional:
- The main footer, similar to the top bar in allowing one or two columns.
- The footer widgets area, which appears above the footer.
Here's a diagram showing the header and footer subareas.
The sidebar is optional but if enabled, it will appear on every archive and post page, and also on any individual page when you set the WordPress template setting to display it. Note that by default there is only one sidebar in Woo360 Theme, whose widget content will appear wherever you enable it (all Posts or individual Pages). You can't customize the sidebar widgets differently for individual posts and pages unless you use a third-party plugin or write code. Another way to customize the sidebar is to use the Woo360 plugin to create a Sidebar module in your content layout.
Woo360 Theme default settings for Woo360
Woo360 Theme lets you set some of the defaults for Woo360 layouts. This saves time and makes it easy to get conformity in your page layouts site-wide unless you choose to override that behavior.
Here are some Woo360 Theme settings that apply to Woo360 layouts:
- Accent color
Sets the default color of both Theme and Page Builder links and buttons.
Sets the default font family, size, and other font properties of headings in the content area.
Sets the default font family, size, and other font properties of non-heading text in the content area.
Sets a background color or image for the entire content area.
Controls the default behavior or whether images open in a lightbox when clicked.
- Current year shortcode
The theme has a shortcode that automatically inserts the current year, both in theme areas of the page and in Woo360 and Woo360 Themer layouts.
When do I need Woo360 Themer?
Although the Woo360 Theme offers a lot of flexibility in customizing the theme areas (header, footer, sidebar, post information, and archive pages generated by WordPress), if you want more control over these areas, then Woo360 Themer may be right for you.
Woo360 Themer is an add-on product for the Woo360 plugin. It lets you create Woo360 layouts that apply to areas of your site that are normally controlled by the theme. You can create different layouts for different locations -- for example, one header for your store pages and a different header for the rest of your site. Or you can show layouts only to users with a certain status (logged in, logged out) or user role (Administrator, Editor, etc.). This gives you much more flexibility and control in customizations than any theme could ever provide.
Woo360 Themer is fully integrated with the Woo360 Theme but also supports several popular themes. Other developers have made their themes compatible with Woo360 Themer, as described in this article.
Themer layout types and examples
Here are the types of Themer layouts you can create, with an example of each. With each Themer layout, you have a choice of which locations and which users it applies to.
Note: You could think of Themer layouts as overriding the theme's control of a particular area of the page. This means that for any page to which a Themer layout does NOT apply, the standard theme options you have set take over. For example, if you have a Header-type Themer layout applied to the home page only, your theme's header will apply on every other page of your site.
In this example, a Header Themer layout was created with a hero image and applies to the home page only. For the other pages, a different Header-type Themer layout could be created to apply to all pages except the home page, or you could just let your theme take over displaying its header on the other pages.
You can create layouts that appear where your theme normally displays the footer.
In the example shown in this screenshot, the Footer-type Themer layout on the left has a typical footer row at the bottom and another row above it that resembles a footer widget area except it contains module content, not WordPress widgets, giving you more control over layout and style. The Footer-type Themer layout on the right applies to product category and product archive pages, with a customer care section, a search box for products, and a list of recently viewed products. Woo360 Themer has integrations with WooCommerce, Easy Digital Downloads, and The Event Calendar plugins, with special modules that make it easy to display this type of information and limit the locations in which it appears.
Singular-type Themer layouts apply to single posts. They are different from regular Woo360 layouts for posts, in that regular layouts apply to the content area, whereas Singular Themer layouts apply everywhere except the content area. Woo360 Themer supports custom post types and custom fields used in WordPress, the Advanced Custom Fields plugin, and the Pods plugin (with an additional plugin that integrates with Woo360 Themer).
The following screenshot shows an example of a custom post type called Events. The post title row includes two custom fields for event date and time, and the featured image of the post is set to display in the row background. In the row with two columns beneath the title, the left column shows the post content, and the right column displays three custom fields (special notes, where to meet, and a map).
Note: A standard Woo360 layout applies to the content area of a post, whereas a Singular Themer layout applies to everywhere except the post content area. If you use a Singular Themer layout, you cannot use a standard Woo360 layout for the post content, and vice versa. In the screenshot above, the post content area in the left column uses the standard WordPress editor, with Woo360 shortcode to insert a saved row to display the image with the princesses and overlay text.
Archive layouts for generated WordPress pages (Index, archive, search results)
Normally, you can only control the appearance of pages such as the list of recent posts that WordPress generates through your theme's settings or by directly customizing WordPress PHP templates or creating custom CSS. Woo360 Themer lets you apply Woo360 layouts to these generated pages.
Here's an example of how an Archive-type layout was used to create an index page displaying recent posts for the custom post type called Events, with custom fields for date and time.
You can apply Archive-type layouts to the index page (list of recent posts), or to posts written by a particular author, or organized by date, or for a particular category or tag. An Archive-type layout can also apply to a page displaying search results.
Here's an example of an Archive-type layout for a WooCommerce product category page. In this layout, the category image appears as a row background behind the category title and a search bar, and the products within the category are displayed in a Posts module that lets you display only products that fit that WooCommerce product category.
Custom 404 page
You can create a layout for a custom 404 page, as shown in this screenshot.
Besides the Themer layout types that apply to standard theme locations, you can create Themer layouts for targeted "parts" of the post, such as content inserted after the header, after the title, above the footer, and so on.
For example, you could create a site banner that you display below the header on certain pages. In the following screenshot, a Part-type Themer layout inserts a banner notice about shipping prices under the header on all the shop pages in a WooCommerce site.