How To Create A New Page For Your Loclweb Website

You'll need to be logged into your admin dashboard before you can create a new page for your website. Once you're logged in you can follow these instructions to create a page.

There are two types of pages you can add and these instructions will diverge at that point. The two options are standard page and rich page.

Step 1

Create The Page

Create New WordPress Page Drop Down

From your WordPress dashboard (or anywhere on your website if you're logged in) you can hover over New.

Select Page to create a new page. You can also create other types of content from this menu.

Step 2

Complete Basic Page Information

There is some basic information you need to enter for every new page before you get into putting in the content.

It's a good idea to save a draft of your page also. The image below has all the necessary pieces of information you need to fill in.

The only required field for a new page is the page title. The rest of it is optional but highly recommended to customize.

WordPress New Page Screen With Page Builder Enabled

Enter the title of the page. This tells people what the page is about.

You must save your page as a draft or publish it to see this option.

This is the page slug and will also determine the URL of your page. This should be as short as possible and contain no spaces, only hyphens (-). Once you change this box you must save the post in draft or publish it for the change to take effect.

It's a good idea to save a draft of the page on occasion.

You can perform more advanced search engine optimization with the SEOPress page customization options.

You can make this page fall under another page in your website hierarchy by choosing a parent.

Setting a featured image is always a good idea because it will show up when this page is shared on social media and may show up in other places also.

Depending on the theme used to create your website, you may or may not have the Loclweb Astra Settings section. If you do you can choose advanced customizations for this page that will persist in both regular pages and rich pages.

Step 3

Choose A Page Type

You can create pages in two ways with your Loclweb Website.  You can create a regular page (standard editor) or a rich page (page builder).

Standard page: This is good for when you don't need to do any complex formatting. We use this type for pages like the privacy policy and terms of service which are not complex.

Rich page: This is good for when you need to create a more complex layout with columns, different module, and icons too. You can format almost any type of content imaginable with the rich page option which uses the popular and powerful Beaver Builder editor. This page is created with the right page editor.

Standard Page

Rich Page

Standard Page

There's not a whole lot more to adding a standard page. Once You click the Standard Editor button, you can insert your content and format it all in the standard WordPress content editor box.

WordPress new Page Standard Editor Selection
Step A

Insert Content

You can add content right in the page and use the formatting options. You are more limited with formatting than in a word processor but that is the nature of website design. Most of the formatting is contained in your website theme and CSS code.

If you need an adjustment to the overall formatting of your website, feel free to contact us to request the change.

WordPress Gutenberg Editor

Use this plus sign to add any type of block into the editor screen. There are dozens of blocks and new blocks being added every month.

When you press enter, a text block is created by default. You can use these buttons to quickly change to a recently used block type.

The i button and list button tells you about your page as you type. You can see word count, paragraphs, and more.

You can start typing in this box or you can change this block type to any other block type available.

You can insert a hard (return) or soft (shift+return) return.

Step B

Insert Media

If you use any of the media blocks, you can choose to upload one file to the page or use the media library to add a file. You can add many media types including images (JPG, PNG, GIF, SVG) and even a PDF document. There are also many block types that allow you to embed many other objects right into your page such as YouTube videos. If you get an error when uploading a file then the file type you're trying to upload may not be allowed. You can contact us to check.

You can also choose formatting options for the media such as left, center, or right aligned.

WordPress New Page Add Media

Once you get all your content inserted and formatted how you'd like, it's a good idea to preview the page before you publish it.

Step C

Preview/Change Settings

WordPress New Page Settings Publish Panel

As you're working on a page it's always a good idea to save a draft. WordPress will save a version in your browser cache as you're working but it doesn't function as well as saving a draft to the server.

It's a good idea to preview your page before you hit the publish button. Your page won't be visible to anyone else. You can see exactly how it will look to others.

You can password protect certain pages or even make them private so only you can access them. This could be useful if you want a reference page available to you only but don't want to worry that it will be published to the public.

You can choose to publish a post at a certain date and time.

There are many options when you're publishing a page in WordPress. Go through some of these settings to check the features out.

Always save a draft to make sure your page is saved and you don't lose valuable time spent on your page.

Step D

Publish Page

Once you've previewed your page and are happy with the way it looks, click the publish button. When you click publish your page will immediately show to the public if you have the post set to public visibility.

Your page doesn't automatically go into your website navigation though. There are still a few more steps to add a page to the website's navigation.

WordPress New Page Settings Publish Panel

This will publish your page immediately to the server. Depending on your visibility settings, it may publish publicly or only for logged in users.

If you're not happy with your page you can put it in the trash with this link. It won't be permanently deleted until you empty the trash or the trash is automatically emptied.

Rich Page

The rich editor allows you to create complex page layouts much easier than is normally possible in WordPress. This page was created in the page builder editor. We use the WordPress industry #1 page builder, Beaver Builder which is the quickest and most stable page builder available.

Beaver Builder Logo
Step A

Enable Rich Editor

When you enable the Beaver Builder interface, any changes you've made on the edit page screen will automatically be saved and you'll be brought into the page front-end editor.

To enable Beaver Builder, click the Beaver Builder tab in the edit page screen. Every page of your website (posts do not have this tab) has the Beaver Builder tab available. If you've already put content into the WordPress edit screen that content will be ported into Beaver Builder and you'll be able to easily move it around or copy pieces of it into different page builder elements.

If You Already Have Content In The Standard Page Editor

If you have enabled the Standard Editor or already have content in the Standard Editor, you can still enable the Page Builder.

On the edit screen, you'll click on the 3 vertical dots (the menu) and select Convert to Page Builder.

When you do that you'll be on the same screen as when you create a new page but all settings and content from your page will be retained.

WordPress Standard Edititor Converting Page to Page Builder
Enabling Page Builder

Whether you're creating a new page or converting a page from the Standard Editor you'll end up at the screen below. When you click on the Launch Page Builder button the page builder will load. You may be asked if you want a tour, you can choose whether you want the tour or not.

WordPress New Page Launch Page Builder
Step B

Add/Edit Content

If you had no content in the WordPress page editor then you'll start with a blank canvas in the Page Builder. You first need to understand the menu items before you start doing anything.

Once you looked at all the tools the first thing you'll want to do is drag a module or columns onto the canvas. You can find all the available modules by clicking the + button.

Loclweb Page Builder Blank Canvas

This is the tools menu where you can access many useful options. The most useful being the preview and responsive editing options.

This button opens a menu that allows you add modules, rows, and more. This will be the button you use the most often to add content and layout elements to organize your page layout.

This button pops out into the option to cancel your edits, save a draft so you can finish later, or to publish your changes to make them live.

This is the canvas where you can drag blocks of content or formatting elements to configure the way you'd like your content to be laid out on the page.

There are modules, rows, templates, and saved items you can add to your canvas. You'll use the modules tab and rows tab the most. You can drag headings, text boxes (such as this one), pictures, buttons, and more into the canvas.

If you need a multi-column row then you'll want to first drag your preferred column arrangement row into the canvas before dropping modules in. You'll also want to check out the group drop down which gives you different module groups including the default WordPress widgets which can be placed anywhere on a page.

Loclweb Page Builder Element Menu

This tab has all the modules you can use in your layout.

This tab has different types of column configurations you can drag into any row or some columns.

You can cycle through Page Builder Modules, WordPress Widgets, and Saved Modules.

You can drag any of these modules into the canvas or into a column in order to configure it. An options menu will automatically open once you drag a module onto the canvas.

Below is a heading module dragged onto the canvas. Once you drop a module the options box will pop up. You can modify options on each tab to format the module the way you'd like. You can drag this pop up around the screen or even dock it to either side, just grab the header of it.

If a formatting option isn't available then you'll either need to use custom CSS or contact us to make the change.

Loclweb Page Builder Module Format Popup

Toggle between tabs to format different elements of each module. Some modules have more tabs and may have an ellipsis with more options, be sure to check for that.

You can either type in a page or section heading or you can use the + button to connect the heading to an element of the page you're on. You can connect page titles, excerpts, id's, or almost any other element of a page.

You can paste any URL you'd like in the link box, use the select button to search for a page, or leave this blank for no link.

If you're done editing always click the save button unless you need to edit another module. You can click another module to switch immediately to editing that one and your changes will be saved.

Step C

Modify Settings

You can modify any element on a page by either clicking on it or click the tool icon. The tool icon will also show up on sections and can be used to change margins and padding for larger sections of your page.

There's a lot of configuration options so it's a good idea to have a page you can use to test different features out on and learn with.

Loclweb Page Builder Module Options

Click this to drag a module anywhere available on the page. You cannot drag a module from the page into the header or footer.

This is the settings icon. It will show up when you hover over a module or section. You can click it to open the configuration window.

This button allows you to duplicate a module or row. It's a great way to quickly duplicate all settings for a module so you only have to update the content.

This button lets you change column settings. You can set manual column widths, set margins/padding, and do a lot more with columns.

Delete any module or an entire row. Be careful to pay close attention to what section of your page is highlighted before clicking this button, you can't get these changes back unless you discard all your edits from the editing session (including any saved drafts!).

The grey menu bar shows up on sections of modules or columns. These options will change larger sections of your page.

This can be dragged left or right to change the size of columns. If you have multiple columns it will adjust both of them. If you have one column this will change the width of your content.

Step D

Preview Page & Mobile Editing

Before you publish a page it's a good idea to preview it to make sure it looks good on different screen sizes. You don't have to create the whole page and publish it, there's always the option to save a page draft while you work on it. You can also edit your page in different screen sizes to perfect your website for all visitors.

It's a good idea to save your page on occasion to make are you don't lose any work. WordPress attempts to save what you're working on at any given time but using the save draft option is a better option.

Loclweb Page Builder Tools Menu

This drop-down menu is the tools menu with many options to change the way the editor looks, global settings, page CSS & Javascript, previewing your page, and even the ability to switch to responsive editing mode.

This option lets you preview your page and switch between smartphone, tablet, and desktop sizes. You can also push the O key on your keyboard (while not in a text field) to enter preview mode if you're not editing text.

Responsive editing allows you to quickly and easily edit module layouts, text sizes, margins, padding, and more in both tablet and smartphone modes. It makes it easy to format your page perfectly on all major screen sizes.

There's a dark mode available for the editor, the O button on your keyboard will enter this mode. You can also exit it with the O button.

Step E

Save Draft

Save draft has two good uses when editing a page in the Page Builder.

  1. Save the change you've made so you don't lose any work.
  2. Save a draft of your page so someone can review it or you can come back to it another day.

The second option is great because you can edit a page already built in Page Builder and have an updated version that you're still working on. Visitors to your website won't see the draft version until you hit publish but it will keep your draft saved in the database.

Be aware that if you save a draft page and use the discard button, all draft edits will be deleted, even those from a different editing session.

Loclweb Page Builder Done Button

The Save Draft button saves your progress and returns you to the current page's published version.

This button is labeled Done until you click it and then it turns into Cancel. This is how you open the menu to save a draft of the page.

You can get rid of all the changes you've made to a page with this button. Be careful because you cannot retrieve a page if you discard it.

Step F

Publish Page

This is the last step in creating or modifying a page on your WordPress website. Be sure you're ready for the world to see your page because this makes it public.

It's always a good idea to save a draft of your page first and preview it before actually publishing a page. This is the final step that makes your page public. Your page will be available at the address you chose in step 2 by modifying the slug.

Your page doesn't automatically go into your website navigation once published. There are still a few more steps to add a page to the website's navigation so website visitors can navigate to it.

Loclweb Page Builder Done Button

This button is labeled Done until you click it and then it turns into Cancel. This is how you open the menu to publish the page.

When you're ready for the world to see your new page or page changes, click the publish button. Your page will immediately go live for everyone in the world to see.

Step 4

Insert Page Into Navigation

You don't have to add a page to your navigations but this may be a step you would like to do. There are many instances where you wouldn't want to add a page to your navigation.

  • It's a landing page that you're using as part of a funnel.
  • The page is only meant to be linked from within other pages of your website.
  • You created a thank you page to drop visitors off on after they've filled out a form.
  • And many more.

If the page you created is a main page of your website then you'll need to add it to your website navigation. This can be done in the WordPress menu section of the admin dashboard.

Steps To Insert Page Into A Menu

In the WordPress admin dashboard, go to Appearance, Menus.

From the WordPress menus screen, you can modify the current menus or create a new menu.

To add your new page to the menu, do the following steps:

  1. Open the menu you'd like to add your new page to (select the right menu from the drop-down and click the Select button).
  2. Select the page you'd like to add from one of the sections on the left side of the menus page (if you created a new page it should be the first option in the Most Recent tab).
  3. Click the Add to Menu button.
  4. Drag the page where you would like it to be (you can even nest pages under other pages).
  5. Rename the page name in the navigation to make sure it fits (you can do this by clicking the arrow on the page box and renaming the Navigation Label).
  6. Click the Save Menu button.
WordPress Menu Management Screen

Get to the menus screen under Appearance > Menus.

Select the menu you'd like to update from the drop-down menu and then click the Select button.

You can also create a new menu and use it in various places on your website. Every theme has different options for using menus which are usually shown in the Menu Settings section of this screen.

You can use menus in widgets and in Beaver Builder modules also.

This entire section has different items you can use to create a menu item. Each tab can be expanded for several options.

You can select one or many options and then click the Add to Menu button.

You can create custom links to anywhere you like including external websites also.

Once you've added items you can organize them here by dragging items around or even nesting them.

Each link can be expanded for more options including renaming the item to shorten the name for a menu.

This is where you can choose where this menu shows in your theme. It's not recommended you change this unless you know what you're doing. It can affect the way your website looks.

Changes to the menu won't be saved unless you click the Save Menu button.

That's it!

Once you save the menu you can head over to your homepage and you'll see your new page in the menu. Your website menu is persistent through all pages of your website (unless it's been expressly removed from a page).

Last Updated On April 30, 2019