The Elements

1. Rows & Columns

Learn how to structure web pages using blocks, columns, and rows. Easily add content, duplicate designs, adjust dimensions, and ensure responsiveness across devices.

2. Text

Discover how to use the text element feature to create engaging and aesthetically pleasing content on your website, from text alignment to creating lists and controlling paragraph spacing. Unlock these powerful editing capabilities with ease.

3. Button

In this video tutorial, learn to customize and utilize buttons in our website builder for effective calls to action, including styling, text editing, hover effects, linking, and alignment.

4. Icon

Learn how to enhance your page with graphic elements using the icon element, including adding, resizing, and styling icons, setting hover states, duplicating icons, and responsive design adjustments.

5. Image

Explore the versatile image element in web design, understanding its importance, resizing, image controls, mask features, color adjustments, linking, and device responsiveness for optimal display across all platforms.

6. Audio

Learn to add and customize audio on your webpage using the audio element feature, allowing use of SoundCloud or custom audio files. Modify settings for time, duration, progress, volume, and aesthetics as per your preference.

7. Video

Learn how to easily add videos from various sources like YouTube, Vimeo, or a custom URL to your webpage with Stylie's easy-to-use website builder, and customize video settings including size, auto play, mute, and more.

8. Spacer

Learn how to use the Spacer element to effectively separate and structure elements on your page for better design and user experience, ensuring optimal viewing across all devices.

9. Line

Learn to enhance your webpage design with the line element feature. Discover options for customization such as style, weight, size, and the ability to include text or icons for a unique, responsive design.

10. Map

Learn how to add an interactive map to your contact page, customize its location, zoom level, filters, and size to fit your needs, ensuring a visually pleasing display on all devices.

11. Embed

Learn to integrate code from external sources into your webpage using the HTML embed element for diverse, dynamic content.

12. Icon Box

Learn how to use the Icon Box in our website builder, allowing you to combine an icon, text, and a call-to-action button in one neat package. The video explains all available customizations.

13. Counter

Discover how to utilize the counter element in web design to indicate units sold or events occurred, including customization options and mobile-friendly practices. This tutorial explores standard counters and pie chart counters.

14. Countdown

Learn how to add a countdown element to your webpage for events or a 'coming soon' page, including customization, time zone settings, styling options, and the crucial action upon countdown completion.

15. Tabs

Learn how to use the tabs element on your webpage to effectively categorize your content. Understand how to add, rename, duplicate tabs, and customize tab style, orientation and color. Don't forget to check responsiveness!

16. Progress

Learn how to use Element for displaying progress bars on your website, including customizing width, height, labels, fill, typography, colors, and more. Duplicate and adjust for multiple bars.

17. Accordion

Learn how to effectively utilize accordion elements on your website to build FAQs. The video provides a step-by-step guide on adding, modifying, and styling accordion elements for optimum visual appeal and responsive use.

18. Menu

Learn how to create and customize a menu for your website using your CMS dashboard. The video tutorial covers creating a menu, adding links, and making design adjustments including color changes, typography and adding icons.

19. Gallery

Learn to create and customize a robust image gallery using simple steps with our gallery element, complete with effects, padding, margins, and even the ability to create hyperlinks.

20. Carousel

Learn to customize the carousel element for your webpage. Adjust columns, navigation, colors, and responsive view for mobile devices. Add content, reorder it, set URLs, blocks, and pop-ups, ensuring an enhanced browsing experience.

21. Rating

Discover how to use and customize the rating element on your page with options for alignment, scales, labels, icon selection and size, text and rating color, hover application, and layout adjustment.

22. Playlist

This tutorial will guide you through the process of inserting a video link, duplicating videos, adjusting video display settings, and personalizing text and design features.

23. Table

Learn about using the versatile table element in your web design: how to add, manage, and customize it, optimize its responsive display, and address challenges for mobile and tablet views.

24. Timeline

In this video tutorial, the Timeline element, allows customization of tab content, styling, formatting, and offers easy duplication for maintaining consistency across steps.

25. Switcher

This video explains how to effectively utilize the switcher element for web design, uncluding the switcher element's functionality, its container-like nature, customization of content and appearance, usage of icons, and how to manage responsive design.

26. Lottie

Discover how to enliven your pages using lightweight, animated graphics from Lottie Files. This video tutorial explains the process of adding and customizing Lottie animations, either through links or JSON file uploads.

27. Login/register

Learn how to utilize the login registration element on your website for user management. This video guides you through setting up a login portal, modifying features, and creating a registration process for new users.

28. Translation

Learn how to implement and style a language switcher in your CMS for a multilingual website. This video tutorial walks you through adding and customizing this element to enhance the user experience.

29. Alert

Add attention-grabbing notices with customizable titles, descriptions, and close buttons. Customize fonts, colors, alignment, and even add backgrounds. Activate delays, toggle display options, and apply stylings for a polished look.

30. Facebook

Discover how to integrate Facebook elements into your website. This video guide covers adding social buttons, embedding specific posts or videos, and managing layout, size, and styling of your Facebook features.

31. Twitter

Learn how to easily integrate a Twitter feed into your website using the Twitter social media element. Adjust size, theme, and layout to fit your design.

32. Calendly

Learn how to display any Calendly calendar on your site using the Calendly element. Add, resize, link, and style the calendar from your options toolbar with ease.

33. Comments

Learn how to use the Comments element on your site for visitor interaction, using Facebook or Discuss. Tailor options such as post display numbers, linked pages, and the overall look for a responsive design.

34. Posts

Learn to add posts to any page on your site with ease, customize columns, rows, and spacing, and leverage dynamic elements for unified changes across posts.

35. Assets

Learn how to use the assets element in the CMS, similar to the post element. Manage columns, rows, spacing, filters, navigation, pagination, and custom design within the builder.

36. User Elements

This video provides a guide on how to use the 'assets' element in CMS, explaining how to configure its settings, apply filters, and design it to suit your web page.

👆 You’re all caught up