How to Edit The Front End of NGB


Welcome pops! Here's everything you need to know to start editing on the front end of NGB. Enjoy!

Follow the 11 easy steps below to learn how to create a new post and style it using the front end!

1. Sign in to the back end and create a new post.

1. Add New Post From Back End

2. Insert title and click "Publish."

Wait for the page to reload and then click "Frontend Editor."

2. Insert title, click publish, open front end editor 2

3. Now add your first element.

1. Add Element

4. Here you can add everything you need including text, images and videos. Let's start by adding an image.

2. Add Image

5. Upload a new image or add an image already in the media library and then click "Set Image."

3. Choose image from library or upload new image

6. Change image size and alignment and click save.

(Type "full" in the "Image Size" box to ensure your image isn't too small and change "Image Alignment" to "Center.")
image alignment size save

7. Click a yellow plus sign to add another element above or below the image. (Hover over the image to see the above plus sign.)

5. Prepend or apend to the column 3

8. This time let's add a text block.

6. Add Text block

9. Write and style text and save.

save text

10. To edit your text block simply hover over it and click the pencil icon.

8. Hover over the text block and click the pencil icon to edit text

11. To move an element, hover over it, click and hold the cross arrow, and drag and drop the element where you want it.

To delete an element, hover over it and click the green trash can icon. Be careful! If you click the yellow trash can icon, it will delete the whole row, instead of just the element.

move or delete element

Repeat these steps to add all of the content you want. Continue to the next section for instructions on how to edit an existing post or page.


How to edit existing post in the front end!

Sign in to the back end. Then on the front end, go to the post or page you want to edit and click "Edit with Visual Composer."

edit page

Scroll up and see Step 7 to add an element, Step 10 to edit an element and Step 11 to move or delete an element.

Now you should be ready to rock and roll!

Leave a Comment