Getting started | Editor X

welcome to the ultimate web creation platform for the pros we'll run through the basics of creating a site on editor x before we get started let's take a look at your workspace choose from one of our in-house design templates or start from scratch with a blank canvas your canvas is wide and intuitive with a smooth drag and drop interface the top bar of your canvas is filled with tools and functions to help you manage your site and access our resources under site you can see your site history transfer your site ownership to someone else open your dashboard and more 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 they're great for keeping brand identities aligned and encouraging team collaboration here you can turn on dev mode this gives you access to editor x's fully integrated open development platform you can build and deploy web applications efficiently using your own javascript code on a built-in ide under help you'll find access to resources like the help center our community x forum and our educational hub academy x share your feedback directly with the product team or contact customer care to request any help your blank canvas by default contains a header section and footer sections are large flexible containers that hold many elements from complex layouts to images and text to begin customizing your section click add an element this brings us to the creation bar first up is the add panel from here you can add elements save design assets compositions layout tools and more you can also add text buttons custom menus media decorative elements forms and embedded html code and social icons underneath you'll find all your built-in business solutions you have blogs stores booking systems event managers and a members area and lastly you'll find the editor x content manager next you have the layers panel this is where you can see the hierarchy of all the elements on your page and how they're ordered the hierarchy defines how the elements interact with one another head over to the masters panel to save and reuse headers sections and footers on multiple pages to streamline your creation flow changes you make to one master will apply everywhere it's used on the site use the pages panel to add and navigate between the pages on your site select the three dots to rename duplicate and edit a page let's move on to the theme manager this is where you can view edit and save typography and color themes to your site or add them to your design libraries 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 and this is where you can add an integrated code-free content manager use it to manage dynamic site content moving forward this drop down lets you manage and navigate between the pages of your site these icons represent your breakpoints to style for specific devices you can jump from desktop to tablet to mobile 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 before we dive in let's take a look at the site we'll be creating we're going to build a landing page for a mobile app called cyclo there are many ways to structure each section of your site 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 for this site we'll start by applying a 2x1 grid to layout our elements and adjust the row height from the add panel under media you can choose from a selection of curated images or from your own personally uploaded files we'll choose this one and drag it into place and then we'll grab another image for the right side and stretch it too 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 select the icon on the top right to open the inspector panel this is where you can control the size position and behavior of all elements on your site notice how this element scales proportionally to the screen size as we move the resize handles that's because this element is set to fluid meaning it will resize and scale relative to its parent container viewport width or height if we set this image to fixed it will keep the same size no matter the screen size you can see that fixed elements are measured in pixels while fluid elements use relative units of measure to their parent container like percentages using our smart docking system when you drag an element onto your canvas it automatically docks to the closest edges of its parent container indicated by these blue dotted lines you can override this and manually set your docking from the inspector panel in general margins are used to create space around elements you can add margins to maintain a set distance between an element and the edges of the container it's docked to let's add a top margin you can also edit the scroll effect rotate the element and add an anchor now we'll explore how to view and customize the site across breakpoints let's head back to the add panel to add some title text to our page we'll use text scale to set a minimum font size and a maximum this will make sure the text gradually scales in relation to the screen size now let's change the text color to gray when we move to tablet you can see the title appears gray too this is because it follows the cascading rule any style changes you make at one breakpoint will cascade down to smaller breakpoints but not the other way around so if we change the text color back to black on tablet when we view the mobile version the text will also appear black yet on desktop the text will remain gray changes in hierarchy however such as re-parenting an element by removing it from its container are reflected across all breakpoints now i'll explain how to use stack to maintain the vertical order of your elements first let's add some more text from the add panel and drag it into place great from the add panel you can use the quick add section to grab a common element let's grab a button and customize it we'll change the font adjust the size and set the width while we already sized and positioned our elements on this breakpoint you can see that as the screen gets smaller they don't have any spatial relationship between them use stack to maintain the vertical margins between elements and prevent overlap on smaller screens press the shift key to multi-select the elements and click stack this places them inside a responsive flexbox container that maintains the margins between them the vertical margins are indicated by these blue strips let's use the inspector panel to make final tweaks to the margins and positioning of our text and button now when we resize the screen you can see the elements maintain clear vertical margins between each other we'll use this blue plus icon to add a new section to our page and choose grid css grid is useful for creating intricate layouts you can precisely position your elements within a two-dimensional space we'll create a custom grid of 2x4 and click apply to edit your grid select adjust grid then edit grid choose the row you want to edit on the left hand side grid rows and columns can be sized using units like fractions viewport height and viewport width or by pixels we'll use viewport width here to scale the grid proportionally with the width of the screen next click done sections and containers have a minimum height to prevent them from collapsing while they don't have any content in them to make sure our section takes the height of the grid instead we'll remove its minimum height then we'll add horizontal lines from the add panel to outline our grid let's go to the add panel to fill in these grid cells with text we'll edit our text and use the inspector panel to align it to the middle and set the left margin to eight percent the elements in a grid dock to the nearest grid line as opposed to the nearest edge of their section let's fill out our grid by duplicating the text and repeating the same actions for the other four text boxes then we'll head to our previously uploaded media to add an arrow shape we'll give it a width of seven percent align it to the right dock it to the right and add a right margin of 6.5 percent let's do the same for the rest of the cells in our grid next we need some content in the first and second rows of our left column okay now we'll set the text to scale from 10 to and use the inspector panel to adjust the size and positioning in these bottom two rows on the left we'll add an image and stretch it across both these cells we don't want the image to cover the divider lines so from the layers panel we'll drag the image so it's beneath the other elements in the section again let's double check the responsive behavior okay nice for mobile let's edit the grid to better fit our design note we're working at a viewport width of 750 pixels for a better view of the canvas so first we'll add two more rows then for our row height we'll choose the min max unit now we can give each row a minimum height of 80 pixels this means that no matter the screen size the height of each row will never fall below this value on mobile we want this image to fill the top two rows on the right so we can use the grid area tool in the inspector panel to set this position now we'll set the positioning of all the text using the same grid area method and we'll reposition our border lines we don't want these arrows to get too small or squashed close to the edge of the viewport so we'll set them to fixed with a size of 24 pixels and a right margin of 26 pixels now let's readjust the text boxes inside each cell in this top cell we'll change the font size to 17 and use the inspector panel to size and position the text accordingly note we've chosen a fixed size to make sure the text break stays the same let's dock the text boxes to the left and set a left margin of 30 pixels now our grid will look great on all mobile devices let's take a look at the final design for our next section to achieve this design we'll use a layouter a smart layouting tool made up of a collection of responsive containers first let's add a new bank section to our page from the add panel under layout tools you'll find a selection of layouters from customizable blank wireframes to designed layout suggestions we'll choose this one built with flexbox technology a layouter is perfect for designing modular layouts with boxes that wrap at different screen sizes the responsive boxes within your layouter are called items for our design we don't need this bottom item so we'll select it and hit delete use the plus and minus icons to adjust an item's width by increments of 20 percent let's make this item a bit wider so that it takes up the entire row use the blue breadcrumbs to select the layouter from the floating action bar we'll change the layout by removing the horizontal and vertical margins and stretch it to fill the section let's go to our media library to add an image to the top item we'll attach it to the item and center it we want the image to always fill the width of the item so we'll set the width to 100 but keep it at a fixed height of 420 pixels now we'll add another image attach it to the bottom left item center it and set the width to 100 so that it's exactly half of the width of the item above yet the same fixed height of 420 pixels we'll add a similar image to the last item and repeat the same actions from the breadcrumbs we'll select the section and set the minimum height to none so that the height of the section will be determined by the layouter instead let's see how it adapts across viewports excellent we've already added some vector icons so let's now add some text to these items first we'll add a title change the font and adjust the size and positioning then we'll add a description to go underneath customize it and stack both the title and description together to control their relative positioning great now when we transition between viewports you can see the items in the layouter adapt to the new screen size to adjust the layout on mobile we'll use the blue breadcrumbs to select our layouter and click change layout to optimize space on smaller screens let's display the content in rows and reduce the height of the image to 233 pixels moving on to our final section where we'll explore the power of a repeating layout we'll add another blank section and we'll use the quick add shortcut to drag a repeater onto our canvas a repeater is a multi-box flex layouting tool that is especially useful for displaying dynamic content with uniform styling great use cases would be team profiles feature listings or projects we'll select change layout to remove the horizontal and vertical margins and stretch it to fill the entire section then we'll select the left item of the repeater and apply a 1 by 2 grid style changes you make to one item will automatically reflect on all items in a repeater from edit grid mode we'll set the height of the first row to 48vw and the height of the second row to 13vw now we'll grab an image drag it into place and stretch it to fill the entire row notice how this image automatically repeats across all items let's add some text to the bottom of our row change the font set the text to scale from 5 to 36 change the text color to white and align it to the center by default the repeater appears with a gray background color to remove this we'll use the floating action bar under design and decrease the background opacity to zero percent to add more text to our repeater we'll grab a paragraph text box from the add panel and attach it to the item we'll choose a font and set the text to scale from 4 to 32. from the inspector panel we'll center it make sure it's docked to the center and set the width to 80 percent now that we've finished making our style changes let's see what our repeater looks like at different break points looks good but we still need to customize the contents of our repeater we can manually edit our content directly from the canvas or use a content manager to add and edit content without touching our design let's take a closer look at how to use a content manager the content manager is our integrated cms that lets you manage dynamic content behind the scenes of your site using collections we'll connect our repeater to a content collection so first from the creation bar let's add a content manager you can choose from a variety of dynamic page templates or select blank to design it from scratch we don't need a whole new page we just want to populate our repeater so we'll close this window for now and create a new collection let's go for blank and set it up from scratch we'll rename our collection and start creating from here we can start creating our collection first we'll set the subject for each field and then we can add our content now when we head back to the editor and select our repeater from the breadcrumbs you'll notice the data icon has appeared in the floating action bar this indicates that we can now connect the repeater to our data collection so the next step is creating a data set click the data set icon select create data set then from the drop down choose the collection we just made and click create now we need to connect each item in our repeater to a field in our collection for example we'll connect the image to the image field in our collection and this text to the name field of our collection then our final text field to the testimonial text field now this green icon indicates that all these fields are connected hit preview to see your content displayed in the repeater right now the changes we made aren't visible on the live site but once you're ready click sync sandbox to live this publishes the changes so on your live site the repeater will display all the content from your collection now let's create a custom menu with anchors to help us navigate through the sections of our page to add an anchor select a section or any element and from the inspector panel under anchor toggle on and rename we'll do the same thing for the next two sections next we'll go to the add panel to select a pre-designed horizontal menu and drag it into the header since we created our site from a blank canvas the menu will display a home item by default let's change the width and height to 100 percent center it and make sure it's docked to the center now we'll select manage menu to add more items first we'll use the three dots to link our first item and select anchor to choose exactly what part of the page we want to link it to to add another item select the link icon at the bottom click anchor and choose again where you want it to link to don't forget to rename your item each time you add it to the menu we'll repeat the same steps for our last item and rename it under design we'll choose a font and adjust the text size change the hover color to teal and the click color to match now that we've finished setting up our menu in the header and footer we'll just use the link icon from the floating action bar to link this shape to the top of the page on the mobile viewport you'll find a hamburger menu in the top right corner by default in the layers panel you'll see the previous horizontal menu component is hidden for you automatically make sure you don't delete it as it will remove the menu from your entire site now let's take a look at masters and how they can accelerate your creation flow notice that when we hover over our header and footer they're highlighted in green this indicates that they are masters changes you make to a master will be reflected everywhere it's in use on your site for example when we add a new page it will automatically display our designed header and footer you can turn any section into a master just select it and choose set as master next you'll need to indicate whether it's a header a main section or a footer the last step is important for accessibility from the masters panel you can then choose which pages you want to display your master on once you're done designing click publish to go live now let's go to the site dashboard and explore how to manage the site the site dashboard is the home base of operation for your site from the drop down you can view rename duplicate transfer the site and more below you'll see an organized checklist created to walk you through our features and help you maximize your creations let's take a closer look at the sidebar menu under customer management go to crm home to use integrated business and customer management tools like contact lists automations reminders and more under marketing and seo you'll find tools like email marketing social posts and video maker go to the analytics and reports tab to check the site visitor stats and create customized site traffic reports under settings you view and manage site settings ranging from general information to roles and permissions monitoring tools and more editor x is an advanced creation platform to learn more about the features covered in this video watch our series of video tutorials on academy x you

Channel: Editor X

Views: 18,367

Keywords: responsive css, responsive web design, what is responsive web design, responsive web design css, responsive website design example, responsive web design tutorial, responsive web design tutorial step by step, responsive design tutorial, responsive websites tutorial

Id: MBpMWMCQ6hs

Length: 26min 57sec (1617 seconds)

Published: Mon Feb 01 2021