You can see that fixed elements are measured in pixels, while fluid elements use relative units of measure to their parent container, like percentages. If we set this image to fixed, it will keep the same size no matter the screen size. That’s because this element is set to fluid, meaning it will resize and scale relative to its parent container, viewport width or height. Notice how this element scales proportionally to the screen size as we move the resize handles. This is where you can control the size, position and behavior of all elements on your site. Select the icon on the top right to open the Inspector panel. We'll choose this one and drag it into place. ![]() We’ll take a look at how to work with grids in more detail later on, but for now, let’s add more elements to this section.įrom the Add panel, under Media you can choose from a selection of curated images, or from your own personally uploaded files. Now we’ll add a background image to the left side and stretch it to fill the entire cell, and then we’ll grab another image for the right side and stretch it too. You can add elements directly to the section, or divide up the space using simple containers, CSS Grid or Layouters, which are based on flexbox technology.įor this site, we’ll start by applying a 2x1 grid to lay out our elements, and adjust the row height. There are many ways to structure each section of your site. We’re going to build a landing page for a mobile app called Cyclo. You can also create your own custom breakpoints.and use the resize handles on either side of your canvas to see and design your site at every viewport.īefore we dive in, let’s take a look at the site we’ll be creating. To style for specific devices, you can jump from desktop.to tablet.to mobile. Moving forward, this dropdown let’s you manage and navigate between the pages of your site. Under the Apps panel, you can explore our App Market to browse through a variety of professional solutions, and use the App Manager to manage and delete your installed apps.Īnd this is where you can add an integrated, code-free Content Manager. ![]() This is where you can view, edit and save typography and color themes to your site, or add them to your design libraries. Select the 3 dots to rename, duplicate and edit a page. Use the Pages panel to add and navigate between the pages on your site. To streamline your creation flow, changes you make to one master will apply everywhere it’s used on the site. Head over to the Masters panel to save and reuse headers, sections and footers on multiple pages. The hierarchy defines how the elements interact with one another. This is where you can see the hierarchy of all the elements on your page and how they’re ordered. And lastly, you’ll find the Editor X content manager. You have blogs, stores, bookings systems, event managers and a members areas. Underneath, you’ll find all your built-in business solutions. You can also add text, buttons, custom menus, media, decorative elements, forms, and embedded HTML code and social icons. From here, you can add elements, saved design assets, compositions, layout tools and more. To begin customizing your section, Click Add an Element. Sections are large flexible containers that can hold many elements from complex layouts to images and text. Your blank canvas, by default, contains a header, section and footer. Share your feedback directly with the product team, or Contact Customer Care to request any help. Under Help, you’ll find access to resources like the help center, our Community X forum, and our educational hub Academy X. And you can also work with APIs to add custom functionality and site interactions. You can build and deploy web applications efficiently, using your own JavaScript code on a built-in IDE. This gives you access to Editor X’s fully integrated open development platform. They’re great for keeping brand identities aligned and encouraging team collaboration. The Tools tab gives you access to your design libraries-customizable collections of typography, color themes and design assets that you can save, share and reuse on any site in the same account. Under Site, you can see your site history, transfer your site ownership to someone else, open your dashboard and more. The top bar of your canvas is filled with tools and functions to help you manage your site and access our resources. Your canvas is wide and intuitive, with a smooth drag and drop interface. Before we get started, let’s take a look at your workspace.Ĭhoose from one of our in-house designed templates, or start from scratch with a blank canvas. ![]() We’ll run through the basics of creating a site on Editor X. Welcome to the ultimate web creation platform for the pros.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |