SP Page Builder Masterclass For Beginners

Install Joomla on a Linux server via cPanel, log in with credentials, and set up a subfolder. Then install SP Page Builder Pro and configure the license for full features.

Explore backend of SP Page Builder, managing categories, integrations, languages, media, and page status from new to publish. Use templates and open graph settings to add rows and refine layout.

Explore the front-end workflow using the Helix framework, previewing pages, and editing with a front-end editor; learn to install templates and extensions, drag-and-drop blocks, and manage layouts and pages.

Learn to use Joomla page builder addons to create and place modules on your site. Drag and drop rows, assign modules to frontend positions, and adjust margins and fonts.

Learn to create and customize accordions in SP Page Builder masterclass for beginners, editing items, toggling open and closed states, and applying fonts, alignment, line height, drop caps, and colors.

Build a simple contact form with recipient email (where to send submissions), optional phone capture, and customizable button styles and icons to tailor its design.

Learn how to add and customize alerts, including title and message, font family, and close behavior, with styles like primary, success, warning, and danger.

Explore how to add animated numbers in SP Page Builder, customize colors, titles, and alignment, set animation duration, clone blocks for multiple columns, and independently color and count each number.

Learn to add articles in Joomla, create categories, and save changes, then showcase articles on the front end with read more options and category filtering.

Add an article scroller to display multiple articles in a scrolling ticker, with customizable headlines, dates, font weight, font family, background color, and feature or breaking news options.

Add an audio player to your page by uploading audio clips or podcasts, enabling auto play and repeat, and letting visitors play and listen efficiently.

Learn to use block numbers in SP Page Builder to design dynamic sites by dragging, cloning, and customizing color, size, radius, and alignment for bold, modern webpages.

Master Carousel Pro in SP Page Builder Masterclass for Beginners by adjusting auto play, intervals, speed, and controls, while adding images or YouTube video links.

Create and customize a button in SP Page Builder, linking to any URL, choosing open in a new or same window, and adjusting size, style, width, icons, alignment, and spacing.

Create and customize a button group by cloning items, setting fonts, outlines, shapes, icons, and adjusting gutter spacing and alignment for a polished look.

Learn to create and customize a carousel by editing text and images, adding items, adjusting fonts, colors, and buttons, and cloning or linking slides.

Learn to add a flip box in SP Page Builder, customize fonts and icons, adjust background color or image, edit the product design title, and set flip direction and trigger.

Add a client logos grid to the site footer, swap in your logo and link it, and adjust logos per row and alignment to showcase clients.

Create and customize a professional countdown timer for events, adjusting dates, finished text, height, font size, colors, borders, border radius, and label fonts to suit your course page.

Use the divider to separate content, customize its color and top and bottom spacing, and explore how a divider interacts with images and borders to organize page sections.

Learn to add and customize icons in SP Page Builder: choose icon type, adjust size, color, background, borders, radius, alignment, zoom, and set a clickable link.

Learn to add the empty space addon to insert and adjust space between items, using drag-and-drop and device-specific options for a clean, uncluttered layout.

Learn to add and customize feature boxes in SP Page Builder, adjusting color, images, icons, title, spacing, width, radius, and margins, then clone and drag to design a full page.

Add a Flickr gallery to your SP Page Builder project. Configure your Flickr user name, ID, and API key, then set the photos per row for a simple visual showcase.

Configure a modal popup in SP Page Builder by selecting an icon, image, or button as the trigger and choosing content as text, image, or video with alignment options.

Add and customize image galleries by uploading images, setting thumbnails and dimensions, adjusting spacing and layout, and cloning items so visitors can click to view gallery images.

Learn to add a Google map to your site, set a location by address and coordinates, add a title, and choose map types like satellite, hybrid, or terrain with scrolling.

Learn to create and customize headings in the SP page builder masterclass for beginners, adjusting font family, size, style, capitalization, and link options including icons.

