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.
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:
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:
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.
A list of options should now appear
- 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.
- Scroll - Normal
- 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.
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.
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.
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.
Nested Rows
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.
Once you have opened the Edit Column dialog as described above, you should see these 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.
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.
If you want to use sections in your pages make sure that you select the Default template
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. :
- 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.
- Scroll - Normal
- 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
Page Overrides
For more flexibility Angle gives you a set of options to override some general settings:
- 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).