56
Drag & Drop WordPress Themes Sallie Goetsch September 7, 2013

Drag-and-drop WordPress Themes, featuring Themify Builder

Embed Size (px)

DESCRIPTION

My August presentation on Drag-and-Drop WordPress themes, revised and expanded for the Wine Country WordPress meetup, with a focus on the Themify Builder and its front-end editing capabilities

Citation preview

Page 1: Drag-and-drop WordPress Themes, featuring Themify Builder

Drag & Drop WordPress Themes

Sallie Goetsch

September 7, 2013

Page 2: Drag-and-drop WordPress Themes, featuring Themify Builder

FREE OPTIONS

Page 4: Drag-and-drop WordPress Themes, featuring Themify Builder

Page Layout Builder Settings

Page 5: Drag-and-drop WordPress Themes, featuring Themify Builder

MiniMax Layout Tab: Columns

Page 6: Drag-and-drop WordPress Themes, featuring Themify Builder

MiniMax Add Modules

Page 7: Drag-and-drop WordPress Themes, featuring Themify Builder

MiniMax Page with Modules

Page 8: Drag-and-drop WordPress Themes, featuring Themify Builder

MiniMax Page: Front End

Page 9: Drag-and-drop WordPress Themes, featuring Themify Builder

MiniMax Layout Builder: Conclusion

• Reasonably intuitive

• Limited selection of modules in free version

• Some conflicts with normal WordPress functions, e.g. media library

• Could still be useful, but I wasn’t that impressed.

Page 10: Drag-and-drop WordPress Themes, featuring Themify Builder

iFeature (CyberChimps)

Page 11: Drag-and-drop WordPress Themes, featuring Themify Builder

iFeature Options

Page 12: Drag-and-drop WordPress Themes, featuring Themify Builder

iFeature Header Layout

Page 13: Drag-and-drop WordPress Themes, featuring Themify Builder

iFeature Blog Layout

Page 14: Drag-and-drop WordPress Themes, featuring Themify Builder

iFeature +Portfolio -Slider

Page 15: Drag-and-drop WordPress Themes, featuring Themify Builder

iFeature: Conclusion

• Partly drag-and-drop

• Easy to use

• Can create a home page without posts

• Minimal control over styling

• Limited layout options

• Suitable for beginners

Page 16: Drag-and-drop WordPress Themes, featuring Themify Builder

PageLines Lite

Page 17: Drag-and-drop WordPress Themes, featuring Themify Builder

PageLines Site Options

Page 18: Drag-and-drop WordPress Themes, featuring Themify Builder

PageLines Layout Editor

Page 19: Drag-and-drop WordPress Themes, featuring Themify Builder

PageLines Layout Editor 2

Page 20: Drag-and-drop WordPress Themes, featuring Themify Builder

PageLines Drag and Drop

Page 21: Drag-and-drop WordPress Themes, featuring Themify Builder

Applying a PageLines Template

Page 22: Drag-and-drop WordPress Themes, featuring Themify Builder

PageLines: Conclusion

• Fairly flexible even in free version

• Not immediately intuitive—lots of different settings pages

• Combination of drag-and-drop and other selectors

• Modify templates on a per-page basis

• Can be used by beginners, but there’s a learning curve

Page 23: Drag-and-drop WordPress Themes, featuring Themify Builder

Snapshot (SiteOrigin)

Page 24: Drag-and-drop WordPress Themes, featuring Themify Builder

SiteOrigin Page Builder

Page 25: Drag-and-drop WordPress Themes, featuring Themify Builder

SiteOrigin Page Builder Settings

Page 26: Drag-and-drop WordPress Themes, featuring Themify Builder

Site Origin Widgets

Page 27: Drag-and-drop WordPress Themes, featuring Themify Builder

SiteOrigin Home Page Builder

Page 28: Drag-and-drop WordPress Themes, featuring Themify Builder

PageBuilder Tab

Page 29: Drag-and-drop WordPress Themes, featuring Themify Builder

SiteOrigin: Conclusion

• Widget-based

• More click-and-add than drag-and-drop

• Allows page-based and post-based layouts

• Assumes you already have site content (post categories, etc.)

• Designed to work within the styling of the SiteOrigin themes

Page 30: Drag-and-drop WordPress Themes, featuring Themify Builder

PREMIUM OPTIONS

Page 31: Drag-and-drop WordPress Themes, featuring Themify Builder

iThemes Builder

Page 32: Drag-and-drop WordPress Themes, featuring Themify Builder

Builder Layouts and Views

Page 33: Drag-and-drop WordPress Themes, featuring Themify Builder

Add New Builder Layout

Page 34: Drag-and-drop WordPress Themes, featuring Themify Builder

New Layout Applied

Error message due to lack of posts to feature

Page 35: Drag-and-drop WordPress Themes, featuring Themify Builder

Custom Builder Layout Metabox

Select a Builder Layout instead of a page template when creating a new page.

Page 36: Drag-and-drop WordPress Themes, featuring Themify Builder

Builder Style Manager

Page 37: Drag-and-drop WordPress Themes, featuring Themify Builder

iThemes Builder: Conclusion

• Not really drag-and-drop

• Very well-documented

• Page-by-page layout options

• Modules for restaurants, churches, events, audio

• Style manager plugin

• Many child themes available

Page 38: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Builder

Page 39: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Themes

Page 40: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Default Layouts

Page 41: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Page Builder Settings

Page 42: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Styling

Page 43: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Skins

Page 44: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Widgets

Page 45: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Custom Panel: Page Options

Page 46: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Custom Panel: Post Query

Page 47: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Custom Panel: Builder

Page 48: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Page Modules

Page 49: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Module Options

Page 50: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify: Slider, Highlights, Box

Page 51: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify: Portfolio, Posts

Page 52: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Footer

Note to self: make 1-level menu for footer

Page 53: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Front-end Editing

Drag to move

Drag to adjust width

Click to collapse

Hover to edit

Page 54: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Post Meta

Page 55: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Options

Page 56: Drag-and-drop WordPress Themes, featuring Themify Builder

Themify Builder: Conclusion

• Good number of modules

• Most modules are custom post types

• Fairly intuitive to use

• Front-end editing is cool

• Themes are resource-intensive

• Can add custom CSS classes

• Builder info stored in _postmeta and _options tables