How To Create A Responsive Website

The most modern and visually appealing websites use responsive design to ensure the content automatically adapts and renders properly on a variety of devices and browser windows of different sizes. You can ensure your website has a responsive desktop design by using our all-new Columns feature. Take a look at the video and steps that follow below to learn how...

  1. From the WebStarts editor sidebar, click + Add, then select or drag Columns to a spot on the page.
  2. To add a column to the strip, click the "Settings" icon, then click + Add Column.
  3. Drag the strip up into the header and click Arrange Layer, then Move To Back to layer the business name and menu on top of the strip, then drag and drop the header items until they attach to the columns of the strip. Note: the words 'Attach To Column' will appear as you drag an element over a column and you can then let go to attach the element.
  4. You'll want to align the menu to one side of a column and the business name/logo to the other side of the other column. Start by clicking the background of a column to select the column, then click the "Settings" icon. Under Pick an Action, click the alignment icon then align the column accordingly (left column should align left, right column aligns right). Repeat those steps with the other column.
  5. Repeat steps 1-4, but this time drag the strip into the footer and align the footer elements as you did the header and its elements.
  6. Use the columns feature to organize other content on your site creatively. You can drag any element into a column to attach it to the column and ensure it is responsive.

That's all there is to making your desktop design impressive and responsive. Be sure to also use our mobile editor to optimize your website for mobile devices as well.

Can't find what you're looking for? You can email for additional support.