Jupiter Theme – The Jupiter Basics

 In Jupiter Theme, Wordpress Training

How to edit your pages

The Jupiter WordPress theme is very powerful with tons of cool features. Here are the basics of changing your page content.

One of these features is that it does use the basic editor associated with wordpress! Oh no . . . it has something much more powerful. Jupiter uses “Visual Composer”, which is a special type of WYSIWYG editor.

Accessing Visual Composer

Before you start, you need to ensure your editing area is switched to “Backend Editor” mode (If you can see the “Classic Mode” button, you are in the right spot), when in this mode you will see a series of boxes and tabs which contain the page sections and elements, including text and image areas. This is called the Visual Composer, and is only accessed through the Backend Editor mode.

How does Visual Composer work?

Basically, you add Elements to the Page Sections and enter the content to those elements using the various modules of Visual Composer. In Classic mode, the various elements have to be added as “shortcodes”, which is great if you are a code-loving nerd, but not so great if you are like the rest of us. We recommend you work in Visual Composer (VC).

What is a Page Section

The Page Section is a feature rich container in which your content (Elements) sits. Here you can select how many columns you want your layout to have and adding multiple Page Sections will allow you to build a layout with different sets of columns – for example, you may want to put some text in one column and an image in another, followed by a single column with just text – you can have as many Page Sections as you like!

Each Page Section also has a huge amount of customisation options such as backgrounds, parallax effects, background videos and many more, this means not only can you have multiple Page Sections on your page with different numbers of columns, but you can have sections with different background colours, or even an image in the background!

What are Elements

Page Sections define where your content goes on the page and how many columns you have (the layout), Elements are your content, and there are many different content Elements to choose from!

Each Element does it’s own unique thing and has it’s own settings. You can add text with the Text block element, images with the Image element, contact form with the Contact Form element and much, much more.

Below is a screenshot with just some different Elements that you can add to your page, under each Element name is a short description to help you understand what the Element does:

elements

What do all the icons and buttons do? How to use Visual Composer

Below is a snippet of the editing area of VC, showing the different icons etc you need to become familiar with.

jupiter main buttons

  1. The button to switch between classic and backend editor mode looks like this!
    We recommend you work in Backend Editor to access Visual Composer.
  2. This “plus” sign allows you to add an Element to your page – using this button will create a new Page Section with your chosen Element inside. .
  3. This button will allow you to add an empty Page Section, which you can then add Elements to. You can also click this button if you want to add another Page Section to the page layout, this could be useful if you want to add a section of your page with a different number of columns than another section, or even another background colour! You can add as many Page Sections as you want.
  4. This button gives you access to load existing Templates and allows you to save your page as a Template. If you are happy with the layout you have created, you can save it using this section and use it in other page or just as a backup – this will also save all of your Elements and content. You can both load existing templates and save them from here.

How to edit your Page Section

jupiter page section

  1. Delete button to delete the Page Section and all elements inside it.
  2. Clone Button to duplicate the Page Section and all its columns and elements.
  3. Edit button to configure different options of Page Section.
  4. Dragger button to move vertical wise. Click this button and drag your mouse to move your Page Section around the page, for example you might want the content in this Page Section to appear above the content in another Page Section, so you can simply drag and drop it above that Page Section.
  5. Define Column button to divide the Page Section into different column width combinations. You can choose from a range of set column numbers, or customise the number of columns if none of the pre-set options appeal to you.Columns are part of the Page Section and they hold your content elements inside them. Columns can be reordered. Click and drag the column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to reposition).Here is an example of what it would look like if you selected a 3 column layout using the Define Column button.columns
  6. Column Edit button to edit the settings of each column – for example you can give each column a different background colour.
  1. Add Element button will bring up all Elements in a pop up window in order for you to choose which Element to drop into this column.

How to edit your Content Elements

Content Elements can be added inside a Page Section or inside columns. Think of them as bricks with which you are building your layout. Most of the content elements have options, to set them click on the pencil icon. To save changes, click the Save button within the.

text element

  1. Delete Button to delete the Element.
  2. Clone button to duplicate an Element – useful if you want an Element with the same settings as an existing one – you can copy an Element so you don’t have to set the settings up twice!
  3. Edit button (pencil icon) to view all settings of this Element and to edit the content inside it.
  4. Element Name so you can recognise which Element you are looking at without going in to edit it, very helpful if you have a lot of different elements on the page and need to quickly see where each of them are.

Below is an example of the Text block Element options, which is likely the most common one you will want to use – this view is what you will see after hitting the Edit button (pencil icon). There is a WSIWYG editor within the Element where you can type or paste your text and style it how you want, just like in Microsoft Word!

Each Element will have different options, so feel free to add different Elements and explore!

text-block

Always make sure to hit the ‘Save Changes‘ button after you are done editing the Element!

 

 

 

 

Recent Posts
0