Master the client add-on to showcase multiple clients in a clean, responsive layout, clone cards, and customize images, links, titles, and alignment with flexible per-row options.

Learn to add an image in SP Page Builder by dragging it in, set alt text, adjust position and size, and make it linkable.

Add an image with content in SP Page Builder by dragging the image and adding content in the right column. Customize text, image size, padding, and button styles.

Learn to add an image overlay and customize with color overlays and gradients, including start and end colors, coverage, and angle, with linear or radio options.

Add an Instagram gallery to SP Page Builder Masterclass using an account-specific access token to display images with captions and comments in a configurable grid.

Learn to embed a SoundCloud track by copying the embed code from SoundCloud and dropping it into SP page builder to display the song, a simple, easy workflow.

Add an opt-in form that integrates with Mailchimp, ASML, and Sendinblue via an API key to grow your audience on your site, using a Joomla component.

Add a person to your team, customize image, name, position, description, style, color, email, intro text, and social media, and set left, center, or right alignment.

Explore pie progress in SP Page Builder, adjusting percentages, icons, and font options while cloning, dragging, or deleting elements to customize the progress display.

Learn to add and customize a text block for blog content, selecting font family, size, type, and color to shape the look and feel of your pages.

Learn to customize a progress bar in the SP page builder masterclass for beginners, adjusting percentages, icons, and content, and using clone, drag, and delete options for flexible placement.

Learn how to add raw html to the SP page builder by copying code from another source and pasting it into the page builder to display external code.

Learn to add a social share icon in SP Page Builder, enable sharing on Facebook, Twitter, LinkedIn, and customize colors, counts, and alignment with a free API key.

Drag and drop the video add-on, paste a YouTube or Vimeo link to embed, and turn off suggested videos to keep your course professional.

Add tabs to organize content at the top, customize tab titles and icons, and switch between pill or modern styles, with each tab displaying its own content.

Learn how to add and customize testimonials on your page, including icon visibility, size, line height, highlighting a testimonial, color, and avatar with name, company, and alignment options.

Create a testimony slider, clone and rename entries such as John Doe, Jane Doe, and Clay Plie, and configure autoplay with adjustable intervals and speed, plus avatar and controls placement.

Add a timeline to display sequential events, clone entries, customize dates and titles, apply changes, adjust bar colors, and drag items to position the timeline.

Learn to integrate a Twitter feed on your website by obtaining the Twitter API key, consumer key, consumer secret, access token, and access token secret, following the official documentation.

Learn how to use the animated text addon with 22 blocks in SP Page Builder, drag and drop blocks, edit text, and customize colors and animation types in real time.

Discover the blend mode in SP Page Builder 3.4 to create unique image looks with gradients, overlays, and options like soft light and luminosity, with adjustable color and angle.

Explore how to build faster with hero blocks using drag-and-drop, customize backgrounds, images, parallax, colors, and shapes, and tailor buttons and hover effects to craft engaging web pages.

Explore how to customize feature blocks in SP Page Builder, from selecting and dragging feature boxes to adjusting colors, icons, typography, images, gradients, padding, and background media.

Learn how to use content blocks to build a solid page by adding, editing, and styling content, images, overlays, backgrounds, and buttons.

Drag pricing blocks to build a clean, professional price page with top or bottom price placement and button styles. Edit features, colors, and spacing to craft a high-quality pricing section.

Learn how to add and customize call to action blocks on your home page using drag-and-drop tools, integrate email capture with Mailchimp, and choose supported platforms for list management.

Create and customize team blocks by editing member images, names, and styles, adjusting overlay color, gradients, and social links, then duplicate and adjust backgrounds and spacing.

Learn to add testimonials blocks in SP Page Builder, customize content, names, and colors, apply backgrounds and padding, and apply styles across all items.

Explore building a simple contact page with SP Page Builder's contact blocks, edit the get in touch form fields, and personalize maps and locations in real time.

Explore how to add highlighted heading blocks, customize highlight colors and text, and adjust background to match your site colors using the drag-and-drop builder.