Pages

How to setup your pages

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Visual Composer

Angle uses the visual composer to easily allow you to create stunning sites. We recommend installing the Visual Composer plugin if you are creating complex pages like in our demo sites.

Pages

Creating new page

The Pages menu option on the left is where you add pages. To add a new page, select the Pages > Add New option from the left hand WordPress menu.

After typing your page's title you can select the page template and start adding your content (see following paragraphs).

Angle comes bundled with Visual composer. Visual Composer is the most famous drag and drop page builder. You can take full control over your WordPress site, build any layout you can imagine without any programming knowledge required.

pages

Adding Sections

One of the most advanced features of Angle theme is the use of multiple page sections. Think of a section as a partial in your page that you can add any type of content:

sections

Each section can host its own content, a different decoration to separate them from other sections and even a different color swatch.

To use page sections with different colours and decorations, make sure that you have selected the default page template (full screen).

Before adding content to a new page, make sure you have created a new row. Turn the Visual composer on by clicking on the button: composer

Then you can start adding content inside that row(section). Do that by pressing the blue button Visual Composer, that is located above the editor. Then press the Add row button.

You have created an empty section. Before adding new elements to that section, try to edit it by clicking on the small pencil icon that is located on the upper right corner of the newly created row. composer

A list of options should now appear

section

  • Title: Set the name of the section's title.
  • Subtitle: Smaller subtitle to be shown under the main title text.
  • Title Font Size: Choose the size of the font to use in your header.
  • Title Font Weight: Choose the weight of the font to use in the title.
  • Title Alignment: Align the header left, right or center.
  • Title Underline: Adds an underline effect below the title & subtitle.
  • Swatch: Choose a color swatch for the section. On how to set color swatches, take a look at the Color swatches section.
  • Top Decoration: Choose a style to use as the top decoration. It is highly recommended that you use the top decoration option only, for every section that you create, in order to avoid overlapping decorations. In case you use media backgrounds(image or video), avoid using decorations completely in the current section. Should you want to add decorations to it anyway, do it by adding bottom decoration to the section before it and top decoration to the section after it.
  • Bottom Decoration: Choose a style to use as the bottom decoration.
  • Section Height: The height of header normal, short, tiny and no padding. Important Notice - When using height tiny or no padding, avoid using any Top Decoration on the following section, or any Bottom Decoration on the previous section, because that might cause the decorations to overlap with the section's content.
  • Section Width: Choose between padded or full width section. If you want to have the content of the section extending to the edge of the screen use the full width section.
  • Background Image: Click on the plus sign in the middle of the frame. Add an image from the Media Library or upload a new one. This image will appear as the background view of your section. Once added, you can see the preview icon in the options of the section. If you want to remove it, click on the x icon on the top right side of the image. You can only add one image background per section.
  • Background Video: Enter the URL of the source of the video you want to use as background.
  • Background Position Vertical: Set the vertical position of background video and image. 0 value represents the top horizontal edge of the section. Positive values will push the background down.
  • Overlay Color: Set the color of a layer that overlays the video & image background.
  • Overlay Opacity: Set the opacity of the overlay layer.
  • Overlay Grid: Adds an overlay grid image in the overlay layer.
  • Image Background Size: Set how the image will fit into the section.
  • Image Background Repeat: Set how the image will be repeated.
  • Image Background Parallax: Set the way the background scrolls with the page.
  1. Scroll - Normal
  2. Fixed - Applies the parallax effect on the background image
In sections with media backgrounds(image or video), avoid using decorations completely. Should you want to add decorations to it anyway, do it by adding bottom decoration to the section before it and top decoration to the section after it.
Take a look at the video on how to create page sections: adding page sections

Section decorations

What makes Angle unique as a theme and really amazing to interact with are the section decorations. The section decorations are small touches of design artwork, that make your pages stand out and catch the eye of the reader. Decorations are added to the top,bottom or both parts of each section. You can choose from 14 different kinds of decorations. All of them are created with svgs, which offer a much better quality than simple images, while supporting retina display devices. In addition, cross-browser compatibility is guarranteed. Svgs are also supported by IE8 and later. logo

