This tutorial will take you through Building a Landing Page to get oriented in the Modyo platform. You can also view it as a presentation.
Before beginning this tutorial, you should already have a Modyo account and access to the Modyo back end. If not, please contact your sales rep or contact within the Modyo organization. The images, icons, and logos you need to complete this tutorial are Here.
To log into your account, open your browser and navigate to http://youraccount.modyo.cloud/login, replacing “youraccount” with your account name.
At the login screen, provide your email and password.
After logging in, the platform takes you to the Activity view. You can see your Team activity and your activity in two tabs. To begin creating a site, go to Channels > Sites, then select the green +New button at the top right.
- Give your site a name, then select the Next button at the bottom. By design, most views in the Modyo back end have their primary action button colored green.
-
Selecting a design determines many design elements in the Templates section of your site development such as CSS, Javascript themes, and more. We will change the theme using the Themes Gallery which are templates you can build and save for sites. Click Finish to continue.
-
In the Site > Site Settings > Platform > General tab, we can make changes to the site name, description, logo, language, and time zone. Select the Upload button and in your copy of the demo_landing_page folder, use the “logo_dynamic_bank_white” image. See image below.
Click Save at the bottom of the screen.
In the Site > Builder > Navigation, we can create some placeholder menu items in our navigation bar. Click the Add Item button and name the second item in the menu “Products”. Repeat this process, adding “Services” and “Benefits”.
Click Review & Publish at the bottom of the screen when done. A review modal will appear, and the right side shows the labels and URLs we are adding. Go ahead and click Publish.
To organize our content in our site, we need to create some categories. Create a category in Site Settings > Categories. Select the New button and title this category “Featured”. The path will autocomplete. The parent category should be “None,” and for now we can leave the description blank—it is for internal use only.
Repeat these steps twice more, and add an “Articles” category and a “News” category.
Within Site > Builder > Layouts, we can modify or add layouts to our site. Three layouts exist by default: Home, Internal and Me. Click the Home Layout text, or the pencil icon.
Inside the home layout, the first thing to do is choose a grid to work with. This is located in the Edit Layout tab. For our home layout, select the full grid, which has no columns or rows.
Once a grid is defined, the next step to any layout creation is to add widgets to provide a layer of both a content and design.
For this example we are adding the following:
- A “Slide” (Featured Widget) widget that displays Posts by “Featured” category.
- An “Articles” (Content Widget) widget that displays Posts by “Articles” category.
- A “News” (Content Widget) widget that displays Posts by “News” category.
Each of these widgets comes with options such as Type and Order, but for now:
- Add A Featured Widget, and two Content Widgets.
- Name each widget.
Give each one the correct category as written above (in the Edit Widget tab).
When done, click the Review & Publish button at the bottom of the main view.A review modal will appear, showing the three modals that we have added. Click Publish.
We are going to create our content in Site > Applications > Content.
In this case we will create Posts (+New > Post), and each will have a title, description, and photo. We will also provide a category and tags when necessary, then publish. Under Cover Images, upload “SlideImage01.jpg”
Under Categories and Tags, select “Featured”.
Under Publishing Options, select “Publish on save”. Select Save when done.
Creating content to feed the “Articles” widget is identical to our “Slide” content creation process. Create two more Posts, using the titles and descriptions provided, or use your own.
Follow these same steps for the second “Featured” Post. Use the title and description provided, or your own. Upload “SlideImage02.jpg” to Cover Images. Set the category to “Featured”, and publishing to “Publish on save”. Select Save when done.
To display our content the way we’d like, we are going to modify both the Featured and Content (media) widgets. This can be done in Site > Builder > Templates, under the Snippets tab, in the Widgets section.
In the demo_landing_page folder, open the “modified featured widget” file, copy it, then replace the current code in the “featured widget”. The change we’re making is minor.
The Featured widget works with Ken Wheeler’s Slick Slider and you can modify many script parameters, such as the number of slides, and css properties.
We can modify the Content widget in the same way. Since we use two different Content widgets, each with different categories, let’s display both of them in different ways. We can create a control flow using Liquid and our widget titles:
{% if widget.title == "Articles" %}
Content for the Articles widget
{% elsif widget.title == "News” %}
Content for the News widget
{% else %}
Default Content
{% endif %}
Open the file called “modified media widget” code, copy it, then replace all the code in the current “media widget” to create the control flow.
Next, let’s modify each widget category’s style with some custom CSS.
In the Assets tab, there are multiple libraries that already come integrated with Modyo.
We are using Bootstrap v3.3.7 JS and CSS by default. In the Stylesheets style, you can see all the libraries that are currently loaded.
Let’s modify this file.
Open the “modified stylesheets style” file, copy its contents, and replace the current “stylesheets style” file.
Liquid allows us to define variables and use them within our stylesheet. Note the {% assign x = y %} for our color scheme.
The site’s footer is in the Snippets tab, under General. We have already uploaded the necessary icons to our CDN for your use.
But uploading is easy, just go to the Assets tab and select the +Add Files button to upload any file type (up to 10mb).
Open the “modified footer” file, copy its contents, and replace the current code in the “footer” snippet.
If you would like to use your own uploaded icons, make sure to replace the URLs in each <a> tag with the correct URLs of your uploaded icons.
Below the code editor, you should see a button labeled Review & Publish. Click this button, and then in the modal that appears, review the code we’ve modified.
When satisfied, click the Publish button at the bottom right.
Congratulations! You have successfully published your first site with Modyo.
Select the “eye” icon at the top left of the main view to see your landing page!
