How to Use Grid Mode Headway Themes Copyright 2012 Headway Themes. How to Use Grid Mode - Headway Themes 1 2 Setting up the Grid 1.1 Open Grid Mode 4 1.2 Getting Familiar with Grid Mode 7 1.3 Grid Setup 13 1.4 Using the Grid Mode Preview 16 Blocks 2.1 Draw A Block 19 2.2 Configure the Block 21 2.3 Modify Blocks 23 Setting up the Grid How to Use Grid Mode - Headway Themes - 3 Open Grid Mode There are two ways to open the Visual Editor. Once you are logged into your WordPress site, and Headway 3.0 has been installed and activated, you can use the Visual Editor menu from the Admin Toolbar when viewing the main page of your site, or from the WordPress dashboard on the left (under the Headway menu). Log Into WordPress The Visual Editor is only accessible to Administrators who are logged into WordPress. How to Use Grid Mode - Headway Themes - 4 Open the Visual Editor from the WordPress Dashboard On the left-hand menu of the WordPress Dashboard, you will see an item titled "Headway 3.0", or "Headway". Expand this menu to see the "Visual Editor" link. Click that. Go to Grid Mode Once in the Visual Editor, use the Visual Editor Menu Bar to access grid mode. Just click on "Grid". How to Use Grid Mode - Headway Themes - 5 Or, Open Grid Mode in the Visual Editor from the Admin Toolbar When viewing your site, unless you've disabled it in your user preferences, you will see the WordPress Admin Menu Toolbar. This Toolbar has two Headway items; Headway Visual Editor (a drop-down) and Headway Admin. Hover over Headway -> Visual Editor and choose "Grid". How to Use Grid Mode - Headway Themes - 6 Getting Familiar with Grid Mode The Visual Editor has several areas with various options and menus. Here's a quick overview: Grid Mode Panels/Menus There are a lot of options here! Details are below, here's a quick reference: 1. Layout Selector 2. Options Panel 3. Mode Menu 4. Menu & Status Bar How to Use Grid Mode - Headway Themes - 7 Layout Selector 1. The Layout Selector The layout selector on the left-hand side determines which layout of your site you are editing. A layout could be a page, a post, the blog index (your homepage, unless you set up a separate How to Use Grid Mode - Headway Themes - 8 Homepage and Blog Index), an archive layout, or a template. 2. Editing a Layout Hover over a layout name to reveal an "Edit" button - click to edit that specific layout. Don't forget that you must create a layout for your homepage in order for visitors on your site to see anything! Without blocks on the homepage, visitors to your main domain can't get anywhere else on your site. When a layout has been customized already, it will say "customized" next to the name. When layouts below a parent item have been customized, a little open circle appears next to the parent item. 3. Layout Hierarchy The layout selector is set up with a hierarchy, and you can follow this hierarchy to see what layouts certain pages and posts will display. The Blog Index serves as the parent for all layouts, so if you don't have any layouts set up except the blog index, your entire site will use the Blog Index layout. This is great for simple sites - just set up one layout and you're done! For more complicated sites, this poses no problem, becuase as you customize other layouts (the Single Layout, or a specific page) those will take precedence over the Blog Index. For example: If you set up the Blog Index, then the Single layout (under which you see that there are the children Page, Post, and then another level down speciifc pages and posts!), everything under Single inherits Single, and everything else - Archives, 404 - inherits the Blog Index. Exception to the rule: When you set up a separate homepage, the homepage exists separately from the rest of the hierarchy! Blog Index still rules, but the homepage is sort of like a sovereign nation. It does it's own thing, always. 4. Reverting a Layout If you edited a layout and then changed your mind, once you are editing it, hover over the layout to get a "Revert" button - this will push it back to the default and it'll inherit whatever layout it's supposed to according to the layout hierarchy rules. 5. Pages vs. Templates At the bottom of the Layout Selector is a Pages and Templates tab. The Pages tab shows all the layouts for the "pages" of your site - not just WordPress Pages, but posts, archives, etc. Anything on your WordPress site with a url! The Templates tab is where you can add templates, which you can then apply to specific layouts under Pages. This can make building a site easy when you know you'll be using a specific How to Use Grid Mode - Headway Themes - 9 under Pages. This can make building a site easy when you know you'll be using a specific template over and over again. Templates are all linked together - so editing a template will effectively edit the blocks on ALL layouts with that template assigned. The Grid The grid itself is the portion in the middle of the page; this is where you'll create and modify the blocks that make up your site. It's important to remmeber several things about grid mode: 1. This is not what your site looks like live! This is a wireframing and layout tool - you'll create the blocks, you'll configure them, you'll draw blcoks to an accurate width and a minimum height. Most Blocks will expand if necessary to fit the content within them (exception: media blocks, navigation blocks). However, your site isn't striped (that's the grid, it's a visual aid) and the colors and fonts you see arne't going to be accurate here. 2. The content blocks in the Visual Editor won't always show the content you expect. There's a notice about this in yellow, but I can't reiterate it enough - so don't panic if what you see in the Visual Editor in that content block isn't what you expected on the page. It doesn't mean your settings are wrong - to verify, just check out the front end of your site! How to Use Grid Mode - Headway Themes - 10 Options Panel The Options panel is persistent across modes, though the available options differ in each mode. In Grid Mode, the Options panel provides a variety of functions: 1. The Tools Menu This icon appears on the top left. This menu provides access to the Visual Editor tour, an option to clear the Headway cache (Headway Support may direct you to do this if you're having issues with the Visual Editor) and the Grid Wizard. 2. Setup The setup tab is where you'll configure specific grid options - the grid column & gutter width, wrapper margin & padding options, and Responsive Grid options. 3. Show Preview This button toggles between Show Preview and Show Grid (more on that later) 4. Search Use this to search for the option you're lookig for - if you search " margin", for example, options for "Wrapper Top Margin", "Wrapper Bottom Margin" and "Disable margin on smartphones" appear below the search box (which pops up when you click on the search icon). Click the options to go right to the option in Grid Mode. 5. Minimize If you don't need the options panel at the moment (for example, you need more space on-screen to draw blocks) you can mimize the Options Panel. This toggles to a plus icon; click that to open it up again. How to Use Grid Mode - Headway Themes - 11 Mode Menu This toolbar allows you to switch between Grid Mode, Manage Mode, and Design mode. Click the Headway themes logo to go to the members dashboard. Menu & Status Bar This main menu gives you options to save, see the status (what page you're editing, whether a page is being saved, if there are errors saving) as well as links to the Support Site (help), your administrative dashboard (WordPress backend) and to view your site (opens in a new tab/window) The save button ights up green hen there are changes to save, and flashes a bit & toggles to "saving" when saving. If there is an error, you'll see it in red (rare). How to Use Grid Mode - Headway Themes - 12 Grid Setup The grid width is determined by the combined gutter, column and padding widths defined in the Grid Mode in the Visual Editor. These configuration options can be found along the Options Panel under Setup, top left. Find the Setup Options In grid mode, find the Options Panel and make sure you're on the Setup tab. Configure the Grid Setup Options Here you can configure the grid's column width, gutter width, and view the overall grid width based on gutters/columns combined. You cannot enter in a grid width directly, nor can you alter the number of columns/gutters. Use the sliders next to the column and gutter width to adjust. The gutters can slide all the way down to 0px if you want! You will see the changes immediately above in the gird; any blocks on the grid will be resized with the grid. You will see that the columns are represented in the grid by gray stripes, and the gutters show the white grid background. How to Use Grid Mode - Headway Themes - 13 There are 24 columns, 23 gutters. This is the 960 grid system. Read more about that here if you're techie otherwise the only thing you need to know is that this layout tool makes our Headway grid possible and makes common layouts and site widths possible. Configure the Wrapper Options The wrapper options include options to modfy the top & bottom margins as well as the vertical and horizontal padding. Here's a quick definition if that doesn't make sense: 1. Margins are space that you give an element OUTSIDE of the element boundaries 2. Padding is space that you give an element INSIDE of the element boundaries. So the wrapper horizontal padding adds to the overall wrapper width (your grid width, plus the horizontal padding x 2, for the right & left sides). Configure the Responsive Grid Options "The Headway Responsive Grid allows the powerful grid in Headway Base to be custom-tailored depending on the device that the visitor is viewing the site from. Please note: some sites may benefit from having the responsive grid enabled while others will not. As the designer of the How to Use Grid Mode - Headway Themes - 14 website, it is up to you to decide. The responsive grid can be enabled or disabled at any time." The responsive grid is disabled by default. Enable it with a checkbox! What Does it Do? The responsive grid attempts to rearrange blocks (in order, top left to bottom right) in a vertical fashion for smaller screens only. You can see the responsive grid in action by visiting your site on a smartphone OR just by resizing your browser window. Certain blocks have new behaviors in Responsive mode - the navigation block will rearrange it's items to eventually - at it's skinniest - be lined up vertically, the header block will resize your logo, media blocks can optionally resize videos (see option above!) and media blocks with images embedded will resize dynamically. Post thumbnails will also resize appropriately, and the text on the site will remain at a readable size. Extra Block Options Once responsive grid is enabled, blocks will have an additional option to hide the block for any of the following: iPad, iPhone or Smartphones How to Use Grid Mode - Headway Themes - 15 Using the Grid Mode Preview Grid Mode has a "Preview" Button that lets you see what your site would look like on the front end. As of version 3.2.2, all changes must be saved in order to view your grid accurately in Preview mode. (Hint: This is changing in the next version - you'll be able to use Preview mode with unsaved changes!) Preview mode takes into account any styling (or the lack of styling!) you've done in Design Mode, so if you see something you want changed relating to color, backgrounds, borders, fonts, etc - go to Design Mode next to work on it! Get ready! In Grid Mode, Add, edit, and configure your blocks to your hearts content. Show the Preview Still in Grid Mode, Click on "Show Preview" on the top right of the Options Panel along the bottom of the Visual Editor. How to Use Grid Mode - Headway Themes - 16 Check out the preview, then turn off Preview to edit blocks again. Once you're done previewing your site, click on "Show Grid" to make more edits. To style the elements you see on the page, you'll need to go to Design Mode. How to Use Grid Mode - Headway Themes - 17 Blocks How to Use Grid Mode - Headway Themes - 18 Draw A Block Drawing a block is as simple as pointing, clicking, dragging, and releasing the click. You choose the block type, and you're on your way. Draw a square or rectangle shape on the screen In any blank area, position your mouse pointer to a place where you'd like the top left corner of a block to begin. Click and hold while dragging your mouse to the right and down, creating a dotted-line rectangle or sqaure shape. When the block is the size and shape you want, release. If you release too early, don't worry, the block can be reshaped at any time. Choose a Block Type Upon releasing your mouse click, a menu of block types (the Block Menu!) will appear. Click to choose a block type from the menu. How to Use Grid Mode - Headway Themes - 19 Add-on Blocks Add-on blocks are available through Headway Extend, and will appear under a "Custom Blocks" option in the block menu. Add-on blocks are installed as plugins, or integrated as part of a Headway Child Theme. You can also click on "Add More Blocks" to find the custom blocks available on the Headway Marketplace. How to Use Grid Mode - Headway Themes - 20 Configure the Block Block Configuration options differ greatly depending upon the block type. See the Headway Codex for more information. (http://codex.headwaythemes.com) Hover Over the New Block Hovering over a new block activates the Block Toolbar Menu. This menu has an options icon; click it to open the Block Options in the Options Panel at the bottom of your screen. Review and Configure the Block Options Each block has different options. Widget areas have options to set the widgets to align horiozontally instead of vertically; content blocks have options to change the content displayed; media blocks have options to embed a video or add images as an image rotator. Expore the block How to Use Grid Mode - Headway Themes - 21 options by clicking the links on the left-most column in the Options Panel. Note that the lighter gray bar at the top of the Options Panel is a navigation - you can have multiple block options open at one time. Click the block titles to edit the options for that block. Close the Block Options and Save Your Progress Click the (x) next to the Block Title in the lighter gray Options Panel navigation bar to close the optoins. when you are done with block configuration, don't forget to click the green "Save" button at the top right of the Visual Editor. How to Use Grid Mode - Headway Themes - 22 Modify Blocks Once you've created a block, you have the option to delete it, resize it, reconfigure it, or change the block type entirely. Resize the Block In Grid Mode, hover over one of the block edges, click, hold & drag to resize the block. Your mouse cursor will turn into a little arrow to indicate you're in the right place. You can resize a block at any of the four edges or at the four corners. Editt he Block Settings Just hover over the block settings icon and click to reveal the block options in the Options Panel along the bottom of the screen. You'll see the options you've already chosen, and you can change them as much as you'd like. Just remember to save! How to Use Grid Mode - Headway Themes - 23 Change the Block Type If you've created one type of block but then need to swap it out with another block type - say, a custom code block needs to be switched to a content blcok - you can do this. Click on the block type icon on the top left - this icon differs from block to block, but always appears directly to the right of the block ID (the number on the top left of the block when you hover over it) This will bring up the block menu again. Once you click this, you have to choose a block from the menu below, or click the icon again to close the block menu without making any changes. Choosing a block type from the menu - even if it's the same as the type you've already got in place - will erase the block settings and give you a fresh block. Don't worry - there's a pop-up menu to confirm that's what you want to do, and to warn you that your settings will be lost. How to Use Grid Mode - Headway Themes - 24 Delete a Block Deleting a block is easy: Click on the "X" on the top right of the block when you hover over it, (the Block Toolbar) and then confirm your decision to delete! How to Use Grid Mode - Headway Themes - 25
© Copyright 2024