How to Use Alchem Make a Onepage

This guide will teach you how to make a onepage by using Alchem.Before continue, suggest you read Alchem – Make a Onepage Site, otherwise you may not understand the gudance below which talking about making onepage by creating new page.

1. Create a New Page

Navigate to “Dashboard/Pages/Add New” to create a new page, edit the page content in the “Text” mode, not “Visual” mode, beacause “Visual” mode will strip some html codes.

You could edit the page content via plugins like Magee Shortcode or the pure html and css codes. You should know some css knowledge, otherwise your page maybe look weird in some details. If you not familiar with them, just to use the homepage customize function by reading the guide Alchem – Make a Onepage Site

To illustrate, I will show a onepage codes example, it used the pro magee shortcode plugin and pure html codes. It will work well in pro Alchem, some shortcode function will be missed in free version. It doesn’t matter, the example just give you a learning example. The codes you could just copy and paste to your content, you could change anything in it to see the effect. Then save the page.

1.1 Home Section

This section is simple, use the magee shortcodes “section” to create the backgroud, fill in the background image url in the background_image will change the background, padding_top and padding_bottom decide the background size, contents_in_container=”yes” to enable the content. Notice give it id=”home”.

3) Create the divider use the magee shortcode “Divider”, in it, border_color is for changing the divider color, in this case, we use the #fdd200 which is yellow.

4) Create the 3×2 feature box, this will be litter complex.

Firstly, we need create 2 rows by using the magee shortcode “Row”.

In the row, we put the column by using mageee shortcode “Column”. In the case, we need 3 column in a row, so we use column style is 1/3.

In each column, we use shortcode “featurebox” to put the feature box. Change title will change the feature box title, change the icon need change the icon name, advice you use the magee shortcode panel to change these settings. Text between the shortcode could be used as feature box description, you could leave it blank.

1.3 Skills Section

1) We need create the section by using shortcode section, in it, set the background_image=”https://demo.mageewp.com/alchem-pro/wp-content/uploads/sites/21/2015/09/pic01.jpg”, id=”skills”.

2) In the section, use shortcode “row” to create the row, notice set the no_padding=”yes” for beautiful outlook.

3) In the row, use shortcode “column” to create a column which style=”1/2″.

4) In the column, you could use html codes as the content. In this case, except for html codes, we used the shortcode “divider” and “progress”, they are simple shortcode, advice you change their settings in the magee shortcode panel.

4) Use shortcode “portfolio” to show the portfolio, num=”6″ means at most show 6 portfolio, columns=”3″ means in a row there are 3 portfolio. Notice, in the first place you need create portfolio in the dashboard, otherwise they would not display.

4) In the right column, we use the tag h2 and p to put the title and instruction. Use shortcode “divider” create a divider which border_color=”#fdd200″. Use shortcode “list” to create some list. In the shortcode “list”, we set the icon=”fa-star” and set some color for it, you could change them by yourself in the shortcode panel.

3) Use shortcode “row” create a row, in it, use shortcode “column” create two columns. The left column which style=”1/6″ is used for making gap. The right column which style=”2/3″ we will put the contact form in it.

4) In the right column, we use the shortcode “contact” to create the contact form, the text in the shortcode is optional, change terms=”no” will remove the check box. In the receiver, you need fill in your own email.

In the URL, type in “#section-id“. Don’t forget the “#“! In our example, they are #home, #services, #skills, #work, #latest, #contact.

Notice the menu only work on the onepage, it would not work if you are on other pages. You could add your page url before the “#section-id”, like “http://your-page-url/#section-id”, but it will not have the onepage scroll effect. Onepage or not onepage, you can’t have your cake and eat it too.

In the “Link Text”, type the menu item name you like.

Click the “Add to Menu”.

Take the step above, you could create the section menu item one by one, when you finished it, it will like below.

In the “Menu locations“, check the “Custom Menu 1”, save all the customizing.

3. Make the Onepage Menu to Show

After you saving menu customizing, click “Edit Page” to edit the page again.

When you edit the page, below the page content there is “Page Meta Box“, in it, you could see a option named “Select Nav Menu“, select it as the “Custom Menu 1” which we just created.