In today’s article, we will explain the steps for building a landing page to subscribe to the newsletter for a WordPress site, step by step. To implement the steps of this article, we will assume that you have a WordPress site on the hosting, with a suitable template installed and all the necessary plugins for the site to work. We will explain to you how to design a landing page for this site using the component editor. Gutenberg and its enhanced plugin PostX.
First, we will review what the PostX add-on is and its features, explain how to install and set it up on your site, and take a quick look at its most important components. Then we will move on to a practical explanation in which we explain how to design a landing page and the most important components that we will include in it.
What is a PostX add-on?
The PostX plugin is a website building tool developed by WPXPO , directed to owners of blogs, electronic magazines, and news sites. It works within the Gutenberg editor (components) in the WordPress system, and is characterized by strong compatibility with it and with various WordPress templates and plugins. It provides the ability to customize all pages of the site by providing new components. High quality and highly customizable, components can be activated or disabled as you wish to simplify the editor interface.
The add-on provides a wide range of ready-made designs and templates that suit various types of sites, and provides additional features, add-ons and integrations with several add-ons, including popular page building add-ons such as Divi Builder and Beaver Builder, and it also integrates with SEO add-ons such as SEOPress Meta, Yoast Meta, and RankMath Meta, which It enhances the visibility of content in search engines and others, and is ideal for types of sites that focus on publishing content on a regular basis.
One of the unique features of the add-on is its integration with the ChatGPT chatbot and using it to generate content with artificial intelligence. If you have your own API key from the OpenAI platform, you can, with a few clicks, quickly create and modify your site’s content from within the control panel, which enhances your productivity and speeds up the content creation process.
The add-on is available in a free version and paid versions , and all versions are easy to use. Paid versions differ from each other in the number of sites on which the extension can be run, and in general they allow greater customization possibilities and work more quickly than the free version by:
- Providing more components in the component editor and expanding the properties and options of components present in the free version, such as the number of layouts for the component, and options for filtering the articles that are displayed.
- Expanding the library of ready-made templates that can be imported and modified, as the free version includes only 3 templates, while the paid versions provide 27 templates.
We will introduce you to more about the features of the plugin in the following paragraphs and explain to you how to benefit from it to create a professional landing page to register for the WordPress newsletter.
Install the PostX add-on
You will first need to install and activate the PostX add-on on your site. We will rely on installing the free version of PostX and activating it on our WordPress site. To install the add-on, go to the site’s control panel and choose the Add-ons menu > Add a new add-on > and type in the search box the name of the PostX add-on, and after finding it, click on the button Installation and then activation as the following image shows. For more about installing WordPress plugins, you can see the article on installing free and paid WordPress plugins 2022 with pictures .
Try creating a landing page to sign up for the newsletter
In the following paragraphs, we will create a newsletter subscription landing page, and explain how to add and customize its various components, using the block editor in WordPress and using its enhanced components by focusing on the PostX plugin components.
What we want is to create a landing page whose primary goal is to convince the visitor to sign up for our newsletter, and the final page will be as follows:
1. Create a new page
We will create a new page by going to the “Pages” tab, then clicking on the “Add a new page” option, and we will call it “Newsletter Subscription Landing Page.”
After creating the page, we open it in the component editor, and we will have to hide the page title, by clicking on the icon that resembles an eye, so that this title does not appear to the site visitor. We will also disable the header and footer display of this page to simplify the design and make the visitor focus on the primary goal of the page. This step varies depending on The template used on your site. Some templates may provide you with the ability to disable it directly from the template properties, and you may need to write custom CSS code or install a custom plugin to hide it from view.
2. Create the first part of the page (news feed)
Let’s start by designing the top part of the page, which includes a News Ticker that displays the latest posts on the site under the tag (News).
It’s very easy to include this section in a PostX plugin. Just add the Row component one column at the top of the page as follows:
Then we add the News Ticker component inside this column, and customize it through the (Component) tab on the left of the page. One of the most important properties that you can modify is the Ticker Type (horizontal or vertical) and modify the text that appears on the text tag to the right of the Ticker Label. You can also modify Its color and appearance. We will modify the source property, which represents the source of content for the ribbon, to be posts. We specify that we want to display only posts that have a WordPress classification. We also specify their number to be, for example, 5 posts. We can also control the way they move within the ribbon, the speed of their appearance, and many other options.
With this, the animated news section at the top of the page has ended, and we will move to the second section of the page.
3. Create the second part of the landing page (the newsletter subscription form)
Now we will add a new Row component consisting of two columns and make a space between them of 10 pixels and the background color is gray (E0E0E0). In the first column on the right, we will add a title at the top with an H2 subtitle and subtext. We will customize the font type, color, size, and alignment, then we will add a form component below it to subscribe to the newsletter. Postage as follows:
We previously created this form using the WPForm plugin and placed an email field and a subscribe button, which is the CTA for this page.
If you have no idea about dealing with this add-on, you can refer to the article explaining the WPForms add-on for creating forms, polls, and email messages , or the article on how to add a contact form to a WordPress site or a Woocommerce store. You can also use any other add-on that suits you to design the subscription form.
Now we move to the second column (on the left) and add the Image component provided by the PostX plugin (and not the traditional Image component in the Gutenberg component editor). This component provides broader design options than the default Image component.
We will load our image into this component and customize it with the appropriate options and formats. In our case, we added the opacity effect when hovering over the image and made the image have 30-degree rounded edges.
4. Create the third part of the landing page (latest posts)
Now we will add a row line from one column and add an H2 title in it, including the text “Our latest publications.” We assign its formatting to the value Style 5 and choose the font type to be Cairo, the writing color is white, and the background color is blue, as the following image shows:
Finally, under this heading, we add a new Row component of one column, and inside this column we add the Post Grid #2 component. We note that the SOURCES data source for this component is the articles post, and you can modify it to display other types of content. We will leave it with the default option and set the number of articles displayed to the value 3, We also customize the alignment of the text of the articles to be in the middle, and remove the display of some elements in the grid such as the article classification, the excerpt, and the Read More button, and the posts will appear within the grid that we have chosen in a coordinated manner and in elegant colors, as the following image shows:
5. Publish your landing page
After we finished adding and customizing all the components for our landing page, it’s time to preview it in the browser. Our page will appear as follows:
If the design is appropriate, we will be ready to publish the page and include its link in the appropriate place, such as placing the link in a banner at the top of the site, or sharing it in promotional posts on social media or by email, depending on the marketing channels we rely on.
The most important components of the PostX plugin
After activating the add-on on your site, you will be able to create designs for your site pages either through the ready-made template sets that the add-on provides you. All you have to do is edit your site pages, then click on the (TEMPLATE KITS) button located at the top left of the page and import the appropriate template and modify it according to your requirements. As the following picture shows:
You can also design your page from scratch by using the Block Library, through which the PostX plugin enhances the default block editor in WordPress, and we will adopt this method to design our landing page.
You can access the add-on components by editing the desired page or article, clicking on the plus icon, browsing the components, then moving to the POSTX – GUTENBERG POST BLOCKS section to see all the add-on components.
Then choose the component you want to add directly to the editor page, and customize it according to your needs from the sidebar on the left of the page or from the options bar that appears at the top of the component. As the following picture:
The plugin provides a set of other components that you can benefit from in different types of landing pages, and some of these components are as follows:
Row component
This component represents a container that may consist of several columns and helps you organize and layout the components of the page. You can also specify the size of the space between the ROW GAP lines and between the COLUMN GAP columns to organize the spaces between components.
Post Grid component #1
The POSTX add-on provides several components called Post Grid, each of which has a unique number. It is intended for displaying posts in the form of a professional grid. It differs from each other in the way the elements are designed and laid out within the grid. It also provides many customization options that help you create attractive designs.
Table of Contents component
This component adds a table of contents to your site autonomously based on titles in posts and pages to allow readers to easily navigate different sections of content.
Dark/Light mode component
This component gives you the option to switch between the design of your page elements to make them fit day (light) or night (dark) mode.
News Ticker component
It provides an easy way to display important posts on your site within a moving bar in a prominent and eye-catching way for site visitors. The component provides you with many options to control the way content is displayed within this bar.
Social icons component
This component displays a set of icons that allow visitors to share your site’s content on their social media accounts.
This was a quick overview of the most prominent components of the add-on. There are of course many other components that the add-on provides, and you can refer to the add-on’s documentation page to view them and learn the function of each of them and how to customize them.
In today’s article, we learned about the PostX add-on, which is considered one of the ideal additions for website and blog owners who seek to design their website pages and display their contents in an innovative and attractive way. We learned about its features and most prominent components, and through it we designed a special landing page for subscribing to our website’s newsletter.
You can try this add-on and learn more about its other features in displaying and managing content on your site. If you have any questions about what is mentioned in the article, do not hesitate to ask them in the comments section below the article.
