Search
Expand Article

Last Updated: 5/24/16

Building Your Site

Now that you know the basics, here's how to build your site...

If you haven't already worked through the Getting Started information, take a few minutes to do that now.

This article will walk you through the most common initial steps in building your site:

  1. Apply a design.
  2. Build your page structure.
  3. Upload files.
  4. Build a page: paste and format content, add links and images, add other blocks, change the layout.
  5. Change design blocks: site-wide and for one page only.
  6. Set up your editing team.



Step 1: Apply a design

Often, the first change you'll want to make to your new site is to apply the design you want to use. If your site already has your design in place, or if you will stick with the current design while your custom design is in process, you can skip ahead to Step 2: Build your page structure.

View available design options

  1. While logged in to your site, click Pages in the control bar. The Pages area will appear.
  2. To browse the available design(s) for your website, within the Properties tab at the bottom of the Pages Area, click on the drop-down box labeled "Select a design for this page." By default, the page designs currently in use will display. Page Design Dropdown
  3. To filter the design options, use the More Options button in the upper right hand corner of the scrolling window. Selecting this button reveals filtering options to view available designs.
    • Show responsive designs: view only the responsive designs available for use with the website
    • Show designs in use (Default): view the page designs currently used on the website.
    • Show All available designs: view every design available with your purchased design package.
  4. Underneath More Options, select the link to view at all the  website designs available from Elexio to purchase.
  5. Click the More Options button again to close the filtering window.

Apply a design to a single page

  1. In the "Select a design" drop-down menu, select a new page design. The Design Change pop-up window will appear.
  2. Select "Apply this design change to only this page." (below)
  3. Select Ok to apply the design. Your site will automatically save your changes.
  4. Click the Go button to the right of the page URL to view your page.

Apply a design to multiple pages

  1. While logged in to your site, click Pages in the control bar. The page structure for your site will appear.
  2. Click the design drop-down box on the right side of the Properties tab to view available designs to convert the page.
  3. Select the new desired page design layout and select the popup window radio button to convert all the pages from one page design to another.
    • Note: The conversion wizard will notify how many pages will be converted to the new selected design. Please verify this is the migration choice desired as it applies to multiple pages.
  4. Select Ok to apply the design.
  5. After you click the Ok button, it may take several seconds for the system to apply your changes. Please only click this button once for each page design you convert.
  6. Click the Go button to the right of the page URL to view your webpage.
  7. After converting all your page designs, refresh your page. Your new design will appear.

If you haven't already tried this on your site and want to apply a new design, take a moment to try it out now before continuing.



Step 2: Build your page structure

To make your site easy for visitors to use, you want a good menu structure. Before you begin to create lots of pages, it's best to sit down and draw out a rough site map. To help your planning, do a Web search on "building a site structure" or "building a site map," and review sites for other organizations like yours. If you're not finished with that planning process just work through this section using a simple example, such as
    Main topic:    About Us
    Sub pages:      Our History
                            Our Staff

Here's how to set up the menu of your site...

