Skip to content

☚ Go Back

Advanced Design

If you have not visited/seen ‘Basic Design‘ or ‘Building Your Webpage‘, please visit them first.

Tip
Due to a new feature on this website (light/dark mode), visitors have the ability to change the background and text colors of the pages displayed on this site.

If the background color and text color matter on your page, you will want to include this in the Text (HTML) tab of the page editor:

At the top before your content: <div class="dmt-filter-1" style="height: 100%; width: 100%; padding: 20px; background-color: white; color: black;">

At the bottom after your content: </div>

What this does is place your content into a container that has the background and text color fixed (does not change). Of course, you can choose whatever color you want for your background and text color. Just remember that you want to choose color combinations that will make your page pleasing to the eye.

Now that you have the basics down, you can use the shortcodes below to enhance the design of your webpage.

By using special codes on your page you can add features that go beyond what the editor itself could do.

My favorite/most useful codes are:

  • Button Shortcode: There are 8 button styles and 4 button sizes you can choose.
  • Column Shortcode: There are 12 types of content columns for the Column shortcode, which can meet most of the column requirements.
  • Custom Box Shortcode: Text box with a background image.
  • Divider Shortcode: Divider Shortcode provides 10 styles of divider.
  • Expand Text Shortcode: Specifies additional details that the user can view or hide on demand.
  • Feature Boxes Shortcode: Feature Boxes Shortcode with optional icons/images and multiple layouts.
  • Google Map Shortcode: Google map with custom info box.
  • Heading Shortcode: Heading Shortcode provides 5 styles of heading.
  • QR Code Shortcode: Generates a QR code that can be scanned for contact information or a web address.
  • Scheduled Shortcode: Select a time in one day to show the content.
  • Section Shortcode: Content section with background and beautiful separators, you can also use it with columns shortcode.
  • Social Icon Shortcode: Create an icon with a link using Font Awesome and some effects.
  • Table Shortcode: Add some style to your table.
  • Tabs Shortcode: Turn your one very long page into a couple of short tabbed pages.
  • Targeted Shortcode: Targeted Content Shortcode, displays content by role (‘private’ for the author only, ‘members’ for logged-in users, or ‘guests’ for users not logged in).
  • Tooltip Shortcode: Have text in a bubble above, below, left, or right of an object/text when you hover or click.

That is not all of them, you can find more here -> MS codes.

Another shortcode added to the advanced design toolbox: IsMobile.

 

For more information on using this feature on this site, please sign up for plus membership.

☚ Go Back