Create Landing Page in 2 Days — Overview of Slides by Designmodo
As you may know, Slides Framework is our flagship in the website framework lineup. It is a professional product with a bunch of helpful features. You can literally build a website in minutes without delving deep into the code.
It is one thing for us to tout our product since as developers we are perfectly aware of its possibilities, but quite another matter for customers to promote it. You can familiarize yourself with feedback but there is nothing more valuable than a real-life experience that shows the benefits of Slides.
One of those stories comes from client EmailSoldiers. The company is a leading Russian agency that specializes in creating and running successful email marketing strategies.
Note: This is a translation of an article published by EmailSoldiers on their blog. The original text can be seen here.
In this article you will see how easy create a website.
Nadya Pominova, lead email marketer at EmailSoldiers, says:
Last year, we decided to increase our writing activity by starting to release educational material for our readers. Our first guide was dedicated to a burning issue for novices: how to write content for email newsletters and make everything look nice. There was one important condition: our guide was supposed to be downloadable. Obviously, a regular blog post was not enough for that; we needed something more. We needed a landing page.
We had several options:
- Build our own HTML/CSS template where we could change text and visuals
- Use Readymag
- Use Tilda
- Use a popular framework like Slides by Designmodo
Why we choose Slides by Designmodo
The first option required a considerable amount of time, to say nothing about its boring realization. After all, the first thing was to test the waters — to see whether our educational material would be popular and in demand. Avoiding risks of spending lots of time and ending up with nothing, we set our eyes on web builders.
We were considering three options: Tilda, Readymag and Slides.
Tilda was dropped right off the bat. We were left with two options and stopped at Readymag. The pilot version of our landing page was made exactly on its basis. What’s more, it existed for a quite long time. However, there were two issues that bothered us. First, we were not satisfied with the customization options and settings for emails which needed some improvements and flexibility. And second, each landing page powered by Readymag required a monthly payment.
Almost predictably, one day it disappeared from the web because we forgot to pay for it. We needed our guide back, so we tried Slides by Designmodo. To be honest, we were quite impressed by its potential, and continue to use it to this very day. That’s why we highly recommend it to our clients.
Landing page we created
With Slides, we managed to build a simple but elegant landing page with two screens almost in no time. Take a closer look at it here.
How to create a landing page using Slides
To feel the power hidden inside Slides you need just one thing — basic knowledge of HTML and CSS. If you do not have one then we recommend visiting Codeacademy where you will find a bunch of helpful tutorials to acquire and master these skills.
The team behind Slides has provided their clients with a website constructor.
Click Here for Best Examples of Websites that Use Slides Framework
As any composer, it has a user-friendly interface where you can find elements such as video backgrounds, headers, forms, tables, footers and even animations. The whole routine boils down to choosing desirable blocks and downloading the result. The download will include all the necessary files inside. After that, you need to open the index file and edit its content.
For our landing page, we chose two blocks: the first was for a description and the second was for a subscription form.
This is how the first block looks in its original state:
How it looked like after we edited the content:
We changed the picture inside the tablet mockup on the right, put our own text on the left, and added some styles for making list look more organized and formatted.
This is the second block in its original state:
Here we also made some edits. We replaced the background with our image and changed crimson color into our brand color, orange.
Overall impression
Why we like it
- Slides is a very handy and user-friendly tool, especially in situations when there is no developer at your side.
- There are a ton of different blocks that you can easily mix and match without upsetting the harmony of the design.
- The page has a well-thought-out responsive behavior that looks great on any device.
- Customization options are enormous. You can edit everything from design to functionality. And do not worry, even if you lack design or developer skills, even in its original state everything will look professional and high-end.
- All the elements of Slides have a beautiful design that complies with modern tendencies.
What bothers us
- The design is standard. Truth be told, it is a weakness of any website framework, but it is not an issue for small and simple solutions.
- There is no gallery for displaying images.
Nevertheless, despite the cons, Slides is the best solution among those that we considered. It is an ideal tool for our relatively simple tasks.
But still, there was one issue. We needed to integrate MailChimp into Slides’ form markup in order to add subscribers to our list automatically. Of course, without a real developer, this task could not be fulfilled.
Do not worry; you will find a piece of code that solves this problem below. We share it with you.
How to integrate MailChimp into Slides’ form markup
The original markup looks like this:
First, we set our colors and changed the background. Then, it was time for integration with MailChimp. We found a tutorial on Designmodo’s blog, “How to Set Up a MailChimp to Slides Subscription Form.” It was exactly what we were looking for. Created by Sam Norton, it revealed all the routine step by step.
- Create a subscription list in your account in MailChimp.
- Select this list then click the “Stats” drop-down menu icon in the top right corner and select “Signup Forms.”
- Then, go to “Embed forms” and choose “Naked.”
- Copy a line inside <form action=”…”> and place it inside <form action=”…”> in Slides’ form markup.
- Translate everything into your language.
- Add a note about processing personal data following amends in the law from July 1, 2017.
The resulting code looks like this:
In the figure below you can see all the modifications that were done in the code. The important things are underlined.
Important! Make sure the input names look like this: name=”FNAME” for the name field, and name=”EMAIL” for the email field.
The first tests showed us that the subscription was working: we were receiving subscribers to our list, but the button was not working properly. Nothing happened after users clicked on it.
To solve this problem, we decided to address the issue with the support team. After a week of lively discussions, we found a minor technical glitch. As it turned out, the script failed to change form’s status. So we wrote our own script. Here it is.
Place it after the last <div></div> right before </section>.
Notice, there is a line in a code that indicates that we use detect_subscribe.php.
This file is imperative since it connects to the MailChimp and finds out whether the user is on our subscription list or not. If so, we just share a link to the material.
Since there is a high chance you may also need this check, we decided to share it with you as well. In the main directory with all Slides’ files inside create a new file called detect_subscribe.php and insert the code below.
Important! Remember to replace “your API key,” “List ID” and “server” with your data. They are featured right at the end of the file.
How to get your API key in MailChimp?
Go to your dashboard. Then open the menu near your avatar and hit “Account.” After that go to “Extras” → “API keys.” There click the button “Create API key.” And voila, your API key is ready: just copy and paste it into your code.
Where to find List ID
Go to “Lists.” Choose the required subscription list. After that go to “Settings” → “List name and campaign defaults”. Your list ID will be on the right.
Where to get your server
After logging in, you can get your server name in the address bar.
In our case, it is “US3.”
That’s all. After these tiny changes, the form will run like a clock. How it looks now:
It may seem that the explanation and routine are long and difficult, but in fact, there is nothing complicated. What’s more, it is far better than seeking the professional help.
Slides costs $249 that, in our opinion, is a sweet deal. For the same price we could get 15 months on Readymag, but with Slides, you will get a tool for building an unlimited amount of projects without limitation in time.
If the financial matter is off the table, then Slides is a great solution for those who need to make lots of customizations, whereas Readymag is for those who want to launch their product right away without any changes.