Build your main menu.

  1. Click Pages in the control bar to open the Pages area. 
    • Make sure you're viewing the "root" of your Pages area. The root is the main level of your site structure. It's also sometimes called the "top" level. (No, we can't explain why the apparently opposite words "root" and "top" would be applied to the same thing!) Look at the upper left of the Pages area under Now Browsing: only the box starting "http" should display. If not, click the box that starts "http" to navigate to the root of your site.
    • Each page in the root of your site will display as a menu item, as long as the Menu Visibility is set to Visible.
    • On most new sites, Elexio includes demo content pages that you can change or remove as you like.
  2. Add a page here for each top-level menu item you'd like to appear in your menu. (Remember, to add a new page you click New Page button in the upper left)
    • Keep in mind the design you use can affect the space you have for menu items to display. To get things to fit, you may need to shorten the names of your menu items or move top-level menu items into a drop down menu.

Create fly-out (or drop-down) menus.

  1. On most website designs, main menu items can show fly-out (or drop-down) menus that show the pages under the main item in your structure. To create this in your Pages area, double click one of your main menu pages. This will take you down one level, and the Now Browsing area in the upper left will show another box to help you know where you are.  Any page you place here will display as a fly-out menu item when you hover your mouse over the top-level menu item.
  2. Create at least a couple of pages here, then use the buttons that appear under Now Browsing to navigate back to the root of your Pages area. Notice how the page icon has changed to include a paper-clip and multiple pages to show you the page has pages underneath it.
  3. Continue to add pages until your site structure is created. To keep your site easy to use, it's best to limit your menus to go not more than 2 or 3 levels deep.

At this point you should have a good start on your menu structure. One more item before we move on...

Create a menu item that links to another page, file, or website.

While building your site structure, you may want to create a "Redirect" menu item that takes you to another web site, or links to a pdf file in your Files area, or maybe opens another page on your site. Even if you don't have plans for this, create a Redirect item now to see how it works...

  1. In your Pages area, select the page that you'd like to use to link elsewhere. Or, create a new page for the purpose.
  2. In the Properties tab toward the bottom of the Pages area, check the Redirect Page checkbox.
  3. In the Redirect URL text box that will not display to the right, paste the URL you'd like to link to or click the browse button and use the wizard to select where you'd like this menu item to link.

Now save your changes, close the Pages area, and explore the menu you just created.



Step 3: Upload Files

Before you can use a file (images, audio, PDFs, etc.) on your website, you need to copy (or "upload") it from your computer to the website server. Uploading files to your site's Files area makes them available to use on your site.

  1. Click on the Files button in the Control Bar at the top of your page. The Files window will appear.
  2. Like the files stored on your computer, files for use on your website are stored and organized in folders. If you're just getting started, you'll probably see a series of folders containing the Files used within Elexio's sample content. While you can delete, rename, or organize these folders in whatever way is helpful for you, just ignore them for now and create a new folder.
  3. To create a new folder, click on the New Folder button at the top left of the Files window. A new folder will appear in the Files window.
  4. In the Properties tab at the bottom of the Files window, type a name for your folder in the Name text box.
  5. Double click and open the folder where you want to upload a file and click on the Upload icon.
  6. Click the Browse button
  7. A window will appear showing the files on your computer.  Select the file(s) to upload and click Open.
    • To select multiple files to upload, hold down the ctrl key while clicking multiple files.
  8. Once your files have finished uploading (all the blue bars have loaded), click Close and you will see that they appear in the Files area folder for your site.

If you haven't done so already, go ahead and upload a few files you'd like to use on your site. For more on the Files area, see Uploading Files.



Step 4: Build a Page

Now that you've created several pages and uploaded a few files to use on them, lets jump to the fun part: adding content to your pages.

Select a Layout

  1. Navigate to the page where you'd like to add content and select Change Content from the Actions menu.
  2. Before you begin editing, it's helpful to choose your page layout. (A layout is a grouping of one or more columns used to arrange blocks of content). By default, a single column layout appears on your page.
  3. To change your layout, hover over the content area you want to change and select the Edit Layout icon (upper left corner of the box). A window showing available layouts will display.
  4. Select the layout you want to use. A Rich Content block will be created in each new column.

Add and Edit Text

  1. Hover over the Rich Content block where you'd like to add content and click it to open it in edit mode. The Rich Content controls will appear at the top of your screen. Use these to format bold, italic, alignment, etc., much as you would with a word processor.
  2. Use the style drop down list at the left of the content controls to style your headings and paragrapghs. (Each site design includes pre-styled paragraph and heading 1-3 tags). Use the Formats drop down for other custom styles suited to your design.
    • Using heading styles lets search engines know what's most important on your pages and helps you get found. Heading 1 is most important, heading 2 next, etc.
    • Search engines recommend that you have only one sentence or phrase using a heading 1 style on each of your pages.
    • Note: the Formats/Button style will only apply if you link text first.
  3. Whatever text style changes you make, we suggest you make them consistently across all your pages to create a uniform look.

Add an Image

  1. In the Content Controls, click on the Insert Image Icon. The Insert Image dialog box will appear.
  2. Click on the Browse button and select your image from the Files area. If you've not yet uploaded your image to your Files area, click on the Upload a File button to do so.
  3. After you've selected your image, Use the provided controls to choose if your image should be left or right aligned, how much padding (blank space) should appear between your image and the surrounding content, and if the image should have a border. Click Finish to add the image to your page.
    • When you insert an image, it will not shrink or expand to fit the given area. If the image is too large, parts of it will appear cut off. Click on the image to select it. Depending on the web-browser you are using, handles may appear on the corners of the image. Click and drag these to resize your image.
    • If handles don't appear or if you'd like to modify other image properties, hover over the image and click on the image properties icon to re-open the image controls. Use the provided areas to resize or modify other images properties.

Add a Link

  1. Highlight the text or select the image you would like to make into a link.
  2. In the editor toolbar, click on the Insert Link icon. A dialog box with several options will appear.
  3. Select the type of link you would like to create, provide the appropriate information, then click Finish. Your text or image will now be linked.

Once you are finished adding content for now, click Ok to save your changes and exit the block editing controls.

A reminder about Drafts...

If you decide to look around your site and then come back to this page, don't forget that the changes you just made are saved as a Draft until you publish them. To see a Draft that you were working on, go to the page, then in the Actions menu go to Drafts and select the draft you were working on.

At this point in building your page, you've added content to one block...

Add other Block Types to your page

  1. To easily add content other than basic text and images, use the many different block types available in your Elexio Website.
  2. Hover over the area where you want the new block and click the Add Block Above icon or the Add Block Below icon. The Add Block window will display.
    • Blocks can only be added to a main content area
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      The main area(s) of a page where blocks can be added, typically in the center of the page. When you are making changes to a page, these areas will have a green border and may contain multiple blocks in various layouts. See Getting Started
      .
    • If the add block icons do not appear, you are probably hovering over a design block, or you have selected to change the content of a page with a design that does not allow blocks to be added, such as a Home Page (depending on the site design or canvas being utilized). See Troubleshooting - Editing Access.
  3. Select the type of block you'd like to use. It will be added and opened for editing. You can experiment with adding a block or two, but we won't go into detail on other block types here. For more information, see the Help article related to the specific block type.

Copying and pasting content

Much of the content you want to place on your site probably already exists somewhere. But when you're copying and pasting content from a former website or word processing program like Microsoft Word, remember that formatting codes may be copied along with your text.  These codes can affect how your page looks and functions, sometimes preventing even simple format changes. You'll want to remove the formatting to avoid problems down the road:

To remove formatting before pasting it into your Rich Content block...

  1. First select and copy the text from your other source.
  2. Next, in the Rich Content block, place your cursor where you'd like your copied content to appear.
  3. Click the Paste As Text icon. This will remove all formatting codes and will paste only the straight text.
  4. Use the editing tools to make any necessary formatting changes.

To remove formatting from content already in your Rich Content block...

  1. Highlight the content and click on the Remove Formatting icon.
  2. Formatting will be removed. Reformat your content as necessary.

Take a few minutes to experiment with copying content and removing formatting to make sure you understand this works.



Step 5: Change design blocks

So far most of our page editing has been in a regular content area. Let's look at editing content within a design block

Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.
Blocks that are built into a page design and therefore cannot be moved. Changes made to a design block may affect more than one page. See Editing Design Blocks.

. While design blocks have some limitations, they also give you the power to control content display over multiple pages on your site.

  1. Go to one of your site pages and in the Actions menu, select Change Content. Find a design block on your page.
    • Design blocks are easy to spot because when you point to one, it will just display one icon that shows the block type. There are no Add, Move, or Delete icons for Design Blocks because you can't add, move, or delete them -- they are built into the design of the page.
    • If you don't have publishing rights to a page, you won't be able to edit Design blocks on that page.
  2. Click on the design block to edit it. The controls for that type of block will come up with a large yellow reminder that you are editing a design block and a couple of blue buttons, which we'll give a closer look...
  3. The first blue button, Block Type, may let you change the block type from Rich Content, for example, to maybe an HTML block.
    • On many design blocks the Block Type button will give a message that says you can't change the type of this design element. Since the block is built into the design, these limits preserve the integrity of the design.
  4. The second blue button is Scope. Here's where we come to the beauty and power of design blocks. Click the blue button labelled Scope. The Change Block Scope window will appear:
    • Here's the big idea: When you edit a design block, your changes usually display on all the pages of your site.
    • For example, when you place your own logo in the logo design block, that change affects every page on which this logo design block appears. This makes it easy to change information across your entire site, like your organization name in the footer, a menu item in a utility menu, etc.
    • If you're in a design block and you only want the changes you make to affect the current page, change the scope to This Page Only.
    • With the Section option, you can set up an area of your site to use, for example, a different logo or a different menu within that specific area. 

Make any changes you want to the design block you are in and click Ok. If you left the scope at Site Wide, the changes you just made will show on each page that displays the same design block.



Step 6: Create an editing team

Whether you are putting together a team of two or twenty, your Elexio Website site gives you a wide range of flexibility for setting up a team and permissions. For now, we'll show you how to get started with a just few users who have full rights. You can add complexity with various editors and permissions as you need to down the road.

If you've purchased Elexio Database along with Elexio Website, your website People area can show the users in your database. (If you're ready for Elexio to set this up, please let us know in a Support Request

Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.
Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.
Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.
Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.
Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.
Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.
Elexio's Support request system is the most effective way to communicate with Elexio about any issue or question you may have. To open a support request, please visit the Account Center or email support@elexio.com.

). In this case, you won't need to add users via your Elexio Website, but you can still adjust permissions as needed.

To create a new administrator or site publisher,

  1. Click on the People button in the control bar. The People window will display.
  2. Click on the Create a New Person icon. The edit user window will display.
  3. Fill in as much of the user information as you like and assign Security Settings:
    • Site Administrators have full rights to everything on the site.
    • Site Publishers can access and publish any page on the site, but cannot access People or Site Settings unless those are specifically checked.
  4. When done, click the Finished button.
  5. Before leaving the People window, click the Save Your Changes icon.  (If you forget, you will be prompted about saving the changes you have made.)

You can come back and add more people later, but for now, just add one or two, then continue. If you just want a simple team structure with a few editors who have full access, you're done!

Elexio Website also gives you the ability to give publishing or editing rights specific pages, control access to files, or just allow someone to simply edit a calendar. For more, see Security Settings.



What's next?

Congratulations! You've covered the foundations to get your site project off to a great start! For further specifics on using Elexio Website, view the public help resources by clicking Help in the control bar at the top of your site. If you find you need some peronalized assistance, feel free to login to the Account Center, click on the Help tab, and sign up for one of our free Website Question and Answer Sessions.

Enjoy editing your site!

Back to Top