25+ Premium Draggable Content Blocks to Design Landing Pages

Introduction of Premium Content Blocks

• The premium content blocks add-on includes 27 new blocks that can be used to create various types of pages, such as about us, team, and services pages, with a high degree of flexibility and customization (00:00:00).
• The regular standalone web page builder is simple and familiar, similar to Microsoft Word, but the introduction of basic content blocks and now the premium content blocks add-on has opened up more possibilities for creating modern and beautiful web pages (00:00:12).
• The premium content blocks add-on offers more complex blocks that can be used as is or further customized, providing even more flexibility and a wider variety of foundations to start from (00:00:41).
• Three web pages were found online and recreated using the premium content blocks add-on, including an about us page, a team page, and a services page, to demonstrate the flexibility and customization options (00:01:01).

Recreating Web Pages with Premium Content Blocks

• The about us page consists of a hero section, left and right aligned images and text, call to action buttons, and a call to action at the bottom, and was recreated using primarily default blocks with one premium block (00:01:18).
• The team page and services page are more complex and utilize more premium blocks, including a hero section, list of team members, core values, embedded video, and call to action (00:03:17).
• The web page builder has a user-friendly interface, with features such as a sliding menu that can be closed to provide more space in the admin area (00:02:46).
• The hero section is a key component of the pages, displaying the h1 and h2 of the page, and can be customized using the premium content blocks add-on (00:03:00).
• The webpage features a hero section, a team members section, a core values section, and a call to action, with the core values section including an expanded version of the company’s core values and a handshake video, all of which were recreated using the web page builder and content blocks (00:04:08).
• The team members section was simplified to include only six team members, and the core values section was recreated along with the handshake video and accompanying text, culminating in a call to action (00:04:27).

Building a Team Page with Premium Content Blocks

• A new premium Internet filter was used to create the team members section, featuring three columns with images and text, which was duplicated and customized with background colors, images, and font sizes (00:05:28).

Creating a Core Values Section with Content Blocks

• The core values section started with a left-aligned image and right-aligned text, which was replaced with a large text heading and normal text, and included check marks that were added using the star icon in the toolbar and customized with a goldish-brown color (00:06:12).
• The next section featured a right-aligned image and left-aligned text, with a video embedded above the image, using a default content block and allowing for resizing and replacement with a custom video or embed code (00:06:49).
• The video element can be dragged and dropped into the page, resized, and replaced with a custom video using a YouTube URL or embed code, and the same applies to images, which can be replaced with custom uploads or external image links (00:07:34).

Flexibility and Options in the Webpage Builder

• The webpage builder allows for flexibility and various options, including copying and pasting URLs of images from other websites, and utilizing tables to create two-column layouts (00:08:28).
• Content blocks can be used to create custom layouts, such as left-aligned images and right-aligned text, and can be modified by dragging columns to adjust widths (00:08:49).
• Call to action content blocks can be customized to use normal links instead of button links, and background colors can be used to make certain sections stand out (00:09:27).
• To make web pages look modern and unique, background colors, text size, font families, and colors can be utilized to create visually appealing sections (00:09:51).

Elements and Layout of a Webpage

• A webpage can include various elements, such as introductory CTAs, primary images, brand icons, left and right aligned images with text, bullets, internal links, testimonials, and final call to actions (00:10:41).
• The layout of a webpage can be based on existing pages, such as the one from Upflow, and can be customized to list benefits or provide a walkthrough of what members can expect (00:11:20).
• A Landing page can include a large image, text with icon images, and a larger image on the right, with a focus on making the content easy and clear to read (00:11:50).
• The webpage builder allows for the creation of custom pages with various elements, including testimonials, call to actions, and images, to create a visually appealing and effective webpage (00:12:32).

Building a Landing Page with Content Blocks

• The webpage has a centered call to action to request a demo, a large screenshot image of the service, and a list of brands utilizing the platform, with each brand being an image, and the layout switches as the page is scrolled down (00:12:34).
• The page has a testimonial and a call to action with two buttons, and it seems to be utilizing some of the more robust blocks, with the creation of the page being relatively quick and simple (00:12:37).

Creating a Landing Page Section by Section

• The first section of the page was created using a call to action block, a standard image Internet filter, and some tweaking to make the image take up the full width of the page (00:13:51).
• The feature content block was used to create the section with the brand icons, and it required some tweaking, including adding columns to the table and deleting the second row, to fit the six or seven brand icons (00:14:29).
• The brand logos were added to the feature content block by replacing the default images, and the text was removed since only images were needed, with the process being simple and quick (00:15:08).
• The layout of the page was adjusted to match the desired design, including using vertical alignment and removing extra spaces to make the elements line up properly (00:15:32).
• The page’s content blocks were customized by replacing the default images and text with the desired content, including dragging and dropping logo images from the computer into the content block (00:15:47).
• The layout of the lower section of the page was created using a premium content block, with some adjustments made to the text sizing and colors to match the desired design, and the result is a page that looks similar to the original design (00:16:16).

Customizing Webpage Appearance

• Creating modern-looking web pages can be achieved by experimenting with font sizing, colors, and using high-quality images and icons, which can greatly enhance the overall appearance of a webpage (00:16:54).
• The Internet filter used in the example has a table with five columns, and its appearance can be customized by adjusting the widths of the columns, shortening the text, and replacing images with circular ones (00:17:31).
• Customizing the heading of a section can be done by changing the font size, colors, and bolding, and adding a subheading with a smaller font size, as seen in the example where the default heading was modified to match the style of the Uplift page (00:18:11).
• The testimonial section was created using a content block with a left-aligned image and right-aligned text, and its appearance was customized by replacing the image, typing in quotation marks, and changing the text color and size (00:18:45).
• The call to action section at the bottom of the page was created using a table with a column on the left and two buttons on the right, and its appearance was customized by changing the text on the buttons, colors, and adding a background color to the columns (00:19:53).
• The customization of the webpage’s content blocks and sections involved playing with font sizing, colors, and boldness, and using tables to insert columns and drag in buttons or links, as seen in the examples of the testimonial and call to action sections (00:19:44).
• The webpage’s design was inspired by the Uplift page, and the content blocks were customized to match its style, including the use of bold headings, smaller subheadings, and circular images (00:17:23).
• The customization process involved working within the confines of the Froela editor, and experimenting with different design elements to achieve the desired look (00:20:48).

Tools and Goals for Landing Pages

• Bootstrap would be an ideal tool, but it has not been made available yet to add or remove columns, and the current tools are being utilized to make webpage and Landing page creation more accessible (00:20:58).
• The goal of landing pages is to share information, such as FAQ, mission statements, or about us pages, and to encourage visitors to click on buttons and links to navigate to internal website pages (00:21:34).
• Custom homepage content can be created using the available tools, and the blocks can be repurposed for various ideas, such as highlighting features instead of just using them for team or staff pages (00:21:32).
• The blocks can be used to create a variety of content, including teams, FAQs, and mission statements, and can be customized to fit the needs of the website (00:21:55).
• The recommended approach is to use the available tools to create effective landing pages and to think creatively about how to use the blocks to achieve the desired goals (00:21:15).
• Landing pages can be used to share information and to drive visitors to internal website pages, and the blocks can be used to create a variety of content to support this goal (00:21:40).