Create a new custom page

Step 1
Step01

Start creating a new custom page

To get started adding a new page to your WordPress site, find the Pages menu in the WordPress Dashboard Navigation menu. Click Add New.

  1. Go to Dashboard > Pages
  2. Click on Add New button
Create wp custom page
Part02

WordPress page editor

You’ll now see the WordPress page editor. WordPress 5.0 introduced an entirely new editor with a new approach to adding content to your new page called the WordPress Block Editor. In the WordPress editor, each paragraph, image, or video is presented as a distinct “block” of content.

Create a custom page 2
Part03

Switch page editor to WPBakery page builder

Now you must set page title and publish page, then switch page editor to WPBakery page builder for continue.

  1. Enter page title
  2. Publish or update page
  3. Switch to WPBakery page builder
Switch to wpbakery page builder
Part04

Page builder backend editor

Click on Backend Editor button then you will see page builder welcome screen like following preview image, by clicking on Add Element you can see list of all the available elements.

Wpbakery page builder backend editor
Part05

Elements overview

\WPBakery Page Builder comes pre-packed with 50+ content elements allowing you to create pages and posts within minutes by simply dragging and dropping elements into your WordPress website, Also XTRA theme added 49+ premium elements that exclusively designed and developed for XTRA theme.

Page builder xtra theme elements
Part06

Example: Add button element

Find Button element and click on it, Now you can see button element has been added to page builder editor and you can see button settings modal box, So make your changes and click on save button. Now update page and see your page live.

Page builder button elements
Part07

WPBakery frontend page builder

Edit your page with WPBakery page builder frontend, or edit your page in backend and click on Frontend Editor button to see live page builder.

  1. WPBakery Logo and Loader
  2. Add Element(s) to page builder
  3. Add custom premade template
  4. See live without edit icons
  5. Page settings and Custom CSS
  6. Responsive modes
  7. Switch into backend editor
  8. Update page changes
  9. Close page builder
  10. Add elements
  11. Add text block element
  12. Add custom premade template
Front1
Front2
Part07

Add new Row and Element

After adding row or element, you can see something like below screenshot, You can edit row, duplicate or change layout, edit column, edit element, etc.

  1. Edit Row
  2. Change row columns layout
  3. Add new column to row
  4. Duplicate row
  5. Remove row
  6. Columns settings
  7. Edit element
  8. Duplicate element
  9. Remove element
  10. Add new element under others
  11. Element settings modal box
Row column element edit icons

No comment

Leave a Reply

Your email address will not be published. Required fields are marked *