Adding Buttons to your website

Adding Buttons to your website

Here is a quick tutorial on how you can easily add buttons to your website using the Visual Builder on the front end of your website.
Also included is how to style your buttons, add a row with two columns, and make your buttons link to a webpage.

Video





Step By Step

  1. Step 1: Log In and Navigate
    1. Log in to the backend of your website using your credentials.
    2. Navigate to the front end of your site.
  2. Step 2: Enable Visual Builder
    1. Access your home screen.
    2. Enable the visual builder to initiate the customization process.
  3. Step 3: Add a New Row
    1. Click the green plus button to add a new row.
    2. Choose a row with two equal-sized columns.
  4. Step 4: Add Prayer Request Button
    1. Click the "Insert Module" option.
    2. Choose the button option.
    3. Set the button title as "Prayer Request."
    4. Add the prayer request link or use a placeholder.
    5. Customize the button design:
    6. Click "Design" and choose "Alignment" to center the button.
    7. Customize styles, such as background color, border width, and font.
  5. Step 5: Add Live Stream Button
    1. Copy the module styles from the prayer request button.
    2. Add a new button with the title "Live Stream" and a placeholder link.
    3. Paste the module styles to ensure consistency.
  6. Step 6: Adjust Spacing
    1. Double-click to access row settings.
    2. Navigate to "Design" and "Spacing."
    3. Adjust the spacing to eliminate gaps, considering both buttons.
  7. Step 7: Align Buttons
    1. Align the prayer request button to the right.
    2. Align the live stream button to the left.
  8. Step 8: Responsive Design
    1. Check the appearance on different devices (computer, tablet, phone).
    2. Adjust alignments for each device to ensure a cohesive look.
  9. Step 9: Finalize and Save
    1. Review the design on various devices.
    2. Save your changes. Exit visual builder.
  10. Step 10: Additional Notes
    1. For three or more buttons, modify the number of columns in the row accordingly.
    2. Use the undo feature if accidental changes occur.
  11. Conclusion
    1. Following these steps will help you successfully add and style buttons on your website using Tent Apps. If you have any questions or concerns, please refer to the provided video walkthrough or contact the appropriate support channels.


    • Related Articles

    • Edit webpage without Divi Visual Builder

      Context This video provides a workaround for editing Divi pages when the Visual Builder is not functioning, ensuring continued site maintenance capabilities. Video Overview ...

    • Editing Your Header and Footer Template

      Here is a quick video tutorial on how you can use the visual builder to edit your global header or footer template that shows up on all of your pages. Reach out to us at support@tentapps.com if you are unable to see this new feature and we'll install ...

    • How To Make Simple Edits To Your Website with Tent Apps

      With Tent Apps you get 1 hour of support per month, so if you have any changes you want made to your website, we are always here to help. However, if you're just looking to change a word or two, or maybe make make a section a little bigger, making ...

    • Changing a layout on Mobile and Tablet Views

      Here is a quick video tutorial in moving objects (images, text, etc) around to arrange differently on mobile and tablet views. Pro Tips: Your website rearranges in mobile and tablet view from left to right You can duplicate modules and arrange them ...

    • How to Undo an edit on a Page

      Have you ever hit save and messed up the look of a website page? Here is how you can easily undo something that you didn't mean to do. Most areas in the backend of your website have a revisions section. This revisions section allows you to scroll ...