MAGEEWP

Themes for WordPress

MAGEEWP

Themes for WordPress

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.

alchem-pro_homepage-one-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.

alchem-pro_homepage-one-page

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

section 1 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”.
Then we fill in content in the section shortcode, like
<h1 style="color: #fff; text-align:center;">h1 is the heading</h1>
<p style="color: #fff; text-align:center;">p is the paragraph</p>
The whole codes is like below.
<h1 style="color: #fff; text-align:center;">Hello there, this a one-page demo for Alchem theme.</h1> <p style="color: #fff; text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis ante sed turpis tristique vestibulum. </p>

1.2 Service Section

section 2 1) We need create a section area use the section shortcode. Notice this time we don’t use backgound image, just default white color. And id=”services”]
This place we will add the next content.
2) Create the section title and brief introduction use h2 and p tag.
<h2 style="text-align: center;">What Can We Do?</h2>
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
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.

"Impressive

the feature box description

""
The whole codes is like below.
<h2 style="text-align: center;">What Can We Do?</h2> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>

"Impressive

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Responsive

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Bootstrap

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Font

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"SEO

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Continuous

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

1.3 Skills Section

section 3 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.
<div style="background-color: rgba(255,255,255,.8); padding: 50px 0;">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h2 style="">My Skills</h2>
<p style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
</div> </div> </div>
5) At last, the whole codes of section is below.
<div style="background-color: rgba(255,255,255,.8); padding: 50px 0;"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <h2 style="">My Skills</h2> <p style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
</div> </div> </div>

1.4 Work Section

section 4 1) Use shortcode “section” to create the section, id=”work”.
2) In the section, use html tag h2 and p to create the title and description.
<h2 style="text-align: center;">What Have We Done?</h2>
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
3) Use shortcode “divider” to create the divider.
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.
5) At last, the whole codes is below.
<h2 style="text-align: center;">What Have We Done?</h2> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>

1.5 Latest Section

section 5 1) Use shortcode “section” to create the section, id=”latest”.
2) In the section, use shortcode “row” and “column” to create the layout.
3) In the left column, we use img tag put in a image.
<img src="https://demo.mageewp.com/alchem-pro/wp-content/uploads/sites/21/2015/09/show-img-11.png">
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.
<h2>Latest Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum.</p>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed tellus purus
  • Tincidunt id ipsum non
  • Consequat placerat justo
5) At last, the whole codes of the section is below
<img src="https://demo.mageewp.com/alchem-pro/wp-content/uploads/sites/21/2015/09/show-img-11.png">
<h2>Latest Work</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum.</p>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed tellus purus
  • Tincidunt id ipsum non
  • Consequat placerat justo

1.6 Contact Section

section 6 1) Use shortcode “section” to create the section, id=”contact”.
2) In section, use html tag h2 and p give the section title and introduction, use shortcode “divider” put a divider which border_color=”#fdd200″.
<h2 style="text-align: center;">What Can We Do?</h2>
<p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
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.
5) At last, the whole codes of the section is below
<h2 style="text-align: center;">What Can We Do?</h2> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>

1.7 Whole Codes of the Onepage

Finally, we put together all section codes, the whole codes of the onepage is below.
<h1 style="color: #fff; text-align:center;">Hello there, this a one-page demo for Alchem theme.</h1> <p style="color: #fff; text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis ante sed turpis tristique vestibulum. </p>
<h2 style="text-align: center;">What Can We Do?</h2> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>

"Impressive

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Responsive

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Bootstrap

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Font

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"SEO

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""

"Continuous

Lorem ipsum dolor sit amet, consectetur adipiscingelit. Integer sed magna vel velit dignissim luctus eu n urna. Dapibus ege-stas turpis. Praesent faucibus nisl sit amet nulla sollicitudin.

""
<div style="background-color: rgba(255,255,255,.8); padding: 50px 0;"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <h2 style="">My Skills</h2> <p style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
</div> </div> </div>
<h2 style="text-align: center;">What Have We Done?</h2> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
<img src="https://demo.mageewp.com/alchem-pro/wp-content/uploads/sites/21/2015/09/show-img-11.png">
<h2 style="">Latest Work</h2> <p style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed tellus purus
  • Tincidunt id ipsum non
  • Consequat placerat justo
<h2 style="text-align: center;">What Can We Do?</h2> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec quis ante sed turpis tristique vestibulum. </p>

2. Create Onepage Menu

In codes above, you should notice the section ID, for example, the ID of codes below is “home“.

All of the codes I gived have section ID: home, services, skills, work, latest, contact. That is all, we need create a menu contain them.

Navagate to “Customize/Menus“, click “Add a Menu”, type in the “New menu name” and click “Create Menu”.

In the menu editing option, click “Add Items”, choose the “Custom Links”.

Custom-Links-menu

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”.

Custom-Links-menu

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

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

Menu locations

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.

Custom-Menu-1

Save the page, then all is completed.

You could click this to see the live onepage demo.