Edit webapp sections

Search the knowledge base

 

Each Workadu website template comes with some pre-made sections. Keep them, edit or delete them as you wish.

 

 

When you hover your mouse over each section 4 icons appear on its bottom and its right side:

 

 

 

  • Delete the section by clicking on the x    icon.

 

  • Change the background by clicking on the image  . Choose the background you want from your drive.

 

  • Move the section by clicking on the build     icon at the left side.

 

A pop-up window with the settings will appear:

 

 

 

 

 

 

Move Section- Move the section    upwards or  downwards. You can also move the section at the top or the bottom of the page.

Height – Choose the height of the section. 100% means that the section will cover the entirety of the screen.

Scroll icon- The clickable arrow button that appears at the bottom of the section and moves you to the next section when clicked. You can choose the style you want, light or dark. 

 

 

  • Edit the section by clicking on the   build icon at the bottom.

 

 

Section Box Settings (they appear based on the content you have in each section)

 

 

 

General:

 

 

 

 

Content Size – The size of your section’s content (text, buttons, booking engine).

Background Color – The color of the section’s background. Play with this if you want a solid color background and not an image background. You can also use a gradient as a background by clicking on the Gradient button.

 

 

 Content:

 

 

 

 

 

Position – Define the position of your content.

Top/ Bottom Adjustment – When you choose the top or bottom positions for the section’s content, you can adjust it by clicking the plus (+)  or minus (-) buttons here. To recover the preset position click Not Set.

Left/ Right Adjustment – When you choose the right or left positions for the section’s content, you can adjust it by clicking the plus (+) or minus (-) buttons here. To recover the preset position click Not Set.

 

 

 

Text:

 

 

 

 

 

Text Style – Choose the style of your text, light or dark.

Transparency –

Make your text more or less transparent.

Align – Left, right, central or justified text alignment.

Typography – A quick and easy way to change the style of your text. Click Change Style to change the fonts. A list of different font combinations will appear. Browse through them and find the style that matches your website. Click on your preferred font combination and the text style will change automatically.

 

 

 

 

The other way to edit the text is to click on it. A bar with tools will appear, where you can change the size, the font, the style, the color, or even add a hyperlink.

 

 

 

 

 

 Image:

 

 

 

 

Ken Burns effect – Adds  the illusion of movement to your picture.

Parallax – Image is moved at a different speed than the foreground content while scrolling.

Overlay Color –

Choose the color of the overlay, if wanted.

Overlay Transparency – Make the overlay more or less transparent.

Horizontal Position – Move the image slightly to the right or the left.

Vertical Position – Move the image slightly upwards or downwards.

 

 

To edit each content block separately:

 

 

Click on the content you want to edit. A list of icons will appear above it and at the side of it.

 

 

 

 

Firstly let’s take a look at the icons above the block:

 

 

 

 

Click on the 3 dots to see all the options:

 

 

 

 

To add content click the plus     icon.

A wide variety of different types of content will appear.

 

 

 

 

Click more to see them all and choose the one you want.

 

 

 

 

 

Click the arrows to move the block upwards    or downwards  .

 

Click the duplicate      icon to create a copy of the block.

 

To see the code and edit it click on the code       icon.

 

 

 

 

If you want to work in full screen mode, click on the full screen icon on the upper right side of the code box.

 

 

 

⚠️  Do not forget to click OK to save your changes.

 

 

Click the delete    icon  if you want to delete the content block.

Now let’s take a look at the icons at the side of the block:

 

 

To move the block click on the move icon       and drag it to the position you want.

 

 

To add content click the plus     icon.

 

 

A wide variety of different types of content will appear:

 

 

 

 

Click more to see them all and choose the one you want:

 

 

 

 

Click the duplicate icon    to create a copy of the block.

 

 

 

Click the arrows to move the block     upwards  or downwards   .

 

 

 

Click the delete icon  if you want to delete the content block.

 

 

You can edit a specific element of the block in the same way. Just click on the element and follow the same instructions as the block.

 

 

 

 

The only extra icon is the settings one:

 

 

 

 

 

Click the settings icon to change the settings of the content block:

 

 

 

 

 

 

 Box:

 

 

 

 

  Background Color – The color of the box’s background. You can choose a solid color or a Gradient.

Dimension – The width and height of the box.

 

 

 

 Spacing:

 

 

 

 

 

Padding – The space between the element and the border of the block.

Margin – The gap around the content block.

Responsive Positioning – Determines whether your content will reset on small screens or not.

 

 

 

Border:

 

 

 

 

Border – Add a border to the block. Choose between a solid line, a dashed line, or a dotted one. You can also choose the color of the line.

Individual Sides –Customize each side of the border separately.

 

 

 

 Text:

 

 

 

 

Select the text you want to edit and then change the settings:

 

Text Color – The color of the text.

Font Size – The size of the font.

Text Align – Left, center, right or full text alignment.

Line Height – The height of the line.

Font Weight – Make the font more or less bold.

Font Style – Italic or Normal.

Text Transform – Capitalize or edit the text in all Uppercase or lowercase letters.

Text Decoration –Underline, Line Through or Overline your text.

Letter Spacing –The distance between letters.

Word Spacing – The distance between words.

Font Family – Change the font.

 

 

 

Click the three dots to see more settings: