The SEO Design Framework User Manual
P a g e 1 | 55
TABLE OF CONTENTS Chapter
Global Settings a. Placeholders b. Page Title and Breadcrumbs c. Lightbox d. Entrance Animations e. Favicon and Touch Icons f. Social Media g. Export /Import/ Reset Theme Options 2. Silo Builder 3. SEO 4. Global Layout 5. Global Styles a. Global Preset Colors b. Google Web Fonts and Global Typography c. Global Background Settings d. Global Widget Style Editor e. Global Page Title and Breadcrumb Settings f. Global Header Settings g. Global Logo Settings h. Global Navigation Settings i. Footer Font Settings j. Silo Styles Setting 6. Global Header 7. Global Footer 8. Slider 9. Short Code Generator 10. Page Level Settings a. SDF Builder for Drag and Drop Design b. Warning About Modifying Builder Shortcodes c. Page Settings Tabs i. General Page Settings Tab ii. Page Settings Header Tab iii. Page Settings Layout Tab iv. Page Settings Footer Tab v. Page Level Display Title 11. Widgets a. Static Widget Areas b. Custom Widget Areas c. Show On / Hide On Widget Functionality d. Widget Layout Feature e. SDF Widgets & Descriptions
3 3 4 4 5 6 7 8 9-14 15 17 18 19 20 21 22 24 25 27 28 29 30 31 33 33 34 35 35 40 41 42 43 44 45 46 47 47 48 50 51 52-53
P a g e 2 | 55
1. Global Settings
The SEO Design Framework features both Global (site wide default) and Local (page level) settings (located below the WYSIWYG editor under pages or posts) to override global settings and customize pages further. Each Global Setting is highlighted below through descriptions and / or illustration:
The SEO Design Framework comes with visual placeholders for webmasters to view on the front end where the widgets will appear (depending on layout choice). Simply toggle placeholders on / off in Global settings >>> Placeholders then click the save changes button and callouts will appear (where widgets are located) when you preview or publish pages.
P a g e 3 | 55
b. Page Title and Breadcrumbs
Globally use this setting to toggle breadcrumbs on / off site wide (default setting is on). You may also specify a custom breadcrumb separator, toggle the home link on or off (to prevent excessive linking) or customize the â€œHomeâ€? link anchor text to something more SEO friendly.
Use this switch to toggle lightbox functionality globally. Turning this off will disable all lightboxes, enabling it will allow lightboxes on all pages. To add lightbox content, under the dashboard under Ads>>> Add New >>> upload text or images in WYSIWYG area >>> then save.
P a g e 4 | 55
At the Page Level, you can select which lightbox displays and either use (1) a hypertext trigger by selecting the desired text and (2) clicking the [Lightbox] button in the WYSIWYG editor or (3) by selecting a time-delay (in seconds) from the Timed Lightbox option at the bottom of Page Settings.
d. Entrance Animations
The SEO Design Framework is equipped with entrance animations (for text or images) that animate as the page loads.
P a g e 5 | 55
To animate, simply use the SDF page builder image or text block module and select the desired effect from the drop down menu.
e. Favicon and Touch Icons
Add favicon and Apple Touch Icons with ease. To implement, simply click upload image >>> select image >>> then save changes and the framework will add the appropriate HTML.
P a g e 6 | 55
f. Social Media Icons
Use this section to turn Social Media icons on or off Sitewide or, by adding account information, you can enable social media links using the SDF Social Icons Widget in Appearance >>> Widgets
P a g e 7 | 55
Add social media icons to pages, posts, navigation or widgets; use the SDF Social Icons Widget in Appearance >>> Widgets >>>.
You can use the Hide On / Show On option to toggle the SDF Social Icons Widget on specific pages or implement it site wide from the widget’s admin panel (including stacking multiple widgets either horizontally or vertically in an area).
g. Export / Import / Reset Theme Options Use the import /export setting to load or save theme settings including color presets, typography settings and layout options. To reset all theme options to the default settings, click the reset button, then confirm “Yes, Reset Theme Options” >>> then click the Save Changes button.
P a g e 8 | 55
2. Silo Builder Building your websites information architecture thematically using Website Silo Architecture dramatically reduces the amount of time and / or links required to develop page authority in search engines. For more information on what website silo architecture is or how siloing works follow the links.
In the past, implementing website silo architecture in a WordPress environment was a painstaking process involving hours of custom coding (to rewrite the inherent taxonomy and link structures), several plugins and lots of knowhow. Now, with the SEO Design Framework Silo Builder, this same feat can be accomplished in minutes.
Siloing your website means creating topical self-contained layers of thematic content using a hierarchy connected by specific internal-linking structures that support the next tier (keyword) above it. The most competitive keywords are the silo / “main topic”, the category embraces the “market defining” keywords that represent highly-sought commercial terms and the supporting articles / posts are used to capture the “low-hanging fruit” and tangential traffic related to the theme. Our Silo Builder does all this automatically in just a few simple steps.
P a g e 9 | 55
To use the SEO Design Solutions Manual Silo Builder to instantly create perfectly siloed websites. 1. Make sure your Permalinks are Set to Custom Structure and /%category%/%postname%/ in Settings >>> Permalinks.
2. Click Manual Silo Builder
P a g e 10 | 55
3. Click HOME radial button then add Silo Keyword and click Add New Button to save changes.
4. Select your Silo Keyword under HOME on the left and then >>> Add Categories for your Silo Keyword >>> then click the Add New Button to save changes.
P a g e 11 | 55
5. Next, Select Category and Add Supporting Articles / Landing Pages and click Add New.
6. And thatâ€™s it. All Pages, Categories and Posts (supporting articles) are created in Draft mode.
P a g e 12 | 55
7. To View Silo Architecture, Look under Current Silo or Check the Draft area for Pages, Posts and Categories and add content.
8. Proceed to Drafts and Add Content to the Page, Post or Category Created.
P a g e 13 | 55
9. To Add Navigation to your pages, proceed to Appearance >>> Widgets >>> then add the SDF Silo Builder Widget where you want the navigation to appear on the site.
Power User Design Hint: You can also embed this widget into a custom widget, then use the SDF Page Builder to insert anywhere in your design using our Drag and Drop Builder. Once you add the SDF Silo widget to a side bar or area in the builder, the menu will be automatically added to pages and posts. You may also use shortcodes to put the silo menu contextually on the page. *We suggest you create your website with 1 silo landing page, 1 category and at least 5 supporting articles. Once complete, the SDF Silo builder creates the navigation which you can either add (1) in the page content area using shortcode or (2) in the widget area (using the SDF Silo widget as outlined above) to instantly add the proper internal linking between Silo Landing Pages, Categories and Supporting Articles. This feature has completely rewritten WordPress’s taxonomy / URL structure to create (1) a silo landing page - “the main landing page for the theme” (2) a category page – “to support the silo landing page” and (3) supporting articles which interlink and link up to the category and silo landing page (with the appropriate anchor text).
P a g e 14 | 55
3. SEO The SEO Design Frameworks SEO Features are powered by SEO Ultimate. Click to watch our video tutorial here for an overview on all the features. SEO Ultimate’s features are located in groups called “modules.” Click on a modules name to reveal additional configuration options. Also, you can intentionally enable, disable or silence alerts for certain modules in the event that you are using other plugins with similar functionality.
P a g e 15 | 55
Aside from global settings, under the WYSIWYG editor on pages and posts, SEO Ultimate provides Page Level Settings to administer everything from simple meta titles and descriptions to more advanced optimization options such as indexation settings, Opengraph and social media markup settings, including Twitter Cards, Rich Snippets (for reviews) and local maps markup.
P a g e 16 | 55
4. Global Layout
This section controls the global layouts for the website. Options saved here become the default for new pages, categories and posts. However, you can override Global Layout Settings individually on pages or posts including Columns & sidebar settings or build your own custom layouts using the “No Sidebars” option globally and then using the SDF Page Builder’s Drag and Drop Design feature (at the page level). Boxed layout allows you to customize the background color for contrast, wide layout makes the layout 100%. Both boxed and wide layouts are responsive.
P a g e 17 | 55
5. Global Styles Use this section to customize everything from style and color presets, fonts and page title settings, line height, background colors, widgets, widget typography and custom backgrounds, navigation and more. Tool tips and links to additional information are provided in the sub sections under each nested setting.
P a g e 18 | 55
a. Global Preset Colors Save color hex values as presets and use them dynamically in your designs. To use, simply give a preset a name >>> choose the hex value from the color picker and click Add Preset Color. Then in other style sections options, you can conveniently select any preset from a dropdown menu. *You may edit or remove a preset at any time.
P a g e 19 | 55
b. Google Web Fonts and Default Global Typography Please visit Google Web Fonts for a complete listing of available web fonts. To add a font to the library, copy and paste the name of the Google font into the â€œFont Nameâ€? input field and save changes. The new font will then be available for use in other sections of the Style Settings for titles, content, widgets, footer or anywhere fonts are used throughout the site.
P a g e 20 | 55
c. Global Background Settings Customize the background color for boxed or full-width layouts in addition to uploading background images, adding margins or drop shadow effects from this style admin section.
P a g e 21 | 55
d. Global Widget Style Editor Set widgets alignment, typography, style, equal height options, custom background options (or just leave widget background color transparent to reflect the current body background color) and more from the Global Widget Settings Style Editor.
Customize widgets per area using the >>> Customize Widget Styling tab or Customize Widgets Typography tab. If the Set Custom Style option is selected under the Customize Widget Styling section.
P a g e 22 | 55
Easily modify each widgets background color, upload background images, tweak widget borders and their color and/or style as well as round the widgets corner radius (0 is square in appearance and each addition number from 1 - 10 will round edges more) for a rounded rectangle appearance.
Additionally, all static widget areas feature their own separate controls (e.g. default, above content block, left sidebar, right sidebar, below content block and footer block). This allows fine-grained control for optimal design output. When these features are combined with the Unlimited Sidebars and the SDF Page Builder (featuring Drag and Drop Design), you can add perfectly styled widgets anywhere in your design.
P a g e 23 | 55
e. Global Page Title and Breadcrumbs Settings Change the global page title, font size, font, alignment, breadcrumb and link color, hover color, background and box shadow color options using the this section.
P a g e 24 | 55
f. Global Header Settings Customize header elements including font size, font family, text color, hover color, link color, background color, parallax background image, box shadow effects and text alignment for the default header and header blocks 1, 2, 3 and 4 independently from this section.
P a g e 25 | 55
Power users will enjoy the ability to truly unleash creativity with widget areas that can be completely customized individually. Header settings can be configured either globally or at the page level where you can truly design the header section of each page to your liking and either drag sections to active or inactive status. Combined with an array of SDF Widgets which can be used in tandem, this translates to total design control.
P a g e 26 | 55
g. Global Logo Settings Customize logo padding, font, color, size, link attributes and background settings.
Example of Logo Padding and Background Color Tweaks
P a g e 27 | 55
h. Navigation Customize menu alignment, type, font, color, size, background images, hover states, box shadow values and dropdown colors from this section.
Navigation Sample Above
P a g e 28 | 55
i. Footer Font Settings
Customize the Footer font size, family, text and link hover states, background color, images and bottom footer text options in this section.
The SEO Design Framework has two footer areas. One is where you add widgets and the other is marked as â€œbelow footerâ€? which has a WYSIWYG editor to add text and links, yet all styles are controlled from the SDF Global Admin >>> Styles >>> Footer Font Settings area above.
P a g e 29 | 55
j. Silo Styles Settings
Customize the SDF Silo Widgets navigation output for the fonts color, line height and link color from this section.
Example of Silo Styles nested navigation in right sidebar.
P a g e 30 | 55
6. Global Header Settings The header settings control panel allows you to upload your logo and add additional HTML to the header section of the website such as short codes, scripts and / or tracking codes.
Under logo settings you can upload a custom logo, use the default text or turn off the tagline entirely.
Next Tip >>> How to Build a Custom Header Layout on Next Page <<<
P a g e 31 | 55
The SEO Design Framework has a custom header builder for both Global and Page level settings. Both work in the same way. Use the plus or minus signs to expand or shrink blocks horizontally. Then simply drag the blocks how you want them displayed in the header.
To create a global (site wide) header structure, rearrange the blocks for the logo, navigation, slider output, or optionally add up to 4 distinct header block widgets. Inside those widgets you can style them in the styles section or insert SDF widgets for social media icons, addresses, text, videos, custom backgrounds, parallax images or any other widget functionality.
P a g e 32 | 55
7. Global Footer The footer settings control panel allows you to add text to the footer area of the website and bottom footer area of the website. Additional controls for adding additional columns inside the footer can be implemented in Appearance >>> Widgets >>> Footer >>> then adding additional columns by selecting how many are required for that section under Choose Widget Layout. For example adding a widget and then selecting ½ under Choose Widget Layout will provide 2 columns in a widget area so you could add another module inside the widget and select ½ and the output is two modules displayed horizontally inside the same widget. Additionally, in the “Styles Section” Tab you can further customize the assets, background color, image, text output and more.
The SEO Design Framework is equipped with Slider Revolution. To start, click the “Create New Slide” button >>> Fill in Slider Title & Slider Alias >>> Specify Source Type >>> Slider Layout >>> Grid Settings >>> then Click “Create Slider”. Then, click the name of the slider from the list and click the “Edit Slides” button. Click “New Slide” or “New Transparent Slide” >>> then add the Base Image. Next use the Add Layer Button to add text or additional images and effects. For documentation on how to use the slider click here.
P a g e 33 | 55
9. Short Code Generator The Short Code Generator is designed to allow users to save elements such as text, contact forms, scripts or code and then when pasted into the content area, widgets or in the header or footer sections the shortcode will execute.
To use, simply paste text, HTML or code into the HTML field >>> Give your shortcode a name in the sdf_short_id field and save changes. You may add as many shortcodes as you like by clicking the Add Row “+ sign” or click the “ - negative sign“ to delete a row. Make sure to click the “Save Changes” button after adding or deleting shortcodes.
P a g e 34 | 55
Page Level Settings
In addition to “Global Settings”, the SEO Design Framework also features “Local Page Level Settings” that Override Global “Sitewide” Settings. This means that you can customize each page uniquely instead of relying on the global setting for layout or content options.
The SDF Page Builder The SEO Design Framework comes with a Drag –n- Drop page builder to easily create layouts, widgets, images, text, call to action buttons and more in a cinch without coding. 1. To Start > Simply Click the SDF Builder Button.
Next Page >>>>
P a g e 35 | 55
2. Then Add Row
3. Next, Select a Column Width for the Row / Layout
P a g e 36 | 55
4. Then Add Modules to Blocks (Modules Range from Text, Images, Widgets, Buttons and More).
SDF Builder Modules: Additional Modules Pending. Have a request? Let us know.
Text Block Image Video Widget Button CTA Button Message Box CTA Box Hero Section Blank Spacer Separator Separator with Text Well Badge Label
P a g e 37 | 55
5. Use the Icons to Either Edit / Customize, Clone, Delete or Drag Modules to Other Blocks.
P a g e 38 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
It’s That Simple! Here’s an Example of Dragging a Cloned Module into Right Column Below
6. You Can Also Save Layouts as Templates to Load on Other Posts or Pages
If you save or load templates, the modules will be empty however the layout is transferred.
P a g e 39 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Modifying SDF Builder Content Directly Using WordPress Content Editor SDF Builder converts layout created using it to a shortcode markup and renders it into Wordpressâ€™s content editor. Also, it recreates it's layout from shortcodes in WordPress editor when switched back.
That way, when the page is saved and later loaded, SDF Builder's layout will be recreated from these shortcodes.
Theoretically, Builder content can be edited within WordPress editor directly, but care should be taken, otherwise your code can easily break. Any HTML added inside editor needs to be enclosed within appropriate inputs inside a Builder modules, using exactly same syntax as if Builder had created it. Builder's hierarchy is: first row, then column, then module, then its inputs. Nothing can be inserted between those layers, and their hierarchy can't be changed. Even though Builder's syntax is based on HTML / XML syntax in the way how elements are nested, they can't be freely
P a g e 40 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
combined. For example, you can't enclose SDF Button module into HTML <div> element, as if it was HTML <button> element. To avoid unwanted results, once you started using Builder, it is safer to do all your changes using Builder only, rather than trying to insert them directly into WordPress content editor. If, however, you chose to do it, please bear in mind that SDF Builder parser relies on strict syntax and that the code can easily break with even smallest nesting or syntax error. If some Builder module lacks an attribute you find useful, feel free to contact us and we will consider adding it into next release. _____________________________________________________________________________________
Page Settings Tabs Under the WYSIWYG editor, there are 3 toggle states for features; Global, On or Off.
Global: pulls settings from the Global Settings in the main SDF admin area. If Global is selected, those settings will be pulled into the page level (unless changed locally). On: is ideal when you have set something off in the global settings and wish to override that on the page level. Examples of this would be if you turned the navigation off globally, but on this page you wanted to display navigation, then, you would select “on” to override the global setting.
P a g e 41 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Off: Can be used when you simply want to suppress that feature from the page or post entirely (such as a display title, breadcrumbs or footer).
The “Local Page Settings” tabs have options which you can turn on / off to customize your page or post content (e.g. turn off the title, create custom breadcrumbs, change the page layout or implement custom navigation) with one simple click.
Turn featured animations on/off or default to global Display social Icons on the page (on / off or global)
P a g e 42 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Display Breadcrumbs on the Page (on / off or global) Custom Breadcrumbs for the Current Page Add HTML to Head Tag Add HTML before End Body Tag Timed Lightbox
Display Navigation on Page (on / off or global) Display Custom Navigation on Page (uses alternate menu).
By turning the Display Custom Navigation on Page setting to “On”, you can select an alternate menu for this page or post. Using this option displays available menus from Appearance >>> Menus, so, if you wanted to create category specific menu structure, create is in Appearance >>> Menus and then use them on pages or posts with this feature.
P a g e 43 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Select boxed or wide layout option for that page or post regardless of global layout Select from 7 pre-built layouts or customize your own sidebar widths or select no sidebars Select custom Widget widths for that page
P a g e 44 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Option to display or hide footer on pages or posts Option to add custom footer content to page to override global footer settings
P a g e 45 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Option to Toggle Page Title On / Off Option to Make the Title an H1 or H2 Tag Depending on SEO Preference Option to Make Title Clickable or Static Option to Link Title to Another URL Option to Customize Title Text (Instead of Slug Name)
P a g e 46 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
The SEO Design Framework has a number of custom modifications that expand the functionality of WordPress Widgets including unlimited sidebars, a hide on / show on feature, the ability to control the widget areas width, how many widgets appear inside an area and how they are stacked and more.
The SEO Design Framework features Static Widget Areas that appear on every page, post and category and also features Custom Widget Areas for use with the SDF Page Builder that can be inserted into pages or posts.
Static Widgets Areas The static widgets are:
Header Block 1, 2, 3 and 4 (which you can rearrange using the header structure settings) to customize your websites header. Footer Block Right Sidebar / Left Sidebar Above Content Block Below Content Block Slider Block
P a g e 47 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Custom Widget Areas Custom widgets can be used in the SDF Page Builder. To implement a Custom Widget, simply type in the new name for the widget in Appearance >>> Widgets >>> and click the Add Widget Area Button. After that, the custom widget will appear alongside the other static widgets inside your WordPress dashboard.
Custom Widget Areas work like normal widgets from the Appearance >>> Widgets area >>> except that in order to see them, you’ll have to add them using the SDF Builder >>> Add Row >>> Add Number of Columns >>> Add Widget Module >>> on pages or posts.
This is particularly useful if you wanted to add a custom call to action, contact form for split testing, Ads, or any 3’rd Party widgets you would like to add to a page.
P a g e 48 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
*Design Hint for Power Users: create custom layouts using the SDF Builder and construct a page from the ground up by using the No Sidebars option then insert widgets where needed.
Or, keep the global settings and add widgets or custom widgets in the layoutsâ€™ content area (using the widget module inside the SDF builder).
P a g e 49 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
Show On / Hide On Widget Functionality The Hide On / Show On functionality allows you to either choose pages, categories or posts you want to hide that widget or on which pages, posts or categories you want the widget shown on.
P a g e 50 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
Using the Show on Checked option allows you to select which pages, posts or categories a widget’s content appears on. When you combine this with the ability to create widgets dynamically, this is one powerful feature that makes the SEO Design Framework even more amazing for customizing your design.
Widget Layout Feature The Widget Layout feature allows you to vertically or horizontally stack multiple widgets into an area by using the Widget Layout options 1/1 (full widget area which is default), 1/2 (divides the area in half), 1/3 (divides widget area in thirds), ¼ (divides widget area into fourths), 1/6 (divides widget area into sixths), 2/3 (takes up two thirds of widget area), 3/4 (takes up three fourths of widget area), or 5/6 (takes up five sixths of widget area).
P a g e 51 | 55 © 2014 SEO Design Solutions, Inc. All Rights Reserved.
Design Hint for Power Users:
When you combine the Widget Layout option with the Global or local Sidebar Width Option a myriad of design possibilities emerge since you can completely customize how the sidebars render on a page by page basis. Widgets Sidebar and Layout options also exist on the local page level so you can truly make each page unique.
P a g e 52 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
SDF Custom Widgets
Description of Each SDF (SEO Design Framework) Widget on Next Page >>>
P a g e 53 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
SDF Widgets SDF Widgets can be used one of two ways 1) in the Static Widget Areas Header Block 1, 2,3,4, Right Sidebar, Left Sidebar, Above Content Block, Below Content Block and Footer Block or 2) In Custom / Dynamic Widget Areas in conjunction with the SDF Page Builder. 1. SDF Address Display your company address info (address, work hours, phone, mobile, fax, email, link) 2. SDF Audio Display your SoundCloud, MP3 or OGG audio 3. SDF Google Maps Displays a map image thumbnail with a larger map available in a lightbox. 4. SDF Image Displays an image on the page 5. SDF Portfolio Display your portfolio items image grid 6. SDF Silo Builder SDF Silo Builder add siloed site architecture / navigation to pages, categories and posts built with the Silo Builder. 7. SDF Slider Displays a SDF slider on the page 8. SDF Social Icons Display Social Links added in accounts from global settings 9. SDF Video Display YouTube, Vimeo or embedded code video Additional material will be added to this manual in addition to training videos inside the SDF members area. Make sure to check back regularly for new features and updates.
P a g e 54 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.
Brought to you by: Jeffrey L. Smith http://www.seodesignframework.com/ SEO Design Solutions, Inc. Copyright ÂŠ 2014 All Rights Reserved
P a g e 55 | 55 ÂŠ 2014 SEO Design Solutions, Inc. All Rights Reserved.