Help Home

iBizard Help - Customization Of iBizard Web Pages

1. Customization Of Your iBizard Web Pages - Overview?

 

2. What is styling?

  • The term styling comes from the web standard Cascading Style Sheets (CSS), which is used to format the look and feel of web pages and the text, images and other elements on the web pages. In our tutorials whenever we refer to styling we are referring to giving elements (text, titles, descriptions, links etc…) your unique style using our ‘Styling Wizard’ to assign fonts, colors, sizes and background colors. This will help you further customize your pages to achieve the unique look specific to your needs and business.
  • Whenever you style the elements on a page, view that page in a new browser window, hit refresh and you will be able to see the updated changes on your web page.
 

3. Customization Of The Logo Section

  • This section will allow you to upload a logo image or a logo background image. The difference between a logo and a logo background is that a logo image is a standalone picture and any text or repetition (also known as tiling) of the logo image has to be part of the image (jpg, gif or png) being uploaded. A background image on the other hand will allow you to repeat it and you can create a ‘Logo Text’ which will appear on top of the background image. You can create the Logo Text by clicking on the ‘Logo Text Section’. In this section you will be able to type in your business name or any other text you want to display on top of the background image, and style it and align it left, right or center to position it on the page as you like. Also you can assign this text the font, size and color of your choice using the editor buttons available in the toolbar section of our editor.
 

4. Specifying Width Of Your Web Pages

  • Another function in the Logo Sections is the width function. Web page widths are defines in pixels or as a percentage of the user’s computer terminal.
  • Assign a maximum value of 1085px (pixels) or a maximum percentage of 100% to resize your web pages.
  help home

5. Customization Of The Banner Section

  • This section appears below the Logo Section and above the Main Body. Use this section to include a horizontal menu, creating links to your different pages. Also you can use this section to include banner ads, banner coupons or information on any promotions or sales you want to highlight at the top of your pages.
  • Insert a Horizontal Menu:

    • Let’s walk through the steps of creating a horizontal menu that contains the following three links:
    • HomeMy BlogAbout Me
    • Step 1: Insert a table with 1 row and 3 cols using the 'Insert Table' icon Insert Table Icon.
    • Step 2: Click the ‘Toggle Borders Icon’ to sToggle Borders Iconee the outlining borders of the table.
    • Step 3: Click in cell 1 and type in Home.
    • Step 4: Highlight ‘Home’ by double clicking on it, or simply highlighting it using your mouse. Go ahead and style it as you wish using different colors, fonts and sizes.
    • Step 5: While ‘Home’ is still highlighted, click the 'Link' icon Link Iconto link it to a home page. Here you can enter the url of the home page this link is going to take the visitor to.
    • Step 6: Click cell # 2, type in ‘My Blogs’ and repeat from Step 4. In Step 5 assign the URL of the Blog pages this link is going to take the visitor to.
    • Step 7: Click in cell # 3, type ‘About Me’ and repeat from Step 4. In Step 5 assign the URL of the About Me page this link is going to take the visitor to.
  • Insert A Coupon:

    • To insert a coupon simply click the 'Add Coupon' icon Add Coupon Icon and customize the coupon as you wish.
    • Align the coupon left, right or center to adjust it’s positioning within the Banner Section.
  help home

6. Customizing The Left Navigation Column

  • The Left Navigation, Main Body and Right Navigation are the three sections that appear under the Banner Section.
  • The Left Navigation can be used for a vertical menu, coupons, smaller or vertical banner ads.
  • In our shopping cart the Left Navigation is where the categories and subcategories are displayed.
  • The default width of the Left Navigation Column is 150px. You can adjust the width of this column by using the 'Column Width' field once you enter the editor screen for this column. You will see a width field under the title section. Specify a width in percentage or pixels. Try different widths, save your settings and view your pages to see your changes.
  • Insert a Vertical Menu:

    • Please refer to the Insert A Horizontal Menu section under the Banner Section for detailed instructions.
    • The only difference is that in Step 1, instead of inserting a table with 1 row and 3 columns, you will have to insert a table with 3 rows and only 1 column.
    • Your table will look like this:
      Home
      My Blog
      About Me
  help home

7. Customizing The Right Navigation Column

  • The Right Navigation, Main Body and Right Navigation are the three sections that appear under the Banner Section.
  • The Right Navigation can be used for a vertical menu, coupons, smaller or vertical banner ads.
  • In our shopping cart the Right Navigation is where the minicart is displayed.
  • The default width of the Right Navigation Column is 150px. You can adjust the width of this column by using the 'Column Width' field once you enter the editor screen for this column. You will see a width field under the title section. Specify a width in percentage or pixels. Try different widths, save your settings and view your pages to see your changes.
  • Insert a Vertical Menu:

    • Please refer to the Insert A Horizontal Menu section under the Banner Section for detailed instructions.
    • The only difference is that in Step 1, instead of inserting a table with 1 row and 3 columns, you will have to insert a table with 3 rows and only 1 column.
    • Your table will look like this:
      Home
      My Blog
      About Me
  help home

8. Customization Of The Main Body

  • This is section where the main contents of your web pages is displayed.
  • Enter your content and style it freely using our editor.
  help home
  help home
  help home