Adding a decoration to a section is an easy task. When editing a section, underneath the Swatch option you can see the Top Decoration and Bottom Decoration options, as shown in the image below. logo

When you want to add a decoration between two sections with a different swatch, it is advisable to pick one of the left-slope,right-slope,arrow,circle,clouds,curtain,rounded,rounded-inverted,triangle,triangle-inverted,zig-zag or zipper decorations. On the other hand, when your sections have the same swatch, you would get a better effect if you chose one of the lines or cross decorations.

It is strongly recommended that you make sure no bottom decoration overlaps with any top decoration of the next section. In case you use media backgrounds(image or video), avoid using decorations completely in the current section. Should you want to add decorations to it anyway, do it by adding bottom decoration to the section before it and top decoration to the section after it.
Take a look at the video on how to set the section decorations: section decorations video

Nested Rows

Take a look at the video on how to use rows inside rows: nested rows video

On Scroll Animation

An on scroll animation can be added to the columns that each row is consisted of. The animation effect is applied to each column separately. Each column can have a unique animation with its own delay, offering the user a smooth fun experience. In order to edit the preferences of each column, click on the small pencil that is located next to the "plus" sign above the column elements. If the column is still empty, the pencil is located above the big "plus" sign located in the middle of the row. edit_columnOnce you have opened the Edit Column dialog as described above, you should see these options edit_column_options

  • On Scroll Animation: Enable/Disable the On Scroll Animation.
  • Animation Delay: Set the speed of animations.
  • Animation Effect: Set the effect of the animation.
Take a look at the video on how to set On Scroll Animations : on scroll animations video

Page templates

When editing a page, below the Update button you can see the Page Attributes box. From there you can pick the template that you want your page to be styled with. Choose Right Sidebar or Left Sidebar, if you have defined any widgets for the sidebar. If not, it is recommended to use the Default Template.

page-template

Take a look at the video on how to use the page templates : page templates video
If you want to use sections in your pages make sure that you select the Default template

Page Headers

Angle gives you the option to set your headers on a per page basis. Each page can have different header settings including colours, font sizes etc. : logo

  • Show header: Option to show or hide the page header
  • Header Height: The height of header normal, short, tiny and no padding. Important Notice - When using height tiny or no padding, avoid using top decoration on the following section, because that might cause the decoration to overlap with the header's content.
  • Header Swatch: Choose a color swatch for the header.
  • Title: Set the name of the headers's title.
  • Subtitle: Smaller subtitle to be shown under the main title text.
  • Title Font Size: Choose the size of the font to use in your header.
  • Title Font Weight: Choose the weight of the font to use in the title.
  • Title Alignment: Align the header left, right or center.
  • Title Underline: Adds an underline effect below the title & subtitle.
  • Background Image: Click on the plus sign in the middle of the frame. Add an image from the Media Library or upload a new one. This image will appear as the background view of your section. Once added, you can see the preview icon in the options of the section. If you want to remove it, click on the x icon on the top right side of the image. You can only add one image background per section.
  • Background Video: Enter the URL of the source of the video you want to use as background.
  • Background Position Vertical: Set the vertical position of background video and image. 0 value represents the top horizontal edge of the section. Positive values will push the background down.
  • Overlay Color: Set the color of a layer that overlays the video & image background.
  • Overlay Opacity: Set the opacity of the overlay layer.
  • Overlay Grid: Adds an overlay grid image in the overlay layer.
  • Image Background Size: Set how the image will fit into the section.
  • Image Background Repeat: Set how the image will be repeated.
  • Image Background Parallax: Set the way the background scrolls with the page.
  1. Scroll - Normal
  2. Fixed - Applies the parallax like effect on the background image
Take a look at the video on how to set up the page header : page headers
In this video you can see how to set the header's height : headers heights

Page Overrides

For more flexibility Angle gives you a set of options to override some general settings:

page

  • Show Top Navigation: Show or hide the site's top navigation (ideal for landing pages or specific pages like maintenance mode page).
  • Override Top Navigation Swatch: Override the default site top nav swatch (only for this page). Use this options to set up the page decoration on pages using the left or right sidebar template.
  • Override Footer Swatch: Override the default site footer swatch (only for this page).