Setting Header ,Logo Menu and Pages

Once you've installed Bridge, you can start building your site.

Setting Up the Header

One of the first things you might want to do is to set up the header area. This section contains the logo, menu, search bar, side area icon, and other optional widgets.

To set it up, go to Qode Options > Header from the admin panel. The settings you define here will be the default settings for all pages on your site. If you need help with any of the options, please refer to Qode Options in this user guide. Some options, such as the header skin and background color, can be overridden on the page level by going into the page's backend. For more information on how local page settings work, see Pages.

Uploading Your Logo

Now let's add a logo. Go to Qode Options > Logo from the admin panel and click the upload button next to the "Logo Image - normal" field. You should now have a visible logo in your header area.

Menu Creation

To create a menu, go to Appearance > Menus from the admin panel. Click on "Create a new menu." Enter a name for your menu, and then click on "Create Menu".

Every page that you've created up until now will be listed in the section on the left called Pages. Simply check the ones that you want added to the menu, and then click on the "Add to Menu" button. Once added, you can click and drag the menu items to rearrange them, or nest them one under the other.

Underneath the menu items, under the section Menu Settings, check "Top Navigation" and click "Save Menu" in order to activate the menu you've just created. You should now have a functional menu on your pages.

Footer

Now let's set up the footer by going to Qode Options > Footer from the admin panel.

The settings you define here will be the default settings for all pages on your site. Make sure that Show Footer Top and Show Footer Bottom are enabled. If you need help with any of the options here, please refer to Qode Options in this user guide.

To add content to your footer, you need to activate widgets by going to Appearance > Widgets from the admin panel. On the right side of your page are widget areas for the footer, namedFooter Column 1, Footer Column 2, Footer Column 3, and Footer Column 4. On the left side of your page are the available widgets. Simply drag the widget you'd like to one of the Footer Column widget areas on the right.

To add content to the footer bottom, add widgets to the Footer Text widget area.

General Look and Feel

Finally, let's set up the general look and feel of your site. If you'd like to keep the fonts and colors you see on the Bridge demo site, then you do not need to do anything more. Otherwise, go to Qode Options > General. Under Design Style, choose a default font family for your site, as well as the default content background color.

Now that you've set up some basic elements, you're ready to begin building your pages.

Building Pages

To create a new page, go to Pages > Add New from the admin panel. Enter a title for your page in the text field near the top of your screen. Then choose the "Full Width" template for your page in the section on the right called Page Attributes. This will allow you to have sections on your page that go across full width of the screen.

At the bottom section of your screen are local page settings. Any settings you define here will override the global settings you've set in Qode Options. It is generally a good practice to set up the look of your pages on a global level, and then override settings on a local level, if necessary. This will save you a lot of time, unlike if you were to set up every page locally.

Now let's start adding elements to your page. Make sure that you're in the backend editor. If the blue button on the top left says BACKEND EDITOR, click it to enable the Visual Composer. Once you're in backend, the button will say CLASSIC MODE. You can now click on "Add Element" and start building your page. You can read more about elements in the Custom Shortcodes section of this user guide.

Finally, click the "Publish" button in the upper right section of the page. (If you made some changes on already published page, "Update" button will appear.